@charset "utf-8";

/* ==========================================================================
   PergolaGuru — public website stylesheet
   Written to match the markup in templates/. Single file, no build step.

   Order:
     1. Fonts
     2. Design tokens
     3. Reset & base
     4. Layout primitives (container, section)
     5. Typography helpers
     6. Buttons, pills, small parts
     7. Image placeholder
     8. Header / brand row / footer / consent
     9. Home page
    10. Catalog + product detail
    12. Contact / legal / prose pages
    13. Responsive + print + motion preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — Rubik variable (wght axis), self-hosted
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/rubik-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/rubik-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304-0305, U+0307-0308, U+0310, U+0312, U+0315,
    U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
    U+0346, U+034A-034C, U+0350-0352, U+0357-0358, U+035E-0362, U+0374, U+037E,
    U+0387, U+0591-05AF, U+05C4, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-orange: #fb7b22;
  --brand-orange-hover: #ffa454;
  --accent: #f97316;
  --accent-600: #ea580c;
  --accent-700: #c2410c;
  --accent-soft: #fff2e8;
  --accent-ring: rgb(249 115 22 / 35%);

  /* Ink scale (warm-tinted neutrals) */
  --ink: #17140f;
  --ink-800: #2b2621;
  --ink-700: #423a33;
  --ink-500: #6d6459;
  --ink-400: #8d8378;
  --ink-300: #b7ada2;

  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: #faf8f5;
  --bg-cool: #f6f7f9;
  --bg-warm: #fdf8f3;
  --bg-dark: #17140f;
  --line: #e8e2da;
  --line-strong: #d8d0c6;

  /* Semantic */
  --emerald: #047857;
  --emerald-soft: #ecfdf5;
  --amber: #b45309;
  --amber-soft: #fffbeb;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgb(23 20 15 / 6%), 0 1px 3px rgb(23 20 15 / 4%);
  --sh-md: 0 4px 12px rgb(23 20 15 / 6%), 0 2px 4px rgb(23 20 15 / 4%);
  --sh-lg: 0 18px 40px rgb(23 20 15 / 10%), 0 4px 12px rgb(23 20 15 / 5%);
  --sh-xl: 0 30px 70px rgb(23 20 15 / 14%);

  /* Rhythm */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --site-width: 1120px;
  --section-y: clamp(3.75rem, 8vw, 6.5rem);

  /* Fluid type scale */
  --fs-display-1: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);
  --fs-display-2: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
  --fs-h1: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.45rem, 1.05rem + 1.5vw, 2.1rem);
  --fs-h3: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-lead: clamp(1.02rem, 0.97rem + 0.3vw, 1.15rem);

  --header-h: 62px;
  --site-header-height: var(--header-h);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Prevent accidental double-tap zoom while keeping scrolling and pinch zoom. */
  touch-action: manipulation;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* Stabile Scrollbar-Breite: Dialoge sperren body-scroll (overflow hidden),
     ohne diese Zeile rutscht die Seite bei jedem Öffnen seitlich. */
  scrollbar-gutter: stable;
  background: #14100c;
}

body {
  font-family: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Apply directly to controls inside independently scrolling areas, including dialogs. */
:where(a, button, input, select, textarea, label, summary, [role="button"]) {
  touch-action: manipulation;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: var(--accent-700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

dl,
dd {
  margin: 0;
}

sup {
  font-size: 0.62em;
  font-weight: 500;
  vertical-align: super;
  line-height: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* Accessibility helpers ---------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform 0.18s ease;
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.form-stack {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.form-stack > .field {
  margin-top: 0;
}

.form-stack--compact {
  gap: 0.5rem;
}

.container--narrow {
  max-width: 820px;
}

.container--wide {
  max-width: 1240px;
}

.container--xl {
  max-width: 1360px;
}

.site-main {
  display: block;
  min-height: 40vh;
  padding-top: var(--site-header-height);
}

/* Unterseiten folgen derselben Außenkante wie Kopf und Fuß. Die Startseite
   behält ihre Abschnittsbreiten; Textmaße innerhalb der Spalten sind unabhängig
   von der gemeinsamen Seitenbreite. */
body:not([data-page="home"]) .site-main .container {
  max-width: var(--site-width);
}

body:not([data-page="home"]) .site-main .link-arrow {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.section {
  padding-block: var(--section-y);
}

.section--flush-top {
  padding-top: 0;
}

.section--soft {
  background: var(--bg-soft);
}

.section--ruled {
  border-top: 1px solid var(--line);
}

.section--footnote {
  padding-block: clamp(1.25rem, 3vw, 2rem);
}

.section__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.section__title {
  font-size: var(--fs-h2);
  margin-bottom: 0.55rem;
}

.section__title--spaced {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

.section__lead {
  max-width: 62ch;
  color: var(--ink-500);
  font-size: var(--fs-lead);
}

.section__lead--small {
  font-size: 0.94rem;
  margin-bottom: 1.25rem;
}

.section__note {
  max-width: 72ch;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-400);
}

.page-surface {
  display: block;
}

/* Jump targets must clear the sticky header, otherwise the heading of the
   section the visitor jumped to sits underneath it. */
.home-page section[id] {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.icon.muted {
  color: var(--ink-400);
}

.icon.accent {
  color: var(--accent-600);
}

/* --------------------------------------------------------------------------
   5. Typography helpers
   -------------------------------------------------------------------------- */
.page-title {
  font-size: var(--fs-h1);
  margin-bottom: 0.85rem;
}

.page-lead {
  max-width: 68ch;
  color: var(--ink-500);
  font-size: var(--fs-lead);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.735rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-700);
}

.kicker {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.kicker--on-dark {
  color: rgb(255 255 255 / 62%);
}

.footnote {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 92ch;
}

.notice {
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid #fde68a;
  border-radius: var(--r-md);
}

.notice-box {
  padding: 1rem 1.15rem;
  font-size: 0.92rem;
  color: var(--ink-500);
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}

/* Solid, coloured variants for form feedback.

   Deliberately not a flex container: these boxes carry running prose that may
   contain <code> or <strong>, and in a flex box every one of those becomes its
   own item, which breaks the sentence into narrow columns. The leading icon
   therefore flows inline with the text. */
.notice-box--error,
.notice-box--warn,
.notice-box--ok {
  border-style: solid;
  font-weight: 500;
  line-height: 1.55;
}

.notice-box--error > svg,
.notice-box--warn > svg,
.notice-box--ok > svg {
  vertical-align: -0.16em;
  margin-right: 0.4rem;
}

.notice-box--error {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.notice-box--warn {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: #fde68a;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-700);
  white-space: nowrap;
}

.link-arrow:hover {
  text-decoration: none;
  color: var(--accent-600);
}

.link-arrow .icon {
  transition: transform 0.18s ease;
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* Small parts -------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--ink-700);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.tag {
  display: inline-block;
  padding: 0.32rem 0.72rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
}

.tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.15rem;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-pill);
}

.tick--soft {
  color: var(--accent-700);
  background: var(--accent-soft);
}

.dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.6rem;
  border-radius: var(--r-pill);
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.68rem 1.15rem;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
    transform 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn .icon {
  transition: transform 0.18s ease;
}

.btn:hover .icon {
  transform: translateX(2px);
}

.btn--primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgb(249 115 22 / 24%);
}

.btn--primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

.btn--ghost {
  color: var(--ink);
  background: #fff;
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  background: var(--bg-soft);
  border-color: var(--ink-300);
}

.btn--outline {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
}

.btn--outline:hover {
  background: var(--bg-soft);
}

.btn--on-orange {
  color: var(--accent-700);
  background: #fff;
  border-color: #fff;
}

.btn--on-orange:hover {
  background: var(--accent-soft);
}

.btn--outline-white {
  color: #fff;
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 55%);
}

.btn--outline-white:hover {
  background: rgb(255 255 255 / 18%);
  border-color: #fff;
}

.btn--link {
  padding-inline: 0.25rem;
  color: var(--accent-700);
  background: none;
  border-color: transparent;
  box-shadow: none;
}

.btn--link:hover {
  color: var(--accent-600);
  background: none;
  transform: none;
}

.btn--sm {
  padding: 0.48rem 0.85rem;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 0.85rem 1.4rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.btn:disabled:hover {
  transform: none;
}

.btn:disabled:hover .icon {
  transform: none;
}

/* --------------------------------------------------------------------------
   7. Image placeholder (ui.placeholder macro)
   -------------------------------------------------------------------------- */
.img-ph {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  color: var(--ink-400);
  background: linear-gradient(160deg, #f7f4f0 0%, #efe9e2 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.img-ph--compact {
  min-height: 150px;
}

.img-ph.fill {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.img-ph__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
      to right,
      rgb(23 20 15 / 5%) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgb(23 20 15 / 5%) 1px, transparent 1px);
  background-size: 28px 28px;
}

.img-ph__rule {
  position: absolute;
  inset: 0.6rem;
  z-index: -1;
  border: 1px dashed rgb(23 20 15 / 10%);
  border-radius: calc(var(--r-lg) - 6px);
}

.img-ph__glow {
  position: absolute;
  left: 50%;
  top: -30%;
  z-index: -2;
  width: 65%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(249 115 22 / 12%) 0%, transparent 68%);
}

.img-ph__content {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.25rem;
  text-align: center;
}

.img-ph__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--accent-600);
  background: rgb(255 255 255 / 75%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.img-ph__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-700);
}

.img-ph__note {
  font-size: 0.76rem;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   8. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: rgb(20 16 12 / 88%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  transition: background 0.3s ease, border-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--site-width);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav__link {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-700);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease;
}

.site-nav__link:hover {
  color: var(--ink);
  background: var(--bg-soft);
  text-decoration: none;
}

.site-nav__link.is-active {
  color: var(--accent-700);
  background: var(--accent-soft);
}

/* Products dropdown — the category list lives in the header menu. */
.site-nav__item {
  position: relative;
}

.site-nav__link--toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-700);
  background: none;
  border: 0;
  cursor: pointer;
}

.site-nav__chevron {
  transition: transform 0.18s ease;
}

.site-nav__link--toggle[aria-expanded="true"] {
  color: var(--accent-700);
  background: var(--accent-soft);
}

.site-nav__link--toggle[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 264px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}

.site-nav__menu[hidden] {
  display: none;
}

.site-nav__menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-700);
}

.site-nav__menu-link:hover {
  background: var(--bg-soft);
  color: var(--ink);
  text-decoration: none;
}

.site-nav__menu-link.is-active {
  color: var(--accent-700);
  background: var(--accent-soft);
}

.site-nav__menu-link--all {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  margin-bottom: 0.25rem;
}

.site-nav__menu-count {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-400);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.42rem;
}

/* Account area on the right of the header ---------------------------------- */
.site-account {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* The one filled button in the header. Deliberately the only one: the nav on
   the left stays textual, so this reads as the primary action without
   competing with it. Outlined sign-in next to it sits a level below. */
.site-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-600));
  border: 1px solid var(--accent-600);
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgb(249 115 22 / 35%);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.site-cta:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-600), var(--accent-700));
  border-color: var(--accent-700);
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(249 115 22 / 45%);
  transform: translateY(-1px);
}

.site-cta .icon {
  transition: transform 0.18s ease;
}

.site-cta:hover .icon {
  transform: translateX(2px);
}

.site-account__wrap {
  position: relative;
}

.site-account__login {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.site-account__login:hover {
  color: var(--accent-700);
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
}

.site-account__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.6rem 0.28rem 0.32rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.site-account__chip:hover,
.site-account__chip[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-700);
  background: var(--accent-soft);
}

.site-account__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.site-account__name {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-account__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 232px;
  padding: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}

.site-account__menu[hidden] {
  display: none;
}

.site-account__menu-head {
  display: grid;
  gap: 0.1rem;
  margin: 0 0 0.3rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.76rem;
  color: var(--ink-400);
  border-bottom: 1px solid var(--line);
}

.site-account__menu-head strong {
  font-size: 0.9rem;
  color: var(--ink);
}

.site-account__menu-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
  color: var(--ink-700);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.site-account__menu-link:hover {
  background: var(--bg-soft);
  color: var(--ink);
  text-decoration: none;
}

.site-account__menu form {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Kopfzeile: Wortmarke + Suche im dunklen Glas
   -------------------------------------------------------------------------- */
.site-wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: 0.4rem;
}

.brand-logo {
  display: block;
  width: 160px;
  height: auto;
}

.site-wordmark:hover {
  text-decoration: none;
  color: #fff;
}

/* Product search ----------------------------------------------------------- */
.site-search {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 21rem;
  margin-left: auto;
  color-scheme: dark;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--r-pill);
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.site-search:focus-within {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(249 115 22 / 60%);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.site-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 1rem;
  font-size: 0.86rem;
  color: #f5efe8;
  background: none;
  border: 0;
}

.site-search input::placeholder {
  color: rgb(245 239 232 / 45%);
}

.site-search input:focus-visible {
  outline: none;
}

.site-search input::-webkit-search-cancel-button {
  appearance: none;
}

.site-search button {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.7rem;
  color: rgb(245 239 232 / 60%);
  border-left: 1px solid rgb(255 255 255 / 12%);
  transition: color 0.16s ease, background 0.16s ease;
}

.site-search button:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* Such-Icon für mittlere Breiten: Formular weicht, Ziel bleibt. */
.site-searchicon {
  display: none;
  flex: none;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  color: rgb(245 239 232 / 80%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--r-pill);
}

.site-searchicon:hover {
  color: #fed7aa;
  border-color: rgb(249 115 22 / 55%);
  text-decoration: none;
}

@media (max-width: 1240px) {
  .site-search {
    display: none;
  }

  .site-searchicon {
    display: grid;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 0;
  color: rgb(255 255 255 / 72%);
  background: var(--bg-dark);
}

/* Gemeinsame schräge Linie über dem Fuß: dezentes Echo der
   orangen Schrägbänder — 10px Gefälle, kein Overflow dank clip-path. */
.footer-line {
  height: 8px;
  background: linear-gradient(100deg, #fb923c 0%, var(--accent-600) 55%, var(--accent-700) 100%);
  clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 1.5rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: start;
}

.site-footer__wordmark-link:hover {
  text-decoration: none;
}

.site-footer__wordmark {
  display: block;
  margin-bottom: 0.9rem;
}

.site-footer__wordmark .brand-logo {
  width: 186px;
}

.site-footer__intro {
  max-width: 38ch;
  font-size: 0.88rem;
  line-height: 1.7;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.site-footer__disclaimer {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
  max-width: 88ch;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgb(255 255 255 / 60%);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.site-footer__col-title {
  align-self: stretch;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.3rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.site-footer__link {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 0.89rem;
  line-height: 1.6;
  text-align: left;
  color: rgb(255 255 255 / 72%);
  transition: color 0.16s ease, transform 0.16s ease;
}

.site-footer__link:hover {
  color: var(--accent);
  text-decoration: none;
  transform: translateX(2px);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: 1.35rem;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 60%);
  border-top: 1px solid rgb(255 255 255 / 12%);
}

/* Tablet: Marke oben vollbreit, Linkspalten darunter paarweise — kein
   gequetschtes 5-spaltiges Band, keine ungleichen Spaltenbreiten. */
@media (max-width: 960px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: 62ch;
  }

  .site-footer__intro {
    max-width: 62ch;
  }
}


/* --------------------------------------------------------------------------
   Cookie consent dialog
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: end center;
  padding: var(--gutter);
}

.consent[hidden] {
  display: none;
}

.consent__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(23 20 15 / 45%);
  backdrop-filter: blur(2px);
}

.consent__panel {
  position: relative;
  width: min(38rem, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
}

.consent__title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.consent__text {
  font-size: 0.91rem;
  color: var(--ink-500);
}

.consent__list {
  display: grid;
  gap: 0.6rem;
  margin: 1.1rem 0;
}

.consent__list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-500);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.consent__list strong {
  color: var(--ink);
}

.consent__state {
  flex: none;
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--ink-400);
  white-space: nowrap;
}

.consent__note {
  font-size: 0.8rem;
  color: var(--ink-400);
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* ==========================================================================
   9. Home page
   ========================================================================== */
.home-page {
  display: block;
}


/* Set by the script when a track has no overflow: two dead arrows and a
   full-width rail read as broken, not as "nothing to scroll". Applies to both
   tracks by design, though the six steps overflow at every width — only the
   price strip of a small category actually reaches this state. */


/* Liability note closing the process. Reads as a disclaimer, not a highlight:
   quiet type, thin frame, one accent rule on the leading edge. */


/* Price example tabs ------------------------------------------------------- */
.home-product-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.85rem);
}

.home-product-tab {
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.home-product-tab:hover {
  color: var(--accent-700);
  background: var(--accent-soft);
  border-color: #fbd4b4;
  text-decoration: none;
}

.home-product-tab.is-active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-strong);
}
.catalog-pagination__summary { margin: 0; color: var(--ink-700); font-size: .88rem; }
.catalog-pagination__pages { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.catalog-pagination__link {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: .4rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink-700);
  font-weight: 600;
}
.catalog-pagination__link:hover { background: var(--accent-soft); color: var(--accent-700); text-decoration: none; }
.catalog-pagination__link.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalog-pagination__arrow { font-size: 1.5rem; line-height: 1; }
.catalog-pagination__gap { padding: 0 .15rem; }

/* Price strip --------------------------------------------------------------
   The category with the most models decided the height of this section when it
   was a wrapping grid. One scrolling row keeps it constant, so the columns are
   sized from the visible width instead of auto-fill.

   Negative margin plus matching padding lets cards leave under the page gutter
   while the first card still lines up with the heading above it. padding-block
   is the room the card hover lift and its shadow need inside a scroll box. */


/* Terminal tile: the strip stops at ten models, so the way to the rest of the
   category is the eleventh slide rather than a hidden overflow. */


/* Price figure ------------------------------------------------------------- */
.price {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.price-note {
  font-size: 0.78rem;
  color: var(--ink-500);
  margin-bottom: 0.85rem;
}

/* Cross-sell CTA ----------------------------------------------------------- */
.home-product-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.home-product-cta__title {
  font-size: 1.06rem;
  font-weight: 650;
  color: var(--ink);
}

.home-product-cta__text {
  max-width: 58ch;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

/* Assistant / uploads notes below the band. They reuse the benefit card look,
   so only the spacing to the band above them is new. */


.fact {
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 1.25rem;
  text-align: center;
  background: #fff;
}

/* FAQ ---------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.6rem;
}

.home-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.home-faq-item[open] {
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}

.home-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.home-faq-item summary::-webkit-details-marker {
  display: none;
}

.home-faq-item summary:hover {
  color: var(--accent-700);
}

.home-faq-item__sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  transition: transform 0.2s ease;
}

.home-faq-item[open] .home-faq-item__sign {
  transform: rotate(45deg);
}

.home-faq-item > p {
  padding: 0 1.15rem 1.1rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

/* The link under an answer, not inside it: `data/home.py` hands over a sentence
   that also reads without a link, and the destination belongs to the template
   (`configurator_url`, so `PG_CONFIGURATOR_URL` still applies). The negative
   top margin pulls it back under the paragraph above it, which already carries
   the full bottom padding. */
.home-faq-item > p.home-faq-item__cta {
  padding-top: 0;
  margin-top: -0.7rem;
}

.faq-more {
  margin-top: 1.35rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

/* Not a link: the guides it teases are not part of this website, so the card
   carries no hover or focus affordance. */


.home-final-cta {
  padding: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
  color: rgb(255 255 255 / 88%);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-700) 100%);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 50px rgb(249 115 22 / 22%);
}

.home-final-cta h2 {
  color: #fff;
}

.home-final-cta p {
  max-width: 58ch;
  margin: 0.7rem auto 0;
}

.home-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   10. Catalog + product detail
   ========================================================================== */
.breadcrumb-strip {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.7rem;
  font-size: 0.83rem;
  color: var(--ink-400);
}

.breadcrumb a {
  color: var(--ink-500);
}

.breadcrumb a:hover {
  color: var(--accent-700);
  text-decoration: none;
}

.breadcrumb__current {
  font-weight: 600;
  color: var(--ink);
}

.catalog-group {
  margin-top: clamp(1.85rem, 4vw, 2.75rem);
}

.catalog-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.catalog-group__head h2 {
  font-size: 1.25rem;
}

.catalog-group__head p {
  font-size: 0.82rem;
  color: var(--ink-400);
}

.catalog-group__lead {
  margin: -0.35rem 0 1.15rem;
  max-width: 68ch;
  font-size: 0.95rem;
  color: var(--ink-500);
}

/* Login inside the public layout ------------------------------------------- */
.auth-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: start;
  width: 100%;
}

.auth-panel__main {
  max-width: 46ch;
}

.auth-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  max-width: 380px;
}

.auth-form__field {
  display: grid;
  gap: 0.3rem;
}

.auth-form__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
}

.auth-form__input {
  font: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.62rem 0.8rem;
  width: 100%;
}

.auth-form__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.auth-form .btn {
  justify-self: start;
}

/* Das Profilformular steht in einer breiten Karte, nicht in der schmalen
   Login-Spalte. Die 380px-Grenze fällt weg; das Formular selbst bleibt ein
   einfacher Block, weil die Felder nicht direkt im Formular liegen, sondern in
   den einzelnen .account-card-Karten. */
.auth-form--profile {
  max-width: none;
}

/* Die kurzen Felder (Vor-/Nachname, PLZ, Ort, Land, Umkreis) stehen zwei je
   Zeile und füllen so die Kartenbreite. Auf schmalen Schirmen wird daraus eine
   Spalte. Der Grid sitzt auf der Karte, denn sie ist der direkte Elternteil der
   Felder. */
.auth-form--profile .account-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.auth-form--profile .auth-form__field {
  min-width: 0;
}

/* Volle Breite für die Überschrift, die langen Blöcke (Leistungen,
   Rechnungsadresse-Schalter), den Speichern-Knopf und alles, was seine eigene
   Zeile braucht. */
.auth-form--profile .account-card > h2,
.auth-form--profile .account-card > .consent-box,
.auth-form--profile .account-card > .btn,
.auth-form--profile .account-card .field--full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .auth-form--profile .account-card {
    grid-template-columns: 1fr;
  }
}

.auth-panel__aside {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 3vw, 1.6rem);
}

.auth-panel__aside h2 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

.auth-panel__aside p {
  margin: 0 0 0.8rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.auth-panel__rule {
  margin: 1.35rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.auth-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.auth-panel__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.auth-form__hint {
  font-size: 0.82rem;
  color: var(--ink-400);
}

/* Qualifier under a list in the aside, e.g. what a role cannot do yet. */
.auth-panel__hint {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-500);
}

/* Six-digit code: wide tracking so the digits stay countable. */
.auth-form__input--code {
  max-width: 11ch;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-align: center;
  padding-inline: 0.6rem;
}

.auth-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  counter-reset: auth-step;
}

.auth-steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.auth-steps li span {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-700);
  font-size: 0.76rem;
  font-weight: 700;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.auth-actions form {
  margin: 0;
}

.auth-switch {
  margin: 1.35rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-500);
}

/* Partner entry at the foot of the customer login. */
.auth-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.auth-partner__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
}

.auth-partner__text {
  margin: 0;
  max-width: 60ch;
  font-size: 0.9rem;
  color: var(--ink-500);
}

/* Demo sign-ins ------------------------------------------------------------
   Only rendered with PG_DEMO_LOGINS (see data/demo.py). Amber throughout, the
   same colour the site uses for warnings, so the card never reads as part of
   the product. */
.auth-demo {
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  background: var(--amber-soft);
  border: 1px dashed var(--amber);
  border-radius: var(--r-lg);
}

.auth-demo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
}

.auth-demo__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.auth-demo__badge {
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--amber);
}

.auth-demo__text {
  margin: 0;
  max-width: 78ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.auth-demo__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.auth-demo__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.auth-demo__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  min-width: 0;
}

.auth-demo__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

/* Company name of a partner demo account, next to its role label. */
.auth-demo__company {
  font-size: 0.85rem;
  color: var(--ink-700);
}

/* Selectable on purpose: typing the values by hand has to stay possible when
   JavaScript is off. */
.auth-demo__value {
  padding: 0.15rem 0.45rem;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--ink-800);
  user-select: all;
  overflow-wrap: anywhere;
}

.auth-demo__note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-500);
}

.auth-demo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.auth-demo__actions form {
  margin: 0;
}

/* Prose with inline <code>, so no flex here either — see .notice-box--warn. */
.auth-demo__warning {
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  max-width: 78ch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--amber);
}

.auth-demo__warning svg {
  vertical-align: -0.16em;
  margin-right: 0.35rem;
}

/* The <code> bits in the running text are inline notes, not values to copy, so
   they stay lighter than .auth-demo__value. */
.auth-demo__text code,
.auth-demo__warning code {
  padding: 0.05rem 0.3rem;
  border-radius: var(--r-sm);
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

/* Pointer from the form down to the card. */
.auth-form__hint--demo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--amber);
}

/* Customer area ------------------------------------------------------------ */
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 1.5rem;
  align-items: start;
}

.account-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  box-shadow: var(--sh-sm);
}

.account-card--side {
  background: var(--bg-soft);
  box-shadow: none;
}

.account-card h2 {
  margin: 0 0 0.9rem;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

.account-card__note {
  margin: 1rem 0 0.8rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.account-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.account-facts {
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.account-facts dt {
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.account-facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Customer dashboard: requests and account access share one navigation. */
.customer-account {
  min-height: 65vh;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 100% 0, rgb(249 115 22 / 10%), transparent 28rem),
    var(--bg-soft);
}

.customer-account__container {
  position: relative;
}

.customer-account__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}

.customer-account__main {
  min-width: 0;
}

.customer-status-guide {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgb(249 115 22 / 28%), transparent 13rem),
    var(--bg-dark);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}

.customer-status-guide::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  bottom: -5rem;
  width: 11rem;
  height: 11rem;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 50%;
  pointer-events: none;
}

.customer-status-guide__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.1rem;
  color: #fdba74;
  background: rgb(249 115 22 / 14%);
  border: 1px solid rgb(249 115 22 / 24%);
  border-radius: var(--r-md);
}

.customer-status-guide h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 0.5rem;
  font-size: 1.12rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.customer-status-guide__intro,
.customer-status-guide dd {
  position: relative;
  z-index: 1;
  color: #c9c1b8;
  font-size: 0.8rem;
  line-height: 1.65;
}

.customer-status-guide dl {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.9rem;
  margin-top: 1.35rem;
}

.customer-status-guide dl > div + div {
  padding-top: 0.9rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.customer-status-guide dd {
  margin-top: 0.45rem;
}

.customer-status-guide .lead-status {
  white-space: normal;
}

@media (min-width: 1100px) {
  .customer-account__layout {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: 1.75rem;
  }

  .customer-status-guide {
    position: sticky;
    top: calc(var(--site-header-height) + 1.5rem);
  }
}

.customer-account__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.customer-account__intro {
  min-width: 0;
}

.customer-account__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.customer-account__kicker > span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
}

.customer-account__heading .page-title {
  margin: 0.55rem 0 0.6rem;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  letter-spacing: -0.035em;
}

.customer-account__heading p:not(.kicker) {
  max-width: 58ch;
  color: var(--ink-500);
  font-size: 0.94rem;
  line-height: 1.65;
}

.customer-account__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  flex: 0 1 20rem;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.customer-account__identity-avatar {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-600));
  border-radius: var(--r-md);
  box-shadow: 0 7px 18px rgb(234 88 12 / 20%);
  font-size: 1rem;
  font-weight: 700;
}

.customer-account__identity > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.customer-account__identity small {
  color: var(--ink-500);
  font-size: 0.68rem;
  line-height: 1.35;
}

.customer-account__identity strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.79rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-account__identity-state {
  width: 0.55rem;
  height: 0.55rem;
  background: #10b981;
  border: 2px solid var(--bg-soft);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px #a7f3d0;
}

.customer-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
}

.customer-tabs > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  min-height: 4.75rem;
  padding: 0.8rem 1rem;
  color: var(--ink-700);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.customer-tabs > a:hover {
  color: var(--ink);
  background: #fff;
  border-color: #fdba74;
  box-shadow: var(--sh-md);
  text-decoration: none;
  transform: translateY(-1px);
}

.customer-tabs > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.customer-tabs > a[aria-selected="true"],
.customer-tabs > a[aria-current="page"] {
  color: var(--ink);
  background: linear-gradient(135deg, #fff, #fffaf7);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring), var(--sh-md);
}

.customer-tabs__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink-500);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.customer-tabs__copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.customer-tabs__copy strong {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
}

.customer-tabs__copy small {
  color: var(--ink-500);
  font-size: 0.72rem;
  line-height: 1.4;
}

.customer-tabs > a[aria-selected="true"] .customer-tabs__icon,
.customer-tabs > a[aria-current="page"] .customer-tabs__icon {
  color: var(--accent-700);
  background: var(--accent-soft);
  border-color: #fed7aa;
}

.customer-tabs__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding-inline: 0.35rem;
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.customer-tabs__arrow {
  display: grid;
  place-items: center;
  color: var(--ink-400);
}

.customer-tabs > a[aria-selected="true"] .customer-tabs__count,
.customer-tabs > a[aria-current="page"] .customer-tabs__count {
  color: #fff;
  background: var(--accent-600);
  border-color: var(--accent-600);
}

.customer-tabs > a[aria-selected="true"] .customer-tabs__arrow,
.customer-tabs > a[aria-current="page"] .customer-tabs__arrow {
  color: var(--accent-700);
}

.customer-panel {
  margin-bottom: 2rem;
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

.customer-panel[hidden] {
  display: none;
}

.customer-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.customer-panel__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--ink-500);
}

.customer-panel__heading h2 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.customer-panel__heading p,
.customer-muted {
  color: var(--ink-500);
  font-size: 0.85rem;
  line-height: 1.65;
}

.customer-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.customer-projects > li {
  min-width: 0;
}

.customer-project {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  scroll-margin-top: calc(var(--header-h) + 1rem);
  overflow-wrap: anywhere;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.customer-project::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #fbbf24);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.customer-project__summary {
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-lg);
}

.customer-project__summary:hover {
  border-color: #fdba74;
  box-shadow: var(--sh-lg);
  text-decoration: none;
  transform: translateY(-2px);
}

.customer-project__summary:hover::before,
.customer-project__summary:focus-visible::before {
  opacity: 1;
}

.customer-project__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.customer-project__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}

.customer-project__icon,
.customer-empty__icon,
.customer-profile__avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}

.customer-project__icon {
  background: linear-gradient(145deg, #fff7ed, var(--accent-soft));
  border: 1px solid #fed7aa;
}

.customer-project__reference {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  color: var(--ink-500);
}

.customer-project__reference small {
  font-size: 0.61rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.customer-project__reference strong {
  overflow: hidden;
  color: var(--ink-700);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-project__top .lead-status {
  align-self: start;
  max-width: 9rem;
  white-space: normal;
  text-align: right;
}

.customer-project__overview {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin-top: 1.15rem;
}

.customer-project__title {
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.customer-project__progress {
  padding: 0.7rem 0.8rem;
  color: var(--ink-700);
  background: var(--bg-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.79rem;
  line-height: 1.55;
}

.customer-project__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
  padding-block: 0.9rem;
  color: var(--ink-500);
  border-block: 1px solid var(--line);
  font-size: 0.75rem;
}

.customer-project__meta:has(> span:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.customer-project__meta > span,
.customer-project__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.customer-project__meta > span > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-project__meta .icon {
  flex: none;
  color: var(--ink-400);
}

.customer-project__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
}

.customer-project__interested {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.3rem 0.55rem;
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  white-space: nowrap;
}

.customer-project__interested strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.customer-project__interested .icon {
  flex: none;
  color: var(--ink-400);
}

.customer-project__interested.is-active {
  color: var(--emerald);
  background: var(--emerald-soft);
  border-color: #a7f3d0;
}

.customer-project__interested.is-active .icon,
.customer-project__interested.is-active strong {
  color: var(--emerald);
}

.customer-project__action {
  flex: none;
  color: var(--accent-700);
  font-size: 0.76rem;
  font-weight: 600;
}

.customer-project__action .icon {
  transition: transform 0.18s ease;
}

.customer-project__summary:hover .customer-project__action .icon {
  transform: translateX(3px);
}

.customer-help[open] > summary .icon {
  transform: rotate(180deg);
}

.customer-project__body {
  padding: 1.4rem;
}

.customer-request-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  color: var(--ink-500);
  font-size: 0.82rem;
  font-weight: 600;
}

.customer-request-detail__back:hover {
  color: var(--accent-700);
  text-decoration: none;
}

.customer-request-detail .customer-account__heading {
  margin-bottom: 2rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.customer-request-detail .customer-account__heading .page-title {
  margin: 0.3rem 0 0.6rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: 0;
}

.customer-request-detail .customer-account__heading p:not(.kicker) {
  font-size: 0.95rem;
}

.customer-request-detail .customer-account__heading > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-request-detail .customer-account__heading > .lead-status {
  flex: none;
  max-width: 100%;
  white-space: normal;
}

.customer-project__status {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  color: var(--ink-700);
}

.customer-project__status > .icon {
  flex: none;
  color: var(--accent-700);
  margin-top: 0.1rem;
}

.customer-project__status > div {
  min-width: 0;
}

.customer-project__next-step {
  margin-top: 0.85rem;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.customer-project__status h2 {
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.customer-project__status p {
  font-size: 0.88rem;
  line-height: 1.7;
}

.customer-project__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  margin-block: 1.6rem 0.5rem;
}

.customer-project__columns--review {
  align-items: start;
}

.customer-project__review-aside {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
  padding-left: 2rem;
  border-left: 1px solid var(--line);
}

.customer-project__companies-empty {
  padding: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.customer-project__companies-empty-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.customer-project__companies-empty-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}

.customer-project__companies-empty h2 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.customer-project__companies-empty p {
  font-size: 0.85rem;
  line-height: 1.6;
}

.customer-project__review-aside .customer-project__manage {
  margin-top: 0;
  padding: 1rem;
  border-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}


.customer-project__section + .customer-project__section {
  border-left: 1px solid var(--line);
  padding-left: 2rem;
}

.customer-project__section h2 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.customer-project__section h3 {
  font-size: 0.87rem;
  margin: 1.4rem 0 0.65rem;
}

.customer-project__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  font-size: 0.87rem;
}

.customer-project__facts dt {
  color: var(--ink-500);
  font-size: 0.76rem;
  margin-bottom: 0.2rem;
}

.customer-project__facts dd {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.customer-project__message {
  color: var(--ink-700);
  font-size: 0.88rem;
  line-height: 1.7;
  white-space: pre-line;
}

.customer-companies {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 0.9rem;
}

.customer-companies > li + li {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.customer-companies__name {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.customer-companies__name .icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--ink-500);
}

.customer-companies p {
  font-size: 0.85rem;
}

.customer-companies__deadline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  margin-top: 0.75rem;
  border-radius: var(--r-sm);
  background: var(--emerald-soft);
  color: var(--emerald);
}

.customer-companies__deadline > .icon {
  flex: none;
  margin-top: 0.2rem;
}

.customer-companies__deadline strong,
.customer-companies__deadline small {
  display: block;
}

.customer-companies__empty {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  margin-bottom: 0.9rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-500);
  font-size: 0.86rem;
}

.customer-companies__empty > .icon {
  flex: none;
}

.customer-project__manage {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-500);
}

.customer-project__manage h2 {
  font-size: 1rem;
}

.customer-project__manage-action {
  margin-block: -0.15rem 0.1rem;
}

.customer-stop-dialog {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(23 20 15 / 48%);
}

.customer-stop-dialog[hidden] {
  display: none;
}

.customer-stop-dialog__panel {
  width: min(100%, 36rem);
  max-height: min(90vh, 42rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
}

.customer-stop-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.customer-stop-dialog__head h2 {
  margin-top: 0.3rem;
  font-size: 1.35rem;
}

.customer-stop-dialog__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.customer-stop-dialog__close:hover {
  color: var(--accent-700);
  border-color: var(--accent);
}

.customer-stop-dialog__description {
  margin-bottom: 1.25rem;
  color: var(--ink-700);
  font-size: 0.92rem;
  line-height: 1.7;
}

.customer-stop-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}


.customer-project__manage ul {
  display: grid;
  gap: 0.4rem;
  list-style: disc;
  padding-left: 1.2rem;
}

.customer-help > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding-block: 0.7rem;
  list-style: none;
  cursor: pointer;
  color: var(--ink-700);
}

.customer-empty {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: clamp(2.25rem, 6vw, 4.5rem) 1.25rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgb(249 115 22 / 9%), transparent 13rem),
    var(--bg);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

.customer-empty__icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.25rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border: 1px solid #fed7aa;
  border-radius: var(--r-lg);
}

.customer-empty h3 {
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}

.customer-empty p {
  max-width: 48ch;
  color: var(--ink-500);
  font-size: 0.93rem;
  line-height: 1.7;
}

.customer-access {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
  align-items: start;
  gap: 1.5rem;
}

.customer-profile {
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.customer-profile__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 95% 0, rgb(249 115 22 / 18%), transparent 16rem),
    linear-gradient(135deg, #fff, #fff7ed);
  border-bottom: 1px solid var(--line);
}

.customer-profile__header::after {
  content: "";
  position: absolute;
  right: -2.5rem;
  bottom: -5rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgb(249 115 22 / 12%);
  border-radius: 50%;
  pointer-events: none;
}

.customer-profile__header > div {
  position: relative;
  z-index: 1;
}

.customer-profile__header h2 {
  margin-bottom: 0.35rem;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.customer-profile__header p {
  color: var(--ink-500);
  font-size: 0.84rem;
}

.customer-profile__avatar {
  position: relative;
  z-index: 1;
  flex: none;
  width: 3.75rem;
  height: 3.75rem;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-600));
  border: 3px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 24px rgb(234 88 12 / 20%);
  font-size: 1.35rem;
  font-weight: 700;
}

.customer-profile__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
}

.customer-profile__facts > div {
  min-width: 0;
  padding: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.customer-profile__facts dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  color: var(--ink-500);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.customer-profile__facts dt > span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
}

.customer-profile__facts dd {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.customer-profile__email {
  grid-column: 1 / -1;
}

.customer-profile__email dd > span {
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.customer-profile__hint,
.customer-profile__time {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-500);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.55;
}

.customer-profile__time {
  margin-top: 0.1rem;
}

.customer-profile__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.customer-profile__actions h3 {
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}

.customer-profile__actions p {
  color: var(--ink-500);
  font-size: 0.8rem;
}

.customer-profile__actions .btn {
  min-height: 2.75rem;
  background: var(--bg);
}

.customer-access__aside {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.customer-access-note,
.customer-access-help {
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.customer-access-note {
  background: linear-gradient(145deg, #fff7ed, #fff);
  border: 1px solid #fed7aa;
}

.customer-access-help {
  background: var(--bg);
  border: 1px solid var(--line);
}

.customer-access-note__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  color: var(--emerald);
  background: var(--emerald-soft);
  border: 1px solid #a7f3d0;
  border-radius: var(--r-md);
}

.customer-access-note h2,
.customer-access-help h2 {
  margin-bottom: 0.6rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.customer-access-note p,
.customer-access-help p {
  color: var(--ink-500);
  font-size: 0.86rem;
  line-height: 1.7;
}

.customer-access-note .link-arrow,
.customer-access-help .link-arrow {
  min-height: 2.75rem;
  margin-top: 0.65rem;
  font-size: 0.82rem;
}

.customer-access-help h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-access-help h2 .icon {
  flex: none;
  color: var(--ink-500);
}

.customer-account__help {
  margin-top: 1.25rem;
  color: var(--ink-500);
  font-size: 0.84rem;
}

.customer-account__main > .customer-account__help {
  padding: 1.1rem 1.25rem;
  background: rgb(255 255 255 / 72%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.customer-account__help > p {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.customer-account__help > p > .icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--accent-700);
}

.customer-help {
  margin-top: 0.85rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

.customer-help > summary {
  font-weight: 600;
}

.customer-help > summary::-webkit-details-marker {
  display: none;
}

.customer-help > div {
  display: grid;
  gap: 0.75rem;
  max-width: 80ch;
  padding: 0.6rem 0 1rem;
}

.customer-help h3 {
  font-size: 0.9rem;
}

.customer-help ul {
  list-style: disc;
  padding-left: 1.2rem;
}

.customer-help li + li {
  margin-top: 0.35rem;
}

@media (max-width: 900px) {
  .customer-access {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-access__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 760px) {
  .customer-account__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
  }

  .customer-account__identity {
    width: 100%;
    flex-basis: auto;
  }

  .customer-projects {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-project__summary {
    min-height: 0;
    padding: 1.1rem;
  }

  .customer-project__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .customer-project__section + .customer-project__section {
    padding-top: 1.5rem;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .customer-project__review-aside {
    padding-top: 1.5rem;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .customer-project__body {
    padding: 1.1rem;
  }
}

@media (max-width: 600px) {
  .customer-access__aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .customer-account__heading {
    padding: 1.25rem;
    border-radius: var(--r-lg);
  }

  .customer-account__identity {
    padding: 0.65rem;
  }

  .customer-tabs {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .customer-tabs > a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    min-height: 3.75rem;
    padding: 0.65rem 0.75rem;
  }

  .customer-tabs__icon,
  .customer-tabs__copy small,
  .customer-tabs__arrow {
    display: none;
  }

  .customer-tabs__copy strong {
    font-size: 0.8rem;
  }

  .customer-tabs__count {
    min-width: 1.3rem;
    height: 1.3rem;
    font-size: 0.68rem;
  }

  .customer-profile__header {
    gap: 0.8rem;
    padding: 1.25rem;
  }

  .customer-profile__header h2 {
    font-size: 1rem;
  }

  .customer-profile__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-md);
    font-size: 1.1rem;
  }

  .customer-profile__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    padding: 1rem;
  }

  .customer-profile__actions {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .customer-profile__actions form,
  .customer-profile__actions .btn {
    width: 100%;
  }

  .customer-project__title {
    font-size: 1rem;
  }

  .customer-project__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-project__bottom {
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  .customer-project__top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .customer-project__top .lead-status {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}

.empty-state--flat {
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 1.5rem 1.25rem;
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  text-align: left;
}

.empty-state--flat p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-700);
}

/* Layout rules for this variant sit with the other two, next to .notice-box. */
.notice-box--ok {
  color: var(--emerald);
  background: var(--emerald-soft);
  border-color: #a7f3d0;
}

/* Guide: editorial block below the product cards of a category ------------- */
.guide__head {
  max-width: 72ch;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

.guide__lead {
  margin-top: 0.8rem;
  font-size: var(--fs-lead);
  color: var(--ink-700);
  line-height: 1.65;
}

.guide-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.4rem) 0;
  border-top: 1px solid var(--line);
}

.guide-row--flipped .guide-row__text {
  order: 2;
}

.guide-row__text h3 {
  margin: 0 0 0.7rem;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

.guide-row__text p {
  margin: 0 0 0.7rem;
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--ink-700);
}

.guide-row__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.guide-row__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.guide-row__media {
  min-width: 0;
}

.guide-ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: 100%;
}

.guide-block {
  padding-top: clamp(1.6rem, 3.5vw, 2.5rem);
  margin-top: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

.guide-block__title {
  margin: 0 0 0.5rem;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
}

.guide-block__note {
  margin: 0 0 1.25rem;
  max-width: 70ch;
  font-size: 0.88rem;
  color: var(--ink-500);
}

.guide-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.guide-variant {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.05rem 1.1rem;
  box-shadow: var(--sh-sm);
}

.guide-variant h4 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.guide-variant p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.guide-process {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.85rem;
  counter-reset: guide-step;
}

.guide-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.05rem 1.1rem;
  box-shadow: var(--sh-sm);
}

.guide-step__no {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 0.6rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-700);
  font-size: 0.82rem;
  font-weight: 700;
}

.guide-step h4 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
}

.guide-step__sub {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  color: var(--ink-400);
}

.guide-step ul {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.35rem;
}

.guide-step li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-700);
}

.guide-step li::marker {
  color: var(--accent);
}

.guide-checklist {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 3vw, 1.9rem);
  box-shadow: var(--sh-sm);
}

.guide-checklist__intro h3 {
  margin: 0.6rem 0 0.5rem;
  font-size: var(--fs-h3);
}

.guide-checklist__intro p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.guide-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.guide-checklist__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: var(--ink-700);
}

.guide-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.5rem);
  padding: clamp(1.15rem, 3vw, 1.8rem);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.guide-closing h3 {
  margin: 0.35rem 0 0.5rem;
  font-size: var(--fs-h3);
}

.guide-closing p {
  margin: 0;
  max-width: 74ch;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-700);
}

.search-results {
  margin-top: clamp(1.35rem, 3vw, 2rem);
}

.search-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line);
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem;
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}

.empty-state h2 {
  font-size: 1.15rem;
}

.empty-state p {
  max-width: 46ch;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.empty-state .btn {
  margin-top: 0.7rem;
}

/* Detail page --------------------------------------------------------------
   Zwei Spalten: links die Ansichten, rechts Identität, Preis, Konfiguration
   und der Weg zur Anfrage. Die linke Spalte ist kurz, die rechte lang — ohne
   `sticky` blieb darum die halbe Seite leer, sobald man scrollte. */
.detail-page {
  display: block;
  /* Platz für die mobile Preis-/Anfrage-Leiste am unteren Rand. */
  padding-bottom: 5.5rem;
}

.product-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  padding-top: 1.35rem;
  font-size: 0.82rem;
  color: var(--ink-400);
}

.product-breadcrumbs a {
  color: var(--ink-500);
}

.product-breadcrumbs a:hover {
  color: var(--accent-700);
  text-decoration: none;
}

.product-breadcrumbs__current {
  color: var(--ink-700);
  font-weight: 600;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem);
}

.detail-media {
  min-width: 0;
}

@media (min-width: 961px) {
  .detail-media {
    position: sticky;
    top: calc(var(--site-header-height) + 1.25rem);
  }
}

/* Gallery ------------------------------------------------------------------ */
.gallery {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}

.gallery__slide {
  position: absolute;
  inset: 0;
}

.gallery__slide[hidden] {
  display: none;
}

.gallery__ph {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.gallery__counter {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.22rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgb(23 20 15 / 62%);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gallery__controls {
  position: absolute;
  inset-inline: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.gallery__nav {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--ink);
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.gallery__nav:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.gallery__caption {
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-700);
  background: rgb(255 255 255 / 92%);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.gallery__thumb {
  overflow: hidden;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  opacity: 0.72;
  transition: opacity 0.16s ease, border-color 0.16s ease;
}

.gallery__thumb:hover {
  opacity: 1;
}

.gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--accent);
}

.gallery__thumb-ph {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: calc(var(--r-md) - 2px);
}

/* Eine Miniatur ist keine Bühne: der Rahmen des Platzhalters muss mit deutlich
   weniger Platz auskommen, sonst wird die Bildunterschrift abgeschnitten. */
.gallery__thumb-ph .img-ph__note { display: none; }
.gallery__thumb-ph .img-ph__content { gap: 0.25rem; padding: 0.3rem; }

.gallery__thumb-ph .img-ph__icon {
  width: 1.65rem;
  height: 1.65rem;
}

.gallery__thumb-ph .img-ph__icon svg {
  width: 14px;
  height: 14px;
}

.gallery__thumb-ph .img-ph__label {
  font-size: 0.64rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .gallery__thumb-ph .img-ph__label { display: none; }
}

/* Summary column ----------------------------------------------------------- */
.detail-summary {
  min-width: 0;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.product-heading__category {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-heading__category a {
  color: var(--accent-700);
}

.product-heading h1 {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.4rem);
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -0.03em;
}

/* Die gewählte Ausführung — eine Zeile, die beim Anpassen mitschreibt. */
.product-heading__config {
  margin: 0.7rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent);
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.5;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

.product-heading__config:empty {
  display: none;
}

.detail-price {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.detail-price__value {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.detail-price__note {
  max-width: 46ch;
  font-size: 0.775rem;
  line-height: 1.5;
  color: var(--ink-500);
}

.detail-price__note[hidden] {
  display: none;
}

.detail-price--empty {
  font-size: 0.9rem;
  color: var(--ink-500);
}

.detail-intro {
  display: grid;
  gap: 0.5rem;
  line-height: 1.65;
  color: var(--ink-700);
}

.detail-intro__facts {
  font-size: 0.85rem;
  color: var(--ink-500);
}

.detail-actions {
  display: grid;
  gap: 0.6rem;
}

.detail-actions form {
  display: grid;
}

.detail-actions .btn--lg {
  min-height: 3.2rem;
}

.detail-actions__note {
  font-size: 0.755rem;
  line-height: 1.55;
  color: var(--ink-500);
}

.detail-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.detail-usps li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-700);
}

.detail-platform-note {
  max-width: 78ch;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-500);
}

/* Mobile Leiste: Preis links, Anfrage rechts. Auf breiten Bildschirmen steht
   der Knopf sichtbar in der Spalte, dort ist die Leiste überflüssig — und ohne
   JavaScript öffnet sie keinen Dialog, dann bleibt sie ebenfalls weg (der
   <noscript>-Verweis auf das Formular steht in der Spalte). */
.detail-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / 96%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgb(23 20 15 / 8%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.detail-bar__info {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.detail-bar__info strong {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.detail-bar__info small {
  font-size: 0.7rem;
  color: var(--ink-500);
}

.detail-bar .btn {
  flex: none;
}

@media (max-width: 960px) {
  html.js .detail-bar {
    display: flex;
  }
}

@media (min-width: 961px) {
  .detail-page {
    padding-bottom: 0;
  }
}

/* Three step cards --------------------------------------------------------- */
.step-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
  margin-top: clamp(1.35rem, 3vw, 2rem);
}

.step-card {
  padding: 1.35rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.step-card > span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.45;
}

.step-card h3 {
  margin-top: 0.5rem;
  font-size: 1.02rem;
}

.step-card p {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--ink-500);
}

/* ==========================================================================
   12. Contact page
   ========================================================================== */
.contact-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  align-items: start;
  gap: clamp(1.35rem, 3vw, 2.25rem);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Form --------------------------------------------------------------------- */
.contact-form-card {
  padding: clamp(1.35rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.contact-form-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.contact-form-card__head h2 {
  font-size: 1.15rem;
}

.contact-form-card__head p {
  margin-top: 0.3rem;
  font-size: 0.87rem;
  color: var(--ink-500);
}

.contact-form-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-md);
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-700);
}

.field__optional {
  font-weight: 400;
  color: var(--ink-400);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-300);
}

.phone-field {
  display: flex;
  gap: 0.45rem;
}

.phone-field select {
  flex: none;
  width: 7rem;
}

.consent-box {
  padding: 0.9rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-500);
  cursor: pointer;
}

.consent-box input[type="checkbox"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.privacy-note {
  font-size: 0.82rem;
  color: var(--ink-400);
}

.form-hint {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--ink-400);
}

/* Ablauf neben dem Formular: nummerierte Zeilen, kein Kasten. */
.contact-timeline h2 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.contact-timeline ol {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.contact-timeline li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--ink-500);
}

.contact-timeline li strong {
  color: var(--ink);
}

.contact-timeline__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: 50%;
}

.contact-aside .contact-note {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* Redaktioneller Hinweis neben dem Formular: Typografie statt Kasten. */
.contact-note h2 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.contact-note p {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.contact-note .link-arrow {
  display: inline-block;
  margin-top: 0.8rem;
}

.contact-note__safe {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.contact-body {
  scroll-margin-top: 1rem;
}

/* Wizard-Übergänge: langsam und weich — Einblenden plus leichtes Hochgleiten. */
.wizard-step:not([hidden]) {
  animation: wizard-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes wizard-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.wizard-steps__item,
.wizard-steps__dot {
  transition: background-color 0.35s ease, border-color 0.35s ease,
    color 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .wizard-step:not([hidden]) {
    animation: none;
  }
}

/* Wizard: Formular links breit, Beikarte rechts schmal. */
.contact-body--wizard {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.contact-aside {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-width: 0;
}

/* Schrittstand über dem Formular. Rein darstellend — geführt wird er im Skript. */
.wizard-steps {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.wizard-steps__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-400);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.wizard-steps__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-500);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.wizard-steps__item.is-active {
  color: var(--ink);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.wizard-steps__item.is-active .wizard-steps__dot {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.wizard-steps__item.is-done .wizard-steps__dot {
  color: var(--accent-700);
  border-color: var(--accent);
  font-size: 0;
}

.wizard-steps__item.is-done .wizard-steps__dot::after {
  content: "✓";
  font-size: 0.8rem;
}

/* Ein Schritt ist ein fieldset: ohne Browser-Rahmen, im zweispaltigen Raster.
   Als Kind von .contact-form oder .reg-form braucht er die volle Breite —
   sonst parkt ihn das äußere Grid in einer Spalte. */
.contact-form > .wizard-step,
.reg-form > .wizard-step,
.reg-form > .wizard-steps,
.reg-form > .wizard-nav {
  grid-column: 1 / -1;
}

/* Kurzzeile unter jedem Schritt-Titel: ein Satz Orientierung, damit aus
   zwanzig Feldern fünf kleine Aufgaben werden. */
.wizard-step__lead {
  margin: 0 0 0.3rem;
  font-size: 0.88rem;
  color: var(--ink-400);
}

.wizard-step {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
}

.wizard-step[hidden] {
  display: none;
}

.wizard-step__title {
  grid-column: 1 / -1;
  margin: 0 0 0.2rem;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.wizard-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.wizard-nav .form-hint {
  flex: 1 1 100%;
  margin-top: 0.2rem;
}

/* .btn setzt display — ohne das ließe sich ein Wizard-Knopf nie verstecken. */
.wizard-nav [hidden] {
  display: none !important;
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal-body {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.legal-body__layout--toc {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  padding: 1.15rem 1.25rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.legal-toc__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.legal-toc ol {
  display: grid;
  gap: 0.35rem;
  counter-reset: toc;
}

.legal-toc li {
  counter-increment: toc;
}

.legal-toc a {
  display: flex;
  gap: 0.45rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-500);
}

.legal-toc a::before {
  content: counter(toc) ".";
  flex: none;
  font-weight: 650;
  color: var(--ink-300);
}

.legal-toc a:hover {
  color: var(--accent-700);
  text-decoration: none;
}

.legal-content {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  min-width: 0;
}

.legal-section {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.legal-section h2 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
}

.legal-text {
  display: grid;
  gap: 0.8rem;
  max-width: 76ch;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.legal-section--card {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.legal-section__rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.legal-section__inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.legal-section__index {
  flex: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0.55;
}

.legal-section__copy {
  min-width: 0;
}

.legal-imprint-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

/* ==========================================================================
   Prose pages (404, for_companies)
   ========================================================================== */
.prose-page {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.prose-page__h2 {
  margin-top: clamp(1.85rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.prose-page__note {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: 1rem 1.15rem;
  font-size: 0.87rem;
  line-height: 1.7;
  color: var(--ink-500);
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.prose-page__note--flush {
  margin-top: 1rem;
}

.error-page {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: radial-gradient(ellipse at 15% 0, var(--accent-soft), transparent 55%), var(--bg-soft);
}
.error-page__panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--sh-lg);
}
.error-page__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3.5rem 1.5rem;
  color: #fff;
  background: radial-gradient(ellipse at 50% 55%, rgb(249 115 22 / 19%), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 43px, rgb(255 255 255 / 4%) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgb(255 255 255 / 4%) 43px 44px), var(--bg-dark);
  border-bottom: 4px solid var(--accent);
}
.error-page__brand { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; }
.error-page__brand span { color: var(--accent); }
.error-page__code {
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.07em;
  color: var(--accent);
  text-shadow: 0 8px 40px rgb(249 115 22 / 20%);
}
.error-page__visual-note { font-size: 0.85rem; color: #d8d0c6; text-align: center; }
.error-page__content { min-width: 0; padding: clamp(1.5rem, 4vw, 3.5rem); align-self: center; }
.error-page__eyebrow {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-700);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.error-page__content h1 { margin: 1.1rem 0; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.error-page__message { margin: 0; color: var(--ink-500); line-height: 1.8; }
.error-page__note { margin: 1rem 0 0; padding-left: 1rem; border-left: 2px solid var(--accent); color: var(--ink-500); font-size: 0.875rem; }
.error-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.8rem; }
.error-page__contact { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-700); }
.error-page__contact:hover { color: var(--accent-700); }
.error-page__paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.error-page__paths > a { display: flex; align-items: center; gap: 0.8rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); color: var(--ink); }
.error-page__paths > a:hover { border-color: var(--accent); background: var(--bg-warm); }
.error-page__path-icon { display: inline-flex; color: var(--accent-700); }
.error-page__paths strong { display: block; font-size: 0.9rem; }
.error-page__paths small { display: block; margin-top: 0.25rem; color: var(--ink-500); font-size: 0.76rem; }
.error-page__paths > a > .icon { margin-left: auto; flex-shrink: 0; color: var(--ink-400); }
.error-page a:focus-visible { outline: 3px solid var(--accent-700); outline-offset: 4px; }
@media (max-width: 800px) {
  .error-page__panel { grid-template-columns: 1fr; }
  .error-page__visual { padding: 1.75rem 1rem; gap: 0.8rem; }
  .error-page__code { font-size: 6rem; }
  .error-page__paths { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .error-page__actions { flex-direction: column; align-items: stretch; text-align: center; }
  .error-page__contact { justify-content: center; }
}

.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.route-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.route-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.7rem 1rem;
  background: #fff;
}

.route-list a {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: 0.85rem;
  font-weight: 600;
}

.route-list span {
  font-size: 0.83rem;
  color: var(--ink-400);
}

/* ==========================================================================
   Ratgeber — overview and article (templates/guides.html, guide_article.html)
   ========================================================================== */

/* Overview teasers -------------------------------------------------------- */
.guide-index {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.guide-teaser {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1rem, 2.2vw, 1.35rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.guide-teaser:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-md);
}

.guide-teaser__media {
  display: block;
  min-height: 170px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.guide-teaser__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* h3, nicht h2: Die Übersicht gruppiert nach Rubrik, und die Rubrik trägt das
   h2. Der Beitragstitel sitzt eine Ebene darunter — die Größe bleibt gleich,
   nur die Gliederung stimmt jetzt. */
.guide-teaser__body h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
}

.guide-teaser__body h3 a {
  color: inherit;
}

.guide-teaser__body h3 a:hover {
  color: var(--accent-700);
  text-decoration: none;
}

.guide-teaser__lead {
  font-size: 0.94rem;
  color: var(--ink-500);
}

.guide-teaser__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.guide-teaser__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  color: var(--ink-400);
}

/* Article head ------------------------------------------------------------ */
.article {
  display: block;
}

.article-ph {
  aspect-ratio: 16 / 9;
}

/* Article body: sticky table of contents beside the text ------------------ */
.article-body {
  padding-block: clamp(1.75rem, 4vw, 2.75rem) var(--section-y);
}

.article-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}

/* min-width: 0 keeps the wide Bundesländer table from stretching the grid
   column instead of scrolling inside .data-table__scroll. */
.article-content {
  min-width: 0;
}

.article-toc {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  padding: 1.1rem 1.15rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  counter-reset: article-toc;
}

.article-toc__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.article-toc ol {
  display: grid;
  gap: 0.4rem;
}

.article-toc li {
  counter-increment: article-toc;
}

.article-toc a {
  display: flex;
  gap: 0.45rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-700);
}

.article-toc a::before {
  content: counter(article-toc) ".";
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--ink-300);
}

.article-toc a:hover {
  color: var(--accent-700);
  text-decoration: none;
}

/* Key facts box ----------------------------------------------------------- */
.key-facts {
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  background: var(--accent-soft);
  border: 1px solid #f8dcc4;
  border-radius: var(--r-lg);
}

.key-facts__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.1rem;
}

.key-facts__list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.key-facts__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.key-facts__list .tick--soft {
  background: #fff;
}

/* Chapters ---------------------------------------------------------------- */
.article-section {
  padding-top: clamp(1.85rem, 4vw, 2.75rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.article-section > h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
}

.article-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.15rem, 3vw, 2.25rem);
  align-items: start;
}

.article-split--flipped .article-prose {
  order: 2;
}

.article-prose > p {
  margin-bottom: 0.85rem;
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--ink-700);
}

.article-prose > p:last-child {
  margin-bottom: 0;
}

.article-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.article-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.article-figure {
  margin: 0;
}

.article-figure figcaption {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-400);
}

/* Callouts: tip / warn / law --------------------------------------------- */
.callout {
  display: flex;
  gap: 0.85rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--bg-soft);
}

.callout__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
}

.callout__body {
  min-width: 0;
}

.callout__label {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.callout__title {
  margin-top: 0.15rem;
  font-weight: 600;
  color: var(--ink);
}

.callout__text {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-500);
}

.callout--tip {
  border-left-color: var(--emerald);
  background: var(--emerald-soft);
}

.callout--tip .callout__label,
.callout--tip .callout__icon {
  color: var(--emerald);
}

.callout--warn {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.callout--warn .callout__label,
.callout--warn .callout__icon {
  color: var(--amber);
}

.callout--law {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.callout--law .callout__label,
.callout--law .callout__icon {
  color: var(--accent-700);
}

/* Data table ------------------------------------------------------------- */
.data-table {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.data-table__caption {
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-500);
}

/* Horizontal scroll keeps four columns readable on a phone; tabindex makes
   the region reachable by keyboard when it overflows. */
.data-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

.data-table table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 0.6rem 0.85rem;
  font-size: 0.86rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.data-table thead th {
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--bg-soft);
  white-space: nowrap;
}

.data-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover th,
.data-table tbody tr:hover td {
  background: var(--bg-soft);
}

.data-table td {
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

.data-table__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--ink-400);
}

.data-table__note .icon {
  flex: none;
  margin-top: 0.15rem;
}

/* Short cards for special cases ------------------------------------------ */
.article-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.article-card {
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.article-card h3 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.article-card p {
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--ink-500);
}

/* Numbered procedure ---------------------------------------------------- */
.article-steps {
  display: grid;
  gap: 0.7rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.article-steps li {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.article-steps__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-pill);
}

.article-steps h3 {
  margin-bottom: 0.2rem;
  font-size: 0.98rem;
}

.article-steps p {
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--ink-500);
}

/* Document list and cost block ------------------------------------------ */
.doc-list,
.cost-block {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.doc-list h3,
.cost-block h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.02rem;
}

.doc-list__note {
  margin-top: 0.45rem;
  font-size: 0.86rem;
  color: var(--ink-500);
}

.doc-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.55rem 1.5rem;
  margin-top: 0.9rem;
}

.doc-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--ink-700);
}

.cost-block dl {
  margin-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.cost-block__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.35rem 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.cost-block dt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.cost-block dd {
  display: grid;
  gap: 0.2rem;
}

.cost-block__value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-700);
  font-variant-numeric: tabular-nums;
}

.cost-block__note {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-500);
}

/* Checklist ------------------------------------------------------------- */
.article-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0.6rem 1.5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  background: #fff;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}

.article-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.91rem;
  line-height: 1.6;
  color: var(--ink-700);
}

/* Disclaimer, related links, back link --------------------------------- */
.article-disclaimer {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: 1rem 1.15rem;
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--ink-500);
  background: var(--bg-soft);
  border-left: 3px solid var(--ink-300);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.article-related {
  padding-top: clamp(1.85rem, 4vw, 2.75rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.article-related h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
}

.article-back {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.article-back .link-arrow:hover .icon {
  transform: translateX(-3px);
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  

  

  .legal-body__layout--toc {
    grid-template-columns: 13rem minmax(0, 1fr);
  }

  .article-layout {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .detail-hero,
  .contact-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-body--wizard {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-steps {
    flex-direction: column;
  }

  .legal-body__layout--toc {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-toc {
    position: static;
  }

  /* The article reads top to bottom below this width, so the table of
     contents moves above the text and stops sticking. */
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-toc {
    position: static;
  }

  .article-toc ol {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
}

@media (max-width: 820px) {

  :root {
    --site-header-height: calc(var(--header-h) + 3.5rem);
  }

  .site-nav__toggle {
    display: inline-flex;
  }

  .site-nav__list {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    /* Unter der Kopfzeile statt auf fester Höhe: mobil ist sie zweizeilig. */
    top: 100%;
    margin-top: 0.35rem;
    z-index: 95;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
  }

  .site-nav__list.is-open {
    display: flex;
  }

  .site-nav__link {
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
  }

  .site-account__name {
    display: none;
  }

  .site-account__login span {
    display: none;
  }

  .site-account__login {
    padding: 0.4rem 0.55rem;
  }

  /* Header gets tight once the nav collapses: the button keeps its label as
     long as it fits, the sign-in beside it is already icon-only. */
  .site-cta {
    padding: 0.38rem 0.7rem;
  }

  .site-wordmark {
    margin-right: 0;
  }

  .site-wordmark .brand-logo {
    width: 144px;
  }

  .auth-panel,
  .account-grid,
  .guide-row,
  .guide-checklist,
  .article-split,
  .guide-teaser,
  .cost-block__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Text first on narrow screens, regardless of the desktop alternation. */
  .guide-row--flipped .guide-row__text,
  .article-split--flipped .article-prose {
    order: 0;
  }

  .guide-ph {
    aspect-ratio: 16 / 10;
  }

  .article-ph {
    aspect-ratio: 16 / 10;
  }

  .guide-teaser__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* In the mobile panel the dropdown stays in the flow instead of floating. */
  .site-nav__link--toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
  }

  .site-nav__menu {
    position: static;
    min-width: 0;
    margin: 0.15rem 0 0.35rem;
    padding: 0.25rem 0 0.25rem 0.5rem;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0.55rem;
    padding-block: 0.55rem;
  }

  .site-search {
    display: flex;
    order: 5;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }

  .site-searchicon {
    display: none;
  }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery__thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 560px) {
  :root {
    --section-y: 2.5rem;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .consent {
    place-items: center;
  }

  .consent__list li {
    flex-direction: column;
    gap: 0.35rem;
  }

  /* One card at a time, with the next one peeking in so the row reads as
     scrollable without relying on the arrows. */
  

  .phone-field {
    flex-direction: column;
  }

  .phone-field select {
    width: 100%;
  }

  .legal-section__inner {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Symbol only: "Menü", der Button und die Anmeldung teilen sich sonst eine
     Zeile, die für drei Beschriftungen zu schmal ist. Der zugängliche Name
     kommt vom aria-label am Link. */
  .site-cta span {
    display: none;
  }

  .site-cta {
    padding: 0.42rem 0.55rem;
  }

  .callout {
    flex-direction: column;
    gap: 0.6rem;
  }

  .article-steps li {
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* Auf kleinen Telefonen bleibt die erste Kopfzeile auch mit Kontomenü kompakt. */
@media (max-width: 380px) {
  .site-header__inner {
    column-gap: 0.5rem;
  }

  .site-wordmark .brand-logo {
    width: 126px;
  }

  .site-nav__toggle {
    padding-inline: 0.4rem;
  }

  .site-nav__toggle span {
    display: none;
  }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Print — legal documents are the realistic print target
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .consent,
  .skip-link,
  .legal-print-hidden,
  .breadcrumb-strip,
  .site-cta {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .legal-section--card,
  .legal-toc {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .legal-body {
    padding-block: 0.5rem;
  }

  .legal-section {
    break-inside: avoid;
  }

  .legal-text {
    max-width: none;
    font-size: 10.5pt;
    line-height: 1.55;
  }

  /* Ratgeber articles get printed too — a planning checklist on paper is the
     whole point. The table of contents and the calls to action are useless
     there, and the layout collapses to a single column. */
  .article-toc,
  .article-related,
  .article-back,
  .guide-closing .btn {
    display: none !important;
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-body {
    padding-block: 0.5rem;
  }

  .article-section,
  .callout,
  .article-steps li,
  .doc-list,
  .cost-block,
  .article-checklist {
    break-inside: avoid;
  }

  .data-table__scroll {
    overflow-x: visible;
  }

  .data-table table {
    min-width: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ==========================================================================
   Anfragen im Kunden- und Betriebsbereich
   ========================================================================== */
.lead-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.lead-item {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  display: grid;
  gap: 0.6rem;
}

/* Abgeschlossen: sichtbar, aber zurückgenommen. */
.lead-item--done {
  background: var(--bg-soft);
}

.lead-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.lead-item__ref {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
}

a.lead-item__ref:hover {
  color: var(--accent-600);
  text-decoration: underline;
}

.lead-item__title {
  margin: 0;
  font-weight: 500;
}

.lead-item__meta {
  font-weight: 400;
  color: var(--ink-400);
  font-size: 0.9rem;
}

.lead-item__state {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.lead-item__facts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  font-size: 0.88rem;
}

.lead-item__facts dt {
  color: var(--ink-400);
  font-size: 0.8rem;
}

.lead-item__facts dd {
  margin: 0;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Statusfarben. Offen = Akzent, erledigt und zurückgezogen = neutral, damit
   der Kunde auf einen Blick sieht, wo noch etwas passiert.
   -------------------------------------------------------------------------- */
.lead-status,
.lead-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Pool-Anfragen: Zustand als Wort, nicht als dritte Zahl. */
.lead-status--available {
  background: var(--emerald-soft);
  border-color: var(--emerald);
  color: var(--emerald);
}

.lead-status--purchased {
  background: var(--accent-soft);
  border-color: var(--accent-600);
  color: var(--accent-700);
}

.lead-status--purchased .icon {
  vertical-align: -0.18em;
  margin-right: 0.25rem;
}

/* Anfragenpool als Tabelle: eine Zeile je Anfrage, volle Breite. */
.pool-group {
  margin: 0 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}

.pool-group > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}

.pool-group > summary::-webkit-details-marker {
  display: none;
}

.pool-group > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  font-weight: 800;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
}

.pool-group[open] > summary::before {
  content: "–";
}

.pool-group__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding-inline: 0.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}

.pool-group .pool-table {
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 0.6rem;
}

.pool-group .account-card__note {
  padding: 0 1.1rem 1rem;
}

.pool-bought-link {
  margin: 0 0 1.1rem;
}

.pool-bought-link .btn {
  justify-content: center;
}

.pool-help {
  margin: 0 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}

.pool-help summary {
  padding: 0.8rem 1.1rem;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  list-style: none;
}

.pool-help summary::-webkit-details-marker {
  display: none;
}

.pool-help summary::before {
  content: "+";
  display: inline-block;
  margin-right: 0.55rem;
  font-weight: 800;
  color: var(--accent-700);
}

.pool-help[open] summary::before {
  content: "–";
}

.pool-help__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem 2rem;
  padding: 0 1.1rem 1.1rem;
}

.pool-help__body h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.pool-table {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pool-table__row {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 0.9fr 0.9fr 0.9fr auto;
  align-items: center;
  gap: 0.5rem 1.1rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.pool-table__head {
  padding-block: 0.35rem;
  background: none;
  border: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.pool-table__row--purchased {
  border-color: var(--accent-600);
  background: var(--bg-warm);
}

.pool-table__row--slim {
  grid-template-columns: 1.3fr 1.4fr 1fr auto;
}

.pool-cell {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.pool-cell__label {
  display: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.pool-cell__sub {
  font-size: 0.8rem;
  color: var(--ink-500);
}

.pool-cell__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pool-cell__amount--accent {
  color: var(--accent-700);
  font-size: 1.08rem;
  font-weight: 800;
}

.pool-cell__amount--accent span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-500);
}

.pool-cell--price {
  padding: 0.45rem 0.7rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-600);
  border-radius: var(--r-md);
}

.pool-cell--action {
  justify-self: end;
  gap: 0.5rem;
}

.pool-cell .lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pool-cell .lead-chip {
  white-space: normal;
}

.account-grid--foot {
  margin-top: 1.4rem;
}

@media (max-width: 1000px) {
  .pool-table__row {
    grid-template-columns: 1fr 1fr;
  }

  .pool-table__head {
    display: none;
  }

  .pool-cell__label {
    display: block;
  }

  .pool-cell--action {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .pool-cell--action .btn {
    width: 100%;
  }
}

#public-main.is-partner-navigating {
  opacity: 0.68;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.partner-pool-detail {
  background: linear-gradient(180deg, #faf8f5 0, #fff 23rem);
}
.partner-pool-detail__back { margin-bottom: 1rem; }
.partner-pool-detail__intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.partner-pool-detail__intro-icon,
.pool-detail-card__icon {
  display: grid;
  place-items: center;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}
.partner-pool-detail__intro-icon { width: 3.6rem; height: 3.6rem; }
.partner-pool-detail__intro-copy { min-width: 0; }
.partner-pool-detail__intro-copy .kicker { margin: 0 0 0.25rem; }
.partner-pool-detail__intro h1 {
  margin: 0;
  font-size: clamp(2rem, 1.55rem + 1.6vw, 3rem);
  letter-spacing: -0.04em;
}
.partner-pool-detail__intro .lead-chips { margin-top: 0.65rem; }
.partner-pool-detail__intro-date {
  display: grid;
  gap: 0.2rem;
  min-width: 9rem;
  padding: 0.8rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.partner-pool-detail__intro-date span { font-size: 0.7rem; color: var(--ink-500); }
.partner-pool-detail__intro-date strong { font-size: 0.9rem; }
.partner-pool-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.75fr);
  align-items: start;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.partner-pool-detail__main { display: grid; gap: 1rem; min-width: 0; }
.pool-detail-card {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.pool-detail-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.pool-detail-card__head .kicker { margin: 0 0 0.15rem; font-size: 0.68rem; }
.pool-detail-card__head h2 { font-size: 1.05rem; }
.pool-detail-card__icon { flex: none; width: 2.5rem; height: 2.5rem; }
.pool-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}
.pool-detail-facts > div {
  padding: 0.85rem 0.9rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pool-detail-facts dt {
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.pool-detail-facts dd { margin: 0; font-weight: 650; }
.pool-detail-money {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}
.pool-detail-money__card > p {
  margin-top: 0.65rem;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--ink-500);
}
.pool-detail-money__card > small {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--ink-400);
}
.pool-detail-money__value {
  display: block;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.pool-detail-money__card--accent {
  background: var(--bg-warm);
  border-color: #f4c7a5;
}
.pool-detail-money__card--accent .pool-detail-money__value,
.pool-detail-money__card--accent .pool-detail-card__icon { color: var(--accent-700); }
.pool-detail-contact .pool-detail-card__head { margin-bottom: 0.65rem; }
.pool-detail-contact > p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-500);
}
.pool-detail-contact > p .icon { flex: none; margin-top: 0.12rem; }
.partner-pool-detail__purchase {
  position: sticky;
  top: calc(var(--site-header-height) + 1rem);
  display: grid;
  gap: 0.8rem;
}
.pool-purchase-card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.pool-purchase-card__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.pool-purchase-card__status > span:last-child { font-size: 0.7rem; color: var(--ink-500); }
.pool-purchase-card h2 { font-size: 1.35rem; letter-spacing: -0.025em; }
.pool-purchase-card > p {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-500);
}
.pool-purchase-card__price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0;
  padding: 0.9rem 0;
  border-block: 1px solid var(--line);
}
.pool-purchase-card__price span { font-size: 0.75rem; color: var(--ink-500); }
.pool-purchase-card__price strong {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.pool-purchase-card form, .pool-purchase-card form .btn { width: 100%; }
.pool-purchase-card__button--disabled,
.pool-purchase-card__button--disabled:hover {
  color: #fff;
  background: var(--ink-500);
  border-color: var(--ink-500);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
.pool-detail-unlock {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pool-detail-unlock__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.pool-detail-unlock__head > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--emerald);
  background: var(--emerald-soft);
  border-radius: var(--r-md);
}
.pool-detail-unlock__head .kicker { margin: 0 0 0.1rem; font-size: 0.68rem; }
.pool-detail-unlock__head h2 { font-size: 1.05rem; }
.pool-detail-unlock ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  list-style: none;
}
.pool-detail-unlock li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.7rem 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 600;
}
.pool-detail-unlock li .icon { flex: none; color: var(--emerald); }
.pool-detail-unlock > p {
  margin-top: 0.85rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-500);
}
.pool-purchase-card__reasons {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.8rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pool-purchase-card__reasons li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-500);
}
.pool-purchase-card__reasons .icon { flex: none; margin-top: 0.08rem; color: var(--accent-700); }
.pool-purchase-card__steps {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.pool-purchase-card__steps li { display: flex; align-items: center; gap: 0.65rem; }
.pool-purchase-card__steps li > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
}
.pool-purchase-card__steps div { display: grid; }
.pool-purchase-card__steps strong { font-size: 0.79rem; }
.pool-purchase-card__steps small { font-size: 0.69rem; color: var(--ink-500); }
.pool-detail-lock {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pool-detail-lock > span { flex: none; color: var(--emerald); }
.pool-detail-lock strong { font-size: 0.8rem; }
.pool-detail-lock p { margin-top: 0.2rem; font-size: 0.72rem; line-height: 1.5; color: var(--ink-500); }
.pool-detail-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem;
  font-size: 0.75rem;
  font-weight: 650;
}

@media (max-width: 900px) {
  .partner-pool-detail__intro { grid-template-columns: auto minmax(0, 1fr); }
  .partner-pool-detail__intro-date { grid-column: 1 / -1; }
  .partner-pool-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .partner-pool-detail__purchase { position: static; order: -1; }
}
@media (max-width: 620px) {
  .partner-pool-detail__intro { align-items: start; padding: 1rem; }
  .partner-pool-detail__intro-icon { width: 3rem; height: 3rem; }
  .partner-pool-detail__intro-date { min-width: 0; }
  .pool-detail-money, .pool-detail-facts, .pool-detail-unlock ul { grid-template-columns: minmax(0, 1fr); }
  .pool-purchase-card { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  #public-main.is-partner-navigating { transition: none; }
}

/* Die lokalen Kundenzustände (T11, R09.2). Eigene Klassen und nicht die
   Upstream-Namen der Quelle: der lokale Verkaufszustand ist eine andere Achse als
   das Etikett der Quelle, und ein gemeinsamer Klassenname wäre die Andeutung, es
   sei dasselbe. Die Werte kommen aus ``data/customer_requests.STATES``. */
.lead-status--in_pruefung,
.lead-status--nicht_in_vermittlung {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--amber);
}

.lead-status--in_vermittlung,
.lead-status--vollstaendig_vermittelt {
  background: var(--emerald-soft);
  border-color: var(--emerald);
  color: var(--emerald);
}

.lead-status--gestoppt,
.lead-status--laufzeit_beendet,
.lead-status--zurueckgezogen {
  background: var(--bg-soft);
  color: var(--ink-500);
}

/* Der eigene Projekttext des Kunden. Im Pool ist er gesperrt (R06.3), hier ist er
   die Auskunft an seinen Eigentümer — deshalb zurückgenommen gesetzt und nicht als
   Überschrift. */
.lead-item__message {
  margin: 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-500);
  font-size: 0.92rem;
}

/* Die benannte Naht (T15): sichtbar, aber nicht so laut wie eine Zusage. */
.lead-item__note--seam {
  color: var(--ink-400);
  font-size: 0.82rem;
}

.lead-item__stop {
  margin: 0.2rem 0 0;
}

.account-card__subhead {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-500);
}

.account-note {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.account-note h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.account-note p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.account-note__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-500);
}

.account-note__list li + li {
  margin-top: 0.35rem;
}

.lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.lead-item__partners {
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.lead-item__partners-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.lead-item__partners ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.lead-item__partners li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

.lead-item__partners li span {
  color: var(--ink-400);
  font-size: 0.83rem;
}

.lead-item__note,
.lead-item__warn {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-500);
}

.lead-item__warn {
  color: var(--amber);
}

.lead-message {
  margin: 1rem 0;
  padding: 0.95rem 1.1rem;
  background: var(--bg-soft);
  border-radius: var(--r-md);
}

.lead-message h3,
.lead-message p:last-child {
  margin-bottom: 0;
}

.lead-message p {
  margin: 0 0 0.6rem;
  line-height: 1.65;
}

/* Gesperrte Kontaktdaten: erklärt, statt nur zu fehlen. */
.lead-locked {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}

.lead-locked__icon {
  flex: none;
  color: var(--accent);
}

.lead-locked__title {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.lead-locked p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-500);
}

/* Projektdateien und 3D-Ansicht einer gekauften Anfrage (T16).

   Die Demo-Kachel ist absichtlich als solche zu sehen — gestrichelter Rahmen, keine
   Linkfarbe, kein Zeigefinger: design §9 verlangt, dass ein Platzhalter ohne
   Anbieterzugang „açıkça demo“ bleibt. Sie sieht deshalb nicht aus wie ein Knopf. */
.asset-tiles {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.asset-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.asset-tile--demo {
  border-style: dashed;
  border-color: var(--line-strong);
}

.asset-tile__icon {
  flex: none;
  color: var(--accent);
}

.asset-tile__kind {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.asset-tile__label {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  word-break: break-word;
}

.asset-tile__note {
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ==========================================================================
   Anmeldung eines Fachbetriebs (templates/partner_register.html)
   ========================================================================== */
/* Baut auf .field und .consent-box der Kontaktseite auf. Neu ist hier nur, was
   ein serverseitig geprüftes Formular braucht: eine Fehlermeldung am Feld und
   ein sichtbar markiertes Feld. Beides gab es bisher nicht, weil die
   Kontaktseite gar nicht absendet. */
.reg-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.15rem;
  margin-top: 1.25rem;
}

.reg-form__group {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.reg-form__group h2 {
  margin: 0;
  font-size: 1.05rem;
}

.reg-form__group p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--ink-400);
}

/* Rot am Feld, nicht nur oben in einer Sammelmeldung: sonst sucht man bei
   zwanzig Feldern, welches gemeint ist. */
.field__error {
  font-size: 0.82rem;
  font-weight: 500;
  color: #b91c1c;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: #b91c1c;
}

.field__hint {
  font-size: 0.8rem;
  color: var(--ink-400);
}

/* Die drei Zustimmungen. Jede in ihrer eigenen Box, weil sie getrennt vorgelegt
   werden (R01.4) — ein Block mit drei Häkchen liest sich wie eine Zustimmung. */
.consent-box + .consent-box {
  margin-top: 0.6rem;
}

.consent-box--invalid {
  border-color: #b91c1c;
  background: #fef2f2;
}

/* Der vollständige Vertragstext im Formular. Aufklappbar statt verlinkt, damit
   das Lesen die Eingabe nicht verwirft; der Link auf die eigene Seite steht
   daneben. */
.terms-embed {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}

.terms-embed > summary {
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.terms-embed__body {
  max-height: 26rem;
  overflow-y: auto;
  padding: 0 1rem 1rem;
  font-size: 0.89rem;
  line-height: 1.65;
}

.terms-embed__body h3 {
  margin: 1.1rem 0 0.35rem;
  font-size: 0.95rem;
}

.terms-embed__body p {
  margin: 0 0 0.55rem;
}

.terms-embed__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  padding: 0 1rem 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

/* Der Stand der eigenen Anmeldung. */
.status-steps {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  counter-reset: step;
}

.status-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.93rem;
}

.status-steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
}

.status-facts {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.status-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}

.status-facts dt {
  font-weight: 600;
  min-width: 12rem;
}

.status-facts dd {
  margin: 0;
  color: var(--ink-400);
}

@media (max-width: 720px) {
  .reg-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mehrere Häkchen in einer Box: die Leistungsauswahl. Die Zustimmungen bekommen
   dagegen je eine eigene Box, siehe oben. */
.consent-box label + label {
  margin-top: 0.5rem;
}

/* ==========================================================================
   Anfragenpool: Blätterleiste (T10, R06.1)
   ==========================================================================
   Nummern statt „mehr laden“: die Reihenfolge des Pools ist stabil
   (Veröffentlichung, dann Zeilennummer), also bedeutet eine Seitenzahl morgen
   dasselbe wie heute. Der Zustand steht als Text zwischen den Schaltflächen und
   nicht nur als Pfeil — „Seite 2 von 3“ ist die Angabe, die ein Screenreader
   ansagen kann. */
.pool-pager {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.pool-pager__state {
  color: var(--ink-400);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   14. Homepage-Funnel v3 (Kino-Hero, Laufband, Ablauf, AR-Band, Entwürfe)
   ========================================================================== */

/* ── Kino-Hero: dunkle Bühne ─────────────────────────────────────────── */
.cine {
  position: relative;
  overflow: clip;
  color: #f5efe8;
  background: #14100c;
}

.cine__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cine__bg i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

.cine__bg i:nth-child(1) {
  width: 44rem;
  height: 30rem;
  left: -12rem;
  top: -12rem;
  background: radial-gradient(circle, rgb(249 115 22 / 45%), transparent 70%);
  animation: cine-drift 16s ease-in-out infinite alternate;
}

.cine__bg i:nth-child(2) {
  width: 36rem;
  height: 26rem;
  right: -10rem;
  top: 8rem;
  background: radial-gradient(circle, rgb(124 45 18 / 70%), transparent 70%);
  animation: cine-drift 20s ease-in-out infinite alternate-reverse;
}

.cine__bg i:nth-child(3) {
  width: 30rem;
  height: 20rem;
  left: 30%;
  bottom: -14rem;
  background: radial-gradient(circle, rgb(180 83 9 / 40%), transparent 70%);
  animation: cine-drift 24s ease-in-out infinite alternate;
}

.cine__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgb(255 255 255 / 80%), transparent 60%),
    radial-gradient(1px 1px at 32% 8%, rgb(255 255 255 / 60%), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 18%, rgb(255 255 255 / 70%), transparent 60%),
    radial-gradient(1px 1px at 68% 30%, rgb(255 255 255 / 55%), transparent 60%),
    radial-gradient(2px 2px at 82% 12%, rgb(253 186 116 / 90%), transparent 60%),
    radial-gradient(1px 1px at 90% 34%, rgb(255 255 255 / 60%), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 38%, rgb(255 255 255 / 50%), transparent 60%),
    radial-gradient(1px 1px at 44% 32%, rgb(255 255 255 / 55%), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 44%, rgb(253 186 116 / 70%), transparent 60%),
    radial-gradient(1px 1px at 6% 30%, rgb(255 255 255 / 50%), transparent 60%);
  animation: cine-stars 4.5s ease-in-out infinite;
}

.cine__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 4.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4.5%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(60rem 30rem at 50% 20%, #000 30%, transparent 75%);
}

.cine__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
}

/* Dikey yan şerit: çok geniş ekranlarda ölü kalan körüğü doldurur. */
.cine__side {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  z-index: 1;
  display: none;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(245 239 232 / 28%);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.cine__side b {
  color: var(--accent);
  font-weight: 400;
}

@media (min-width: 1500px) {
  .cine__side {
    display: block;
  }
}

/* Çok geniş ekran: ızgara ve başlık büyür, körük küçülür. */
@media (min-width: 1680px) {
  .cine__grid {
    max-width: 1520px;
  }

  .cine__copy h1 {
    font-size: clamp(2.5rem, 1.35rem + 4.1vw, 4rem);
  }
}

.cine__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.32rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fed7aa;
  background: rgb(249 115 22 / 14%);
  border: 1px solid rgb(249 115 22 / 40%);
  border-radius: var(--r-pill);
}

.cine__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgb(74 222 128 / 70%);
  animation: cine-ping 2.2s ease-out infinite;
}

.cine__copy h1 {
  margin: 1rem 0 0;
  font-size: clamp(2.5rem, 1.35rem + 4.1vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}

.cine__grad {
  background: linear-gradient(100deg, #fdba74 0%, var(--accent) 45%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cine__lead {
  margin-top: 1.1rem;
  max-width: 33rem;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgb(245 239 232 / 78%);
}

.cine__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.7rem;
}

.cine__cta {
  box-shadow: 0 10px 34px rgb(249 115 22 / 45%), 0 2px 8px rgb(249 115 22 / 30%);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cine__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgb(249 115 22 / 55%), 0 2px 8px rgb(249 115 22 / 30%);
}

.cine__ghost {
  color: #fff;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 22%);
  backdrop-filter: blur(6px);
}

.cine__ghost:hover {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 35%);
}

.cine__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.2rem;
  margin: 2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.cine__stats div {
  margin: 0;
}

.cine__stats dt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.cine__stats dt .icon {
  color: var(--accent);
}

.cine__stats dd {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  color: rgb(245 239 232 / 60%);
}

.cine__visual {
  min-width: 0;
}

.cine__scroll {
  position: relative;
  display: flex;
  padding-bottom: 1.4rem;
  margin-block: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cine__scroll a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(245 239 232 / 45%);
}

.cine__scroll a:hover {
  color: #fed7aa;
  text-decoration: none;
}

.cine__scroll .icon {
  animation: cine-bob 2.4s ease-in-out infinite;
}

/* ── Glas-Planerkarte ────────────────────────────────────────────────── */
.glass {
  position: relative;
  overflow: hidden;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 20px;
  box-shadow: 0 40px 90px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 12%);
  backdrop-filter: blur(14px);
  animation: glass-float 7s ease-in-out infinite, glass-glow 6s ease-in-out infinite;
}

/* Langsamer Lichtstreif über das Glas — reine Deko, klickbar bleibt alles. */
.glass::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 9%) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: glass-sheen 8s ease-in-out infinite;
  pointer-events: none;
}

.glass__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  background: rgb(0 0 0 / 25%);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.glass__bar span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 25%);
}

.glass__bar span:first-child {
  background: var(--accent);
}

.glass__bar em {
  margin-left: 0.5rem;
  font-style: normal;
  font-size: 0.75rem;
  color: rgb(245 239 232 / 55%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glass__bar b {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fed7aa;
  background: rgb(249 115 22 / 20%);
  border: 1px solid rgb(249 115 22 / 45%);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
}

.glass__stage {
  position: relative;
  padding: 0.6rem 0.6rem 0;
}

.glass__ph {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}

.glass__tag {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  transform: translateX(-50%);
  padding: 0.15rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgb(0 0 0 / 55%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--r-pill);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.glass__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  background: rgb(20 16 12 / 72%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 26px rgb(0 0 0 / 40%);
  backdrop-filter: blur(6px);
  animation: glass-chip 5.5s ease-in-out infinite;
}

.glass__chip--ar {
  top: 1.1rem;
  right: 1.1rem;
  color: #fed7aa;
  border-color: rgb(249 115 22 / 55%);
}

.glass__chip--req {
  bottom: 2.2rem;
  left: 1.1rem;
  color: #a7f3d0;
  border-color: rgb(52 211 153 / 50%);
  animation-delay: 2.75s;
}

@keyframes cine-drift {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(4rem, 2.5rem) scale(1.12);
  }
}

@keyframes cine-stars {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes cine-ping {
  0% {
    box-shadow: 0 0 0 0 rgb(74 222 128 / 70%);
  }
  70% {
    box-shadow: 0 0 0 9px rgb(74 222 128 / 0%);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(74 222 128 / 0%);
  }
}

@keyframes cine-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@keyframes glass-float {
  0%,
  100% {
    transform: translateY(0) rotate(-0.4deg);
  }
  50% {
    transform: translateY(-10px) rotate(0.4deg);
  }
}

@keyframes glass-glow {
  0%,
  100% {
    box-shadow: 0 40px 90px rgb(0 0 0 / 45%), 0 0 0 rgb(249 115 22 / 0%), inset 0 1px 0 rgb(255 255 255 / 12%);
  }
  50% {
    box-shadow: 0 40px 90px rgb(0 0 0 / 45%), 0 0 55px rgb(249 115 22 / 28%), inset 0 1px 0 rgb(255 255 255 / 12%);
  }
}

@keyframes glass-chip {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes glass-sheen {
  0%,
  55% {
    transform: translateX(-70%);
  }
  90%,
  100% {
    transform: translateX(70%);
  }
}

/* ── Laufband ────────────────────────────────────────────────────────── */
/* Das Band ist leicht gedreht; .funnel clippt den Überstand, damit kein
   horizontaler Scrollbalken entsteht (sticky bleibt erhalten — clip!). */
.funnel {
  overflow-x: clip;
}

/* Dunkles Bett als Parallelogramm: Die Neigung sitzt auf dem Wrapper, das Band
   darin läuft gerade — so sind Oberkante, Band und Unterkante alle parallel.
   Die Oberkante trifft auf Hero-Dunkel derselben Farbe (unsichtbare Naht), die
   Unterkante legt sich als bewusste Diagonale über die Folgesektion.Negative
   Ränder überlappen die Nachbarn, damit an den Ecken nie Weiß durchblitzt. */
.marquee-band {
  position: relative;
  z-index: 1;
  background: #14100c;
  padding-block: 2.2rem 0;
  margin-block: -1.9rem 0;
  transform: rotate(-0.6deg) scale(1.03);
}

.marquee {
  overflow: hidden;
  padding-block: 0.8rem;
  background: linear-gradient(100deg, #fb923c 0%, var(--accent-600) 55%, var(--accent-700) 100%);
  /* Nur oben eine Kante: Unten würde das dunkle Braun als schwarzer Saum
     unter dem Orange lesen — dort soll Orange direkt auf Hell treffen. */
  border-top: 1px solid var(--accent-700);
  border-bottom: 0;
}

.marquee__run {
  display: inline-flex;
  align-items: center;
  padding-right: 0.5rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

/* Scroll-driven easing runs in JavaScript; no autoplay or CSS transition. */
.marquee__track {
  display: flex;
  width: max-content;
  animation: none;
  transform: translate3d(var(--marquee-x, 0px), 0, 0);
}

.marquee__run {
  display: inline-flex;
  align-items: center;
  padding-right: 0.5rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.marquee__run i {
  margin-inline: 0.9rem;
  font-style: normal;
  opacity: 0.7;
}

/* ── Funnel-Rhythmus: mehr Luft zwischen den Stapeln ─────────────────── */
.funnel .section__note {
  margin-top: 1.5rem;
}

/* Ablauf atmet oben/unten extra: Die geneigten Nachbarbänder (−0,6°/+0,8°)
   rücken optisch heran und würden die Sektion sonst einklemmen. */
#so-funktioniert-es {
  padding-top: calc(var(--section-y) + 1.5rem);
  padding-bottom: calc(var(--section-y) + 1.5rem);
}

.funnel .section__heading {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.funnel .faq {
  gap: 0.9rem;
}

.funnel .faq-more {
  margin-top: 1.75rem;
}

.funnel .section--soft {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Kopf und Fuß haben überall dieselbe Breite wie der Startseiten-Hero:
   1120px, ab 1680px 1520px. */

@media (min-width: 1680px) {
  :root {
    --site-width: 1520px;
  }

  .funnel .container:not(.container--narrow),
  .account-page .container:not(.container--narrow) {
    max-width: 1520px;
  }

  /* Produkte + FAQ bleiben lesbar schmal: Liste und Akkordeons tragen
     keine XL-Breite. */
  #produkte .container {
    max-width: 1120px;
  }
}

/* ── Ablauf: vier Karten mit Geister-Nummern ─────────────────────────── */
.flowband {
  background: linear-gradient(180deg, #fff 0%, var(--bg-warm) 18%, var(--bg-warm) 82%, #fff 100%);
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

.flow-card {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.35rem 1.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.flow-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--sh-lg);
}

.flow-card__no {
  position: absolute;
  top: -0.7rem;
  right: 0.4rem;
  font-size: 4.2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--accent-soft);
  -webkit-text-stroke: 1.5px var(--accent);
  line-height: 1;
  user-select: none;
}

.flow-card__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-700));
  border-radius: var(--r-md);
  box-shadow: 0 8px 18px rgb(249 115 22 / 35%);
}

.flow-card h3 {
  position: relative;
  margin: 0.9rem 0 0.35rem;
  font-size: var(--fs-h3);
}

.flow-card p {
  position: relative;
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-700);
}

/* ── AR-Zone: dunkles Parallelogramm mit zwei statischen Schrägbändern ──
   Neigung +0,8° — bewusst anders als das obere Band (−0,6°). Die Bänder tragen
   kurzen statischen Text (keine Laufschrift). Negative Ränder überlappen die
   Nachbarsektionen, damit an den Ecken nie Hell durchblitzt. */
.arband-zone {
  position: relative;
  z-index: 1;
  background: #1b1512;
  margin-block: -2rem;
  padding-block: 0;
  transform: rotate(0.8deg) scale(1.03);
}

/* Gegenwinkel für die AR-Zone (−0,8°): bewusst anders als Weg 1. */
.arband-zone--flip {
  transform: rotate(-0.8deg) scale(1.03);
}

.tiltband {
  background: linear-gradient(100deg, #fb923c 0%, var(--accent-600) 55%, var(--accent-700) 100%);
  border-block: 1px solid var(--accent-700);
  text-align: center;
  overflow: hidden;
}

.tiltband span {
  display: block;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.tiltband span i {
  margin-inline: 0.7rem;
  font-style: normal;
  opacity: 0.7;
}

/* ── AR-Band ─────────────────────────────────────────────────────────── */
.arband {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  color: #f5efe8;
  background:
    radial-gradient(36rem 20rem at 12% 110%, rgb(249 115 22 / 28%), transparent 65%),
    #1b1512;
}

.arband__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3rem);
}

.arband h2 {
  margin: 0.6rem 0 0;
  font-size: var(--fs-display-2);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.arband p {
  color: rgb(245 239 232 / 75%);
  max-width: 32rem;
}

.arband .btn {
  margin-top: 1.2rem;
}

.arband__ph {
  min-height: 16rem;
  border-color: rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 5%);
}

.arband__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.arband__ticks li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgb(245 239 232 / 75%);
}

.arband__ticks .icon {
  color: var(--accent);
}

/* ── Entwürfe ────────────────────────────────────────────────────────── */
.kicker-pill {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-700);
  background: var(--accent-soft);
  border: 1px solid rgb(249 115 22 / 35%);
  border-radius: var(--r-pill);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.chip:hover {
  color: var(--accent-700);
  border-color: var(--accent);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}

.chip.is-active {
  color: #fff;
  background: #17140f;
  border-color: #17140f;
}

#produkte .footnote {
  margin-top: 1.2rem;
}

/* Modellzeilen statt Karten: ein Klickziel pro Entwurf, keine Buttons. */
.model-list {
  display: grid;
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}

/* display:grid schlägt das hidden-Attribut — ohne diese Regel wären alle
   Panels sichtbar und die Tabs wirkungslos. */
/* display:grid schlägt das hidden-Attribut — ohne diese Regel wären alle
   Panels sichtbar und die Tabs wirkungslos. */
.model-list[hidden] {
  display: none;
}

/* Nach unten silikleşen Fortsetzung: Die ersten drei Zeilen stehen voll,
   danach klingt die Liste aus — dahinter liegt die Kategorieseite. */
.model-list .model-row:nth-child(n+4) {
  opacity: 0.55;
}

.model-list .model-row:nth-child(n+5) {
  opacity: 0.35;
}

.model-list .model-row:nth-child(n+4):hover {
  opacity: 1;
}

.model-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 1rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-700);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.model-more:hover {
  text-decoration: none;
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}

.model-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.model-row:hover {
  text-decoration: none;
  background: var(--bg-soft);
  border-bottom-color: var(--accent);
}

.model-row__no {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}

.model-row__main {
  flex: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
  min-width: 0;
}

.model-row__main strong {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.model-row__meta {
  font-size: 0.86rem;
  color: var(--ink-500);
}

.model-row__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  transition: background 0.18s ease, color 0.18s ease;
}

.model-row__go .icon {
  transition: transform 0.18s ease;
}

.model-row:hover .model-row__go {
  background: var(--accent);
  color: #fff;
}

.model-row:hover .model-row__go .icon {
  transform: translateX(3px);
}

/* Produktkarten als eigenständige Karten mit klarer Hierarchie. */
.catalog-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.catalog-row {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 250px;
  gap: 1.5rem;
  align-items: start;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.catalog-row:hover,
.catalog-row:focus-within {
  border-color: var(--line-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.catalog-row__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.catalog-row__body h3 {
  margin: 0.4rem 0 0.5rem;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.catalog-row__body h3 a { color: var(--ink); text-decoration: none; }
.catalog-row__body h3 a:hover { color: var(--accent-700); }
.catalog-row__body .kicker { margin: 0; }

.catalog-row__description {
  margin: 0 0 0.9rem;
  color: var(--ink-700);
  font-size: 0.92rem;
  line-height: 1.6;
}

.catalog-row__highlights {
  display: grid;
  gap: 0.45rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.87rem;
  color: var(--ink-700);
}

.catalog-row__highlights li { display: flex; align-items: start; gap: 0.55rem; }
.catalog-row__highlights .icon { flex: none; margin-top: 0.2rem; color: var(--accent-700); }

.catalog-row__action {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  align-self: stretch;
}

.catalog-row__price-label {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.catalog-row__price {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.catalog-row__price sup { font-size: 0.65rem; }
.catalog-row__action .price-note { font-size: 0.78rem; color: var(--ink-500); }

.catalog-row__note { margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--ink-500); }
.catalog-row__body, .catalog-row__action { min-width: 0; overflow-wrap: anywhere; }

/* Maßvarianten als Kartenfuß, klar zum Modell gehörend. */
.product-sizes {
  min-width: 0;
  margin-top: 0.25rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}

.catalog-row > .product-sizes { grid-column: 1 / -1; }
.catalog-row > .variant-select { grid-column: 1 / -1; min-width: 0; }
/* Maßliste des Katalogs (Makro `size_links`) ------------------------------- */
.product-sizes__label { margin: 0 0 0.7rem; font-size: 0.9rem; font-weight: 700; }
.product-sizes__label span {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-500);
}
.product-sizes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-sizes__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.product-sizes__link:hover,
.product-sizes__link:focus-visible,
.product-sizes__link[aria-current="page"] {
  color: var(--accent-700);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}
.product-sizes__note { margin: 0.7rem 0 0; color: var(--ink-500); font-size: 0.75rem; }

/* Variantenauswahl im Katalog: geschlossen starten, per Toggle gestaffelt
   öffnen. Alles hinter dem html.js-Gate — ohne JS bleibt die Liste sichtbar. */
.variant-select { display: grid; gap: 1.1rem; }
.variant-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.variant-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }
.variant-toggle__text { display: grid; gap: 0.15rem; }
.variant-toggle__text strong { font-size: 0.95rem; }
.variant-toggle__text span span, .variant-toggle__text > span {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-500);
}
.variant-toggle__chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--accent-700);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: transform 0.25s ease;
}
.variant-select.is-open .variant-toggle__chevron { transform: rotate(180deg); }
html.js .variant-toggle { display: flex; }
html.js .variant-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}
html.js .variant-select.is-open .variant-collapse { grid-template-rows: 1fr; }
.variant-collapse__inner { overflow: hidden; min-height: 0; }
html.js .variant-rows .variant-size {
  opacity: 0;
  translate: 0 -10px;
  transition: opacity 0.35s ease, translate 0.35s ease;
}
html.js .variant-select.is-open .variant-rows .variant-size {
  opacity: 1;
  translate: none;
  transition-delay: calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  html.js .variant-collapse { transition: none; }
  html.js .variant-rows .variant-size,
  html.js .variant-select.is-open .variant-rows .variant-size {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .color-modal.is-open .color-modal__panel { animation: none; }
  .marquee__track { animation: none; transform: none; }
}
.variant-rows { margin-top: 0; border-top: 0; }
.variant-rows .model-row { padding: 0.85rem 0.25rem; }
.variant-rows .model-row__main strong { font-size: 0.95rem; }
.variant-rows .model-row__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.variant-rows .variant-swatch { width: 0.85rem; height: 0.85rem; }
.model-row--custom { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding-inline: 0.75rem; margin-top: 0.6rem; }
.model-row--custom:hover { border-style: solid; }
.variant-swatch {
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgb(23 20 15 / 25%);
}
.color-swatch {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgb(23 20 15 / 25%);
  background: var(--bg-soft);
}

/* ==========================================================================
   Maß-Editor der Produktseite

   Eine Karte, drei nummerierte Gruppen: Aufbau, Maße, Farbe. Jede Änderung
   wirkt sofort (site.js schreibt Auswahlzeile, Preishinweis und Adresse fort);
   ohne JavaScript bleibt es ein GET-Formular mit Absende-Knopf.
   ========================================================================== */
.size-editor {
  min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.size-editor__head {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.size-editor__head h2 {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.size-editor__head > p {
  max-width: 40ch;
  margin-top: 0.3rem;
  font-size: 0.815rem;
  line-height: 1.5;
  color: var(--ink-500);
}

.size-editor__fields {
  display: grid;
}

.config-section {
  min-width: 0;
  margin: 0;
  padding: 1.15rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.size-editor__fields > .config-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.config-section + .config-section {
  margin-top: 1.15rem;
}

.config-section__legend,
.config-section__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 0.85rem;
}

/* Die Nummer ordnet die Gruppe in den Ablauf ein — sie ist der einzige
   Hinweis darauf, dass hier drei Entscheidungen hintereinander stehen. */
.config-section__number {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-pill);
}

.config-section__copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.config-section__copy > strong,
.config-section__copy h3 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.config-section__copy small,
.config-section__copy p {
  font-size: 0.755rem;
  line-height: 1.4;
  color: var(--ink-500);
}

.size-editor input:not([type="radio"]),
.size-editor select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

/* Bauart: zwei Karten mit Motivfläche, eine Wahl. */
.montage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.65rem;
}

.montage-card {
  position: relative;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.55rem 0.55rem 0.7rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.2s ease;
}

.montage-card:hover {
  border-color: #fdba74;
  box-shadow: var(--sh-sm);
}

.montage-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.montage-card__visual {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--r-md) - 4px);
}

.montage-card__visual .img-ph {
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: calc(var(--r-md) - 4px);
}

.montage-card__visual .img-ph__content { gap: 0.3rem; padding: 0.5rem; }
.montage-card__visual .img-ph__icon { width: 1.85rem; height: 1.85rem; }
.montage-card__visual .img-ph__label { font-size: 0.7rem; line-height: 1.25; }

.montage-card__text { display: grid; gap: 0.1rem; padding-inline: 0.2rem; }
.montage-card__label { font-size: 0.88rem; font-weight: 700; line-height: 1.25; }
.montage-card__hint { font-size: 0.71rem; line-height: 1.4; color: var(--ink-500); }

.montage-card__check {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: none;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: #fff;
  background: var(--accent-600);
  border: 2px solid #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}

.montage-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

.montage-card:has(input:checked) .montage-card__check { display: grid; }
.montage-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Maße: Zahl in der Mitte, −/+ links und rechts. Ohne JavaScript entfallen die
   Knöpfe (html.js-Gate) und das Feld nimmt die ganze Zeile ein. */
.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.9rem 0.75rem;
}

.stepper {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.stepper__head {
  display: grid;
  gap: 0.05rem;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}

.stepper__head > span:first-child small {
  margin-left: 0.2rem;
  font-size: 0.68rem;
  font-weight: 450;
  color: var(--ink-400);
}

.stepper__head span:last-child {
  font-size: 0.68rem;
  font-weight: 450;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stepper__row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.stepper__input {
  position: relative;
  flex: 1;
  min-width: 0;
}

.size-editor .stepper__input input {
  padding-right: 2.2rem;
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.stepper__input > span {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--ink-400);
  pointer-events: none;
}

.size-editor .stepper__input input:hover { border-color: var(--ink-300); }

.size-editor .stepper__input input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.size-editor .stepper__input input[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgb(220 38 38 / 18%);
}

.stepper__btn {
  display: none;
  flex: none;
  width: 2.6rem;
  min-height: 46px;
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1;
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

html.js .stepper__btn { display: grid; place-items: center; }

.stepper__btn:hover {
  color: var(--accent-700);
  background: var(--accent-soft);
  border-color: #fdba74;
}

.stepper__btn:active { background: var(--accent); border-color: var(--accent); color: #fff; }

.size-editor__error {
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
}

.size-editor__error[hidden] { display: none; }

/* Kuratierte Maßzeilen als Abkürzung: ein Tipp statt zweier Eingaben. */
.size-presets {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.size-presets__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.size-presets__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.size-presets__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.size-presets__chip:hover {
  color: var(--accent-700);
  border-color: #fdba74;
  background: #fffaf7;
  text-decoration: none;
}

.size-presets__chip.is-current {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* ==========================================================================
   Farbwahl: Auslöser in der Karte, Palette im Dialog
   ========================================================================== */
/* Ohne JavaScript bleibt die native Auswahlliste bedienbar. */
.appearance-field { display: grid; gap: 0.5rem; }
.appearance-native { display: grid; gap: 0.4rem; }
.appearance-native label { display: grid; gap: 0.35rem; font-size: 0.8rem; font-weight: 650; }
html.js .appearance-native { display: none; }

.color-picker { display: none; position: relative; }
html.js .color-picker { display: block; }

.color-picker__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 62px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.color-picker__trigger:hover {
  border-color: #fdba74;
  background: #fffaf7;
  box-shadow: var(--sh-sm);
}

.color-picker__text { display: grid; gap: 0.05rem; min-width: 0; }

.color-picker__text strong,
.color-picker__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-picker__text strong { font-size: 0.92rem; font-weight: 650; }
.color-picker__text small { font-size: 0.73rem; color: var(--ink-500); }

.color-picker__action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--accent-700);
}

/* Musterfläche: Lichtstreifen und Profilschnitt wie die Oberflächenmuster im
   3D-Konfigurator, damit dieselbe Farbe hier und dort gleich wirkt. */
.color-combo-swatch {
  display: block;
  width: 3.1rem;
  height: 2.25rem;
  overflow: hidden;
  transform: skewX(-6deg);
  border: 1px solid rgb(23 20 15 / 24%);
  border-radius: 3px;
}

.color-combo-swatch--none {
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-400);
  background: var(--bg-soft);
  transform: none;
}

.gloss-sample {
  background-image:
    linear-gradient(118deg, transparent 12%, rgb(255 255 255 / 18%) 32%, rgb(255 255 255 / 86%) 42%, rgb(255 255 255 / 8%) 48%, transparent 65%),
    linear-gradient(160deg, rgb(0 0 0 / 22%), transparent 45%, rgb(0 0 0 / 35%));
  clip-path: polygon(15% 7%, 100% 0, 85% 100%, 0 100%);
  border-radius: 0;
}

.color-picker__sample.gloss-sample,
.ral-choice__sample.gloss-sample {
  flex-shrink: 0;
  width: 3.25rem;
  height: 2.5rem;
  margin: 0;
}

.color-combo-swatch--none.gloss-sample {
  background-image: none;
  clip-path: none;
}

/* Von JavaScript gesetzt, wenn eine andere Oberfläche gewählt ist. */
.finish-tile__swatch--glatt-glanzend {
  background-image: linear-gradient(115deg, rgb(0 0 0 / 28%), transparent 38%, rgb(255 255 255 / 55%) 50%, transparent 62%, rgb(0 0 0 / 22%)) !important;
}

.finish-tile__swatch--feinstruktur-matt {
  background-image: radial-gradient(rgb(0 0 0 / 30%) 1px, transparent 1.3px) !important;
  background-size: 4px 4px;
}

/* Palette als Dialog über der Seite ---------------------------------------- */
.color-modal[hidden] { display: none; }

.color-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 2vw, 1.25rem);
  background: rgb(23 20 15 / 62%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.color-modal.is-open .color-modal__panel { animation: color-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }

@keyframes color-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

.color-modal__panel {
  width: min(38rem, 100%);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  overflow: hidden;
}

.color-modal__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.color-modal__head h2 { margin: 0.3rem 0 0; font-size: var(--fs-h3); letter-spacing: -0.02em; }

.color-modal__head > div > p:last-child {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--ink-500);
}

.color-modal__head .kicker {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
}

.color-modal__search {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 1.1rem;
  font: inherit;
  font-size: 0.92rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  box-shadow: inset 0 1px 3px rgb(23 20 15 / 6%);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.color-modal__search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.color-modal__list {
  flex: 1;
  min-height: 12rem;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0 0.2rem 0.3rem 0;
  border-block: 1px solid var(--line);
}

.color-picker__family {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 0;
  margin: 0;
  padding: 0.6rem 0.55rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.color-picker__count {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.08rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  vertical-align: 0.1em;
}

.color-picker__family[hidden] { display: none; }

/* Eine Farbe je Zeile, die ganze Zeile ist das Ziel. */
.ral-choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  padding: 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink-800);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.ral-choice[hidden] { display: none; }
.ral-choice:hover { background: var(--bg-soft); }

.ral-choice.is-current {
  background: var(--accent-soft);
  border-radius: var(--r-md);
  border-bottom-color: transparent;
}

.ral-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }

.ral-choice__sample {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgb(23 20 15 / 14%);
}

.ral-choice__text { display: grid; gap: 0.1rem; min-width: 0; }
.ral-choice__text strong { font-size: 0.9rem; font-weight: 650; }
.ral-choice__text > span { font-size: 0.78rem; color: var(--ink-500); overflow-wrap: anywhere; }

.ral-choice__selected {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  flex-shrink: 0;
  color: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.ral-choice[aria-pressed="true"] .ral-choice__selected {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.color-picker__other-intro {
  min-width: 0;
  margin-top: 1rem;
  padding: 1rem 0.55rem 0.5rem;
  border-top: 1px solid var(--line);
}

.color-picker__other-intro h3 { margin: 0 0 0.35rem; font-size: 0.98rem; }
.color-picker__other-intro p { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--ink-500); }
.color-picker__empty { padding: 2rem 0.75rem; font-size: 0.85rem; text-align: center; color: var(--ink-500); }

.color-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
}

.color-modal__foot > p { margin: 0; font-size: 0.74rem; color: var(--ink-500); }
.color-modal__foot > div { display: flex; gap: 0.6rem; }
.color-modal__foot .btn { white-space: nowrap; }

@media (max-width: 560px) {
  .color-modal__panel { max-height: calc(100dvh - 1rem); }
  .color-modal__head > div > p:last-child { display: none; }
  .color-modal__foot { flex-direction: column; align-items: stretch; }
  .color-modal__foot > div { width: 100%; }
  .color-modal__foot > div .btn { flex: 1; }
}

/* ==========================================================================
   Kurzanfrage — links der Zusammenhang, rechts eine Frage

   Der Dialog nimmt jetzt die Breite, die da ist, und teilt sie: eine ruhige
   Spalte mit der getroffenen Auswahl und dem Ablauf, daneben nur die Frage,
   die gerade dran ist. Vorher stand beides übereinander in einem schmalen
   Kasten, und die Auswahl lag in einem weiteren Kasten darin.

   Ebenen: Dialogfläche (weiß) → linke Spalte (warm getönt). Innerhalb der
   Frage tragen nur die Antwortkarten eine Kante — sonst nichts.
   ========================================================================== */
.quick-request[hidden] { display: none; }

.quick-request {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  background: rgb(23 20 15 / 58%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.quick-request__panel {
  position: relative;
  display: flex;
  width: min(64rem, 100%);
  max-height: calc(100dvh - 1.5rem);
  overflow: hidden;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  animation: color-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.quick-request__panel:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .quick-request__panel { animation: none; }
}

/* Das Kreuz schwebt über der Fläche, statt eine eigene Kopfzeile zu brauchen. */
.dialog-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--ink-700);
  background: rgb(255 255 255 / 90%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.dialog-close:hover { color: var(--accent-700); border-color: var(--accent); background: var(--accent-soft); }

.quick-request__panel > .dialog-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  box-shadow: var(--sh-sm);
}

/* Zwei Spalten ------------------------------------------------------------- */
body .site-main .container.request-flow-page { max-width: 1040px; }

.request-flow-page__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.request-flow-page__head h1 {
  margin: 0.55rem 0 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem);
  letter-spacing: -0.025em;
}

.request-flow-page__head > p:last-child {
  max-width: 54ch;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.request-flow {
  display: grid;
  grid-template-columns: 19.5rem minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  text-align: left;
}

.request-flow[hidden],
.request-flow [hidden],
.request-flow__success[hidden] { display: none !important; }

/* Linke Spalte: Auswahl, Ablauf, Zusage ------------------------------------ */
.request-rail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
}

.request-flow-page .request-rail { border-radius: var(--r-lg) 0 0 var(--r-lg); }

.request-rail__product { display: grid; gap: 0.4rem; padding-right: 2rem; }

.request-rail__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.request-rail__block { display: grid; gap: 0.7rem; }

.request-rail__label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Beschriftung links, Wert rechts — keine Kacheln, keine Kanten. */
.request-rail__specs { display: grid; gap: 0.5rem; margin: 0; }

.request-rail__specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.request-rail__specs dt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  font-size: 0.8rem;
  color: var(--ink-500);
}

.request-rail__specs dd {
  margin: 0;
  font-size: 0.87rem;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

.request-rail__specs .is-dimension dd {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.request-rail__specs .request-design__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent-600);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Farbzeile bringt ihr Muster mit. */
.request-rail__specs .request-design__color {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.request-rail__specs .request-design__sample { flex: none; display: grid; place-items: center; }
.request-rail__specs .color-combo-swatch { width: 2.1rem; height: 1.6rem; }
.request-rail__specs .request-design__color strong { font-size: 0.82rem; font-weight: 650; }

.request-rail__edit {
  justify-self: start;
  width: auto;
  padding: 0.2rem 0;
  font: inherit;
  font-size: 0.81rem;
  font-weight: 650;
  color: var(--accent-700);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.request-rail__edit:hover { color: var(--accent-600); }

/* Ablauf als Liste: vier Abschnitte, erledigte abgehakt. */
.request-rail__steps { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }

.request-rail__steps li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.45rem;
  border-radius: var(--r-md);
  color: var(--ink-400);
}

.request-rail__no {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-400);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}

.request-rail__step-text { display: grid; gap: 0.02rem; min-width: 0; }
.request-rail__step-text strong { font-size: 0.86rem; font-weight: 650; }
.request-rail__step-text small { font-size: 0.72rem; line-height: 1.35; color: var(--ink-400); }
.request-rail__tick { display: none; place-items: center; color: var(--accent-600); }

.request-rail__steps .is-done { color: var(--ink-500); }
.request-rail__steps .is-done .request-rail__tick { display: grid; }
.request-rail__steps .is-done .request-rail__no { color: transparent; border-color: transparent; background: transparent; }

.request-rail__steps .is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px #fed7aa;
}

.request-rail__steps .is-active .request-rail__no {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.request-rail__steps .is-active .request-rail__step-text small { color: var(--ink-500); }

.request-rail__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: auto 0 0;
  padding-top: 1rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-500);
  border-top: 1px solid var(--line);
}

.request-rail__note .icon { flex: none; margin-top: 0.1rem; color: var(--emerald); }

/* Rechte Spalte: nur die aktuelle Frage ------------------------------------ */
.request-flow__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}

.request-flow__head { flex: none; display: grid; gap: 0.45rem; margin-bottom: 1.35rem; }

.request-flow__meter {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.request-flow__meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-600));
  transition: width 0.3s ease;
}

.request-flow__position { margin: 0; font-size: 0.78rem; color: var(--ink-400); }

.request-flow__body { flex: 1; min-height: 0; display: grid; gap: 1.2rem; align-content: start; }

.quick-request .request-flow__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.4rem;
}

/* Felder ------------------------------------------------------------------- */
.request-flow fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 1.2rem;
}

.request-flow .field { display: grid; gap: 0.4rem; margin: 0; font-size: 0.85rem; font-weight: 600; }

.request-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.request-flow select,
.request-flow textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}

.request-flow textarea { min-height: 0; }

.request-flow input:focus-visible,
.request-flow select:focus-visible,
.request-flow textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.request-flow input[type="radio"],
.request-flow input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Ein Schritt mit einem Feld darf dieses Feld groß zeigen. */
.field--solo { max-width: 26rem; }
.field--solo input { min-height: 54px; font-size: 1.05rem; }

.request-flow__hint { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-500); }
.request-flow__hint:empty { display: none; }

/* Kopf eines Schritts ------------------------------------------------------ */
.request-step { display: grid; gap: 1.2rem; }

.request-flow legend.request-step__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  float: none;
  padding: 0;
  margin: 0;
}

.request-step__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--accent-700);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}

.request-step__title { display: grid; gap: 0.3rem; min-width: 0; }

.request-step__title > strong {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.38rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.request-step__title > small {
  max-width: 58ch;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-500);
}

.request-step__subhead { margin: 0 0 0.75rem; font-size: 0.92rem; font-weight: 700; }
.request-step [data-project-address] { display: grid; gap: 0.75rem; }

/* Antwortkarten mit Zeichnung — die einzige Kante innerhalb einer Frage. */
.choice-grid { display: grid; gap: 0.75rem; }
.choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.choice-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.7rem;
  min-width: 0;
  padding: 1.15rem 1rem 1.2rem;
  text-align: center;
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.2s ease,
    transform 0.16s ease;
}

.choice-card:hover {
  border-color: #fdba74;
  background: #fffaf7;
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}

.choice-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice-card__art {
  display: block;
  width: 100%;
  max-width: 8rem;
  color: var(--ink-400);
  transition: color 0.16s ease;
}

.choice-card__art > svg { display: block; width: 100%; height: auto; }

.choice-card__body { display: grid; gap: 0.2rem; min-width: 0; }

.choice-card__body strong {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}

.choice-card__body small { font-size: 0.775rem; line-height: 1.45; color: var(--ink-500); }

.choice-card__mark {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 1;
  display: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  color: #fff;
  background: var(--accent-600);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: var(--sh-sm);
}

.choice-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent), var(--sh-sm);
}

.choice-card:has(input:checked) .choice-card__mark { display: grid; }
.choice-card:has(input:checked) .choice-card__art { color: var(--accent-700); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Adressen, Prüfliste, Einwilligungen — ohne Kasten, nur Zeilenlinien. */
.request-flow__address { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0.75rem; }

.request-flow__summary {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1fr);
  gap: 0 1.5rem;
  margin: 0;
  font-size: 0.88rem;
}

.request-flow__summary:empty { display: none; }

.request-flow__summary dt,
.request-flow__summary dd {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}

.request-flow__summary dt:first-of-type,
.request-flow__summary dd:first-of-type { border-top: 0; }

.request-flow__summary dt { color: var(--ink-500); }
.request-flow__summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }

.request-flow .consent-box {
  display: grid;
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.request-flow .consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.request-flow .consent-box label:first-child { border-top: 0; }
.consent-box__optional { color: var(--ink-500); }
.consent-box__optional em { font-style: normal; font-weight: 700; color: var(--accent-700); }

/* Navigation und Abschluss ------------------------------------------------- */
.request-flow__nav {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.request-flow__nav .btn { min-height: 2.9rem; }
.request-flow__nav .btn--primary { margin-left: auto; }
.request-flow__nav .request-flow__hint { flex-basis: 100%; }
.request-flow.is-busy { opacity: 0.75; pointer-events: none; }

.request-flow__success { padding: 3rem 1.5rem; text-align: center; }
.request-flow__success h2 { margin-top: 1.1rem; }
.request-flow__success p { margin-top: 0.6rem; color: var(--ink-500); }
.request-flow__success .btn { margin-top: 1.25rem; }

.request-flow__success-mark {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--emerald-soft);
  color: var(--emerald);
}

.quick-request .request-flow__success { width: 100%; }

/* Schmal: die linke Spalte wird zur Kopfzeile. Die Auswahl weicht dort dem
   Platz für die Frage — der Weg zurück zum Konfigurator bleibt als Verweis,
   und die Prüfliste am Ende zeigt ohnehin alles. */
@media (max-width: 880px) {
  .quick-request__panel { flex-direction: column; }

  .request-flow { grid-template-columns: minmax(0, 1fr); }

  .request-rail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    padding: 1rem clamp(1rem, 4vw, 1.5rem);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .request-flow-page .request-rail { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .request-rail__product { flex: 1 1 100%; padding-right: 2.5rem; }
  .request-rail__label,
  .request-rail__specs,
  .request-rail__note { display: none; }
  .request-rail__block { gap: 0; }

  .request-rail__steps {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.35rem;
    order: -1;
  }

  .request-rail__steps li {
    grid-template-columns: auto auto;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
  }

  .request-rail__no { width: 1.3rem; height: 1.3rem; font-size: 0.68rem; }
  .request-rail__step-text small { display: none; }
  .request-rail__step-text strong { font-size: 0.78rem; }
  .request-rail__steps .is-done .request-rail__no { display: none; }
  .request-rail__steps .is-active { box-shadow: none; background: var(--accent-soft); }
  .request-rail__tick { grid-column: 1; }
  .request-flow__main { padding: 1.15rem clamp(1rem, 4vw, 1.5rem) 1.25rem; }
}

@media (max-width: 560px) {
  /* Zeichnung links, Text rechts — eine Karte je Zeile, bequem zu treffen. */
  .choice-grid--2 { grid-template-columns: minmax(0, 1fr); }

  .choice-card {
    grid-template-columns: 4.4rem minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 0.8rem;
    padding: 0.8rem 2.5rem 0.8rem 0.8rem;
    text-align: left;
  }

  .choice-card__art { max-width: 4.4rem; }
  .choice-card__mark { top: 50%; right: 0.75rem; transform: translateY(-50%); }

  .request-flow__address { grid-template-columns: minmax(0, 1fr); }
  .request-flow__summary { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .request-flow__summary dt { padding-bottom: 0; border-top: 1px solid var(--line); }
  .request-flow__summary dd { padding-top: 0.15rem; border-top: 0; }
  .request-flow__summary dt:first-of-type { border-top: 0; }
  .request-flow__nav .btn { flex: 1; }
  .request-flow__nav .btn--primary { margin-left: 0; }
}

@media (max-width: 1000px) {
  .catalog-row { grid-template-columns: 240px minmax(0, 1fr); }
  .catalog-row__media { align-self: start; }
  .catalog-row__action { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .catalog-row { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1rem; }
  .catalog-row__media { aspect-ratio: 16 / 9; }
  .catalog-row__action { grid-column: 1; }
}

.home-final-cta.glow {
  position: relative;
  overflow: hidden;
}

.home-final-cta.glow::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 120%, rgb(255 255 255 / 22%), transparent 55%);
  pointer-events: none;
}

/* ── Scroll-Reveal (nur mit JS; ohne JS alles sichtbar) ───────────────
   Eigene `translate`-Property statt `transform`, damit Hover-Lifts
   (.flow-card) nicht von der Spezifität
   (0,3,1) der Gate-Regel erschlagen werden — beide wirken zusammen. */
html.js [data-reveal] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.7s ease, translate 0.7s ease;
}

html.js [data-reveal].is-revealed {
  opacity: 1;
  translate: none;
}

@media (max-width: 1100px) {
.cine__copy > * {
  animation: cine-enter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.cine__copy > *:nth-child(2) {
  animation-delay: 0.08s;
}

.cine__copy > *:nth-child(3) {
  animation-delay: 0.16s;
}

.cine__copy > *:nth-child(4) {
  animation-delay: 0.24s;
}

.cine__copy > *:nth-child(5) {
  animation-delay: 0.32s;
}

.cine__visual {
  animation: cine-enter 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards;
}

@keyframes cine-enter {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cine__grid {
    grid-template-columns: 1fr;
    padding-block: 2.6rem 2rem;
  }
}

@media (max-width: 960px) {
  .arband__grid {
    grid-template-columns: 1fr;
  }

  .flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .flow-grid {
    grid-template-columns: 1fr;
  }

  .marquee-band {
    transform: none;
    margin-block: 0;
    padding-block: 1rem 0;
  }

  .arband-zone,
  .arband-zone--flip {
    transform: none;
    margin-block: 0;
    padding-block: 0;
  }

  .tiltband span {
    white-space: normal;
    font-size: 0.75rem;
  }
}

@media (max-width: 760px) {
  .tiltband span {
    white-space: normal;
    line-height: 1.7;
  }
}

/* ==========================================================================
   15. Feinschliff: Selection, Fokus, ruhiges Scrollen
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--accent);
  color: #fff;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   16. Header v2 (dunkles Glas, Hero-Sprache) + Sticky-Planer + Rhythmus
   ========================================================================== */
/* Ein Header-Verhalten für alle Seiten. Über einer dunklen Hero-Fläche ist
   er oben transparent; nach 20px Scroll erscheint das gemeinsame Glas.
   Ohne JavaScript bleibt der lesbare dunkle Grund erhalten. */
.site-header.is-over-hero:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-nav__toggle {
  color: rgb(245 239 232 / 85%);
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 18%);
}

.site-nav__link {
  color: rgb(245 239 232 / 72%);
}

.site-nav__link:hover {
  color: #fff;
  background: rgb(255 255 255 / 8%);
}

.site-nav__link.is-active {
  color: #fed7aa;
  background: rgb(249 115 22 / 18%);
}

.site-nav__link--toggle {
  color: rgb(245 239 232 / 72%);
}

.site-nav__link--toggle:hover {
  color: #fff;
  background: rgb(255 255 255 / 8%);
}

.site-nav__link--toggle[aria-expanded="true"] {
  color: #fed7aa;
  background: rgb(249 115 22 / 18%);
}

.site-nav__menu {
  background: #221a14;
  border-color: rgb(255 255 255 / 12%);
  box-shadow: 0 24px 60px rgb(0 0 0 / 50%);
}

.site-nav__menu-link {
  color: rgb(245 239 232 / 80%);
}

.site-nav__menu-link:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

.site-nav__menu-link.is-active {
  color: #fed7aa;
  background: rgb(249 115 22 / 18%);
}

.site-nav__menu-link--all {
  color: #fff;
  border-bottom-color: rgb(255 255 255 / 12%);
}

.site-nav__menu-count {
  color: rgb(245 239 232 / 60%);
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 14%);
}

.site-account__login {
  color: rgb(245 239 232 / 85%);
  border-color: rgb(255 255 255 / 22%);
  background: transparent;
}

.site-account__login:hover {
  color: #fed7aa;
  background: rgb(249 115 22 / 14%);
  border-color: rgb(249 115 22 / 50%);
}

.site-account__chip {
  color: rgb(245 239 232 / 85%);
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 16%);
}

.site-account__chip:hover,
.site-account__chip[aria-expanded="true"] {
  border-color: rgb(249 115 22 / 55%);
  color: #fed7aa;
  background: rgb(249 115 22 / 14%);
}

.site-account__menu {
  background: #221a14;
  border-color: rgb(255 255 255 / 12%);
  box-shadow: 0 24px 60px rgb(0 0 0 / 50%);
}

.site-account__menu-head {
  color: rgb(245 239 232 / 55%);
  border-bottom-color: rgb(255 255 255 / 10%);
}

.site-account__menu-head strong {
  color: #fff;
}

.site-account__menu-link {
  color: rgb(245 239 232 / 80%);
}

.site-account__menu-link:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

/* Anker springen nicht unter den klebrigen Kopf */
#so-funktioniert-es,
#produkte {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

@media (max-width: 820px) {
  /* Mobil ist der Kopf zweizeilig (Suche in eigener Zeile). */
  #so-funktioniert-es,
  #produkte {
    scroll-margin-top: calc(var(--header-h) + 4.5rem);
  }
}

/* FAQ: Hover führt zur Akzentkante */
.home-faq-item:hover {
  border-color: var(--accent);
}

/* ── Sticky-Planer: folgt beim Scrollen ──────────────────────────────── */
.sticky-cta {
  position: fixed;
  z-index: 120;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  transform: translateY(130%);
  transition: transform 0.3s ease;
}

.sticky-cta.is-on {
  transform: none;
}

.sticky-cta[hidden] {
  display: none;
}

.sticky-cta__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  color: #fff;
  background: rgb(20 16 12 / 92%);
  border: 1px solid rgb(249 115 22 / 55%);
  border-radius: var(--r-pill);
  box-shadow: 0 16px 44px rgb(0 0 0 / 45%), 0 0 30px rgb(249 115 22 / 25%);
  backdrop-filter: blur(10px);
  text-decoration: none;
}

.sticky-cta__btn:hover {
  color: #fff;
  text-decoration: none;
  border-color: var(--accent);
}

.sticky-cta__btn > span {
  display: grid;
  line-height: 1.25;
  text-align: left;
}

.sticky-cta__btn strong {
  font-size: 0.9rem;
}

.sticky-cta__btn small {
  font-size: 0.72rem;
  color: rgb(245 239 232 / 65%);
}

.sticky-cta__go {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-600));
  border-radius: var(--r-pill);
}

.sticky-cta__close {
  pointer-events: auto;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-left: 0.45rem;
  color: rgb(245 239 232 / 70%);
  background: rgb(20 16 12 / 85%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.sticky-cta__close:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 40%);
}

@media (min-width: 720px) {
  .sticky-cta {
    inset-inline: auto 1.4rem;
    bottom: 1.4rem;
    padding: 0;
  }
}

@media (max-width: 820px) {
  .site-nav__list {
    background: #221a14;
    border-color: rgb(255 255 255 / 12%);
    box-shadow: 0 24px 60px rgb(0 0 0 / 50%);
  }

  .site-nav__menu {
    border-left-color: rgb(249 115 22 / 55%);
  }
}

/* ==========================================================================
   17. Ratgeber v2 — gleiche Sprache wie der Homepage-Funnel
   (templates/guides.html, guide_article.html)
   ========================================================================== */

/* Breadcrumb auf dunklem Grund (nur im Artikel-Hero). */
.breadcrumb--on-dark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.8rem;
  color: rgb(245 239 232 / 55%);
}

.breadcrumb--on-dark a {
  color: rgb(245 239 232 / 75%);
}

.breadcrumb--on-dark a:hover {
  color: #fed7aa;
  text-decoration: none;
}

.breadcrumb--on-dark .breadcrumb__current {
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fed7aa;
  font-weight: 600;
}

/* Übersichts-Karten in Funnel-Optik: Lift + Nummer wie flow-card.
   Breite Screens: 2 Karten pro Zeile, Bild oben mit hoher Kachel. */
.guide-index--funnel {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.guide-teaser--funnel {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.guide-teaser--funnel:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--sh-lg);
}

.guide-teaser--funnel .guide-teaser__media {
  position: relative;
  flex-shrink: 0;
  min-height: 300px;
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

.guide-teaser--funnel .guide-teaser__body {
  flex: 1;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
}

.guide-teaser__no {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgb(20 16 12 / 72%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}

.kicker-pill--sm {
  margin-bottom: 0.55rem;
  padding: 0.22rem 0.7rem;
  font-size: 0.7rem;
}

/* Drei statt vier Ablauf-Karten. */
.flow-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Artikel: Kapitelnummer als Geister-Zahl wie flow-card__no. */
.guide-article .article-section {
  position: relative;
}

.article-section__no {
  margin: 0 0 0.1rem;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-soft);
  -webkit-text-stroke: 1.2px var(--accent);
  user-select: none;
}

/* Key-Facts mit Funnel-Tiefe. */
.key-facts--funnel {
  box-shadow: var(--sh-sm);
}

.key-facts--funnel .kicker-pill--sm {
  margin-bottom: 0.7rem;
}

/* Sonderfall-Karten als Ablauf-Karten (klein). */
.article-cards--funnel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.flow-card--sm {
  padding: 1.35rem 1.2rem 1.2rem;
}

.flow-card--sm h3 {
  font-size: 1.02rem;
}

.flow-card--sm p {
  font-size: 0.89rem;
}

/* Numerierte Abfolge mit Akzent-Linie wie Funnel. */
.article-steps--funnel li {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.article-steps--funnel li:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-sm);
}

/* TOC-CTA unter dem Inhaltsverzeichnis. */
.article-toc__cta {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.btn--sm {
  padding: 0.55rem 1rem;
  font-size: 0.86rem;
}

/* Abschluss-Zeile unter dem dunklen Band. */
.guide-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.6rem;
  padding-block: 0.5rem;
}

.guide-article .article-related .kicker-pill--sm {
  margin-bottom: 0.6rem;
}

.guide-article .article-related h2 {
  margin-bottom: 0.4rem;
}

.guide-article .model-list {
  margin-top: 1.2rem;
}

@media (max-width: 960px) {
  .flow-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-cards--funnel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .guide-index--funnel {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-teaser--funnel .guide-teaser__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .breadcrumb--on-dark .breadcrumb__current {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .flow-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   18. Kleiner Seiten-Hero (alle Seiten außer der Startseite)
   templates/_page_hero.html — schmale dunkle Bühne, Hintergrund aus .cine.
   ========================================================================== */
.page-hero {
  --hero-slope: clamp(16px, 2vw, 36px);
  position: relative;
  overflow: clip;
  padding-bottom: var(--hero-slope);
  color: #f5efe8;
  background: #14100c;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-slope)), 0 100%);
}

/* Eine gleichmäßig dünne Akzentkante folgt dem dunklen Abschluss. */
.page-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: calc(var(--hero-slope) + 4px);
  background: linear-gradient(100deg, #c2581c, #fb923c 50%, #ea580c);
  clip-path: polygon(0 calc(100% - 4px), 100% 0, 100% 4px, 0 100%);
  pointer-events: none;
}

.page-hero .cine__bg {
  opacity: 0.65;
}

.page-hero .cine__bg i,
.page-hero .cine__bg::before {
  animation: none;
}

.page-hero .cine__bg::before {
  display: none;
}

.page-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.25rem, 4vw, 3.5rem);
  text-align: center;
}

.page-hero .breadcrumb--on-dark {
  margin: 0 0 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.page-hero .cine__live--sm {
  font-size: 0.74rem;
  padding: 0.3rem 0.8rem;
  background: rgb(249 115 22 / 8%);
  border-color: rgb(249 115 22 / 25%);
}

.page-hero .cine__dot {
  width: 0.35rem;
  height: 0.35rem;
  background: #fb923c;
  box-shadow: none;
  animation: none;
}

.page-hero h1 {
  max-width: 32ch;
  margin: 1rem auto 0;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.page-hero__lead {
  max-width: 62ch;
  margin: 1rem auto 0;
  font-size: 1rem;
  line-height: 1.75;
  color: rgb(245 239 232 / 75%);
  text-wrap: pretty;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.1rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem auto 0;
  padding-top: 0.9rem;
  font-size: 0.83rem;
  color: rgb(245 239 232 / 65%);
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.page-hero__meta .icon {
  color: var(--accent);
}

.page-hero__meta-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Der Hero übernimmt den Kopf-Abstand, damit sein Hintergrund bis an den
   oberen Rand reicht. Alle anderen Inhalte beginnen unter dem gleichen Kopf. */
.site-main:has(.cine, .page-hero) {
  padding-top: 0;
}

.cine,
.page-hero {
  padding-top: var(--site-header-height);
}

/* Ankerziele unter dem fixierten Kopf (Kontakt-Anfrage, Ratgeber-Liste). */
#anfrage,
#beitraege {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

@media (max-width: 820px) {
  #anfrage,
  #beitraege {
    scroll-margin-top: calc(var(--header-h) + 4.5rem);
  }
}

@media print {
  .site-main {
    padding-top: 0;
  }

  .footer-line {
    display: none;
  }

  .page-hero {
    background: none !important;
    color: #000;
    clip-path: none;
    padding: 0 !important;
  }

  .page-hero .cine__bg,
  .page-hero .breadcrumb,
  .page-hero__actions,
  .page-hero::after,
  .page-hero .cine__live {
    display: none !important;
  }

  .page-hero h1 {
    color: #000;
  }

  .page-hero__lead,
  .page-hero__meta {
    color: #333;
  }

  .legal-page .page-hero {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

.variant-range-note,
.size-editor__fixed {
  margin: 0.75rem 0;
  color: var(--ink-500);
  font-size: 0.85rem;
  line-height: 1.6;
}

.variant-size__image {
  width: 76px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  object-fit: contain;
}