/*
Theme Name:   BOW Child (bow.studio)
Theme URI:    https://bow.studio
Description:  Child-Theme fuer bow.studio. Enthaelt die Design-Tokens aus dem
              Design-Handoff, lokal gehostete Fonts und saemtliche Styles fuer
              Startseite, Konfigurator und Kundenportal. Funktionalitaet liegt
              im Plugin bow-core.
Author:       BOLD
Template:     bricks
Version:      0.1.0
Text Domain:  bow-child
*/

/* ==========================================================================
   1. Fonts — lokal gehostet (DSGVO, Leitfaden 9.1)
   Variable Fonts: eine Datei je Subset, Faces je Gewicht EINZELN deklariert,
   damit der Browser instanziiert statt zu interpolieren.
   ========================================================================== */

/* Epilogue — latin */
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/epilogue-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: 'Epilogue'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/epilogue-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: 'Epilogue'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/epilogue-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; }

/* Epilogue — latin-ext */
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/epilogue-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: 'Epilogue'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/epilogue-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: 'Epilogue'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/epilogue-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; }

/* Inter — latin
   BEWUSST nur 300 und 400: die Design-Referenz laedt genau diese beiden
   Schnitte (Google-Request "Inter:wght@300;400", README-Tokens ebenso).
   Jedes font-weight:500/600 im Design rendert dort deshalb als 400.
   Gemessen: 14px/500 waere mit echtem 500-Schnitt 14px breiter (12.1).
   Sollen UI-Texte echt halbfett werden, hier 500/600 ergaenzen — das ist
   dann eine Designaenderung, keine Korrektur. */
/* Inter — latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/inter-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; }

/* Inter — latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/inter-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 (Werte 1:1 aus dem Handoff, README "Design Tokens")
   ========================================================================== */

:root {
  /* Farben */
  --bow-bg:            #F1F1EF;
  --bow-ink:           #111111;
  --bow-ink-70:        rgba(17,17,17,0.7);
  --bow-ink-60:        rgba(17,17,17,0.6);
  --bow-ink-45:        rgba(17,17,17,0.45);
  --bow-ink-20:        rgba(17,17,17,0.2);
  --bow-ink-15:        rgba(17,17,17,0.15);
  --bow-ink-10:        rgba(17,17,17,0.1);
  --bow-ink-08:        rgba(17,17,17,0.08);
  --bow-ink-06:        rgba(17,17,17,0.06);
  --bow-ink-02:        rgba(17,17,17,0.02);
  --bow-paper:         #ffffff;
  --bow-lime:          #D9F24B;
  --bow-on-dark:       #F1F1EF;
  --bow-on-dark-70:    rgba(241,241,239,0.7);
  --bow-on-dark-55:    rgba(241,241,239,0.55);
  --bow-error:         #b3261e;
  --bow-badge:         #d32f2f;
  --bow-success:       #3a7d3a;

  /* Typografie */
  --bow-font-display:  'Epilogue', system-ui, sans-serif;
  --bow-font-text:     'Inter', system-ui, sans-serif;

  /* Radien */
  --bow-r-s:           8px;
  --bow-r-m:           12px;
  --bow-r-pill:        999px;

  /* Raster */
  --bow-max:           1080px;   /* Startseite */
  --bow-max-form:      640px;    /* Konfigurator / Portal-Formulare */
  --bow-pad-x:         24px;
  --bow-gap:           16px;
  --bow-section-y:     80px;     /* Standardabstand zwischen Sektionen */
}

/* ==========================================================================
   3. Basis + Neutralisierung der Bricks-Defaults (Leitfaden 9.2, 4.3)
   Bricks vererbt line-height 1.7 (Headings 1.4) und box-sizing:border-box;
   die Design-Referenz rechnet mit Browser-Defaults. Ohne diesen Block weicht
   jede Kachelhoehe und jeder Zeilenabstand messbar ab.
   ========================================================================== */

.bow-page {
  background: var(--bow-bg);
  color: var(--bow-ink);
  font-family: var(--bow-font-text);
  font-weight: 300;
  line-height: normal;
  overflow-x: hidden;
}

.bow-page :where(h1, h2, h3, h4, h5, h6) {
  line-height: normal;
  font-weight: inherit;
  margin: 0;
}

.bow-page :where(p, ul, ol, figure, blockquote) { margin: 0; }
.bow-page :where(ul, ol) { list-style: none; padding: 0; }

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

/* Bricks stylt generische Tags per Element-Selektor — 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; text-transform: none; font-style: normal; opacity: 1; }
.bow-page figcaption { text-align: left; }

.bow-page img { max-width: 100%; height: auto; }

/* Formularelemente erben nicht automatisch */
.bow-page :where(input, select, textarea, button) {
  font-family: var(--bow-font-text);
  font-weight: 300;
  line-height: normal;
  color: var(--bow-ink);
}

/* Sichtbarer Fokus — Tastaturbedienung bleibt nachvollziehbar */
.bow-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bow-ink);
  outline-offset: 2px;
}

/* ==========================================================================
   4. Layout-Wrapper
   Bricks' section/container/block sind Flex-Spalten mit align-items:center —
   ein max-width-Kind schrumpft ohne width:100% auf Inhaltsbreite (4.1).
   ========================================================================== */

.bow-inner {
  display: block;
  width: 100%;                       /* entscheidend */
  /* --bow-max ist die INHALTSbreite (1080px im Design). WordPress/Bricks
     setzen global border-box, die Design-Referenz rechnet content-box —
     ohne diese Rechnung ist der Inhalt 48px zu schmal (Leitfaden 9.2). */
  max-width: calc(var(--bow-max) + 2 * var(--bow-pad-x));
  margin-inline: auto;
  padding-inline: var(--bow-pad-x);
}

.bow-inner--form { max-width: calc(var(--bow-max-form) + 2 * var(--bow-pad-x)); }
.bow-inner--flush { max-width: none; padding-inline: 0; }   /* randlose Sektionen */

/* Sektionsabstaende ueber eigene Klassen, nie ueber .brxe-<slug> (2.2) */
.bow-sec { padding-block: 0 var(--bow-section-y); }
.bow-sec--first { padding-block: 56px 0; }
.bow-sec--flush { padding: 0; }

/* Ankerziele nicht unter einem Sticky-Header verstecken */
.bow-page [id] { scroll-margin-top: 24px; }

/* ==========================================================================
   5. Wiederkehrende Bausteine
   ========================================================================== */

/* Buttons — als <a> gerendert, deshalb gegen generischen Link-Hover
   absichern: .bow-page a:hover (0,2,1) gewinnt sonst (4.6). */
.bow-page .bow-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--bow-r-pill);
  border: 0;
  line-height: normal;
  text-align: center;
  cursor: pointer;
  transition: opacity .15s ease;
}
.bow-page .bow-btn--dunkel        { background: var(--bow-ink); color: var(--bow-on-dark); }
.bow-page .bow-btn--dunkel:hover  { background: var(--bow-ink); color: var(--bow-on-dark); opacity: .85; }
.bow-page .bow-btn--hell          { background: var(--bow-paper); color: var(--bow-ink); border: 1px solid var(--bow-ink-15); }
.bow-page .bow-btn--hell:hover    { background: var(--bow-paper); color: var(--bow-ink); opacity: .75; }
.bow-page .bow-btn--invers        { background: var(--bow-bg); color: var(--bow-ink); }
.bow-page .bow-btn--invers:hover  { background: var(--bow-bg); color: var(--bow-ink); opacity: .85; }
.bow-page .bow-btn--lime          { background: var(--bow-lime); color: var(--bow-ink); }
.bow-page .bow-btn--lime:hover    { background: var(--bow-lime); color: var(--bow-ink); opacity: .85; }
.bow-page .bow-btn--breit         { display: block; width: 100%; padding: 10px; }
.bow-page .bow-btn--gross         { font-size: 16px; font-weight: 600; font-family: var(--bow-font-display); padding: 14px 28px; }

/* Karten */
.bow-karte        { background: var(--bow-paper); border: 1px solid var(--bow-ink-10); border-radius: var(--bow-r-m); }
.bow-karte--dunkel{ background: var(--bow-ink); color: var(--bow-on-dark); border-color: transparent; }
.bow-karte--lime  { background: var(--bow-lime); color: var(--bow-ink); border-color: transparent; }
.bow-karte--dunkel .bow-fliess { color: var(--bow-on-dark-55); }

/* Textrollen */
.bow-uebertitel { font-size: 16px; font-weight: 500; font-family: var(--bow-font-display); }
.bow-fliess     { font-size: 13px; line-height: 1.5; color: var(--bow-ink-60); }
.bow-klein      { font-size: 12px; color: var(--bow-ink-60); }

/* Bildplatzhalter — bleiben Platzhalter, bis echtes Material vorliegt */
.bow-platzhalter {
  border-radius: var(--bow-r-m);
  border: 1px solid var(--bow-ink-10);
  background: repeating-linear-gradient(135deg, var(--bow-ink-06) 0 10px, var(--bow-ink-02) 10px 20px);
  display: flex; align-items: center; justify-content: center;
}
.bow-platzhalter__text { font-family: monospace; font-size: 12px; color: var(--bow-ink-60); }

/* Pill/Badge */
.bow-pill  { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--bow-r-pill); background: var(--bow-lime); color: var(--bow-ink); }
.bow-badge { background: var(--bow-badge); color: #fff; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; border-radius: var(--bow-r-pill); display: flex; align-items: center; justify-content: center; padding: 0 5px; }

/* Raster-Helfer. Spaltenzahl immer explizit, nie auto-fit raten lassen (9.5).
   Umbruchstufen folgen den Bricks-Standard-Breakpoints (1279/991/767/478),
   damit spaetere Anpassungen im Builder auf denselben Stufen greifen. */
.bow-grid    { display: grid; gap: var(--bow-gap); }
.bow-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bow-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bow-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ==========================================================================
   6. Responsive — definierte Stufen, keine Zwischenstufen (9.5)
   991 Tablet · 767 Mobil quer · 478 Mobil hoch (= Bricks-Breakpoints)
   ========================================================================== */

@media (max-width: 991px) {
  :root { --bow-section-y: 64px; }
  .bow-grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* 3 Spalten brechen direkt auf 1 — 2+1 sieht nach Fehler aus.
     Ausnahme: Raster, die im Design schon ungerade laufen (Ablauf 3+2). */
  .bow-grid--3 { grid-template-columns: 1fr; }
  .bow-grid--3.bow-grid--ungerade { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  :root { --bow-pad-x: 20px; --bow-section-y: 56px; }
  .bow-grid--2 { grid-template-columns: 1fr; }
  .bow-grid--3.bow-grid--ungerade { grid-template-columns: 1fr; }
}

@media (max-width: 478px) {
  .bow-grid--4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bow-page *, .bow-page *::before, .bow-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   7. Icons — im Design keine Icon-Font, sondern Zeichen und CSS-Formen.
   Geometrie exakt wie in der Referenz, damit die Kachelhoehen stimmen.
   ========================================================================== */

.bow-icon { margin-bottom: 16px; }

.bow-icon--zeichen { width: 20px; height: 20px; font-size: 17px; line-height: 20px; }
.bow-icon--euro    { font-weight: 600; }

.bow-icon--uhr {
  /* Die Referenz rechnet hier content-box: 20px + 2x1.5px Rahmen = 23px hoch.
     Mit border-box waere das Icon 3px kleiner und alles darunter rutscht
     nach oben (Leitfaden 9.2, Ursache 1). */
  width: 20px; height: 20px; box-sizing: content-box;
  border: 1.5px solid var(--bow-ink); border-radius: 50%; position: relative;
}
.bow-icon--uhr .bow-icon__zeiger { position: absolute; background: var(--bow-ink); }
.bow-icon--uhr .bow-icon__zeiger--lang { left: 9px; top: 3px; width: 1.5px; height: 6px; }
.bow-icon--uhr .bow-icon__zeiger--kurz { left: 9px; top: 9px; width: 5px; height: 1.5px; }

.bow-icon--raster {
  width: 20px; height: 20px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px;
}
.bow-icon--raster span { border: 1.5px solid var(--bow-ink); }

.bow-icon--liste {
  width: 18px; height: 18px;
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
}
.bow-icon--liste span { height: 1.5px; background: var(--bow-ink); }
.bow-icon--liste span:nth-child(1) { width: 18px; }
.bow-icon--liste span:nth-child(2) { width: 12px; }
.bow-icon--liste span:nth-child(3) { width: 15px; }

.bow-icon--dokument {
  width: 18px; height: 18px; box-sizing: border-box;
  border: 1.5px solid var(--bow-ink); padding: 3px;
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
}
.bow-icon--dokument span { height: 1px; background: var(--bow-ink); }
.bow-icon--dokument span:nth-child(1) { width: 100%; }
.bow-icon--dokument span:nth-child(2) { width: 70%; }

.bow-icon--punkt { width: 18px; height: 18px; display: flex; align-items: center; }
.bow-icon--punkt span { width: 8px; height: 8px; border-radius: 50%; background: var(--bow-ink); }

/* In Karten sind die Icons kleiner gesetzt (18px statt 20px) */
.bow-ablauf__karte .bow-icon { margin-bottom: 14px; }
.bow-ablauf__karte .bow-icon--zeichen { width: 18px; height: 18px; font-size: 15px; line-height: 18px; font-weight: 300; }

/* ==========================================================================
   8. Sektionen der Startseite
   ========================================================================== */

.bow-logo { display: block; color: var(--bow-ink); }   /* Hoehe kommt aus dem Attribut, wie im Design */

/* --- 1 Hero ------------------------------------------------------------ */
.bow-hero__logo    { margin-bottom: 36px; }
.bow-hero__titel   { font-family: var(--bow-font-display); font-size: 38px; font-weight: 500; line-height: 1.15; margin: 0 0 18px 0; }
.bow-hero__subline { font-size: 14px; line-height: 1.5; color: var(--bow-ink-60); max-width: 460px; margin: 0 0 24px 0; }
.bow-hero__aktionen{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }

/* --- 2 Arbeiten -------------------------------------------------------- */
.bow-arbeiten__spur {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-behavior: smooth;
  /* laeuft im Design bewusst rechts aus dem Raster heraus */
  margin-right: -9999px; padding-right: 9999px;
  scrollbar-width: none;
}
.bow-arbeiten__spur::-webkit-scrollbar { display: none; }

.bow-arbeiten__kachel     { flex: 0 0 420px; display: flex; flex-direction: column; gap: 8px; }
.bow-arbeiten__bild       { width: 100%; aspect-ratio: 420 / 260; border-radius: var(--bow-r-m); overflow: hidden; }
.bow-arbeiten__bild img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.bow-arbeiten__titel      { font-size: 14px; font-weight: 500; }
.bow-arbeiten__untertitel { font-size: 13px; color: var(--bow-ink-60); }

.bow-arbeiten__nav   { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 0 0 0; }
.bow-arbeiten__knopf {
  width: 34px; height: 34px; border-radius: var(--bow-r-pill);
  border: 1px solid var(--bow-ink-15); background: var(--bow-paper);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.bow-arbeiten__knopf:hover { background: var(--bow-bg); }

/* --- 3 Merkmale -------------------------------------------------------- */
.bow-merkmale__titel       { margin: 0 0 28px 0; }
.bow-merkmale__punkt-titel { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

/* --- 4 Statement + Kennzahlen ----------------------------------------- */
.bow-statement__satz  { font-family: var(--bow-font-display); font-size: 28px; font-weight: 500; line-height: 1.25; margin: 0 0 40px 0; max-width: 820px; }
.bow-statement__stark { color: var(--bow-ink); }
.bow-statement__leise { color: var(--bow-ink-60); }
.bow-statement__zahlen{ display: grid; grid-template-columns: repeat(3, auto); gap: 56px; }
.bow-statement__wert  { font-family: var(--bow-font-display); font-size: 44px; font-weight: 500; line-height: 1; }
.bow-statement__text  { font-size: 12px; color: var(--bow-ink-60); margin-top: 6px; }

/* --- 5 Leistungen und Branchen ---------------------------------------- */
.bow-leistungen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.bow-leistungen__liste { display: flex; flex-direction: column; gap: 12px; font-size: 20px; font-weight: 500; padding-top: 8px; }
.bow-leistungen__karte { padding: 28px; }
.bow-leistungen__karte-kopf  { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.bow-leistungen__karte-titel { font-size: 18px; font-weight: 500; }
.bow-leistungen__stern       { font-size: 16px; }
.bow-leistungen__branchen    { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

/* --- 6 Ablauf ---------------------------------------------------------- */
.bow-ablauf__titel { margin: 0 0 28px 0; }
.bow-ablauf__reihe:not(:last-child) { margin-bottom: 16px; }
.bow-ablauf__karte { padding: 22px; }
.bow-ablauf__karte-titel { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

/* --- 7 Preise ---------------------------------------------------------- */
.bow-preise__titel { margin: 0 0 8px 0; }
.bow-preise__intro { font-size: 14px; color: var(--bow-ink-60); margin: 0 0 28px 0; }
.bow-preise__karte { padding: 26px; }
.bow-preise__name  { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.bow-preise__fuer  { margin: 0 0 18px 0; line-height: normal; }   /* Referenz setzt hier keine line-height */
.bow-preise__preis { font-family: var(--bow-font-display); font-size: 30px; font-weight: 500; margin-bottom: 16px; }
.bow-preise__karte .bow-btn { margin-bottom: 20px; }
.bow-preise__liste { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.bow-preise__fussnote { margin: 24px 0 0 0; line-height: normal; }

/* --- 8 Danach ---------------------------------------------------------- */
.bow-danach__karte { padding: 26px; }
.bow-danach__titel { font-size: 15px; font-weight: 600; margin-bottom: 10px; }

/* --- 9 Wer dahinter steht --------------------------------------------- */
.bow-team { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.bow-team__titel { margin: 0 0 20px 0; }
.bow-team__bild  { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--bow-r-m); overflow: hidden; }
.bow-team__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 11 FAQ ------------------------------------------------------------ */
.bow-faq__titel  { margin: 0 0 4px 0; }
.bow-faq__liste  { border-top: 1px solid var(--bow-ink-10); }
.bow-faq__item   { border-bottom: 1px solid var(--bow-ink-10); }
.bow-faq__frage  {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  width: 100%; padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left;
}
/* Geoeffnet uebernimmt die Antwort den unteren Abstand — sonst steht
   zwischen Frage und Antwort 18px zu viel (gemessen, Leitfaden 12.1). */
.bow-faq__frage[aria-expanded="true"] { padding-bottom: 0; }
.bow-faq__frage-text { font-size: 14px; font-weight: 500; }
.bow-faq__zeichen    { font-size: 15px; color: var(--bow-ink-60); }
.bow-faq__antwort    { padding: 12px 0 18px 0; }
.bow-faq__antwort p  { max-width: 700px; margin: 0; }
.bow-faq__antwort[hidden] { display: none; }

/* --- 12 Footer --------------------------------------------------------- */
.bow-footer { background: var(--bow-lime); color: var(--bow-ink); padding: 56px 24px 24px 24px; overflow: hidden; }
.bow-footer__logo { display: flex; justify-content: center; margin-bottom: 32px; }
.bow-footer__laufschrift { overflow: hidden; margin-bottom: 32px; }
.bow-footer__spur { display: flex; white-space: nowrap; width: max-content; animation: bow-marquee 18s linear infinite; }
.bow-footer__strecke { font-family: var(--bow-font-display); font-size: 24px; font-weight: 500; padding-right: 24px; }
.bow-footer__cta { text-align: center; margin-bottom: 32px; }
.bow-footer__zeile { display: flex; gap: 16px; justify-content: center; text-align: center; font-size: 12px; color: var(--bow-ink-60); }
.bow-footer__zeile a { color: var(--bow-ink-60); }
.bow-footer__zeile a:hover { color: var(--bow-ink); }

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

/* Dauer als Klasse statt Inline-Style — Strecke und Tempo muessen
   zusammenpassen (Zielkorridor 25–35 px/s, Leitfaden 9.4). */
.bow-marquee--12s { animation-duration: 12s; }
.bow-marquee--18s { animation-duration: 18s; }
.bow-marquee--24s { animation-duration: 24s; }
.bow-marquee--30s { animation-duration: 30s; }
.bow-marquee--40s { animation-duration: 40s; }
.bow-marquee--60s { animation-duration: 60s; }

/* Sektions-Varianten */
.bow-sec--faq { padding-bottom: 96px; }

/* ==========================================================================
   9. Responsive je Sektion — Design ist Desktop-only, Verhalten abgeleitet
   ========================================================================== */

@media (max-width: 991px) {
  .bow-hero__titel        { font-size: clamp(28px, 4.2vw, 38px); }
  .bow-statement__satz    { font-size: clamp(22px, 3.2vw, 28px); }
  .bow-statement__zahlen  { gap: 32px; }
  .bow-statement__wert    { font-size: clamp(32px, 4.6vw, 44px); }
  .bow-leistungen         { grid-template-columns: 1fr; }
  .bow-leistungen__liste  { font-size: clamp(17px, 2.4vw, 20px); }
  .bow-footer__strecke    { font-size: clamp(18px, 2.8vw, 24px); }
}

@media (max-width: 767px) {
  .bow-hero__titel   { font-size: clamp(26px, 6.4vw, 34px); }
  .bow-team          { grid-template-columns: 1fr; }
  .bow-statement__zahlen { grid-template-columns: 1fr; gap: 24px; }
  .bow-arbeiten__kachel  { flex: 0 0 min(420px, 82vw); }
  .bow-sec--faq      { padding-bottom: 72px; }
  .bow-footer        { padding: 40px 20px 24px 20px; }
}

/* Arbeiten laeuft rechts aus dem Raster — Sektion muss kappen */
.bow-sec--arbeiten { overflow: hidden; }

/* Grenzen: die Referenz setzt hier keine line-height (Absatz erbt normal) */
.bow-grenzen p { line-height: normal; }

/* Footer sitzt direkt in der Section (ohne Breiten-Container) und muss
   deshalb selbst die volle Breite nehmen — die Section ist eine Flex-Spalte
   mit align-items:center (Leitfaden 4.1). */
.bow-footer { width: 100%; }