/*
Theme Name:   BOW Child (bow.studio)
Theme URI:    https://bow.studio
Description:  Child-Theme fuer bow.studio. Design-Tokens und Styles des
              Relaunch-Handoffs (design_handoff_relaunch), Fonts lokal.
              Funktionalitaet liegt im Plugin bow-core.
Author:       BOLD
Template:     bricks
Version:      0.2.0
Text Domain:  bow-child
*/

/* ==========================================================================
   1. Fonts — lokal gehostet (DSGVO, Leitfaden 9.1)
   Dateien mit der UA des Pruefbrowsers geholt: Google liefert je UA
   unterschiedliche Varianten mit abweichenden Metriken.
   42dot Sans und Merriweather sind Variable Fonts (eine Datei je Subset,
   Faces je Gewicht einzeln deklariert — wie Google es tut). Akatab ist
   statisch, dort gibt es je Gewicht eine eigene Datei.
   ========================================================================== */

/* --- 42dot Sans (UI) — nur latin, Umlaute liegen darin --------------- */
@font-face { font-family: '42dot Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/42dotsans-latin.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: '42dot Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/42dotsans-latin.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: '42dot Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/42dotsans-latin.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; }

/* --- Merriweather (Headlines) ---------------------------------------- */
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/merriweather-latin.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: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/merriweather-latin.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: 'Merriweather'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/merriweather-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/merriweather-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --- Akatab (laengere Fliesstexte in Karten) ------------------------- */
@font-face { font-family: 'Akatab'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/akatab-400-latin.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: 'Akatab'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/akatab-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Akatab'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/akatab-500-latin.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: 'Akatab'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/akatab-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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 (Figma-Variablensatz, README "Design-Tokens")
   ========================================================================== */

:root {
  /* Grundfarben */
  --bow-dark:    rgb(26,26,23);
  --bow-light:   rgb(244,243,234);
  --bow-accent:  rgb(182,228,0);
  --bow-surface: rgb(230,232,221);
  --bow-muted:   rgb(134,127,118);
  --bow-weiss:   rgb(255,255,255);

  /* Transparenzstufen, immer aus dark bzw. light abgeleitet */
  --bow-dark-04: rgba(26,26,23,0.04);
  --bow-dark-08: rgba(26,26,23,0.08);
  --bow-dark-16: rgba(26,26,23,0.16);
  --bow-dark-32: rgba(26,26,23,0.32);
  --bow-dark-48: rgba(26,26,23,0.48);
  --bow-dark-64: rgba(26,26,23,0.64);
  --bow-dark-88: rgba(26,26,23,0.88);
  --bow-light-04: rgba(244,243,234,0.04);
  --bow-light-08: rgba(244,243,234,0.08);
  --bow-light-16: rgba(244,243,234,0.16);
  --bow-light-32: rgba(244,243,234,0.32);
  --bow-light-48: rgba(244,243,234,0.48);
  --bow-light-64: rgba(244,243,234,0.64);
  --bow-light-88: rgba(244,243,234,0.88);

  /* Schriftfamilien */
  /* Akatab als zweite Stufe, nicht die Systemschrift: der Latin-Schnitt von
     42dot Sans hat KEINE deutschen Umlaute und kein scharfes S (gemessen mit
     CSS.getPlatformFontsForNode — "regelmäßige" holte sich ä und ß aus
     Liberation Serif). Akatab gehoert zum Design und faellt kaum auf. */
  --bow-ui:      '42dot Sans', 'Akatab', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bow-serif:   'Merriweather', Georgia, serif;
  --bow-fliess:  'Akatab', -apple-system, sans-serif;

  /* Radien */
  --bow-r-4:   4px;
  --bow-r-8:   8px;
  --bow-r-16:  16px;
  --bow-r-32:  32px;

  /* Raster */
  --bow-max:   1376px;
  --bow-rand:  32px;

  /* Deckkraft des Schleiers ueber Bildern, auf denen Text liegt.
     Handoff-Wert 0.32. Gemessen reicht er fuer die Platzhalterfotos
     nicht durchgehend fuer WCAG AA (tests/kontrast-bild.js) — vor dem
     Livegang mit den echten Fotos neu messen und hier nachziehen. */
  --bow-schleier: 0.32;

  /* Inset-Schatten der Buttons und Glasflaechen */
  --bow-inset: inset 0 1px 0 0 var(--bow-dark-04), inset 0 -1px 0 0 var(--bow-dark-08);
}

/* ==========================================================================
   3. Basis + Neutralisierung der Bricks-Defaults
   Bricks vererbt global line-height 1.7 (Headings 1.4) und stylt generische
   Tags per Element-Selektor. Die Design-Referenz setzt alle Zeilenhoehen
   explizit — ohne diesen Block weicht jede Kachelhoehe ab (Leitfaden 9.2).
   ========================================================================== */

.bow-page {
  background: var(--bow-light);
  color: var(--bow-dark);
  font-family: var(--bow-ui);
  font-weight: 400;
  line-height: normal;
  overflow-x: hidden;
  /* Lange Komposita ("Briefinggespraeche") sind bei 320px breiter als die
     Zeile. Der Notumbruch greift nur dann — am Desktop aendert er nichts,
     gemessen gegen die Referenz. */
  overflow-wrap: break-word;
}

.bow-page :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; }
.bow-page :where(p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.bow-page :where(ul, ol) { list-style: none; padding: 0; }
.bow-page :where(img, svg) { display: block; max-width: 100%; }

.bow-page a { color: var(--bow-dark); text-decoration: none; }
.bow-page a:hover { color: var(--bow-dark-64); }

/* Auf dunklen Flaechen dreht sich die Linkfarbe */
.bow-page .bow-auf-dunkel a { color: var(--bow-light); }
.bow-page .bow-auf-dunkel a:hover { color: var(--bow-light-64); }

/* Bricks stylt blockquote/cite/figcaption per Tag — zurueckdrehen (4.3) */
.bow-page blockquote { font-family: inherit; font-size: inherit; margin: 0; padding-left: 0; border-left: 0; }
.bow-page blockquote cite { font-family: inherit; font-style: normal; text-transform: none; opacity: 1; }
.bow-page figcaption { text-align: left; }

.bow-page :where(input, select, textarea, button) {
  font-family: var(--bow-ui); font-weight: 400; line-height: normal; color: inherit;
}

.bow-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bow-accent); outline-offset: 3px;
}

/* Sprungziele nicht unter der fixen Leiste verstecken (64px + Luft) */
.bow-page [id] { scroll-margin-top: 88px; }

/* ==========================================================================
   4. Layout
   Raster des Handoffs: Sektion randlos, Inhalt zentriert auf max. 1376px
   mit mindestens 32px Seitenrand. Das erledigt eine einzige Zeile —
   kein zusaetzlicher Breiten-Container noetig (und damit keine Bricks-
   Container-Breite, die man wieder wegargumentieren muss).
   ========================================================================== */

.bow-block {
  width: 100%;
  box-sizing: border-box;
  padding-inline: max(var(--bow-rand), calc((100% - var(--bow-max)) / 2));
}

.bow-block--randlos { padding-inline: 0; }

/* Vertikale Sektionsabstaende: 80 Standard, 120 und 160 fuer ruhige Sektionen */
.bow-y-80  { padding-block: 80px; }
.bow-y-120 { padding-block: 120px; }
.bow-y-160 { padding-block: 160px; }

/* Flaechen */
.bow-flaeche--hell   { background: var(--bow-light);   color: var(--bow-dark); }
.bow-flaeche--dunkel { background: var(--bow-dark);    color: var(--bow-light); }
.bow-flaeche--akzent { background: var(--bow-accent);  color: var(--bow-dark); }
.bow-flaeche--grund  { background: var(--bow-surface); color: var(--bow-dark); }

/* ==========================================================================
   5. Typografie-Rollen (Tabelle im Handoff-README)
   ========================================================================== */

/* Die grossen Grade skalieren erst, wenn sie nicht mehr passen: min()
   haelt den Design-Wert exakt, solange Platz ist (Display bis ~600px
   Viewport, H2 bis ~436px). Ein unteilbares Wort wie "Agenturniveau." in
   60px sprengt sonst jedes Handy-Display. Zeilenhoehe und Laufweite
   deshalb als em, damit sie mitskalieren:
   64/60 = 1.0667 · -2.5/60 = -0.041667em usw. */
.bow-t-display { font-family: var(--bow-serif); font-weight: 400; font-size: min(60px, 10vw); line-height: 1.0667; letter-spacing: -0.041667em; }
.bow-t-h2      { font-family: var(--bow-serif); font-weight: 400; font-size: min(48px, 11vw); line-height: 1.0833; letter-spacing: -0.041667em; }
.bow-t-h2s     { font-family: var(--bow-serif); font-weight: 400; font-size: min(40px, 10vw); line-height: 1.2;    letter-spacing: -0.0375em; }
.bow-t-h3      { font-family: var(--bow-serif); font-weight: 400; font-size: min(32px, 9vw);  line-height: 1.25;   letter-spacing: -0.03125em; }
.bow-t-fnav    { font-family: var(--bow-serif); font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: -1px; }
.bow-t-karte   { font-family: var(--bow-ui); font-weight: 700; font-size: 20px; line-height: 28px; }
.bow-t-lead    { font-family: var(--bow-ui); font-weight: 500; font-size: 16px; line-height: 24px; }
.bow-t-fliess  { font-family: var(--bow-fliess); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.25px; }
.bow-t-ui      { font-family: var(--bow-ui); font-weight: 400; font-size: 14px; line-height: 20px; }
.bow-t-meta    { font-family: var(--bow-ui); font-weight: 500; font-size: 12px; line-height: 16px; }
.bow-t-meta700 { font-family: var(--bow-ui); font-weight: 700; font-size: 12px; line-height: 16px; }
.bow-t-eyebrow { font-family: var(--bow-ui); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1px; text-transform: uppercase; }
.bow-t-spalte  { font-family: var(--bow-ui); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 3px; text-transform: uppercase; }
.bow-t-mini    { font-family: var(--bow-ui); font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 2px; text-transform: uppercase; }

/* Sonderfaelle aus den Referenzdateien (nicht in der Tabelle) */
.bow-t-aussage { font-family: var(--bow-ui); font-weight: 500; font-size: min(28px, 8vw); line-height: 1.1429; letter-spacing: -0.035714em; }

/* ==========================================================================
   6. Wiederverwendbare Komponenten (README "Wiederverwendbare Komponenten")
   ========================================================================== */

/* 1 Eyebrow — 8px Akzentpunkt + Uppercase-Label, gap 16px */
.bow-eyebrow { display: flex; flex-direction: row; gap: 16px; align-items: center; }
.bow-eyebrow__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--bow-accent); flex-shrink: 0; }
/* Im Design steht der Eyebrow in einer 36px hohen Zeile */
.bow-eyebrow--zeile { height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; }

/* 2 Slot-Badge */
.bow-slots { display: inline-flex; flex-direction: row; gap: 8px; align-items: center; border-radius: var(--bow-r-32); padding: 6px 12px; white-space: nowrap; background: var(--bow-surface); }
.bow-slots__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--bow-accent); flex-shrink: 0; }
.bow-slots--dunkel { background: var(--bow-light-08); border: 1px solid var(--bow-light-16); }

/* 3+4 Buttons */
.bow-page .bow-btn {
  height: 44px; box-sizing: border-box; border-radius: var(--bow-r-32); border: 0;
  /* Seitliches Polster 21px statt der 16px des Handoffs (auf Wunsch, +5px je
     Seite). Hoehe und Schriftgrad bleiben. */
  display: inline-flex; gap: 8px; padding: 12px 21px; justify-content: center; align-items: center;
  font-family: var(--bow-ui); font-weight: 400; font-size: 14px; line-height: 20px;
  white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.bow-page .bow-btn.bow-btn--akzent        { background: var(--bow-accent); color: var(--bow-dark); box-shadow: var(--bow-inset); }
.bow-page .bow-btn.bow-btn--akzent:hover  { background: var(--bow-dark);   color: var(--bow-accent); }
.bow-page .bow-btn.bow-btn--dunkel        { background: var(--bow-dark);   color: var(--bow-light); }
.bow-page .bow-btn.bow-btn--dunkel:hover  { background: var(--bow-accent); color: var(--bow-dark); }
/* sekundaer: transparent mit Rahmen — hell auf dunkel, dunkel auf hell */
.bow-page .bow-btn.bow-btn--glas          { background: var(--bow-light-04); border: 1px solid var(--bow-light-48); color: var(--bow-light); backdrop-filter: blur(64px); }
.bow-page .bow-btn.bow-btn--glas:hover    { background: var(--bow-light-08); color: var(--bow-light); }
.bow-page .bow-btn.bow-btn--linie         { background: var(--bow-light); border: 1px solid var(--bow-dark-48); color: var(--bow-dark); }
.bow-page .bow-btn.bow-btn--linie:hover   { background: var(--bow-surface); color: var(--bow-dark); }
.bow-page .bow-btn.bow-btn--kompakt       { height: 40px; padding: 10px 21px; }

/* 5 Chip */
.bow-chip { display: inline-flex; align-items: center; border-radius: var(--bow-r-32); padding: 12px 16px; font-family: var(--bow-ui); font-size: 14px; line-height: 20px; color: var(--bow-dark); box-sizing: border-box; }
.bow-chip--gefuellt { background: var(--bow-surface); border: 1px solid var(--bow-dark-16); }
.bow-chip--rahmen   { background: transparent; border: 1px solid var(--bow-dark-16); }
.bow-chip--weit     { padding: 12px 20px; }
.bow-chip--voll     { background: var(--bow-surface); border: 0; }

/* Chip mit Icon-Kreis und Pfeil (Hinweis ueber dem Intro) */
.bow-hinweis { display: inline-flex; flex-direction: row; gap: 8px; align-items: center; height: 32px; box-sizing: border-box; border-radius: var(--bow-r-32); background: var(--bow-surface); padding: 4px 8px 4px 4px; }
.bow-hinweis__kreis { width: 24px; height: 24px; border-radius: var(--bow-r-32); background: var(--bow-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.bow-hinweis__kreis svg { width: 14px; height: 16px; }
.bow-hinweis__pfeil { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.bow-hinweis__pfeil svg { width: 4px; height: 8px; }

/* 6 Karte */
.bow-karte { border-radius: var(--bow-r-8); background: var(--bow-surface); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.bow-karte--dunkel { background: transparent; border: 1px solid var(--bow-light-16); }

/* 7 Kennzahl — Akzentstrich links, nie rundum umrandet */
.bow-kennzahl { height: 116px; box-sizing: border-box; border-left: 2px solid var(--bow-accent); display: flex; flex-direction: column; gap: 16px; padding: 0 24px; align-items: flex-start; }
.bow-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 32px; align-self: stretch; width: 100%; }

/* 8 Icon-Kachel */
.bow-ikachel { width: 40px; height: 40px; box-sizing: border-box; border-radius: var(--bow-r-8); background: var(--bow-accent); color: var(--bow-dark); display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.bow-ikachel svg { width: 18px; height: 18px; }

/* Glas-Etikett auf Bildern */
/* Grund der Bild-Etiketten. Der Handoff-Wert war --bow-dark-32 und ging von
   dunklen Fotos aus; die echten Referenzentwürfe sind überwiegend hell, dort
   lag weiße Schrift bei 2,04:1 (Solée) bis 3,3:1 (raumgut). Ein Token, damit
   die Entscheidung an einer Stelle steht — wie --bow-schleier. */
:root { --bow-etikett-grund: rgba(26, 26, 23, 0.62); }

.bow-etikett { height: 36px; box-sizing: border-box; border-radius: var(--bow-r-8); background: var(--bow-etikett-grund); backdrop-filter: blur(40px); box-shadow: var(--bow-inset); display: inline-flex; flex-direction: row; gap: 16px; padding: 12px 16px; align-items: center; color: var(--bow-light); }

/* Bilder: im Design Hintergrundbilder, hier echte <img> mit object-fit —
   damit srcset, Lazyload und die Mediathek greifen (Leitfaden 6.3). */
.bow-bild { position: relative; overflow: hidden; border-radius: var(--bow-r-8); }
.bow-bild > img { width: 100%; height: 100%; object-fit: cover; }
.bow-bild--eckig { border-radius: 0; }
.bow-bild__inhalt { position: absolute; inset: 0; display: flex; padding: 32px; box-sizing: border-box; }
.bow-bild__inhalt--unten { align-items: flex-end; }
/* Overlay ueberall, wo Text auf dem Bild liegt */
.bow-bild__schleier { position: absolute; inset: 0; background: var(--bow-dark-32); }
/* Platzhalterflaeche, solange kein Bild vorliegt */
.bow-platzhalter { background: repeating-linear-gradient(135deg, var(--bow-surface) 0 8px, var(--bow-light) 8px 16px); border: 1px solid var(--bow-dark-16); box-sizing: border-box; }
.bow-platzhalter__text { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 16px; color: var(--bow-dark-48); }

/* Trennlinie ueber Rasterzellen */
.bow-strich-oben { padding-top: 24px; border-top: 1px solid var(--bow-dark-16); }
.bow-auf-dunkel .bow-strich-oben { border-top-color: var(--bow-light-16); }

/* Punktliste mit Akzentpunkten */
.bow-punkte { display: flex; flex-direction: column; gap: 12px; }
.bow-punkte li { display: flex; flex-direction: row; gap: 16px; align-items: center; }
.bow-punkte li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bow-accent); flex-shrink: 0; }

/* ==========================================================================
   7. Fixe Navigation
   ========================================================================== */

.bow-nav {
  position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: 100;
  background: var(--bow-weiss); border-bottom: 1px solid var(--bow-dark-16);
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center; box-sizing: border-box;
  visibility: hidden;
}
.bow-nav--sichtbar { visibility: visible; animation: bowNavIn 420ms cubic-bezier(0.16,0.84,0.24,1) both; }
.bow-nav__logo { display: flex; align-items: center; color: var(--bow-dark); }
.bow-nav__logo svg { width: 81px; height: 32px; }
.bow-nav__rechts { display: flex; flex-direction: row; gap: 24px; align-items: center; }
.bow-nav__link { font-family: var(--bow-ui); font-size: 14px; line-height: 20px; color: var(--bow-dark); }
.bow-nav__link--aktiv { font-weight: 700; }
/* Sentinel: solange er sichtbar ist, bleibt die Leiste aus (IntersectionObserver) */
.bow-nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 400px; pointer-events: none; }

@keyframes bowNavIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ==========================================================================
   8. Sektionen
   ========================================================================== */

/* --- Hero (Startseite) ----------------------------------------------- */
.bow-hero { position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--bow-dark);
  /* Der Handoff nennt 1096px. Gebunden wird stattdessen an die Fensterhoehe:
     das Bild fuellt das Fenster genau, und alles im Hero ist auf den ersten
     Blick da. Mit 1096px waren die zwei Kleinschriften unten bei jedem
     Fenster unter 1048px abgeschnitten. svh statt vh, damit Browserleisten
     mitgerechnet werden; min-height statt height, damit der Kasten im
     Notfall mit dem Inhalt waechst statt ihn zu beschneiden. */
  min-height: 100vh;
  min-height: 100svh;
  /* Haelt den mittigen Inhalt frei von Logo (oben) und Kleinschriften
     (unten), auch wenn das Fenster niedrig ist. */
  padding-block: 128px 112px; }
.bow-hero--adminleiste { min-height: calc(100svh - 32px); }
@media (max-width: 782px) { .bow-hero--adminleiste { min-height: calc(100svh - 46px); } }
.bow-hero__bild { position: absolute; inset: 0; }
.bow-hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.bow-hero__schleier { position: absolute; inset: 0; background: rgba(26,26,23,var(--bow-schleier)); }
.bow-hero__logo { position: absolute; top: 48px; color: var(--bow-light); }
.bow-hero__logo svg { width: 96px; height: 38px; }
.bow-hero__inhalt { position: relative; width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; color: var(--bow-light); }
.bow-hero__zeile { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 48px; justify-content: space-between; align-items: flex-end; }
.bow-hero__titel { flex: 1 1 480px; max-width: 640px; color: var(--bow-light); }   /* Umbruch kommt als <br>, kein pre-line */
.bow-hero__rechts { flex: 0 1 448px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.bow-hero__aktionen { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.bow-hero__fuss { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none; }
.bow-hero__verlauf { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,23,0) 0%, var(--bow-dark-64) 100%); }
.bow-hero__marke { position: absolute; bottom: 48px; width: 120px; color: var(--bow-light-88); }
.bow-hero__marke--links { left: max(var(--bow-rand), calc((100% - var(--bow-max)) / 2)); }
.bow-hero__marke--rechts { right: max(var(--bow-rand), calc((100% - var(--bow-max)) / 2)); text-align: right; }

/* --- Seitenkopf (Unterseiten) ---------------------------------------- */
.bow-kopf { position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding-block: 64px 80px; background: var(--bow-dark); color: var(--bow-light); }
.bow-kopf--bild { min-height: 760px; }
.bow-kopf__bild { position: absolute; inset: 0; }
.bow-kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.bow-kopf__schleier { position: absolute; inset: 0; background: rgba(26,26,23,var(--bow-schleier)); }
.bow-kopf__leiste { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; }
.bow-kopf__logo { display: flex; align-items: center; color: var(--bow-light); }
.bow-kopf__logo svg { width: 96px; height: 38px; }
.bow-kopf__nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: center; }
.bow-page .bow-auf-dunkel a.bow-kopf__link { color: var(--bow-light-64); }
.bow-kopf__link { font-family: var(--bow-ui); font-size: 14px; line-height: 20px; color: var(--bow-light-64); }
.bow-page .bow-auf-dunkel a.bow-kopf__link--aktiv { color: var(--bow-light); }
.bow-kopf__link--aktiv { color: var(--bow-light); font-weight: 700; }
.bow-kopf__titelzeile { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 48px; justify-content: space-between; align-items: flex-end; }
.bow-kopf__titelzeile--luft { padding-top: 80px; }
.bow-kopf__titel { flex: 1 1 640px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.bow-kopf__h1 { width: 100%; max-width: 800px; color: var(--bow-light); }
.bow-kopf__h1--760 { max-width: 760px; }
.bow-kopf__subline { flex: 0 1 448px; color: var(--bow-light-64); }
.bow-kopf__subline--voll { color: var(--bow-light); }

/* --- Intro (zentriert) ----------------------------------------------- */
.bow-intro { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; max-width: 680px; margin-inline: auto; padding-inline: 32px;   /* border-box wie in der Referenz: Inhalt 616px */ box-sizing: border-box; }
.bow-intro__titel { align-self: stretch; text-align: center; }
.bow-intro__unten { display: flex; flex-direction: column; gap: 24px; padding: 0 clamp(0px, 6vw, 64px); align-items: center; box-sizing: border-box; align-self: stretch; }
.bow-intro__subline { align-self: stretch; text-align: center; }

/* --- Referenz-Slider ------------------------------------------------- */
/* Hoehe des Sliders an einer Stelle: Kasten, Band und Karte teilen sie.
   78vh deckelt das Telefon-Querformat (844x420), wo 480px hoeher waeren als
   das Fenster. */
:root { --bow-slider-hoehe: min(480px, 60vw, 78vh); }
.bow-slider { position: relative; width: 100%; height: var(--bow-slider-hoehe); }
.bow-slider__band { position: absolute; left: 0; top: 0; height: var(--bow-slider-hoehe); display: flex; flex-direction: row; gap: 16px; align-items: center; width: max-content; animation: bowSlide 80s linear infinite; }
.bow-slider__satz { display: flex; flex-direction: row; gap: 16px; align-items: center; flex-shrink: 0; }
.bow-slider__karte { position: relative; height: var(--bow-slider-hoehe); overflow: hidden; border-radius: var(--bow-r-8); background: var(--bow-surface); display: flex; flex-direction: column; padding: 32px; justify-content: flex-end; align-items: flex-start; box-sizing: border-box; flex-shrink: 0; }
.bow-slider__karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bow-slider__karte .bow-etikett { position: relative; }

/* Knopf auf der Karte. Er liegt ueber dem Bild (das Bild ist absolut
   positioniert), deshalb position: relative. */
/* ---------------------------------------------------------------------------
   Knopf „Website ansehen" auf dem Referenzbild

   Er erscheint beim Ueberfahren — vorher lag er auf dem Entwurf (verdeckte
   ihn) und danach darunter (zerriss die Reihe). Dazu ein leichter Schleier,
   damit der Knopf auf hellen wie dunklen Entwuerfen lesbar ist.

   Auf Geraeten ohne Zeiger (Telefon, Tablet) steht er dauerhaft da: dort gibt
   es kein Ueberfahren, und ein unerreichbarer Knopf ist schlimmer als einer,
   der immer zu sehen ist.
   --------------------------------------------------------------------------- */
/* Ohne Rahmen (Kundenwunsch 30.08.2026): auf dem Schleier wirkte die Linie
   wie ein zweiter Kasten um den Knopf. Volle Flaeche, kein Strich. */
.bow-page .bow-ref-knopf {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.98);
  gap: 6px; z-index: 2; white-space: nowrap;
  background: var(--bow-light); color: var(--bow-dark); border: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.bow-page .bow-ref-knopf:hover { background: var(--bow-accent); color: var(--bow-dark); }
.bow-ref-knopf svg { flex: none; }

/* Schleier unter dem Knopf, gleiche Ecken wie die Karte. */
.bow-slider__karte::after,
.bow-listing__bild::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(26, 26, 23, 0.32);
  opacity: 0; transition: opacity 160ms ease; pointer-events: none;
  border-radius: inherit;
}

/* Kein @media (hover: hover): auf dem Telefon soll der Knopf ebenfalls erst
   erscheinen, wenn jemand das Bild antippt (Kundenwunsch 30.08.2026). Mobile
   Browser setzen bei der ersten Beruehrung den Hover-Zustand und geben den
   Klick nicht an den Link weiter — genau das ist hier gewollt: einmal tippen
   zeigt den Knopf, das zweite Tippen oeffnet die Website. */
.bow-slider__karte:hover .bow-ref-knopf,
.bow-slider__karte:focus-within .bow-ref-knopf,
.bow-listing__bild:hover .bow-ref-knopf,
.bow-listing__bild:focus-within .bow-ref-knopf {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1);
}

.bow-slider__karte:hover::after,
.bow-slider__karte:focus-within::after,
.bow-listing__bild:hover::after,
.bow-listing__bild:focus-within::after { opacity: 1; }

/* Ohne Zeiger setzt das Skript diese Klasse bei der ersten Beruehrung. */
.bow-ref-offen .bow-ref-knopf { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.bow-ref-offen::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bow-ref-knopf { transition: none; }
}

/* Das Band laeuft weiter, auch wenn der Zeiger darauf liegt (Kundenwunsch
   30.08.2026): ein Slider, der beim Ueberfahren stehen bleibt, wirkt wie
   eingefroren. Treffen laesst sich der Knopf trotzdem — das Band macht rund
   44 px/s, ein 175px breiter Knopf steht damit vier Sekunden unter dem
   Zeiger.

   Beim TASTATURFOKUS haelt es an: dort kann man nicht nachfuehren, und ein
   Fokusrahmen, der aus dem Bild faehrt, ist unbrauchbar. */
.bow-slider:focus-within .bow-slider__band { animation-play-state: paused; }
/* Die Randverlaeufe des Handoffs (120px hell, links und rechts) sind
   entfallen — sie hellten den Bildinhalt auf, den der Slider zeigen soll.
   Regeln bleiben nicht als Leichen stehen; wer sie zurueckholt, findet die
   Begruendung in elements/slider.php. */

@keyframes bowSlide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }

/* --- Festlegungen (dunkel) ------------------------------------------ */
.bow-festlegungen { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; }
.bow-festlegungen__titel { width: 100%; max-width: 680px; }
.bow-festlegungen__zeile { display: flex; flex-direction: row; flex-wrap: wrap; gap: 80px; align-items: stretch; align-self: stretch; }
.bow-festlegungen__bild { flex: 1 1 480px; min-width: 0; max-width: 796px; border-radius: var(--bow-r-8); overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 16px; box-sizing: border-box; }
.bow-festlegungen__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bow-festlegungen__bild .bow-etikett { position: relative; }
.bow-festlegungen__spalte { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 64px; align-items: flex-start; }
.bow-festlegungen__oben { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; align-self: stretch; }
.bow-festlegungen__punkte { display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
.bow-festlegungen__punkt { display: flex; flex-direction: column; gap: 4px; }
.bow-festlegungen__punkt-titel { font-family: var(--bow-ui); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--bow-light); }
.bow-festlegungen__punkt-text { color: var(--bow-light-64); }

/* --- Danach ---------------------------------------------------------- */
.bow-danach { display: flex; flex-direction: row; flex-wrap: wrap; gap: 80px; justify-content: space-between; align-items: flex-end; }
.bow-danach__links  { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 80px; align-items: flex-start; }
.bow-danach__rechts { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 80px; align-items: flex-start; }
.bow-danach__kopf { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; align-self: stretch; }
.bow-danach__bild-gross { width: 100%; max-width: 451px; height: 477px; box-shadow: var(--bow-inset); }
.bow-danach__bild-klein { height: 312px; align-self: stretch; box-shadow: var(--bow-inset); }

/* --- Schritt-Karten -------------------------------------------------- */
.bow-schritte { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; }
.bow-schritte__kopf { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; align-self: stretch; }
.bow-schritte__titel { width: 100%; max-width: 680px; }
.bow-schritte__reihe { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: stretch; align-self: stretch; }
.bow-schritte__karte { flex: 1 1 240px; min-height: 256px; padding: 24px; align-items: flex-start;
  /* Nicht space-between erben: der Abstand Titel-Text waere sonst blosser
     Restplatz und bei fuenfzeiligem Text 0. 16px bindet den Titel an seinen
     Text, waehrend die Zahlenkachel mit 24px abgesetzt bleibt. */
  justify-content: flex-start; gap: 16px; }
.bow-schritte__oben { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; align-self: stretch; }
.bow-schritte__nr { font-family: var(--bow-ui); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1px; }
.bow-schritte__karte-titel { align-self: stretch; }
.bow-schritte__text { align-self: stretch; color: var(--bow-dark-88); }

/* --- Preisbeispiele (dunkel) ---------------------------------------- */
/* --- Kontrast: "Sonst" gegen "Bei uns" ---------------------------------
   Steht seit 26.08.2026 anstelle der Preisbeispiele. Zwei Spalten mit
   trennender Linie; die rechte Spalte tragt die Aussage, deshalb heller.
   Unter 700px stapeln die Zellen, dann erscheinen die Etiketten je Zelle —
   sonst stünden zwei Sätze ohne Bezug untereinander. */
.bow-kontrast { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; }
.bow-kontrast__kopf { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; align-self: stretch; }
.bow-kontrast__titel { width: 100%; max-width: 680px; }
.bow-kontrast__tabelle { align-self: stretch; display: flex; flex-direction: column; }
.bow-kontrast__spaltenkopf,
.bow-kontrast__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: start; }
.bow-kontrast__spaltenkopf { padding-bottom: 16px; border-bottom: 1px solid var(--bow-light-16); }
.bow-kontrast__kopf-links { color: var(--bow-light-48); }
.bow-kontrast__kopf-rechts { color: var(--bow-light-64); }
.bow-kontrast__zeile { padding-block: 24px; border-bottom: 1px solid var(--bow-light-16); }
.bow-kontrast__zelle { display: flex; flex-direction: column; gap: 8px; }
.bow-kontrast__zelle--sonst .bow-kontrast__text { color: var(--bow-light-48); }
.bow-kontrast__zelle--wir .bow-kontrast__text { color: var(--bow-light); }
.bow-kontrast__etikett { display: none; color: var(--bow-light-48); }
.bow-kontrast__fuss { align-self: stretch; display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px 48px; justify-content: space-between; align-items: center; }
.bow-kontrast__aussage { flex: 1 1 520px; max-width: 720px; color: var(--bow-light); margin: 0; }

@media (max-width: 700px) {
	.bow-kontrast { gap: 48px; }
	.bow-kontrast__spaltenkopf { display: none; }
	.bow-kontrast__zeile { grid-template-columns: 1fr; gap: 20px; padding-block: 20px; }
	.bow-kontrast__etikett { display: block; }
}

.bow-preise { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; }
.bow-preise__kopf { display: flex; flex-direction: row; flex-wrap: wrap; gap: 80px; justify-content: space-between; align-items: flex-end; align-self: stretch; }
.bow-preise__titel { width: 100%; max-width: 680px; }
.bow-preise__intro { flex: 0 1 448px; color: var(--bow-light-64); }
.bow-preise__reihe { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: stretch; align-self: stretch; }
.bow-preise__karte { flex: 1 1 320px; border-radius: var(--bow-r-8); border: 1px solid var(--bow-light-16); display: flex; flex-direction: column; gap: 32px; padding: 32px; align-items: flex-start; box-sizing: border-box; }
.bow-preise__karte-kopf { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; align-self: stretch; }
.bow-preise__name { color: var(--bow-light-48); }
.bow-preise__preis { color: var(--bow-light); }
.bow-preise__fuer { align-self: stretch; min-height: 48px; color: var(--bow-light-64); }
.bow-preise__liste { align-self: stretch; }
.bow-preise__liste li { color: var(--bow-light); }
.bow-preise__karte .bow-btn { margin-top: auto; }

/* --- FAQ ------------------------------------------------------------- */
.bow-faq { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; }
.bow-faq__kopf { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; align-self: stretch; }
.bow-faq__titel { width: 100%; max-width: 680px; }
.bow-faq__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 48px 32px; align-self: stretch; }
.bow-faq__item { display: flex; flex-direction: column; gap: 16px; }
.bow-faq__antwort { color: var(--bow-dark-88); }
/* Antworten aus dem Post-Typ „Fragen" duerfen Absaetze und Listen haben.
   Der erste Absatz sitzt dicht am Titel (der Abstand kommt vom Item-Gap),
   weitere Absaetze bekommen eigene Luft. */
.bow-faq__antwort > :first-child { margin-top: 0; }
.bow-faq__antwort > :last-child { margin-bottom: 0; }
.bow-faq__antwort p { margin: 0 0 12px; }
/*
 * Listen in Antworten: mit Punkt, aber ohne Einzug.
 *
 * Die Grundregel oben nimmt jeder Liste `list-style` (Navigationen und Raster
 * sind Listen, dort waeren Punkte falsch). In einer Antwort aus dem Post-Typ
 * ist die Liste aber Text und braucht ihre Punkte zurueck. `inside` statt
 * `outside` plus `padding-left: 0`: der Punkt sitzt an der linken Kante des
 * Textes, die Liste rueckt nicht ein — so gewuenscht am 27.08.2026. Bei einem
 * Punkt, der ueber zwei Zeilen laeuft, beginnt die zweite Zeile deshalb unter
 * dem Punkt und nicht unter dem Text; die Aufzaehlungen sind kurz.
 */
.bow-faq__antwort ul { margin: 0 0 12px; padding-left: 0; list-style: disc inside; }
.bow-faq__antwort ol { margin: 0 0 12px; padding-left: 0; list-style: decimal inside; }
.bow-faq__antwort li + li { margin-top: 4px; }
.bow-faq__antwort a { color: inherit; text-decoration: underline; }
.bow-faq__leer { color: var(--bow-dark-48); }

/* --- Abschluss (Akzent + Laufschrift) -------------------------------- */
.bow-abschluss { display: flex; flex-direction: column; gap: 48px; align-items: center; overflow: hidden; width: 100%; }
/* Zwei Wege nebeneinander: rechnen oder sprechen. Untereinander, sobald die
   Zeile eng wird — zwei Knoepfe in einer Zeile brauchen 460px. */
.bow-abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Zwei Wege nebeneinander, ueberall wo ein Primaerbutton steht: rechnen oder
   sprechen. Umbruch statt Ueberbreite, sobald die Zeile eng wird. */
.bow-cta-paar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bow-marquee { width: 100%; overflow: hidden; }
.bow-marquee__band { display: flex; flex-direction: row; gap: 32px; width: max-content; animation: bowMarquee 24s linear infinite; }
.bow-marquee__strecke { white-space: nowrap; }

@keyframes bowMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Filter + Listing (Referenzen) ---------------------------------- */
.bow-filter { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.bow-listing { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.bow-listing__hinweis { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.bow-listing__marke { border-radius: var(--bow-r-32); background: var(--bow-accent); padding: 4px 8px; color: var(--bow-dark); font-weight: 700; }
.bow-listing__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 32px; align-self: stretch; }
/* Referenzkacheln: "contain" statt des allgemeinen "cover" aus .bow-bild —
   lieber ein paar Pixel Luft ueber einem 5:3-Entwurf als ein abgeschnittener
   Kopf. Die Rasterhoehe bleibt dadurch gleich. */
.bow-listing__bild > img { object-fit: contain; }

.bow-listing__karte { display: flex; flex-direction: column; gap: 16px; }
/* Knopf unter der Karte: linksbündig unter Name und Dauer, mit etwas Luft.
   Kompakte Höhe, damit er die Karte nicht dominiert — er ist ein Angebot,
   kein Aufruf. */
/* Im Raster brauchen die Kacheln eine gemeinsame Hoehe, deshalb bleibt hier
   das Verhaeltnis 3:2 — dafuer "contain" statt "cover": lieber ein paar Pixel
   Luft ueber einem 5:3-Entwurf als ein abgeschnittener Kopf. */
/* position: relative, damit der Knopf beim Ueberfahren darin sitzt. */
.bow-listing__bild { position: relative; aspect-ratio: 3 / 2; height: auto; min-height: 0; border-radius: var(--bow-r-8); display: flex; align-items: flex-end; padding: 16px; box-sizing: border-box; }
.bow-listing__zeile { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; }
.bow-listing__name { color: var(--bow-dark-48); }
.bow-listing__hinweis-text { color: var(--bow-dark-64); }
.bow-listing__dauer { color: var(--bow-dark-48); }
.bow-listing__name--echt { color: var(--bow-dark); }
.bow-listing__dauer--echt { color: var(--bow-dark-64); }
/* Branche unter der Karte: leiser als der Name, eigene Zeile — im Handoff
   steht sie neben Name und Umsetzungsdauer. */
.bow-listing__branche { color: var(--bow-dark-48); margin-top: -8px; }

/* --- Kennzahlen-Sektion --------------------------------------------- */
.bow-kzsek { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; }
.bow-kzsek__titel { width: 100%; max-width: 680px; }
.bow-kzsek .bow-kennzahlen { align-self: stretch; }

/* --- Zeitachse (Ablauf) --------------------------------------------- */
.bow-zeitachse { display: flex; flex-direction: column; }
.bow-zeitachse__schritt { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-block: 80px; }
.bow-zeitachse__nr { flex: 0 0 200px; font-family: var(--bow-serif); font-weight: 400; font-size: min(120px, 24vw); line-height: 1; letter-spacing: -0.033333em; color: var(--bow-dark-08); }
.bow-zeitachse__mitte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bow-zeitachse__dauer { color: var(--bow-dark-48); }
.bow-zeitachse__text { font-family: var(--bow-fliess); font-size: 17px; line-height: 28px; letter-spacing: -0.25px; color: var(--bow-dark-88); max-width: 640px; }
.bow-zeitachse__tun { box-sizing: content-box; flex: 0 1 280px; border-left: 2px solid var(--bow-accent); padding: 4px 0 4px 24px; display: flex; flex-direction: column; gap: 8px; align-self: center; }
.bow-zeitachse__tun-label { color: var(--bow-dark-48); }

/* --- Bildband ------------------------------------------------------- */
.bow-bildband { position: relative; width: 100%; overflow: hidden; }
.bow-bildband img { width: 100%; height: 100%; object-fit: cover; }

/* --- Material (dunkel) ---------------------------------------------- */
.bow-material { display: flex; flex-direction: column; gap: 80px; align-items: flex-start; }
.bow-material__kopf { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 80px; }
.bow-material__titel { width: 100%; max-width: 680px; }
.bow-material__intro { flex: 0 1 400px; color: var(--bow-light-64); }
.bow-material__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); column-gap: 80px; row-gap: 56px; align-self: stretch; }
.bow-material__karte { display: flex; flex-direction: column; gap: 12px; }
.bow-material__tag { color: var(--bow-accent); }
.bow-material__karte-titel { font-family: var(--bow-ui); font-weight: 700; font-size: 22px; line-height: 30px; color: var(--bow-light); }
.bow-material__text { color: var(--bow-light-64); }

/* --- Bild + Text ---------------------------------------------------- */
.bow-bildtext { display: flex; flex-direction: row; flex-wrap: wrap; gap: 96px; align-items: center; }
.bow-bildtext__bild { flex: 1 1 460px; min-width: 0; height: 500px; }
.bow-bildtext__bild--hoch { height: 520px; flex-basis: 420px; }
.bow-bildtext__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.bow-bildtext__text--weit { gap: 32px; flex-basis: 420px; }
.bow-bildtext__titel { width: 100%; }
.bow-bildtext__text--weit .bow-bildtext__titel { max-width: 520px; }
.bow-bildtext__fliess { font-family: var(--bow-fliess); font-size: 16px; line-height: 26px; letter-spacing: -0.25px; color: var(--bow-dark-64); }
.bow-marke { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.bow-marke__pille { border-radius: var(--bow-r-32); background: var(--bow-accent); padding: 4px 8px; font-family: var(--bow-ui); font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--bow-dark); }
.bow-marke__text { color: var(--bow-dark-64); }

/* --- Statement (Studio) --------------------------------------------- */
.bow-statement { display: flex; flex-direction: column; gap: 96px; align-items: flex-start; }
.bow-statement__satz { width: 100%; max-width: 820px; }
.bow-statement__zeile { display: flex; flex-direction: row; flex-wrap: wrap; gap: 80px; align-items: center; align-self: stretch; }
.bow-statement__bild { flex: 1 1 420px; min-width: 0; height: 480px; }
.bow-statement__text { flex: 1 1 380px; min-width: 0; font-family: var(--bow-fliess); font-size: 18px; line-height: 28px; letter-spacing: -0.25px; color: var(--bow-dark-88); }

/* --- Prinzipien (dunkel) -------------------------------------------- */
.bow-prinzipien { display: flex; flex-direction: column; gap: 96px; align-items: flex-start; }
.bow-prinzipien__titel { width: 100%; max-width: 680px; }
.bow-prinzipien__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); column-gap: 80px; row-gap: 64px; align-self: stretch; }
.bow-prinzipien__item { display: flex; flex-direction: row; gap: 24px; align-items: flex-start; }
.bow-prinzipien__text { display: flex; flex-direction: column; gap: 12px; }
.bow-prinzipien__item-titel { color: var(--bow-light); }
.bow-prinzipien__body { color: var(--bow-light-64); }

/* --- Chip-Gruppen (Studio) ------------------------------------------ */
.bow-chips { display: flex; flex-direction: column; gap: 80px; align-items: flex-start; }
.bow-chips__gruppe { display: flex; flex-direction: column; gap: 32px; align-self: stretch; }
.bow-chips__reihe { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }

/* --- Footer --------------------------------------------------------- */
.bow-footer { display: flex; flex-direction: column; gap: 80px; padding-block: 80px 48px; background: var(--bow-light); color: var(--bow-dark); }
.bow-footer__oben { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 64px; justify-content: space-between; align-items: flex-start; }
.bow-footer__nav { flex: 1 1 448px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.bow-footer__fakten { flex: 1 1 448px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.bow-footer__spalte { width: 220px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.bow-footer__kopf { color: var(--bow-muted); }
.bow-footer__links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; align-self: stretch; }
.bow-footer__wert { font-family: var(--bow-ui); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--bow-dark); }
.bow-footer__unten { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.bow-footer__logo { color: var(--bow-dark); flex-shrink: 0; }
.bow-footer__logo svg { width: 81px; height: 32px; }
.bow-footer__zeile { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--bow-dark-64); }
.bow-footer__zeile a { color: var(--bow-dark-64); }
.bow-footer__zeile a:hover { color: var(--bow-dark); }

/* ==========================================================================
   9. Bewegung nur dort, wo das Design sie vorsieht — und abschaltbar
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bow-marquee__band,
  .bow-slider__band { animation: none; }
  .bow-nav--sichtbar { animation: none; }
  .bow-page *, .bow-page *::before, .bow-page *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Laufschrift-Dauer als Klasse statt Inline-Style. Strecke und Tempo
   muessen zusammenpassen — nach Textaenderungen neu messen (9.4). */
.bow-marquee--16s { animation-duration: 16s; }
.bow-marquee--24s { animation-duration: 24s; }
.bow-marquee--32s { animation-duration: 32s; }
.bow-marquee--48s { animation-duration: 48s; }
.bow-marquee--64s { animation-duration: 64s; }

/* Bildband-Hoehen (Ablauf 520, Studio 640) */
.bow-bildband--h400 { height: 400px; }
.bow-bildband--h520 { height: 520px; }
.bow-bildband--h640 { height: 640px; }
.bow-bildband--h760 { height: 760px; }

/* --- Referenz-Slider: Kartenbreiten, Tempo, Kopie --------------------- */
/* Breiten aus der Referenz. min() haelt sie am Desktop exakt und laesst
   sie auf schmalen Viewports mitschrumpfen, statt das Band zu sprengen. */
.bow-slider { overflow: hidden; }
/* Echte Referenzen: die Karte folgt dem Bild, nicht umgekehrt. Die
   gestaffelten Breiten des Designs (448–672 bei 480 Hoehe) schnitten 7–38 %
   der Entwuerfe ab. Feste Hoehe, freie Breite: dadurch bekommt jede Karte das
   Verhaeltnis ihres eigenen Bildes — auch die, die nicht 3:2 sind (Waldhof
   5:3, Shift 1,6:1). Kein Beschnitt, keine Balken, und die Staffelung des
   Designs entsteht von selbst wieder. */
/* 78vh als dritter Deckel: im Telefon-Querformat (844x420) stand die Karte
   sonst mit 480px hoeher als das Fenster. */
.bow-slider--echt .bow-slider__karte { width: auto; height: var(--bow-slider-hoehe); aspect-ratio: auto; padding: 0; }
.bow-slider--echt .bow-slider__karte img { position: static; inset: auto; width: auto; height: 100%; object-fit: contain; }

.bow-slider__karte--b448 { width: min(448px, 78vw); }
.bow-slider__karte--b480 { width: min(480px, 80vw); }
.bow-slider__karte--b568 { width: min(568px, 82vw); }
.bow-slider__karte--b672 { width: min(672px, 86vw); }
.bow-slider__satz-huelle { display: contents; }
/* --- Slider mobil: zwei Reihen, gegenlaeufig -------------------------------
   Eine Reihe fuellt auf dem Telefon nur einen schmalen Streifen (351x234 bei
   390px Breite) und zeigt immer nur einen Entwurf. Zwei Reihen zeigen vier
   bis fuenf Ausschnitte; gegenlaeufig, weil zwei gleichlaufende Reihen wie
   eine traege Wand wirken. Der Versatz um die halbe Strecke kommt aus dem
   negativen animation-delay.

   Auf dem Desktop bleibt es bei einer Reihe: sonst waere der Abschnitt doppelt
   so hoch. Die zweite Reihe steckt dort in display:none, ihre lazy-Bilder
   werden nicht geladen. */
.bow-slider__band--zwei { display: none; }

@media (max-width: 700px) {
	/* Der Kasten war 480px hoch und die Baender absolut darin — mobil stehen
	   sie im Fluss, damit zwei Reihen uebereinander passen. */
	.bow-slider { display: flex; flex-direction: column; gap: 12px; height: auto; }
	.bow-slider__band,
	.bow-slider__band--zwei { position: relative; height: auto; }
	.bow-slider__band--zwei { display: flex; animation-direction: reverse; }

	/* 40vw statt 30: mit 117px hohen Karten war die Typografie der Entwuerfe
	   nicht mehr zu erkennen. Zwei Reihen stehen damit 324px statt 246px hoch
	   — auf dem Telefon ein Drittel Bildschirm, nicht die Haelfte. Dazu zwei
	   Deckel: 200px, damit kurz vor der 700px-Grenze nicht 492px Block
	   stehen, und 28vh fuer Querformat, wo jede Hoehe teuer ist. */
	.bow-slider--echt .bow-slider__karte,
	.bow-slider__karte { height: min(200px, 40vw, 28vh); }

}


.bow-slider--40s  { animation-duration: 40s; }
.bow-slider--60s  { animation-duration: 60s; }
.bow-slider--80s  { animation-duration: 80s; }
.bow-slider--100s { animation-duration: 100s; }
.bow-slider--120s { animation-duration: 120s; }
.bow-slider--140s { animation-duration: 140s; }
.bow-slider--180s { animation-duration: 180s; }

/* Zweite Reihe (mobil) startet um die halbe Strecke versetzt: negatives Delay
   ist die halbe Laufzeit. Zusammen mit der Gegenrichtung stehen die Karten
   nie deckungsgleich untereinander. */
.bow-slider__band--zwei.bow-slider--40s  { animation-delay: -20s; }
.bow-slider__band--zwei.bow-slider--60s  { animation-delay: -30s; }
.bow-slider__band--zwei.bow-slider--80s  { animation-delay: -40s; }
.bow-slider__band--zwei.bow-slider--100s { animation-delay: -50s; }
.bow-slider__band--zwei.bow-slider--120s { animation-delay: -60s; }
.bow-slider__band--zwei.bow-slider--140s { animation-delay: -70s; }
.bow-slider__band--zwei.bow-slider--180s { animation-delay: -90s; }

/* --- Sektions-Abstaende, die von 80/120/160 abweichen ----------------- */
.bow-y-32      { padding-block: 32px; }
.bow-y-48-120  { padding-block: 48px 120px; }
.bow-y-80-160  { padding-block: 80px 160px; }
.bow-y-0-40    { padding-block: 0 40px; }
.bow-y-0-160   { padding-block: 0 160px; }
/* Sektionen mit zwei Elementen (Intro + Slider) */
.bow-sec-gap80 { gap: 80px; }

/* Rechtstexte: lesbare Zeilenlaenge */
/* Rechtstexte.
   Der Impressumstext steht als Klartext mit \n in einem einzigen <p> — HTML
   frisst die Umbrueche, deshalb pre-line. Wer stattdessen echtes Markup
   liefert (Datenschutz, AGB), setzt --html und bekommt normale Absaetze. */
.bow-rechtstext { max-width: 720px; white-space: pre-line; }
.bow-rechtstext--html { white-space: normal; }
.bow-rechtstext--html h2 { font-family: var(--bow-serif); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin: 48px 0 12px; }
.bow-rechtstext--html h2:first-child { margin-top: 0; }
.bow-rechtstext--html h3 { font-family: var(--bow-ui); font-weight: 700; font-size: 16px; line-height: 24px; margin: 28px 0 8px; }
.bow-rechtstext--html p { margin: 0 0 12px; }
/* Dieselbe Sache in den Rechtstexten: dort stehen Aufzaehlungen (Empfaenger,
   Ihre Rechte, Speicherdauer) und standen bisher ohne Punkte da. */
.bow-rechtstext--html ul { margin: 0 0 12px; padding-left: 0; list-style: disc inside; }
.bow-rechtstext--html li { margin-bottom: 4px; }
.bow-rechtstext--html a { text-decoration: underline; }
.bow-rechtstext--html dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.bow-rechtstext--html dt { color: var(--bow-dark-64); }
.bow-rechtstext--html strong { font-weight: 700; }
.bow-rechtstext--html .bow-recht-stand { color: var(--bow-dark-64); margin-top: 40px; }
/* Entwurfshinweis und offene Stellen sichtbar, aber nicht schreiend: sie
   sollen vor dem Livegang auffallen, nicht den Text zerreissen. */

@media (max-width: 700px) {
	/* Die zweispaltige Liste der Speicherfristen sprengte bei 390px den
	   Viewport: "Prüfwert der IP-Adresse (Drosselung)" ist als max-content
	   breiter als der Platz. Mobil untereinander. */
	.bow-rechtstext--html dl { grid-template-columns: 1fr; gap: 0; }
	.bow-rechtstext--html dt { margin-top: 12px; }
}

/* Faktenspalten im Footer strecken ihre Kinder (die Navigationsspalten
   nicht) — gemessener Unterschied gegen die Referenz. */
.bow-footer__fakten .bow-footer__spalte { align-items: stretch; }

/* ==========================================================================
   10. Fixe Navigation auf schmalen Viewports
   Das Design ist Desktop-only geliefert; die Leiste braucht 612px fuer ihren
   Inhalt. Statt sie umbrechen zu lassen (zweizeilige fixe Leiste verdeckt
   Inhalt), klappt sie gestaffelt weg — die Reihenfolge folgt der Wichtigkeit:
   erst das Slot-Badge (steht auch im Preisbereich), dann die Links (stehen
   im Footer und im Seitenkopf). Logo und Primaerbutton bleiben immer.
   ========================================================================== */

.bow-nav { overflow: hidden; }   /* Rueckfall: nie ins Dokument lecken */

@media (max-width: 999px) {
  .bow-nav .bow-slots { display: none; }
}

@media (max-width: 699px) {
  .bow-nav__link { display: none; }
  .bow-nav__rechts { gap: 12px; }
}

/* Slot-Zaehler im Preisbereich: im Design flex-shrink:0, damit er neben
   dem Hinweis nicht gequetscht wird. Auf schmalen Viewports muss er
   trotzdem in den Container passen (gemessen: 387px in 256px). */

/* Beim Umbruch (schmale Viewports) ist das gestreckte Bild nur noch so hoch
   wie sein Etikett. Mindesthoehe greift erst dort — am Desktop ist die
   gestreckte Hoehe groesser. */
.bow-festlegungen__bild { min-height: 320px; }

/* ==========================================================================
   11. Mobile Navigation
   Das Design liefert dafuer keine Vorgabe. Unter 700px ersetzt ein
   Menuebutton die Links; er oeffnet ein Panel unter der Leiste mit
   denselben Links (Optik wie die Footer-Navigation), Slot-Badge und
   Primaerbutton. Unter 480px wandert auch der Button ins Panel — sonst
   passt die Leiste nicht mehr (gemessen bei 320px).
   ========================================================================== */

.bow-nav-huelle { display: contents; }

.bow-nav__menue {
  display: none; width: 40px; height: 40px; flex-shrink: 0;
  border: 0; background: none; padding: 8px; box-sizing: border-box;
  cursor: pointer; flex-direction: column; justify-content: center; gap: 4px;
}
.bow-nav__menue-strich {
  display: block; width: 24px; height: 1.5px; background: var(--bow-dark);
  transition: transform .18s ease, opacity .18s ease;
}
.bow-nav__menue[aria-expanded="true"] .bow-nav__menue-strich:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.bow-nav__menue[aria-expanded="true"] .bow-nav__menue-strich:nth-child(2) { opacity: 0; }
.bow-nav__menue[aria-expanded="true"] .bow-nav__menue-strich:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.bow-nav__panel {
  position: fixed; left: 0; right: 0; top: 64px; z-index: 99;
  background: var(--bow-weiss); border-bottom: 1px solid var(--bow-dark-16);
  box-sizing: border-box;
  padding: 24px max(var(--bow-rand), calc((100% - var(--bow-max)) / 2)) 28px;
  display: flex; flex-direction: column; gap: 24px;
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.bow-nav__panel[hidden] { display: none; }
.bow-nav__panel-links { display: flex; flex-direction: column; gap: 8px; }
.bow-nav__panel-link { color: var(--bow-dark); }
.bow-nav__panel-link--aktiv { font-weight: 700; }
.bow-nav__panel-fuss { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.bow-nav__panel-cta { flex: 1 1 200px; }
/* Zweiter Weg im mobilen Menue: eigene Zeile unter dem Primaerbutton — dort
   ist Platz, in der Leiste nicht. */
.bow-nav__panel-cta2 { flex: 1 1 100%; }

/* In der Leiste erst ab 1200px: darunter draengt ein zweiter Knopf die Links
   und das Platz-Badge — bei 390px lief die Leiste auf 511px Breite auf.
   Zwei Klassen tief, weil `.bow-page .bow-btn` selbst `display` setzt und
   eine einzelne Klasse dagegen nicht ankommt (Fundstueck 3). */
.bow-page .bow-nav__cta2 { display: none; }
@media (min-width: 1200px) { .bow-page .bow-nav__cta2 { display: inline-flex; } }

/* Ab 700px gibt es das Panel nicht — die Links stehen in der Leiste. */
@media (min-width: 700px) {
  .bow-nav__panel { display: none; }
}

@media (max-width: 699px) {
  .bow-nav__menue { display: flex; }
}

/* Unter 480px passt der Primaerbutton nicht mehr neben Logo und Menue */
@media (max-width: 479px) {
  .bow-nav__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bow-nav__menue-strich { transition: none; }
}

/* ==========================================================================
   12. FAQ mobil eingeklappt
   Im Design stehen alle Antworten offen. Auf dem Handy sind das neun
   Bloecke hintereinander — dort baut das Skript ein Akkordeon daraus.
   Ab 700px bleibt alles offen und die Markup-Aenderung wird
   zurueckgenommen (progressive Anreicherung, ohne JS bleibt das Design).
   ========================================================================== */

.bow-faq__knopf {
  display: flex; flex-direction: row; gap: 24px; align-items: flex-start;
  justify-content: space-between; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.bow-faq__zeichen { flex-shrink: 0; font-family: var(--bow-ui); font-weight: 400; font-size: 20px; line-height: 28px; color: var(--bow-dark-48); }
.bow-faq__antwort[hidden] { display: none; }

/* ==========================================================================
   13. Konfigurator
   Struktur und Copy aus design-handoff-v1, Optik in Relaunch-Tokens.
   Formularbreite 640px wie im Handoff, zentriert im Inhaltsrahmen.
   ========================================================================== */

:root {
  /* Der Relaunch-Tokensatz kennt keine Fehlerfarbe; uebernommen aus v1. */
  --bow-fehler: #b3261e;
}

.bow-konf { padding-block: 48px 96px; }
/* 720px statt der 640px des Handoffs: die längste Modulbeschriftung
   ("Stellenbereich mit digitaler Bewerbung …") brauchte sonst drei Zeilen. */
.bow-konf > * { width: 100%; max-width: 720px; margin-inline: auto; }

.bow-konf__kopf { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.bow-konf__logo { color: var(--bow-dark); }
.bow-konf__logo svg { width: 81px; height: 32px; }
.bow-konf__summe { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.bow-konf__summe-label { color: var(--bow-dark-64); }

.bow-konf__fortschritt { margin-bottom: 24px; }
.bow-konf__balken { height: 3px; border-radius: var(--bow-r-32); background: var(--bow-dark-16); overflow: hidden; }
.bow-konf__balken-fuellung { height: 100%; width: 20%; background: var(--bow-accent); transition: width .2s ease; }
.bow-konf__schrittzahl { display: block; margin-top: 8px; color: var(--bow-dark-64); }

.bow-konf__karte { background: var(--bow-surface); border-radius: var(--bow-r-8); padding: 32px; box-sizing: border-box; }
.bow-konf__titel { margin-bottom: 24px; }
/* Ein Satz unter der Ueberschrift: sagt, worum es im Schritt geht. Leiser als
   der Titel, aber Fliesstext — kein Kleingedrucktes. */
.bow-konf__intro { color: var(--bow-dark-64); margin-top: 12px; max-width: 52ch; }

/* Livegang: erscheint nur ohne Betreuung, deshalb als eigener Block mit
   Abstand — sonst klebt er an der Betreuungszeile. */
.bow-konf__launch { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.bow-konf__launch[hidden] { display: none; }
.bow-konf__launch-text { color: var(--bow-dark-64); margin: 0; }

/* 28px Luft nach dem Einleitungssatz — er soll als eigener Gedanke stehen,
   nicht als Ueberschrift der ersten Zeile. */
.bow-konf__optionen { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; margin-bottom: 16px; }
.bow-konf__option {
  /* Farbe ausdruecklich setzen: die Zeile ist ein <label>, und Bricks faerbt
     Labels grau (#9e9e9e). Gemessen am 30.08.2026: 2,41:1 gegen die Flaeche —
     die Beschriftungen des Rechners waren damit unter jedem Ziel, sie sahen
     aus wie deaktiviert. */
  color: var(--bow-dark);
  /* Kein Umbruch der Zeile: mit flex-wrap rutschte der Preis bei langen
     Beschriftungen unter den Text und stand dann links. Jetzt bricht der
     Text innerhalb seiner Spalte, der Preis bleibt rechts. */
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px;
  justify-content: space-between; align-items: center;
  background: var(--bow-light); border: 1px solid var(--bow-dark-16);
  border-radius: var(--bow-r-8); padding: 14px 16px; cursor: pointer; box-sizing: border-box;
}
.bow-konf__option:hover { border-color: var(--bow-dark-48); }
.bow-konf__option:has( input:checked ) { border-color: var(--bow-dark); background: var(--bow-weiss); }
/* min-width: 0 ist der Punkt — ohne das schrumpft eine Flex-Spalte nicht
   unter die Breite ihres längsten Wortes, und der Preis wird hinausgedrängt. */
.bow-konf__option-kopf { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.bow-konf__option input { accent-color: var(--bow-accent); width: 18px; height: 18px; flex-shrink: 0; margin: 1px 0 0; }
.bow-konf__preis { color: var(--bow-dark-64); white-space: nowrap; flex-shrink: 0; }
.bow-konf__option-hinweis { margin: -4px 0 4px 46px; color: var(--bow-dark-64); }

.bow-konf__hinweis { color: var(--bow-dark-64); margin-top: 8px; }
.bow-konf__link { text-decoration: underline; }

.bow-konf__kasten { background: var(--bow-light); border-radius: var(--bow-r-8); padding: 20px; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.bow-konf__kasten .bow-t-fliess { color: var(--bow-dark-88); }

/* Ergebnis */
.bow-konf__aufschluesselung { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.bow-konf__posten { display: flex; flex-direction: row; gap: 16px; justify-content: space-between; }
.bow-konf__posten span:first-child { color: var(--bow-dark-64); }
/* Zeile plus Erklaerung: „Umfang" und darunter „bis 10 Seiten". min-width: 0,
   damit die Textspalte schrumpfen darf und den Betrag nicht hinausdraengt —
   dieselbe Falle wie bei den Optionszeilen. */
.bow-konf__posten-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bow-konf__posten-detail { color: var(--bow-dark-48); }
.bow-konf__summe-zeile { display: flex; flex-direction: row; gap: 16px; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--bow-dark-16); }
.bow-konf__betreuung, .bow-konf__ohne { display: flex; flex-direction: row; gap: 16px; justify-content: space-between; color: var(--bow-dark-64); margin-top: 8px; }
.bow-konf__betreuung[hidden], .bow-konf__ohne[hidden] { display: none; }

.bow-konf__feld { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.bow-konf__input {
  width: 100%; box-sizing: border-box;
  background: var(--bow-weiss); border: 1px solid var(--bow-dark-16);
  border-radius: var(--bow-r-8); padding: 12px 16px;
  font-family: var(--bow-ui); font-size: 16px; line-height: 24px; color: var(--bow-dark);
}
.bow-konf__input::placeholder { color: var(--bow-dark-48); }
.bow-konf__input:focus-visible { outline: 2px solid var(--bow-accent); outline-offset: 2px; border-color: var(--bow-dark); }

.bow-konf__fehler { color: var(--bow-fehler); margin-top: 12px; }
.bow-konf__fehler[hidden] { display: none; }
.bow-konf__aktionen { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bow-konf__aktionen .bow-btn { flex: 1 1 200px; }

/* Der dritte Weg: das Beratungsgespräch. Abgesetzt durch eine Linie und
   etwas Luft — er steht neben den beiden Knöpfen, nicht mit ihnen auf einer
   Stufe: das Angebot bleibt der Hauptweg. */
.bow-konf__beratung {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--bow-dark-08);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.bow-konf__beratung .bow-konf__hinweis { margin-top: 0; }
.bow-konf__danke-beratung { margin-top: 20px; }
.bow-konf__danke-beratung a { text-decoration: underline; }

/*
 * [hidden] gewinnt gegen eine Klasse — sonst nicht.
 *
 * Gemessen am 01.09.2026: `.bow-konf__danke { display: flex }` hat das
 * `hidden`-Attribut ueberstimmt (Klassenselektor schlaegt den
 * Browser-Standard `[hidden] { display: none }`). Folge: die Zeile
 * "Sie haben Fragen? Buchen Sie sich hier einen Beratungstermin." stand auf
 * JEDEM Schritt des Konfigurators, und auf dem Telefon schob sie den Knopf
 * "Weiter" 9px unter die Bildkante — sichtbar war der Ausweg, nicht der Weg
 * nach vorn. Zwei Tage lang, mitten in der ersten Anzeigenkampagne.
 *
 * Deshalb eine Regel fuer alle statt sechs einzelne `X[hidden]`-Regeln. Die
 * vorhandenen bleiben stehen, sie schaden nicht.
 */
.bow-page [hidden] { display: none !important; }

.bow-konf__nav { display: flex; flex-direction: row; gap: 8px; justify-content: space-between; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bow-dark-16); }
.bow-konf__nav[hidden] { display: none; }
.bow-konf__nav .bow-btn[hidden] { display: none; }

.bow-konf__danke { display: flex; flex-direction: column; gap: 12px; }

/* --- Zusammenstellung als PDF (08.09.2026) -------------------------------
   Kein Server-PDF: der Browser druckt die Ergebnisansicht. Damit gibt es nur
   EINE Vorlage — was am Schirm steht, steht auch auf dem Blatt, und es kann
   nichts auseinander laufen.

   Kopf und Fusszeile des Blattes stehen im HTML und sind am Schirm aus. Sie
   tragen, was dem Blatt sonst fehlen wuerde: Logo, Datum und der Satz, dass
   das verbindliche Angebot per Mail kommt.
   -------------------------------------------------------------------------- */
.bow-konf__druckkopf,
.bow-konf__druckweg,
.bow-konf__druckfuss { display: none; }

.bow-konf__pdf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bow-dark-16);
}

@media print {
  /* Alles weg, was auf Papier nichts zu suchen hat: Navigation, Footer,
     Fortschritt, Eingabefelder, Knoepfe. */
  .bow-nav,
  .bow-nav__panel,
  .bow-footer,
  .bow-konf__kopf,
  .bow-konf__fortschritt,
  .bow-konf__feld,
  .bow-konf__aktionen,
  .bow-konf__pdf,
  .bow-konf__beratung,
  .bow-konf__nav,
  .bow-konf__fehler,
  .bow-konf__hinweis { display: none !important; }

  .bow-konf__druckkopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; margin-bottom: 28px; padding-bottom: 16px;
    border-bottom: 2px solid var(--bow-dark);
  }

  .bow-konf__druckkopf svg { width: 96px; height: auto; }
  .bow-konf__druckkopf > div { text-align: right; }

  /* Der Rueckweg: eigener Kasten, Adresse fett und unterstrichen. Er
     entscheidet, ob eine weitergeschickte Zusammenstellung zurueckfuehrt —
     im Kleingedruckten war er zu leicht zu uebersehen (08.09.2026). */
  .bow-konf__druckweg {
    display: block !important; margin-top: 28px;
    padding: 14px 16px; border: 1.5px solid var(--bow-dark); border-radius: 6px;
    max-width: none;
  }

  .bow-konf__druckweg a {
    font-weight: 600; color: var(--bow-dark);
    text-decoration: underline; word-break: break-all;
  }

  .bow-konf__druckfuss {
    display: block !important; margin-top: 14px; max-width: none;
    color: var(--bow-dark-64);
  }

  /* Tinte sparen und lesbar bleiben. */
  body,
  .bow-page,
  .bow-konf__schritt { background: #fff !important; }

  /*
   * Breite: der Rechner ist am Schirm 720px breit (.bow-konf > *), das
   * Druckfenster von A4 mit 18mm Rand ist rund 660px — der rechte Rand wurde
   * dadurch abgeschnitten, samt Betraegen. Im Druck bestimmt das Papier die
   * Breite, nicht das Layout.
   */
  .bow-konf { padding-block: 0; padding-inline: 0; }
  .bow-konf > * { max-width: none; width: auto; margin-inline: 0; }
  .bow-konf__karte { background: #fff; padding: 0; }
  .bow-konf__kasten { border: 1px solid var(--bow-dark-16); background: #fff; }

  @page { margin: 18mm; }
}

/*
 * Auf dem Telefon klebt die Navigation unten, mit der laufenden Summe.
 *
 * Grund (gemessen 01.09.2026 bei 390x844): der Schritt ist hoeher als das
 * Fenster, "Weiter" lag darunter. 81 Prozent der Besucher kommen mit dem
 * Telefon, und die Haelfte von denen, die den Konfigurator geoeffnet haben,
 * hat nie etwas angetippt. Der Weg nach vorn muss sichtbar sein, ohne dass
 * jemand danach sucht.
 *
 * position: sticky, kein fixed: der Balken bleibt im Fluss, schiebt sich am
 * Ende von selbst an seinen Platz und braucht keine Ausgleichshoehe am
 * Seitenende. Die Summe steht dabei links — sie scrollt oben weg, und beim
 * Auswaehlen will man sehen, was es kostet.
 */
.bow-konf__nav-summe { display: none; }

@media (max-width: 700px) {
  .bow-konf__nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    /* Von Rand zu Rand: der Balken liegt in einem Kasten mit 32px
       Innenabstand (.bow-block). Ohne den negativen Ausgleich sieht er wie
       ein eingesetztes Kaestchen aus, nicht wie eine Leiste — und der
       Schritt scrollt links und rechts daran vorbei. */
    margin-inline: -32px;
    /* .bow-konf > * setzt width: 100% — zusammen mit dem negativen Rand
       ergaebe das einen Balken, der links heraushaengt und rechts 64px Luft
       laesst. Er soll sich stattdessen ueber die ganze Breite spannen. */
    width: auto;
    max-width: none;
    padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px));
    padding-inline: 32px;
    background: var(--bow-light);
    box-shadow: 0 -10px 24px rgba(26,26,23,0.08);
  }

  .bow-konf__nav-summe {
    display: block;
    margin-right: auto;
    font-weight: 600;
    color: var(--bow-dark);
    white-space: nowrap;
  }

  /* Zwei Knoepfe plus Summe passen bei 320px nur, wenn "Zurueck" schmal
     bleibt. */
  .bow-konf__nav .bow-btn { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bow-konf__balken-fuellung { transition: none; }
}

/* ==========================================================================
   14. Kundenportal
   Struktur und Copy aus design-handoff-v1, Optik in Relaunch-Tokens.
   ========================================================================== */

:root {
  /* Ungelesen-Zähler; im Relaunch-Tokensatz nicht vorgesehen, aus v1. */
  --bow-badge: #d32f2f;
}

.bow-portal { padding-block: 48px 96px; }
.bow-portal > * { width: 100%; max-width: 1080px; margin-inline: auto; }
/* Formularansichten lesen sich schmaler besser */
.bow-portal--onboarding > *, .bow-portal--entwuerfe > *, .bow-portal--nachrichten > * { max-width: 760px; }
.bow-portal--login > * { max-width: none; }

.bow-portal__kopf { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.bow-portal__logo { color: var(--bow-dark); display: inline-flex; }
.bow-portal__logo svg { width: 81px; height: 32px; }
.bow-portal__abmelden { color: var(--bow-dark-64); }
/* Als Block, damit die Auto-Ränder der Inhaltsspalte greifen —
   ein inline-block bliebe am linken Rand des vollen Rahmens stehen. */
.bow-portal__zurueck { display: block; margin-bottom: 16px; color: var(--bow-dark-64); }
.bow-portal__zurueck-knopf { background: none; border: 0; padding: 0; cursor: pointer; color: var(--bow-dark-64); }
.bow-portal__titel { margin-bottom: 20px; }

/* Anmeldung */
.bow-portal__login { display: flex; justify-content: center; padding-block: 32px 64px; }
.bow-portal__login-karte {
  width: 100%; max-width: 440px; box-sizing: border-box;
  background: var(--bow-surface); border-radius: var(--bow-r-8); padding: 36px;
  display: flex; flex-direction: column; gap: 8px;
}
.bow-portal__login-karte .bow-portal__logo { margin-bottom: 20px; }
.bow-portal__login-subline { color: var(--bow-dark-64); margin-bottom: 12px; }
.bow-portal__login-btn { width: 100%; margin-top: 20px; }
.bow-portal__hinweis-fehler { color: var(--bow-fehler); }
.bow-portal__hinweis-fehler[hidden] { display: none; }

/* Hero der Startansicht */
.bow-portal__hero {
  background: var(--bow-dark); color: var(--bow-light);
  border-radius: var(--bow-r-8); padding: 32px; margin-bottom: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.bow-portal__hero .bow-t-h3 { color: var(--bow-light); }
.bow-portal__hero-text { color: var(--bow-light-64); max-width: 560px; }
.bow-pill { display: inline-block; border-radius: var(--bow-r-32); background: var(--bow-accent); color: var(--bow-dark); padding: 4px 10px; }

/* Zeitplan */
.bow-portal__zeitplan { margin-bottom: 32px; }
.bow-portal__termin { color: var(--bow-dark-64); margin-bottom: 16px; }
.bow-portal__phasen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 8px; }
.bow-portal__phase { display: flex; flex-direction: column; gap: 8px; }
.bow-portal__phase-balken { height: 4px; border-radius: var(--bow-r-32); background: var(--bow-dark-16); }
.bow-portal__phase--erledigt .bow-portal__phase-balken { background: var(--bow-accent); }
.bow-portal__phase--aktuell .bow-portal__phase-balken { background: var(--bow-dark); }
.bow-portal__phase-label { color: var(--bow-dark-48); }
.bow-portal__phase--aktuell .bow-portal__phase-label { color: var(--bow-dark); }
.bow-portal__phase-zustand { color: var(--bow-dark-48); }

/* Kacheln */
.bow-portal__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.bow-portal__kachel {
  position: relative; box-sizing: border-box;
  background: var(--bow-surface); border-radius: var(--bow-r-8); padding: 24px;
  display: flex; flex-direction: column; gap: 6px; color: var(--bow-dark);
  transition: background-color .15s ease;
}
.bow-portal__kachel:hover { background: var(--bow-weiss); color: var(--bow-dark); }
.bow-portal__kachel--gesperrt { opacity: .55; }
.bow-portal__kachel-status { color: var(--bow-dark-64); }
.bow-portal__badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--bow-badge); color: var(--bow-weiss);
  font-family: var(--bow-ui); font-weight: 700; font-size: 12px; line-height: 20px;
  min-width: 20px; height: 20px; border-radius: var(--bow-r-32); padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
}

/* Karten und Kästen */
.bow-portal__karte {
  background: var(--bow-surface); border-radius: var(--bow-r-8); padding: 28px;
  margin-bottom: 16px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px;
}
.bow-portal__karte-text { color: var(--bow-dark-64); }
.bow-portal__kasten { background: var(--bow-light); border-radius: var(--bow-r-8); padding: 16px 20px; margin-bottom: 16px; color: var(--bow-dark-88); }
.bow-portal__fortschritt { margin-bottom: 16px; }
.bow-portal__offen { color: var(--bow-dark-64); margin-top: 8px; }
.bow-portal__pflicht { color: var(--bow-fehler); }
.bow-portal__aktionen { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.bow-portal__meldung { color: var(--bow-dark-64); }

/* Material */
.bow-portal__material { display: flex; flex-direction: column; gap: 8px; }
.bow-portal__posten {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  background: var(--bow-light); border: 1px solid var(--bow-dark-16);
  border-radius: var(--bow-r-8); padding: 14px 16px;
}
.bow-portal__posten-text { display: flex; flex-direction: column; gap: 2px; }
.bow-portal__posten-status { color: var(--bow-dark-48); }
.bow-portal__posten-status--fertig { color: #3a7d3a; }
.bow-portal__upload { cursor: pointer; }

/* Entwürfe */
.bow-portal__links { display: flex; flex-direction: column; gap: 8px; }
.bow-portal__entwurf { border: 1px solid var(--bow-dark-16); border-radius: var(--bow-r-8); padding: 12px 16px; text-decoration: underline; }
.bow-portal__korrektur { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--bow-dark-16); border-radius: var(--bow-r-8); padding: 12px; margin-bottom: 8px; }
.bow-portal__select { background: var(--bow-weiss); }
.bow-portal__protokoll { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bow-portal__protokoll-zeile { display: flex; flex-direction: row; gap: 16px; justify-content: space-between; color: var(--bow-dark-64); }

/* Nachrichten */
.bow-portal__verlauf {
  background: var(--bow-surface); border-radius: var(--bow-r-8); padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 480px; overflow-y: auto; margin-bottom: 16px;
}
.bow-portal__system { align-self: center; background: var(--bow-light); border-radius: var(--bow-r-32); padding: 6px 14px; color: var(--bow-dark-64); text-align: center; }
.bow-portal__nachricht { display: flex; flex-direction: column; gap: 4px; max-width: 78%; }
.bow-portal__nachricht--bow { align-self: flex-start; }
.bow-portal__nachricht--kunde { align-self: flex-end; align-items: flex-end; }
.bow-portal__absender { color: var(--bow-dark-48); }
.bow-portal__blase { background: var(--bow-light); border-radius: var(--bow-r-8); padding: 12px 16px; }
.bow-portal__nachricht--kunde .bow-portal__blase { background: var(--bow-dark); color: var(--bow-light); }
.bow-portal__anhang { text-decoration: underline; }
.bow-portal__eingabe { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.bow-portal__eingabe .bow-konf__input { flex: 1 1 240px; }
.bow-portal__leer { color: var(--bow-dark-48); }

/* Listen (Dateien, Rechnungen, Pflege) */
.bow-portal__liste { display: flex; flex-direction: column; }
.bow-portal__zeile { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--bow-dark-08); }
.bow-portal__zeile:last-child { border-bottom: 0; }
.bow-portal__zeile-text { display: flex; flex-direction: column; gap: 2px; }
.bow-portal__zeile-meta { color: var(--bow-dark-48); }
.bow-portal__zeile-rechts { display: flex; flex-direction: row; gap: 14px; align-items: baseline; color: var(--bow-dark-64); }
.bow-portal__pdf { text-decoration: underline; }
.bow-portal__filter { margin-bottom: 20px; }

/* Anhänge im Chat */
.bow-portal__anhaenge { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bow-portal__anhaenge[hidden] { display: none; }
.bow-portal__anhang-pille { background: var(--bow-surface); border-radius: var(--bow-r-32); padding: 6px 12px; color: var(--bow-dark-64); }

/* ==========================================================================
   15. Hero auf dem Handy
   Die 1096px des Designs sind ein Desktop-Wert. Auf dem Telefon schiebt der
   mittig gesetzte Textblock die beiden Buttons unter die Browserleiste
   (gemessen: Buttons enden bei 793px, sichtbar sind 744px). Mobil bindet
   die Höhe deshalb an den SICHTBAREN Bildschirm — svh rechnet die Leisten
   mit, vh nicht. Die Innenabstände halten Logo (oben) und die beiden
   Kleinstschrift-Marken (unten) frei.
   min-height statt height: im Querformat wächst der Kasten mit dem Inhalt,
   damit nichts abgeschnitten wird.
   ========================================================================== */

@media (max-width: 699px) {
  .bow-hero {
    min-height: 100vh;        /* Rückfall für alte Browser */
    min-height: 100svh;
    padding-block: 96px 116px;
  }
}

/* Querformat auf dem Telefon: die Breitenregel oben greift dort nicht
   (844px breit), das Problem ist die Höhe. Unter 500px Höhe kommen normale
   Desktop-Fenster nicht vor, deshalb ist die Grenze hier sicher. */
@media (max-height: 500px) {
  .bow-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 64px 88px;
  }
}

/* ==========================================================================
   16. Kennzahlen der Sektion "Vier Festlegungen" mobil ausblenden
   Auf dem Telefon stehen die vier Werte untereinander und nehmen fast einen
   ganzen Bildschirm ein, direkt unter den vier Textblöcken, die dasselbe
   schon sagen. Die Information bleibt trotzdem vorhanden: 2.500 €, 14 Tage
   und 79 € stehen je dreimal auf der Seite (Preisbeispiele, "Danach",
   Footer-Fakten), die Pflichttermine trägt der Block "Ohne Termine".
   Die eigenständigen Kennzahlen-Sektionen auf Referenzen und Ablauf
   bleiben unberührt — die haben eine eigene Überschrift.
   ========================================================================== */

@media (max-width: 699px) {
  .bow-festlegungen .bow-kennzahlen { display: none; }
}

/* ==========================================================================
   17. Footer-Navigation mobil zweispaltig
   Die beiden Spalten sind je 220px breit; zusammen mit dem Abstand sind das
   448px und passen nicht in die 350px Inhaltsbreite eines Telefons — sie
   brechen also untereinander. Unter 700px teilen sie sich stattdessen die
   Reihe. Die Faktenspalten daneben bleiben unberührt, ihre Werte sind
   deutlich länger.
   ========================================================================== */

@media (max-width: 699px) {
  .bow-footer__nav { gap: 24px; }
  .bow-footer__nav .bow-footer__spalte { width: auto; flex: 1 1 0; min-width: 0; }
}

/* Achtstrahliger Stern in der Laufschrift (statt U+2733, das iOS als Emoji
   rendert). Groesse und Farbe kommen aus der Schrift. */
.bow-stern {
  display: inline-block;
  /* 0.7em Glyphe plus 2x0.0458em Seitenluft = 0.7917em Vorschub — genau so
     breit wie das Zeichen U+2733 in der Referenz (47,5px bei 60px Schrift).
     Damit bleibt die Laufschrift gleich lang. */
  width: 0.7em; height: 0.7em;
  min-width: 0; min-height: 0;   /* Bricks setzt sonst min-width:1em */
  margin-inline: 0.0458em;
  vertical-align: -0.02em;
  flex-shrink: 0;
}

/* ==========================================================================
   18. Grosse Aussage auf der Studio-Seite
   Der Grad bow-t-h2s (40/48) ist für kurze Zeilen gedacht — die fünf Titel
   der Zeitachse haben 12 bis 18 Zeichen. Hier stehen 218 Zeichen darin:
   auf dem Telefon 15 Zeilen und 702px, also 83 Prozent des Bildschirms.
   min() hält den Design-Wert ab etwa 625px Viewport und skaliert darunter;
   die anderen Nutzer des Grades bleiben unberührt.
   ========================================================================== */

.bow-statement__satz { font-size: min(40px, 6.4vw); }

/* Zeilenabstand mobil etwas grosszuegiger: der Grad ist fuer kurze Zeilen
   gedacht, mit 1,2 stehen zehn Zeilen Fliesstext zu dicht. 1,3 gilt nur dort,
   wo wirklich skaliert wird — ab 625px bleibt es beim Design-Wert. */
@media (max-width: 624px) {
	.bow-statement__satz { line-height: 1.3; }
}

/* ==========================================================================
   20. Angebotsseite (/angebot/)
   Eigene Kopfzeile wie Konfigurator und Portal: Logo plus Adresse, an die
   das Angebot ging. Die fixe Navigation bleibt hier aus, der Footer an —
   die Rechtslinks werden auf dieser Seite anerkannt und muessen erreichbar
   sein.
   ========================================================================== */
.bow-angebot { display: flex; flex-direction: column; gap: 32px; padding-block: 48px 96px; }
.bow-angebot__kopf { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.bow-angebot__logo { color: var(--bow-dark); display: inline-flex; }
.bow-angebot__logo svg { width: 72px; height: 29px; }
.bow-angebot__adresse { color: var(--bow-dark-48); }

.bow-angebot__inhalt { display: flex; flex-direction: column; gap: 24px; max-width: 720px; width: 100%; }
.bow-angebot__spalte { display: flex; flex-direction: column; gap: 12px; }
.bow-angebot__karte,
.bow-angebot__zahlung { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

.bow-angebot__tabelle { width: 100%; border-collapse: collapse; }
.bow-angebot__tabelle th,
.bow-angebot__tabelle td { text-align: left; padding: 10px 0; border-top: 1px solid var(--bow-dark-08); font-weight: inherit; }
/* nowrap gilt nur der Geldspalte: kurze Werte wie "2.500 €" sollen nicht
   zwischen Zahl und Zeichen brechen. Lange Werte gehoeren nicht in diese
   Spalte — gemessen: "14 Werktage nach vollstaendigem Onboarding" war mit
   nowrap 305px breit und sprengte die 326px breite Karte auf dem Telefon.
   Termine stehen deshalb als Liste in der Zahlungskarte. */
.bow-angebot__tabelle td { text-align: right; white-space: nowrap; padding-left: 16px; }
.bow-angebot__tabelle tr:first-child th,
.bow-angebot__tabelle tr:first-child td { border-top: 0; }
.bow-angebot__summe th,
.bow-angebot__summe td { border-top: 1px solid var(--bow-dark); }

.bow-angebot__annahme { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.bow-angebot__haken { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; cursor: pointer; }
.bow-angebot__haken input { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--bow-dark); }
.bow-angebot__haken a { color: inherit; text-decoration: underline; }
.bow-angebot__meldung { color: var(--bow-dark-48); }
.bow-angebot__meldung--fehler { color: #b3261e; }

/* Termine und bestehende Website: Bezeichnung ueber dem Wert, nicht daneben.
   Eine URL oder ein ganzer Satz passt auf dem Telefon in keine zweite Spalte. */
.bow-angebot__daten { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bow-angebot__daten dt { color: var(--bow-dark-48); }
.bow-angebot__daten dd { margin: 2px 0 0; overflow-wrap: anywhere; }

.bow-angebot__fertig { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bow-angebot__stempel { color: var(--bow-dark-48); }
.bow-angebot__leer { padding: 32px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 560px; }

/* Angebotsseite auf dem Telefon: schmalere Innenabstaende, damit der Tabelle
   mehr Breite bleibt. */
@media (max-width: 699px) {
  .bow-angebot { padding-block: 32px 64px; }
  .bow-angebot__karte,
  .bow-angebot__zahlung { padding: 20px; }
  .bow-angebot__leer { padding: 24px; }
}

/* Unternehmensdaten im Kaufprozess. Zweispaltig ab 560px, PLZ und Land
   schmal — sonst stehen vier Zeichen in einem Feld von 340px. */
.bow-angebot__firma,
.bow-angebot__mandat { padding: 24px; display: flex; flex-direction: column; gap: 16px; align-self: stretch; }
.bow-angebot__felder { display: grid; grid-template-columns: 1fr; gap: 16px; }
.bow-angebot__feld { display: flex; flex-direction: column; gap: 6px; }
.bow-angebot__feld span { color: var(--bow-dark-48); }
.bow-angebot__feld input {
  font-family: var(--bow-body); font-size: 15px; line-height: 24px; color: var(--bow-dark);
  background: #fff; border: 1px solid var(--bow-dark-16); border-radius: var(--bow-r-8);
  padding: 10px 12px; width: 100%; box-sizing: border-box;
}
.bow-angebot__feld input:focus-visible { outline: 2px solid var(--bow-dark); outline-offset: 1px; }
.bow-angebot__abbruch { color: #b3261e; }

@media (min-width: 560px) {
  .bow-angebot__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bow-angebot__feld--schmal { max-width: 180px; }
}

/* ==========================================================================
   24. Kontaktformular (/kontakt/)

   Bewusst dieselben Felder wie im Konfigurator und im Kaufprozess: wer eine
   Anfrage schreibt, hat den Rechner oft schon gesehen. Der Rahmen ist
   schmaler als der Konfigurator (640 statt 720px), weil hier keine Zeile mit
   Preis rechts steht.
   ========================================================================== */
.bow-kontakt__block { display: flex; flex-direction: column; }
.bow-kontakt__titel,
.bow-kontakt__intro,
.bow-kontakt__form,
.bow-kontakt__meldung { width: 100%; max-width: 640px; }
.bow-kontakt__intro { color: var(--bow-dark-64); margin-top: 12px; }
.bow-kontakt__form { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }

/* Zwei Spalten ab 560px: Name/Unternehmen und E-Mail/Telefon gehoeren
   paarweise zusammen. */
.bow-kontakt__felder { display: grid; grid-template-columns: 1fr; gap: 4px 24px; }
@media (min-width: 560px) { .bow-kontakt__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bow-kontakt__feld { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.bow-kontakt__feld span { color: var(--bow-dark-64); }
.bow-kontakt__feld input,
.bow-kontakt__feld select,
.bow-kontakt__feld textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bow-weiss); border: 1px solid var(--bow-dark-16);
  border-radius: var(--bow-r-8); padding: 12px 16px;
  font-family: var(--bow-ui); font-size: 16px; line-height: 24px; color: var(--bow-dark);
  /* appearance zuruecksetzen, sonst malt iOS eigene Felder und Auswahlen. */
  -webkit-appearance: none; appearance: none;
}
.bow-kontakt__feld textarea { resize: vertical; min-height: 168px; }
.bow-kontakt__feld input::placeholder,
.bow-kontakt__feld textarea::placeholder { color: var(--bow-dark-48); }
.bow-kontakt__feld input:focus-visible,
.bow-kontakt__feld select:focus-visible,
.bow-kontakt__feld textarea:focus-visible {
  outline: 2px solid var(--bow-accent); outline-offset: 2px; border-color: var(--bow-dark);
}

/* Das Feld, das nicht stimmte: Rahmen statt roter Schrift — die Meldung
   selbst steht oben, hier genuegt der Hinweis, wo sie hingehoert. */
.bow-kontakt__feld--fehler input,
.bow-kontakt__feld--fehler textarea { border-color: var(--bow-fehler); }

.bow-kontakt__haken { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; margin-top: 24px; }
.bow-kontakt__haken input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--bow-dark); }
.bow-kontakt__haken span { color: var(--bow-dark-64); }
.bow-kontakt__haken a { text-decoration: underline; }
.bow-kontakt__haken--fehler span { color: var(--bow-fehler); }

.bow-kontakt__aktion { margin-top: 28px; }
/* 64 statt 48 Prozent: bei 12px messen 48 Prozent nur 3,08:1 und fallen
   unter AA. Die Zeile ist der direkte Weg zu uns — die soll man lesen. */
.bow-kontakt__fuss { color: var(--bow-dark-64); margin-top: 16px; }

.bow-kontakt__meldung { border-radius: var(--bow-r-16); padding: 20px 24px; margin-bottom: 32px; }
.bow-kontakt__meldung--gut { background: var(--bow-surface); border-left: 3px solid var(--bow-accent); }
.bow-kontakt__meldung--fehler { background: var(--bow-surface); border-left: 3px solid var(--bow-fehler); }
.bow-kontakt__meldung p + p { margin-top: 8px; }

/* Honeypot: aus dem sichtbaren Bereich genommen, aber nicht display:none —
   das erkennen manche Roboter und lassen das Feld dann leer. */
.bow-kontakt__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }