/* ==========================================================================
   Yanik Textildruck – Stylesheet (Version 17: „Klare Kante“)

   Gestaltungsregeln
   - Weiß als Grundfläche, ein neutrales Hellgrau für Bänder, Navy für
     Kopfbereiche, dunkle Abschnitte und Schrift.
   - Flammenorange aus dem Logo nur als Akzent: Hauptaktion, Linien über
     Werten, aktive Zustände. Nie als Schriftfarbe auf Weiß.
   - Leichte, einheitliche Rundungen (10 px Flächen, 6 px Buttons), keine Pillen.
     Keine Schatten, keine Verläufe, keine Glas-Effekte.
     Struktur entsteht über Raster, Weißraum und Haarlinien.
   - Eine Schriftfamilie (Archivo). Bewegung nur als kurzer Farbwechsel.
   ========================================================================== */

/* Schrift lokal eingebunden (SIL Open Font License, siehe assets/fonts) – keine Verbindung zu Google */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-var-latin.woff2") format("woff2"); }

:root {
  /* Flächen */
  --paper: #ffffff;
  --paper-2: #f3f5f8;      /* Bänder */
  --paper-3: #e4e8ee;      /* Bild-Hintergrund beim Laden */
  --line: #dde2e9;         /* Haarlinien */
  --line-2: #c2cad6;       /* betonte Linien */

  /* Schrift */
  --ink: #0d1b33;          /* Navy – Text (17:1) */
  --ink-2: #44506a;        /* Sekundärtext (8:1) */
  --ink-3: #59657d;        /* Hinweise (5,6:1) */

  /* Akzent */
  --flame: #ff8500;        /* Flammenorange aus dem Logo */
  --flame-press: #ec7a00;
  --ember: #a84f00;        /* nur für Hinweis-Text auf Hell (5,1:1) */
  --glow-soft: #fff4e8;

  /* Dunkel */
  --night: #0b1f3a;
  --night-deep: #081830;
  --on-ink: #ffffff;
  --on-ink-2: #bcc8db;
  --on-line: rgba(255,255,255,.16);

  /* Typografie */
  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.3rem, 1.12rem + 0.7vw, 1.6rem);
  --t-2xl: clamp(1.9rem, 1.3rem + 2.3vw, 3.1rem);
  --t-3xl: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);

  /* Raum */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --wrap: 78rem;
  --sec: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --dur: .18s;
  --r: 10px;               /* Karten, Flächen, Fotos */
  --r-sm: 6px;             /* Buttons, Nummern- und Symbolblöcke */

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: var(--t-md); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hero :focus-visible, .page-head :focus-visible, .sec--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--flame); }
::selection { background: var(--flame); color: var(--ink); }
[hidden] { display: none !important; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--on-ink); padding: .7rem 1.1rem; text-decoration: none; font-weight: 650; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Typografie
   ========================================================================== */
.eyebrow, .mono {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink-2);
}
.h-display { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.025em; font-weight: 760; font-stretch: 108%; }
.h-section { font-size: var(--t-2xl); line-height: 1.06; letter-spacing: -0.02em; font-weight: 730; font-stretch: 106%; }
.h-sub { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.01em; font-weight: 690; }
.lead { font-size: var(--t-lg); line-height: 1.6; color: var(--ink-2); max-width: 36rem; }
.prose { max-width: 38rem; display: grid; gap: 1.1rem; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 650; }
.muted { color: var(--ink-3); }
.h-display em, .h-section em, .values-quote em { font-style: normal; }

/* Trennlinie */
.seam { height: 0; border: 0; border-top: 1px solid var(--line-2); margin: 0; }

/* ==========================================================================
   Buttons & Links
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.35rem;
  background: var(--flame); color: var(--ink); border: 1.5px solid var(--flame);
  font: 650 var(--t-sm)/1.2 var(--f); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.btn:hover { background: var(--flame-press); border-color: var(--flame-press); }
.btn .arr { flex-shrink: 0; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn--line-light { background: transparent; color: var(--on-ink); border-color: rgba(255,255,255,.55); }
.btn--line-light:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.hero .btn--ghost, .page-head .btn--ghost { color: var(--on-ink); border-color: rgba(255,255,255,.55); }
.hero .btn--ghost:hover, .page-head .btn--ghost:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }

.link {
  color: var(--ink); font-weight: 650;
  text-decoration: underline; text-decoration-color: var(--flame); text-decoration-thickness: 2px; text-underline-offset: .22em;
  transition: text-decoration-color var(--dur);
}
.link:hover { text-decoration-color: currentColor; }
.hero .link, .page-head .link, .sec--ink .link { color: var(--on-ink); }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand-logo { display: block; height: 2.7rem; width: auto; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav ul { list-style: none; display: flex; gap: .25rem; }
.nav a:not(.btn) {
  display: block; text-decoration: none; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  padding: .5rem .8rem; transition: color var(--dur);
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .5em;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--flame); }
.nav .btn { min-height: 2.75rem; padding: .55rem 1.1rem; }
.nav-toggle { display: none; }

@media (max-width: 959px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .6rem; background: var(--paper); border: 1.5px solid var(--ink);
    padding: .6rem 1rem; font: 650 var(--t-sm)/1 var(--f); color: var(--ink); cursor: pointer;
  }
  .nav-toggle .bars { width: 1rem; height: 10px; position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
  .nav-toggle .bars::before { top: 0; } .nav-toggle .bars::after { top: 8px; }
  .nav-open .nav-toggle { background: var(--ink); color: var(--on-ink); }
  .nav-open .nav-toggle .bars::before { top: 4px; transform: rotate(45deg); }
  .nav-open .nav-toggle .bars::after { top: 4px; transform: rotate(-45deg); }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--hh, 4.75rem); z-index: 49;
    background: var(--paper); border-bottom: 1px solid var(--line-2);
    flex-direction: column; align-items: stretch; gap: 1.25rem; padding: .25rem var(--gutter) 1.5rem;
    max-height: calc(100dvh - var(--hh, 4.75rem)); overflow: auto; display: none;
  }
  .nav-open .nav { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a:not(.btn) { padding: 1rem 0; font-size: var(--t-lg); color: var(--ink); border-bottom: 1px solid var(--line); text-underline-offset: .35em; }
  .nav .btn { min-height: 3.25rem; }
  .nav-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(8,24,48,.35); }
}
@media (max-width: 520px) { .brand-logo { height: 2.35rem; } .site-header .wrap { min-height: 4.25rem; } }

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.sec { padding-block: var(--sec); position: relative; }
.sec--band { background: var(--paper-2); }
.sec--ink { background: var(--night); color: var(--on-ink); }
.sec--ink .eyebrow, .hero .eyebrow, .page-head .eyebrow { color: var(--flame); }
.sec--ink .lead, .sec--ink .prose { color: var(--on-ink-2); }
.sec--ink .h-section, .sec--ink h2, .sec--ink h3 { color: var(--on-ink); }
.sec-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .sec-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; } }

/* ==========================================================================
   Fotos
   ========================================================================== */
.photo { position: relative; margin: 0; overflow: hidden; background: var(--paper-3); }
.photo picture, .aud-img picture { display: contents; }
.photo img, .photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: calc(100% - 2rem); }
.photo .tag {
  display: block; background: var(--paper); color: var(--ink);
  font: 600 .75rem/1.35 var(--f); letter-spacing: .01em; padding: .45rem .75rem;
}

/* ==========================================================================
   Hero (Startseite) und Seitenkopf (Unterseiten)
   ========================================================================== */
.hero, .page-head { background: var(--night); color: var(--on-ink); position: relative; }
.hero .lead, .page-head .lead { color: var(--on-ink-2); }
.hero .h-display, .page-head .h-display { color: var(--on-ink); }
.hero .h-display em { color: var(--flame); }

.hero { padding-block: clamp(3rem, 1.5rem + 5vw, 6rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero-copy { display: grid; gap: 1.6rem; }
.hero-copy .lead { max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.hero-visual .photo { aspect-ratio: 4 / 5; background: var(--night-deep); }
.hero-video video { object-position: 50% 40%; }
@media (max-width: 959px) { .hero-visual .photo { aspect-ratio: 16 / 11; } }

.page-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.page-head .wrap { display: grid; gap: 1.4rem; }
.page-head .lead { max-width: 40rem; }
.page-head + .sec { padding-top: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
.crumbs { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; color: var(--on-ink-2); display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--on-ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--flame); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.crumbs [aria-current] { color: var(--on-ink); }
.sub-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-size: var(--t-sm); padding-top: 1.25rem; margin-top: .5rem; border-top: 1px solid var(--on-line); }
.sub-nav a {
  color: var(--on-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .4em;
  font-weight: 600; padding-block: .3rem; transition: text-decoration-color var(--dur);
}
.sub-nav a:hover { text-decoration-color: var(--flame); }

/* ==========================================================================
   Startseite: Verfahren als Linkliste
   ========================================================================== */
ul.method-links { list-style: none; display: grid; border-top: 2px solid var(--ink); }
@media (min-width: 760px) { ul.method-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); } }
ul.method-links li { border-bottom: 1px solid var(--line-2); }
ul.method-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: center; padding: 1.2rem 0; color: inherit; text-decoration: none; }
ul.method-links b { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .25em; transition: text-decoration-color var(--dur); }
ul.method-links span:not(.go) { color: var(--ink-2); font-size: var(--t-sm); grid-column: 1; }
ul.method-links .go { grid-column: 2; grid-row: 1 / span 2; }
ul.method-links a:hover b { text-decoration-color: var(--flame); }
div.method-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.go { display: inline-grid; place-items: center; color: var(--ink); }
.go svg { width: 1.15rem; height: 1.15rem; }

/* Zielgruppen: Bild + Text, ohne Kartenrahmen */
.aud-cards { list-style: none; display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .aud-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.aud-cards a { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; }
.aud-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.aud-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aud-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; align-content: start; padding-top: 1.15rem; margin-top: 1.15rem; border-top: 2px solid var(--ink); }
.aud-body h3 { font-size: var(--t-xl); font-weight: 720; letter-spacing: -.01em; grid-column: 1; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color var(--dur); }
.aud-body p { color: var(--ink-2); font-size: var(--t-sm); grid-column: 1 / -1; }
.aud-body .go { grid-column: 2; grid-row: 1; align-self: center; }
.aud-cards a:hover h3 { text-decoration-color: var(--flame); }

/* ==========================================================================
   Verfahren (Leistungen, Detailseiten)
   ========================================================================== */
.method { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4.5rem); align-items: center; }
.method + .method { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
@media (min-width: 900px) { .method { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .method--flip > :first-child { order: 2; } }
.method .photo { aspect-ratio: 5 / 4; }
.method-body { display: grid; gap: 1.2rem; }
.method-num { font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: .5rem 0 0; border-top: 2px solid var(--ink); }
.spec dt, .spec dd { padding: .8rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.spec dt { font-size: var(--t-xs); font-weight: 700; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-right: 1.75rem; }
.spec dd { font-size: var(--t-sm); font-weight: 550; }

/* Ablauf: Prozesskette mit Pfeilen, letzter Schritt als Ziel hervorgehoben */
.steps { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.steps li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem 1rem; align-content: start;
  padding: 1.5rem 1.4rem 1.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  position: relative; transition: border-color var(--dur);
}
.sec:not(.sec--band) .steps li { background: var(--paper-2); border-color: transparent; }
.steps li:hover { border-color: var(--flame); }
.steps li > h3, .steps li > p { grid-column: 1 / -1; }
.steps .n { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--flame); color: var(--night); border-radius: var(--r-sm); font-size: 1.15rem; font-weight: 760; line-height: 1; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; margin-top: .35rem; }
.steps p { color: var(--ink-2); font-size: var(--t-sm); }
/* Pfeil zwischen den Schritten */
.steps li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23ff8500' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
  left: 50%; bottom: -1.425rem; transform: translateX(-50%) rotate(90deg);
}
@media (min-width: 700px) and (max-width: 999px) { .steps li:not(:last-child)::after { display: none; } }
@media (min-width: 1000px) {
  .steps li:not(:last-child)::after { left: auto; bottom: auto; right: -1.55rem; top: 2.075rem; transform: none; }
}
.steps-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.steps-cta p { color: var(--ink-2); font-size: var(--t-sm); }

/* Werte (dunkel) */
.values-quote { font-size: var(--t-2xl); line-height: 1.06; font-weight: 740; font-stretch: 108%; letter-spacing: -0.02em; max-width: 20ch; }
.values-quote em { color: var(--flame); }
.values { display: grid; gap: 2rem; margin-top: clamp(2.75rem, 2rem + 2vw, 4.25rem); }
@media (min-width: 820px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.values > div { display: grid; gap: .6rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--flame); }
.values h3 { font-size: var(--t-lg); font-weight: 700; color: var(--on-ink); }
.values p { color: var(--on-ink-2); font-size: var(--t-sm); }

/* Galerie */
.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery .photo { min-height: 10rem; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 9.5rem; }
  .gallery .g1 { grid-column: 1 / 6; grid-row: span 3; }
  .gallery .g2 { grid-column: 6 / 10; grid-row: span 2; }
  .gallery .g3 { grid-column: 10 / 13; grid-row: span 2; }
  .gallery .g4 { grid-column: 6 / 13; grid-row: span 1; }
  .gallery .photo { min-height: 0; }
}
@media (max-width: 899px) { .gallery .g1 { grid-column: 1 / -1; aspect-ratio: 16/10; } .gallery .g4 { grid-column: 1 / -1; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; } }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding: 1.3rem 0; font-weight: 650; font-size: var(--t-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--flame); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.faq summary .pm { flex-shrink: 0; width: 1rem; height: 1rem; position: relative; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm::after { display: none; }
.faq .ans { padding: 0 3rem 1.5rem 0; color: var(--ink-2); display: grid; gap: .8rem; max-width: 42rem; }
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group h2 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .9rem; }

/* ==========================================================================
   Abschluss-CTA & Kontaktzeilen
   ========================================================================== */
.cta-block { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .cta-block { grid-template-columns: minmax(0, 46rem); } }
.contact-lines { display: grid; border-top: 2px solid var(--ink); margin: 0; }
.contact-lines > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.contact-lines dt { font-size: var(--t-xs); font-weight: 700; line-height: 1.8; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.contact-lines dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.contact-lines a { text-decoration: underline; text-decoration-color: var(--flame); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.contact-lines a:hover { text-decoration-color: currentColor; }
.aside-contact { display: grid; gap: 1.5rem; align-content: start; }
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; } }

/* ==========================================================================
   Vergleich, Textilien, Text-Spalten
   ========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--t-sm); }
.compare th, .compare td { text-align: left; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.compare thead th { font-size: var(--t-xs); font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 700; width: 22%; }

.textiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: 2rem; border-top: 2px solid var(--ink); }
.textiles li { padding: 1rem 0; display: grid; gap: .15rem; border-bottom: 1px solid var(--line-2); }
.textiles b { font-weight: 700; }
.textiles span { font-size: var(--t-sm); color: var(--ink-2); }

.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; } .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split > .photo { aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .split > .photo { aspect-ratio: 16 / 11; } }
@media (min-width: 900px) { .split > .photo--real, .method .photo--real { min-height: 22rem; } }
.split[id] { scroll-margin-top: 6rem; }

/* ==========================================================================
   Über uns: Porträt und Chronik
   ========================================================================== */
.portrait { display: grid; gap: 1rem; margin: 0; align-content: start; }
.portrait-img { position: relative; display: block; width: 100%; max-width: 26rem; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); }
.portrait-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption { display: grid; gap: .2rem; padding-top: .9rem; border-top: 2px solid var(--ink); max-width: 26rem; }
.portrait figcaption b { font-size: var(--t-lg); font-weight: 720; }
.portrait figcaption span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 899px) { .portrait-img, .portrait figcaption { max-width: 22rem; } }
@media (min-width: 900px) { .portrait { position: sticky; top: 7rem; } }

.chronik-intro { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 900px) { .chronik-intro { position: sticky; top: 7rem; } }
.milestones { list-style: none; position: relative; display: grid; }
.ms { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.25rem; align-items: start; position: relative; }
.ms-ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; position: relative; z-index: 1; background: var(--night); color: var(--flame); }
.ms-ico svg { width: 1.3rem; height: 1.3rem; }
.ms-card { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line-2); }
.ms:last-child .ms-card { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ms-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .4rem; padding-top: .35rem; }
.ms-yr { font-size: 1.35rem; line-height: 1.1; font-weight: 760; font-stretch: 110%; letter-spacing: -.01em; }
.ms-tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.ms-card h3 { font-size: var(--t-md); font-weight: 700; margin-bottom: .3rem; }
.ms-card p:last-child { color: var(--ink-2); font-size: var(--t-sm); max-width: 36rem; }
.ms-logo { margin: .35rem 0 .75rem; }
.ms-logo img { display: block; height: 1.6rem; width: auto; }
.ms-logo--dark { display: inline-block; background: var(--night); padding: .7rem .9rem; }
.ms--key .ms-ico, .ms--now .ms-ico { background: var(--flame); color: var(--night); }
@media (max-width: 560px) {
  .ms { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem; }
  .ms-ico { width: 2.4rem; height: 2.4rem; }
  .ms-ico svg { width: 1.1rem; height: 1.1rem; }
}

/* ==========================================================================
   Referenzen
   ========================================================================== */
.filter { display: inline-flex; flex-wrap: wrap; margin-bottom: 2rem; border: 1.5px solid var(--ink); }
.filter button {
  font: 650 var(--t-sm)/1 var(--f); color: var(--ink); background: var(--paper); border: 0; border-right: 1.5px solid var(--ink);
  padding: .85rem 1.2rem; cursor: pointer; transition: background-color var(--dur), color var(--dur);
}
.filter button:last-child { border-right: 0; }
.filter button:hover { background: var(--paper-2); }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
@media (max-width: 480px) { .filter { display: grid; grid-template-columns: 1fr 1fr; } .filter button { border-bottom: 1.5px solid var(--ink); } .filter button:nth-child(2n) { border-right: 0; } .filter button:nth-last-child(-n+2) { border-bottom: 0; } }
.works { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.works .photo { aspect-ratio: 4 / 5; }

/* ==========================================================================
   Rechtstexte, Hinweise, offene Punkte
   ========================================================================== */
.legal { max-width: 46rem; display: grid; gap: 2.25rem; }
.legal section { display: grid; gap: .8rem; }
.legal h2 { font-size: var(--t-lg); font-weight: 720; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.2rem; display: grid; gap: .4rem; }
.note { background: var(--paper-2); border-left: 3px solid var(--flame); padding: 1rem 1.25rem; font-size: var(--t-sm); color: var(--ink-2); }

/* Fehlende Inhalte – bewusst sichtbar, bis sie ergänzt sind */
.todo {
  display: inline; font: 600 .85em/1.5 var(--f); color: var(--ember);
  background: var(--glow-soft); outline: 1.5px dashed var(--flame); outline-offset: 1px; padding: .05em .4em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sec--ink .todo, .page-head .todo { background: rgba(255,133,0,.14); color: #ffb36b; }
.todo-block { display: block; padding: .8rem 1rem; }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.site-footer { background: var(--night-deep); color: var(--on-ink-2); padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 2rem; font-size: var(--t-sm); }
.site-footer .brand { color: var(--on-ink); }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.foot-grid h2 { font-size: var(--t-xs); font-weight: 700; line-height: 1; letter-spacing: .09em; text-transform: uppercase; color: var(--on-ink); margin-bottom: 1.1rem; }
.foot-grid ul { list-style: none; display: grid; gap: .6rem; }
.foot-grid a:not(.brand) { color: var(--on-ink-2); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .25em; transition: color var(--dur), text-decoration-color var(--dur); }
.foot-grid a:not(.brand):hover { color: var(--on-ink); text-decoration-color: var(--flame); }
.foot-claim { display: grid; gap: 1.25rem; align-content: start; }
.foot-base { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--on-line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--t-xs); }
.foot-base a { color: var(--on-ink-2); }

/* ==========================================================================
   Reduzierte Bewegung & Druck
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .nav-toggle { display: none !important; }
  .hero, .page-head, .sec--ink, .site-footer { background: #fff !important; color: #000 !important; }
}
.site-footer { border-top: 1px solid var(--on-line); }
@media (max-width: 599px) { .gallery { grid-template-columns: minmax(0, 1fr); } .gallery .photo { aspect-ratio: 4 / 3; min-height: 0; } }

/* Anfrage: eingebettetes Formular der Auftragsverwaltung */
.form-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .form-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3.5rem; } }
.form-frame { display: grid; gap: .9rem; }
.form-frame iframe { display: block; width: 100%; height: 1400px; border: 1px solid var(--line-2); border-top: 3px solid var(--night); background: var(--paper); }
@media (max-width: 699px) { .form-frame iframe { height: 1700px; } }
.form-fallback { font-size: var(--t-sm); color: var(--ink-2); }
.form-aside { display: grid; gap: 1.25rem; align-content: start; padding: 1.75rem; background: var(--paper-2); border-top: 3px solid var(--night); }
@media (min-width: 1000px) { .form-aside { position: sticky; top: 6.5rem; } }
.form-next { list-style: none; display: grid; gap: 1rem; counter-reset: fn; }
.form-next li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: .9rem; counter-increment: fn; }
.form-next li::before { content: counter(fn); grid-row: span 2; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--flame); color: var(--night); font-weight: 760; }
.form-next b { font-weight: 700; }
.form-next span { font-size: var(--t-sm); color: var(--ink-2); }
.form-mail { font-size: var(--t-sm); color: var(--ink-2); padding-top: 1rem; border-top: 1px solid var(--line-2); }
.nav .btn[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* Version 20: leichte, einheitliche Rundungen statt harter Ecken */
.btn, .nav-toggle, .skip, .filter, .note, .todo { border-radius: var(--r-sm); }
.filter { overflow: hidden; }
.photo, .aud-img, .portrait-img, .form-aside, .form-frame iframe { border-radius: var(--r); }
.photo .tag { border-top-right-radius: var(--r-sm); }
.ms-ico, .form-next li::before { border-radius: var(--r-sm); }

.form-aside { border-top: 0; }
.form-frame iframe { border-top: 1px solid var(--line-2); }

/* ---------- Version 21: Verfahren mit Beispielfoto, Kontakt als zwei Flächen, Chronik ohne Einleitung ---------- */
.method-cards { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .method-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .method-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.method-cards li { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); transition: border-color var(--dur); }
.method-cards li:hover { border-color: var(--flame); }
.method-cards a { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; }
.mc-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.mc-img picture { display: contents; }
.mc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; align-content: start; padding: 1.25rem 1.35rem 1.5rem; border-top: 3px solid var(--flame); }
.mc-body b { font-size: var(--t-lg); font-weight: 720; line-height: 1.25; grid-column: 1; }
.mc-body > span:not(.go):not(.mc-kicker) { color: var(--ink-2); font-size: var(--t-sm); grid-column: 1 / -1; }
.mc-body .go { grid-column: 2; grid-row: 1; align-self: center; }
.mc--all { background: var(--night) !important; border-color: var(--night) !important; color: var(--on-ink); }
.mc--all:hover { border-color: var(--flame) !important; }
.mc--all a { grid-template-rows: 1fr; }
.mc--all .mc-body { border-top: 0; align-content: end; padding-top: 2rem; min-height: 100%; grid-template-rows: auto auto 1fr; }
.mc--all .mc-kicker { grid-column: 1 / -1; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--flame); }
.mc--all .mc-body b { font-size: var(--t-xl); grid-row: 2; }
.mc--all .mc-body .go { grid-row: 2; color: var(--flame); }
.mc--all .mc-body > span:not(.go):not(.mc-kicker) { color: var(--on-ink-2); }

.chronik-wrap .milestones { max-width: 52rem; margin-inline: auto; }

.contact-cards { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-cards li { display: grid; gap: 1rem; grid-template-rows: auto auto 1fr auto; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--paper-2); border-radius: var(--r); }
.contact-cards p:not(.eyebrow) { color: var(--ink-2); max-width: 36rem; }
.contact-cards .cc-act { margin-top: .5rem; }
.cc--offer { background: var(--night) !important; color: var(--on-ink); }
.cc--offer .eyebrow { color: var(--flame); }
.cc--offer p:not(.eyebrow) { color: var(--on-ink-2); }

.ms-logo--dark { border-radius: var(--r); padding: .75rem 1.25rem; }

/* Hinweis statt Formular außerhalb der eigenen Domain (Vorschau) */
.form-preview { display: grid; gap: 1rem; align-content: start; padding: clamp(1.75rem, 4vw, 3rem); background: var(--paper-2); border: 1px dashed var(--line-2); border-radius: var(--r); }
.form-preview p:not(.eyebrow) { color: var(--ink-2); max-width: 34rem; }
.form-preview .form-preview-title { font-size: var(--t-lg); font-weight: 700; color: var(--ink); }

/* ==========================================================================
   Version 23: „Blickfang“ – dunkle Kopfzeile, großflächiger Hero,
   breite Display-Schrift, Flammenkante als wiederkehrendes Markenzeichen
   ========================================================================== */
:root {
  --t-3xl: clamp(2.2rem, 1.2rem + 4.4vw, 5.3rem);
  --t-2xl: clamp(2rem, 1.2rem + 2.8vw, 3.6rem);
  --hdr: 4.75rem;
}
.h-display { font-weight: 800; font-stretch: 116%; letter-spacing: -.035em; line-height: .98; }
.h-section { font-weight: 790; font-stretch: 114%; letter-spacing: -.03em; line-height: 1.02; }
.btn--lg { min-height: 3.4rem; padding: .9rem 1.6rem; font-size: var(--t-md); }

/* Kopfzeile in Navy, geht nahtlos in Hero und Seitenkopf über */
.site-header { background: var(--night); border-bottom: 1px solid var(--on-line); }
.site-header :focus-visible { outline-color: var(--flame); }
.nav a:not(.btn) { color: var(--on-ink-2); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--on-ink); }
.nav .btn[aria-current="page"] { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
@media (max-width: 959px) {
  .nav-toggle { background: transparent; border-color: rgba(255,255,255,.5); color: var(--on-ink); }
  .nav-open .nav-toggle { background: var(--on-ink); color: var(--ink); }
  .nav { background: var(--night); border-bottom-color: var(--on-line); }
  .nav ul a:not(.btn) { color: var(--on-ink); border-bottom-color: var(--on-line); }
}

/* Hero: Text links, Video randabfallend rechts */
.hero--split { padding: 0; display: grid; overflow: hidden; }
.hero-copy-wrap { display: grid; align-items: center; padding: clamp(3rem, 2rem + 5vw, 6rem) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem); }
.hero--split .hero-copy { gap: 1.9rem; max-width: 44rem; }
.hero--split .lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); max-width: 36rem; }
.hero-media { position: relative; margin: 0; overflow: hidden; background: var(--night-deep); aspect-ratio: 1 / 1; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-media::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 6px; background: var(--flame); }
.hero-media figcaption { position: absolute; z-index: 2; left: 6px; bottom: 0; }
.hero-media .tag { display: block; background: var(--night); color: var(--on-ink); font: 600 .75rem/1.35 var(--f); letter-spacing: .02em; padding: .55rem .9rem; border-top-right-radius: var(--r-sm); }
@media (max-width: 959px) { .hero-media::before { top: 0; bottom: auto; right: 0; width: auto; height: 5px; } .hero-media figcaption { left: 0; } }
@media (min-width: 960px) {
  .hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); min-height: min(calc(100svh - var(--hdr)), 52rem); }
  .hero-copy-wrap { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: clamp(2rem, 4vw, 4.5rem); }
  .hero-media { aspect-ratio: auto; }
}

/* Seitenkopf der Unterseiten: Flammenkante unten links */
.page-head { overflow: hidden; }
.page-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(38vw, 22rem); height: 6px; background: var(--flame); }

/* Zielgruppen: drei randabfallende Bildtafeln */
.aud-sec { padding-bottom: 0; }
.aud-panels { list-style: none; display: grid; gap: 3px; background: var(--night-deep); }
@media (min-width: 760px) { .aud-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aud-panels a { position: relative; display: grid; align-items: end; min-height: clamp(24rem, 40vw, 38rem); color: var(--on-ink); text-decoration: none; overflow: hidden; isolation: isolate; }
.ap-img { position: absolute; inset: 0; z-index: -2; background: var(--night-deep); }
.ap-img picture { display: contents; }
.ap-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.aud-panels a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,24,48,.97) 0%, rgba(8,24,48,.88) 38%, rgba(8,24,48,.35) 66%, rgba(8,24,48,.05) 86%); }
.aud-panels a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: var(--flame); transition: width .35s ease; }
.ap-body { display: grid; gap: .6rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.ap-n { font-size: var(--t-xs); font-weight: 750; letter-spacing: .12em; color: var(--flame); }
.ap-body h3 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 800; font-stretch: 114%; letter-spacing: -.025em; line-height: 1.05; }
.ap-body p { color: var(--on-ink-2); font-size: var(--t-sm); max-width: 30rem; }
.ap-go { display: inline-flex; align-items: center; gap: .55rem; margin-top: .4rem; font-size: var(--t-sm); font-weight: 650; }
.ap-go .go { color: var(--flame); }
.aud-panels a:hover::after, .aud-panels a:focus-visible::after { width: 100%; }
.aud-panels a:hover .ap-img img { transform: scale(1.04); }
.aud-panels a:focus-visible { outline: 3px solid var(--flame); outline-offset: -3px; }

/* Leitsatz: Flamme + große Zeile */
.statement { overflow: hidden; }
.statement-head { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
@media (min-width: 760px) { .statement-head { grid-template-columns: auto minmax(0, 1fr); } }
.statement-flame { width: clamp(4.5rem, 2rem + 8vw, 10rem); height: auto; color: var(--flame); }
.statement-title { margin-top: 1rem; font-size: clamp(2rem, .4rem + 6.2vw, 6.6rem); line-height: .96; font-weight: 820; font-stretch: 118%; letter-spacing: -.04em; color: var(--on-ink); }
.statement-title em { font-style: normal; color: var(--flame); display: block; }
@media (max-width: 520px) { .statement-title, .h-display, .h-section { font-stretch: 104%; } }
.statement .values { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.values > div { border-top-width: 3px; padding-top: 1.4rem; }
.v-n { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); font-weight: 800; font-stretch: 116%; color: var(--flame); line-height: 1; letter-spacing: -.02em; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }

/* Abschluss: Navy-Tafel mit Foto, abgesetzt vom Footer */
.cta-sec { background: var(--paper); }
.sec:not(.sec--band):not(.sec--ink) + .cta-sec { padding-top: 0; }
.cta-panel { display: grid; background: var(--night); color: var(--on-ink); border-radius: var(--r); overflow: hidden; position: relative; }
.cta-panel::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: min(38%, 18rem); height: 6px; background: var(--flame); }
@media (min-width: 900px) { .cta-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cta-copy { display: grid; gap: 1.5rem; align-content: center; padding: clamp(2.25rem, 1.5rem + 4vw, 5rem); }
.cta-copy .eyebrow { color: var(--flame); }
.cta-copy .h-section { color: var(--on-ink); }
.cta-copy .lead { color: var(--on-ink-2); }
.cta-media { position: relative; min-height: 18rem; background: var(--night-deep); }
.cta-media picture { display: contents; }
.cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-sec + .site-footer, .cta-sec { border: 0; }

@media (prefers-reduced-motion: reduce) {
  .ap-img img, .aud-panels a::after { transition: none; }
  .aud-panels a:hover .ap-img img { transform: none; }
}
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
h1, h2 { overflow-wrap: break-word; }
.datenschutz p, main p { overflow-wrap: break-word; }
.page-head .wrap > *, .hero-copy > * { min-width: 0; }

/* ==========================================================================
   Version 25: Feinschliff nach Design-Prüfung
   Regeln: Flammenkante = immer durchgehende 6-px-Naht zwischen zwei Flächen.
   Button-Paare gleich breit. Ein Bildtext-Stil (Navy-Plakette, abgesetzt).
   Zwei Überschriften-Stufen: breit (h1/h2/h-sub) und Text (h3 in Karten).
   ========================================================================== */
.nw { white-space: nowrap; }

/* Flammenkante */
.page-head::after { left: 0; right: 0; width: auto; }
.cta-panel::before { content: none; }
.cta-media::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 6px; background: var(--flame); }
@media (max-width: 899px) { .cta-media::before { right: 0; bottom: auto; width: auto; height: 6px; } }
@media (max-width: 959px) { .hero-media::before { height: 6px; } }

/* Button-Paare */
.hero-actions .btn { flex: 1 1 17rem; max-width: 20rem; white-space: nowrap; }
.nav .btn { white-space: nowrap; }
.cta-copy { padding: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (max-width: 520px) {
  .cta-copy { padding: 2.25rem 1.25rem; }
  .hero-actions .btn { flex-basis: 100%; max-width: none; }
  .btn--lg { padding-inline: 1.1rem; font-size: var(--t-sm); }
}

/* Hero: Überschrift in vier gesetzten Zeilen, Buttons auch auf Laptops sichtbar */
.hero--split .h-display { font-size: clamp(2.4rem, 1rem + 3.6vw, 4.4rem); text-wrap: wrap; }
@media (max-width: 600px) { .br-lg { display: none; } }
@media (min-width: 600px) and (max-width: 959px) { .hero-media { aspect-ratio: 16 / 10; } }

/* Leitsatz: nie mitten im Wort trennen */
.statement-title { font-size: clamp(2rem, .4rem + 6.2vw, 6rem); overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; }

/* Leistungskarten: Navy-Karte bewusst gefüllt, orange Kante nur bei Hover */
.mc-body { border-top: 3px solid transparent; transition: border-color var(--dur); }
.method-cards li:hover .mc-body, .method-cards li:focus-within .mc-body { border-top-color: var(--flame); }
.mc--all .mc-body { border-top: 0; grid-template-rows: 1fr auto auto; align-content: stretch; }
.mc--all .mc-kicker { grid-row: 1; align-self: start; }
.mc--all .mc-body > span:not(.go):not(.mc-kicker) { grid-row: 3; }


/* Ablauf: keine Kreise, kein Schein-Hover, saubere Zeilen bei mittleren Breiten */
.steps li:not(:last-child)::after { border-radius: var(--r-sm); }
.steps li:hover { border-color: var(--line); }
.sec:not(.sec--band) .steps li:hover { border-color: transparent; }
@media (min-width: 1200px) { .steps h3 { min-height: 2.6em; } }

/* Zielgruppen-Tafeln: nichts abgeschnitten, Titel auf einer Linie, Text lesbar */
.ap-n, .v-n { display: none; }
.ap-body { min-width: 0; }
.aud-panels a::before { background: linear-gradient(to top, rgba(8,24,48,.97) 0%, rgba(8,24,48,.93) 45%, rgba(8,24,48,.45) 68%, rgba(8,24,48,0) 88%); }
@media (min-width: 760px) { .ap-body p { min-height: calc(1.6em * 3); } }
@media (min-width: 760px) and (max-width: 1279px) { .ap-body p { min-height: calc(1.6em * 4); } }
@media (min-width: 760px) and (max-width: 1023px) { .ap-body { padding: 1.25rem; } .ap-body h3 { font-size: 1.45rem; } .ap-body p { min-height: calc(1.6em * 5); } }

/* Abwechselnde Bild-Text-Reihen: Raster spiegeln, damit Fotos gleich groß sind */
@media (min-width: 900px) {
  .method--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--flip > .photo { order: 2; }
}
.stack { display: grid; gap: 1.25rem; align-content: start; }
.stack--center { align-content: center; }
.method[id] { scroll-margin-top: 6rem; }

/* Bildtexte: ein Stil, keine doppelten Etiketten */
.method .photo figcaption, .split > .photo figcaption { display: none; }
.photo figcaption { left: .75rem; bottom: .75rem; max-width: calc(100% - 1.5rem); }
.photo .tag, .hero-media .tag { background: var(--night); color: var(--on-ink); font: 600 .75rem/1.35 var(--f); letter-spacing: .02em; padding: .45rem .7rem; border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-media figcaption { left: calc(6px + .75rem); bottom: .75rem; }
@media (max-width: 959px) { .hero-media figcaption { left: .75rem; } }
/* Referenzen: Bildunterschrift unter dem Foto */
.works { gap: 2rem 1.25rem; }
.works .photo { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; display: grid; gap: .7rem; align-content: start; }
.works .photo picture { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--paper-3); }
.works .photo figcaption { position: static; max-width: none; }
.works .photo figcaption .tag { background: none; padding: 0; border-radius: 0; white-space: normal; overflow: visible; font: 600 var(--t-sm)/1.35 var(--f); letter-spacing: 0; color: var(--ink); }
.works .tag .cat { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem; }
@media (max-width: 599px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; } .works .photo figcaption .tag { font-size: var(--t-xs); } }

/* Vergleichstabelle auf dem Handy gestapelt statt abgeschnitten */
@media (max-width: 699px) {
  .table-wrap { overflow: visible; }
  .compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody { border-top: 2px solid var(--ink); }
  .compare tr { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--line-2); }
  .compare th, .compare td { border: 0; padding: .25rem 0; }
  .compare tbody th { padding-bottom: .5rem; width: auto; }
  .compare td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
  .compare td::before { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.9; }
  .compare td:nth-of-type(1)::before { content: "Stickerei"; }
  .compare td:nth-of-type(2)::before { content: "Flexdruck"; }
  .compare td:nth-of-type(3)::before { content: "DTF-Transfer"; }
}

/* Überschriften: zwei Stufen, echte Hierarchie auf dem Handy */
.h-sub { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 760; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.1; }
@media (max-width: 520px) {
  .h-display, .h-section, .statement-title, .h-sub, .ap-body h3 { font-stretch: 104%; }
  .h-display { font-size: clamp(2.3rem, 1.2rem + 6vw, 2.9rem); }
  .h-section { font-size: 1.85rem; }
  .statement-title { font-size: clamp(2rem, 10vw, 3.2rem); }
}
.page-head + .sec .method-body .h-section { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }

/* Galerie Startseite: echte Abstände, keine Streifen */
@media (min-width: 900px) { .gallery { gap: 1.25rem; grid-auto-rows: 8.5rem; } .gallery .g1 { grid-row: span 4; } .gallery .g4 { grid-row: span 2; } }
@media (min-width: 600px) and (max-width: 899px) { .gallery { gap: .75rem; } .gallery .g2, .gallery .g3 { aspect-ratio: 1 / 1; } .gallery .g4 { aspect-ratio: 16 / 9; } }

/* Rechtstexte bündig mit der Überschrift; Lücken-Markierungen ordentlich */
.wrap.legal { max-width: var(--wrap); }
.wrap.legal > * { max-width: 46rem; }
.todo { display: inline-block; max-width: 100%; vertical-align: baseline; outline: 0; border: 1.5px dashed var(--flame); border-radius: var(--r-sm); background: var(--glow-soft); color: var(--ember); font: 600 var(--t-sm)/1.45 var(--f); padding: .1em .5em; box-decoration-break: slice; -webkit-box-decoration-break: slice; }
.todo-block { display: block; width: fit-content; padding: .6rem .85rem; margin-top: .35rem; }
.note { border: 1.5px dashed var(--flame); border-radius: var(--r-sm); background: var(--glow-soft); color: var(--ember); font-weight: 600; }

/* Fußzeile: festes Raster ohne verwaiste Spalte */
.foot-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-claim { grid-column: 1 / -1; } }
@media (min-width: 960px) { .foot-grid { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); } .foot-claim { grid-column: auto; } }
@media (max-width: 599px) { .foot-grid ul { gap: .1rem; } .foot-grid a:not(.brand) { display: inline-block; padding-block: .5rem; } }

/* Chronik bündig links; nur die Gründung orange */
.chronik-wrap .milestones { max-width: 46rem; margin-inline: 0; }
.ms-card p:last-child { max-width: none; }
.ms--now .ms-ico { background: var(--night); color: var(--flame); }
.ms--key .ms-ico { background: var(--flame); color: var(--night); }
.portrait figcaption { border-top: 0; padding-top: 0; }

/* Sichtbarer Tastaturfokus */
.cta-panel :focus-visible, .cc--offer :focus-visible { outline-color: var(--flame); }
.site-header .btn:focus-visible, .hero .btn:not(.btn--ghost):focus-visible, .cta-panel .btn:not(.btn--line-light):focus-visible { outline-color: var(--on-ink); }
.method-cards li:has(a:focus-visible) { border-color: var(--flame); outline: 2px solid var(--ink); outline-offset: 2px; }
.method-cards a:focus-visible { outline: none; }
.filter button:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
.filter button[aria-pressed="true"]:focus-visible { outline-color: var(--flame); }
.filter button:hover:not([aria-pressed="true"]) { background: var(--paper-3); }
.skip { background: var(--flame); color: var(--ink); }
.skip:focus-visible { outline-color: var(--on-ink); }
.nav a:not(.btn), .crumbs a, .foot-grid a, .sub-nav a { border-radius: var(--r-sm); }

/* Handy-Menü: klare Unterkante, echter Schleier, Seitenleiste auf Tablets */
@media (max-width: 959px) {
  .nav { border-bottom: 6px solid var(--flame); }
  .nav-open::after { background: rgba(8,24,48,.6); }
  .nav-toggle { min-height: 2.75rem; }
}
@media (min-width: 600px) and (max-width: 959px) { .nav { left: auto; width: min(24rem, 100%); border-left: 1px solid var(--on-line); } }

/* 404 füllt den Bildschirm */
.page-head--error { min-height: calc(100svh - var(--hdr)); display: grid; align-content: center; }
html { background: var(--night-deep); }

/* Anfrage-Vorschau: ruhige Fläche statt Drahtgitter */
.form-preview { align-content: center; border: 0; }
.form-preview .form-preview-title { font-size: var(--t-xl); font-weight: 720; line-height: 1.25; }
@media (min-width: 1000px) { .form-grid:has(.form-preview) { align-items: stretch; } .form-frame:has(.form-preview) { grid-template-rows: minmax(0, 1fr); } }

/* FAQ: Seitenspalte mitlaufend, auf dem Handy nach den Fragen */
.faq-aside { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 900px) { .faq-aside { position: sticky; top: calc(var(--hdr) + 2rem); align-self: start; } }
@media (max-width: 899px) { .faq-aside { order: 2; padding-top: 2rem; border-top: 2px solid var(--ink); } }

/* Sprungnavigation im Seitenkopf als Links erkennbar */
.sub-nav a { text-decoration-color: rgba(255,255,255,.35); }
@media (max-width: 520px) { .sub-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } }

/* Kopfzeilen-Button sieht auf jeder Seite gleich aus */
.nav .btn[aria-current="page"] { background: var(--flame); border-color: var(--flame); color: var(--ink); cursor: default; }
.faq-grid > * { min-width: 0; } .faq-aside .link { overflow-wrap: anywhere; }
.faq summary .q { min-width: 0; }
@media (min-width: 960px) { .chronik-wrap .milestones { max-width: 50rem; margin-inline: auto; } }

/* Version 26: Hero gerade im Raster (Jens: „rechtsbündig und überhaupt nicht straight“).
   Video als Fläche in der rechten Spalte, rechts bündig mit der Kopfzeile, oben auf Höhe der
   Überschrift; ab 1200 px endet es an der Oberkante der Buttons, die Bildzeile darunter steht
   auf Höhe der Buttons. Flammenkante wie bei den Unterseiten unten über die volle Breite. */
.hero--split { --h1: clamp(2.4rem, 1rem + 3.6vw, 3.875rem); display: block; min-height: 0; padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) calc(clamp(3rem, 1.5rem + 5vw, 6rem) + 6px + var(--h1) * .1); }
.hero--split::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--flame); }
.hero--split .h-display { font-size: var(--h1); margin-left: -.04em; }
.hero-media { aspect-ratio: auto; overflow: visible; background: none; display: grid; gap: .35rem; align-content: start; }
.hero-media::before { content: none; }
.hv-frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--night-deep); aspect-ratio: 4 / 3; }
.hv-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hv-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--on-line); border-radius: inherit; pointer-events: none; }
.hero-media figcaption { position: static; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; font: 600 var(--t-xs)/1.35 var(--f); letter-spacing: .02em; color: var(--on-ink-2); }
.hv-toggle { flex-shrink: 0; background: none; color: var(--on-ink); border: 1px solid var(--on-line); border-radius: var(--r-sm); padding: .4rem .75rem; font: inherit; cursor: pointer; transition: border-color var(--dur), background-color var(--dur); }
.hv-toggle:hover { border-color: var(--on-ink); }
.hv-toggle:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
@media (max-width: 959px) { .hero-media { max-width: 38rem; } }
@media (min-width: 600px) and (max-width: 959px) { .hero--split .hero-media { max-width: calc(40rem + .75rem); } }
@media (min-width: 375px) and (max-width: 600px) { .hero--split .br-lg { display: inline; } }
@media (min-width: 960px) {
  .hero--split .hero-grid { column-gap: 4rem; }
  .hero--split .hero-media { align-self: start; margin-top: calc(var(--h1) * .1); }
}
@media (min-width: 1200px) {
  .hero--split .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .hero--split .hero-media { align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; gap: 0; }
  .hv-frame { aspect-ratio: auto; min-height: 18rem; }
  .hero-media figcaption { min-height: 3.4rem; }
  .hero--split .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--split .hero-actions .btn { max-width: none; padding-inline: 1.1rem; }
  .hero + .sec .sec-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero--split .lead { font-size: clamp(1.05rem, .9rem + .3vw, 1.2rem); max-width: none; }
}
@media (min-width: 960px) and (max-height: 800px) {
  .hero--split { padding-block: 3rem calc(3rem + 6px + var(--h1) * .1); }
}
.hero + .sec { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* Version 27: Fußzeile mit Slogan statt Inhaberzeile (Jens: „das Inhaber entfernen und einen Slogan einfügen“).
   Der Slogan steht jetzt als Text in der Grundzeile; das Logo darüber ist deshalb die Fassung ohne Slogan. */
.site-footer .brand-logo { height: 3.9rem; }
.foot-base .foot-slogan { color: var(--flame); font-weight: 600; letter-spacing: .01em; }

/* Version 27: Chronik ohne „Ausblick“ (Jens). Die Zeitleiste endet jetzt am letzten Meilenstein statt darunter im Leeren. */
.ms:not(:last-child)::before { content: ""; position: absolute; left: 1.375rem; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line-2); }
@media (max-width: 560px) { .ms:not(:last-child)::before { left: 1.2rem; } }

/* Version 27: „Warum Yanik“ als Spiegelachse (Jens: „hier fehlt das Symmetrische … die Jahreszahlen machen dort keinen Sinn“).
   Jahreszahlen entfernt. Ab 720 px steht der Kopf mittig auf der Seitenachse. Ab 1140 px drei gleich breite Spalten:
   zwei Gründe links, das Foto mittig über beide Reihen, zwei Gründe rechts; alle Karten gleich hoch, Inhalt oben bündig.
   Tablet: Kartenreihe – Foto – Kartenreihe. Handy: Kopf linksbündig wie überall, Symbol neben der Überschrift. */
.why2-head { gap: 1.25rem; }
.why2 { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); }
.why2-list { list-style: none; display: grid; grid-column: 1 / -1; grid-row: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.why2-card { display: grid; align-content: start; min-width: 0; padding: 1.5rem 1.5rem 1.65rem; background: var(--paper-2); border-radius: var(--r); outline: 1px solid transparent; outline-offset: -1px; }
.why2-ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--flame); color: var(--night); border-radius: var(--r-sm); }
.why2-ico .ico { width: 1.4rem; height: 1.4rem; }
.why2-card h3 { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; letter-spacing: -.005em; hyphens: manual; -webkit-hyphens: manual; }
.why2-card p { color: var(--ink-2); font-size: var(--t-sm); }
.why2-photo { border-radius: var(--r); aspect-ratio: 4 / 3; }
.why2-photo img { object-position: 22% 14%; }
.why2-photo figcaption { display: none; }
.why2-card:nth-child(1) { grid-area: 1 / 1; }
.why2-card:nth-child(2) { grid-area: 2 / 1; }
.why2-card:nth-child(3) { grid-area: 4 / 1; }
.why2-card:nth-child(4) { grid-area: 5 / 1; }
.why2-photo { grid-area: 3 / 1; }
@media (max-width: 719px) {
  .why2-card { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; row-gap: .85rem; align-items: center; }
  .why2-card p { grid-column: 1 / -1; }
}
@media (min-width: 520px) and (max-width: 719px) { .why2-photo { aspect-ratio: 16 / 9; } .why2-photo img { object-position: 30% 21%; } }
@media (min-width: 720px) {
  .why2-head { justify-items: center; text-align: center; }
  .why2-head .h-section { max-width: 11.5em; text-wrap: balance; }
  .why2-head .lead { max-width: 40rem; text-wrap: balance; }
  .why2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto 1fr; }
  .why2-card:nth-child(1) { grid-area: 1 / 1; }
  .why2-card:nth-child(2) { grid-area: 1 / 2; }
  .why2-card:nth-child(3) { grid-area: 3 / 1; }
  .why2-card:nth-child(4) { grid-area: 3 / 2; }
  .why2-photo { grid-area: 2 / 1 / 3 / -1; aspect-ratio: 16 / 9; }
  .why2-photo img { object-position: 30% 21%; }
  .why2-card { padding: 1.75rem 1.75rem 1.9rem; }
  .why2-ico { margin-bottom: 1.35rem; }
  .why2-card h3 { margin-bottom: .5rem; }
}
@media (min-width: 1140px) {
  .why2 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; }
  .why2-card:nth-child(1) { grid-area: 1 / 1; }
  .why2-card:nth-child(2) { grid-area: 2 / 1; }
  .why2-card:nth-child(3) { grid-area: 1 / 3; }
  .why2-card:nth-child(4) { grid-area: 2 / 3; }
  .why2-photo { grid-area: 1 / 2 / -1 / 3; aspect-ratio: auto; min-height: 0; }
  .why2-photo img { object-position: 8% 40%; }
  .why2-head .lead { max-width: 46rem; }
}
@media (min-width: 1140px) and (max-width: 1199px) { .why2-card { padding-inline: 1.5rem; } .why2-card h3 { font-size: var(--t-md); } }
@supports not (grid-template-rows: subgrid) {
  .why2, .why2-list { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .why2-list, .why2-card:nth-child(n), .why2-photo { grid-area: auto; }
  @media (min-width: 720px) { .why2-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why2-photo { aspect-ratio: 16 / 9; } }
}

/* Version 27: Ablauf als Ziffernfolge (Jens: „das geht optisch besser“).
   Große breite Ziffern als Leitelement, gleich hohe Karten, Titel und Texte auf gemeinsamen Linien (Subgrid).
   Ab 1200 px zeigt unter jeder Ziffer eine Linie mit Pfeilspitze zum nächsten Schritt; Ziel „Übergabe“ in Navy
   mit oranger Ziffer. Darunter Zeilen ohne Pfeile, die Ziffern tragen die Reihenfolge.
   Gilt nur auf der Startseite (#ablauf .flow); .steps auf den Unterseiten bleibt unverändert. */
#ablauf .flow { --pad: 1.25rem; list-style: none; display: grid; gap: .75rem; }
#ablauf .flow-step { position: relative; min-width: 0; display: grid; align-content: start; padding: var(--pad); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
#ablauf .flow-n { display: block; color: var(--ink); font-size: 2.75rem; font-weight: 800; font-stretch: 118%; letter-spacing: -.04em; line-height: .7; font-variant-numeric: tabular-nums lining-nums; }
#ablauf .flow-ico { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); border-radius: var(--r-sm); }
#ablauf .flow-ico svg { width: 1.375rem; height: 1.375rem; }
#ablauf .flow-step h3 { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; color: var(--ink); hyphens: manual; -webkit-hyphens: manual; }
#ablauf .flow-step p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
#ablauf .flow-rail { display: none; }
#ablauf .flow-step--goal { background: var(--night); border-color: var(--night); }
#ablauf .flow-step--goal .flow-n { color: var(--flame); }
#ablauf .flow-step--goal .flow-ico { background: var(--on-line); color: var(--on-ink); }
#ablauf .flow-step--goal h3 { color: var(--on-ink); }
#ablauf .flow-step--goal p { color: var(--on-ink-2); }
@media (max-width: 699px) {
  #ablauf .flow-step { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .875rem; row-gap: .55rem; }
  #ablauf .flow-n { grid-column: 1; grid-row: 1; align-self: baseline; font-size: 3rem; }
  #ablauf .flow-step h3 { grid-column: 2; grid-row: 1; align-self: baseline; }
  #ablauf .flow-ico { grid-column: 3; grid-row: 1; align-self: start; width: 2.25rem; height: 2.25rem; }
  #ablauf .flow-ico svg { width: 1.25rem; height: 1.25rem; }
  #ablauf .flow-step p { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 520px) { #ablauf .steps-cta .btn { width: 100%; } }
@media (min-width: 700px) and (max-width: 1199px) {
  #ablauf .flow { grid-auto-rows: 1fr; }
  #ablauf .flow-step { grid-template-columns: 4.25rem 2.5rem minmax(0, 12rem) minmax(0, 1fr); column-gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: center; align-content: center; padding: 1.25rem 1.5rem; }
  #ablauf .flow-n { font-size: 3.75rem; }
  #ablauf .flow-step p { max-width: 32rem; }
}
@media (min-width: 1200px) {
  #ablauf .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 0 .75rem; }
  #ablauf .flow-step { grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; padding: 1.5rem var(--pad); }
  #ablauf .flow-n { grid-column: 1; grid-row: 1; align-self: end; font-size: 5rem; font-variant-numeric: proportional-nums lining-nums; margin-left: -.045em; }
  #ablauf .flow-ico { grid-column: 2; grid-row: 1; align-self: end; }
  #ablauf .flow-rail { display: block; position: relative; grid-column: 1 / -1; grid-row: 2; height: 2px; margin: 1.25rem 0 1.4rem; background: var(--line-2); }
  #ablauf .flow-rail::after { content: ""; position: absolute; right: 1px; top: 50%; width: .55rem; height: .55rem; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: translateY(-50%) rotate(45deg); }
  #ablauf .flow-step--goal .flow-rail { background: var(--on-line); }
  #ablauf .flow-step--goal .flow-rail::after { content: none; }
  #ablauf .flow-step h3 { grid-column: 1 / -1; grid-row: 3; font-size: 1.125rem; letter-spacing: -.005em; }
  #ablauf .flow-step p { grid-column: 1 / -1; grid-row: 4; margin-top: .55rem; }
}
@media (min-width: 1200px) and (max-width: 1319px) { #ablauf .flow { --pad: 1.125rem; } }
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 1200px) { #ablauf .flow-step { grid-row: auto; grid-template-rows: auto auto auto 1fr; } }
}

/* ==========================================================================
   Version 28: Datenschutzerklärung – Kurzfassung, Inhaltsverzeichnis, Widerspruchsrecht
   ========================================================================== */
.legal-brief { background: var(--paper-2); border-radius: var(--r); padding: 1.25rem 1.5rem; }
.legal-brief ul { gap: .5rem; }
.legal-toc ol { margin: 0; padding-left: 1.6rem; display: grid; gap: .35rem 2.5rem; color: var(--ink-2); }
.legal-toc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.legal-toc a:hover { text-decoration-color: var(--flame); }
@media (min-width: 640px) { .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(6, auto); } }
.legal-box { background: var(--paper-2); border-left: 3px solid var(--flame); border-radius: var(--r-sm); padding: 1.25rem 1.5rem; }
.form-privacy { font-size: var(--t-sm); color: var(--ink-2); }