/* ============================================================
   Stylesheet — erzeugt von bauen.php
   Wiederverwendbare Basis. Alle Farben und Maße stehen als
   Variablen in :root; bauen.php setzt sie aus design.json und
   ersetzt die daraus abgeleiteten rgba()-Töne im ganzen Blatt.
   Von Hand geändert wird deshalb nur vorlage/assets/style.css.
   ============================================================ */

/* --- 1. Schriften (lokal, keine Verbindung nach außen) ----- */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/bricolage-grotesque-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:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/bricolage-grotesque-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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-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}



/* Weitere Familien. Welche davon in der fertigen Seite landen,
   entscheidet design.json — bauen.php wirft alle nicht benutzten
   @font-face-Regeln und ihre Dateien wieder heraus. */
/* --- 2. Farben und Grundwerte ------------------------------ */

:root{
  --bg:#08090c;
  --ink:#f2efe9;
  --accent:#e8a33d;

  /* Abgestufte Textfarben. Die Deckkraft kommt aus design.json;
     bauen.php prüft jede Stufe gegen 4,5:1 und baut sonst nicht. */
  --ink-72:rgba(242,239,233,.72);
  --ink-64:rgba(242,239,233,.64);
  --ink-56:rgba(242,239,233,.56);

  --line:rgba(242,239,233,.14);
  --line-strong:rgba(242,239,233,.28);
  --surface:rgba(242,239,233,.03);

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --pad-x:clamp(20px,5vw,60px);
  --pad-y:clamp(56px,8vw,88px);
  --max:1440px;

  /* Formensprache. Setzt bauen.php aus design.json → gestalt.
     Zwei Kundenseiten mit gleicher Struktur, aber anderen Werten
     hier sehen für einen Besucher völlig verschieden aus. */
  --radius:4px;
  --radius-klein:2px;
  --radius-gross:6px;
  --radius-chip:999px;
  --h1:clamp(38px,8.2vw,82px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Verhindert, dass die klebende Kopfzeile Sprungziele verdeckt.
     Muss größer sein als die Kopfzeile hoch ist (dort ~89 px). */
  scroll-padding-top:104px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto}

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

/* Tastaturbedienung muss immer sichtbar sein */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-klein);
}

.shell{max-width:var(--max);margin:0 auto;background:var(--bg)}
.section{padding:var(--pad-y) var(--pad-x)}
.section--tight{padding-top:0}

/* Sprunglink für Screenreader und Tastatur */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--bg);
  padding:12px 20px;font-weight:700;
}
.skip:focus{left:0}

.eyebrow{
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.2em;
  color:var(--accent);
  text-transform:uppercase;
}
.label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.18em;
  color:var(--ink-56);
  text-transform:uppercase;
}

h1,h2,h3{font-family:var(--font-display);letter-spacing:-.025em;text-wrap:pretty;margin:0}
h2{font-size:clamp(29px,4.6vw,46px);font-weight:700;line-height:1.08}
h3{font-size:clamp(20px,2.4vw,23px);font-weight:600;letter-spacing:-.015em}
p{margin:0 0 12px;text-wrap:pretty}


/* --- 3. Schaltflächen -------------------------------------- */

.btn{
  display:inline-block;
  padding:16px 30px;
  font-family:inherit;font-size:16px;font-weight:700;
  border-radius:var(--radius-klein);border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.btn--accent{background:var(--accent);color:var(--bg);font-weight:800;border-color:var(--accent)}
.btn--accent:hover{background:var(--ink);border-color:var(--ink);color:var(--bg);transform:translateY(-3px);box-shadow:0 14px 34px rgba(232,163,61,.22)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-3px)}


/* --- 4. Kopfzeile und Navigation --------------------------- */
/* Kein JavaScript: die Navigation ist auf schmalen Schirmen
   einfach eine umbrechende Zeile. Nichts kann klemmen. */

.site-head{
  position:relative;z-index:30;
  border-bottom:1px solid rgba(242,239,233,.1);
  background:rgba(8,9,12,.92);
}
.site-head__inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px 24px;
  padding:18px var(--pad-x);
}

.brand{display:flex;align-items:center;gap:11px;color:var(--ink);padding:4px 0}
.brand:hover{color:var(--ink)}
.brand__mark{position:relative;padding-top:9px}
.brand__word{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1}
.brand__wing{position:absolute;right:-3px;top:0}
.brand__sub{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  color:var(--ink-64);padding-left:11px;
  border-left:1px solid rgba(242,239,233,.2);
}

.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;font-size:14.5px;font-weight:500}
/* Innenabstand statt nur Text: sorgt für ausreichend große
   Tippflächen auf dem Handy (WCAG 2.5.8 verlangt 24×24 px). */
.site-nav a{color:var(--ink-72);transition:color .25s;padding:10px 2px}
.site-nav a:hover{color:var(--ink)}
.site-nav .btn{padding:11px 22px;font-size:14.5px}
/* Muss spezifischer sein als ".site-nav a", sonst gewinnt dort die
   helle Textfarbe und der Knopf wird unlesbar (heller Text auf Orange). */
.site-nav .btn--accent,
.site-nav .btn--accent:hover{color:var(--bg)}

@media(min-width:900px){
  .site-head{position:sticky;top:0;backdrop-filter:blur(10px)}
  .site-head__inner{padding:20px var(--pad-x)}
}
@media(max-width:620px){
  .site-head__inner{justify-content:center;text-align:center}
  .site-nav{justify-content:center;gap:10px 20px;font-size:14px}
}


/* --- 5. Kopfbereich (Hero) --------------------------------- */

.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,96px) var(--pad-x) clamp(52px,7vw,84px)}
.hero__inner{position:relative;max-width:74ch}
.hero__kicker{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.hero__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hero__kicker span:last-child{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--ink-64)}
.hero h1{
  margin:0 0 28px;
  font-size:var(--h1);
  line-height:.99;font-weight:700;letter-spacing:-.035em;
}
.hero h1 span{display:block}
.hero h1 .accent{color:var(--accent)}
.hero__lead{margin:0 0 38px;font-size:clamp(17px,2vw,19px);line-height:1.65;color:var(--ink-72);max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* Dekoration — rein visuell, für Screenreader unsichtbar */
.glow{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none}
.glow--1{top:-260px;right:-160px;width:min(760px,90vw);height:min(760px,90vw);background:radial-gradient(circle,rgba(232,163,61,.20),transparent 62%)}
.glow--2{bottom:-320px;left:-200px;width:min(700px,85vw);height:min(700px,85vw);background:radial-gradient(circle,rgba(120,160,255,.14),transparent 62%)}
.grid-lines{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(242,239,233,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,239,233,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000,transparent 75%);
}
.arc{
  position:absolute;left:-8%;top:62%;width:116%;height:520px;
  border-top:1px solid rgba(232,163,61,.28);border-radius:50%;
  animation:tilt 22s ease-in-out infinite;pointer-events:none;
}


/* --- 6. Laufband ------------------------------------------- */

.marquee{
  border-top:1px solid rgba(242,239,233,.1);
  border-bottom:1px solid rgba(242,239,233,.1);
  padding:16px 0;overflow:hidden;white-space:nowrap;
  background:rgba(242,239,233,.02);
}
.marquee__track{
  display:inline-flex;gap:44px;
  animation:marq 30s linear infinite;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-56);
}
.marquee__track span[aria-hidden]{color:var(--accent)}


/* --- 7. Abschnittskopf ------------------------------------- */

.head-row{display:grid;gap:24px;align-items:end;margin-bottom:44px}
.head-row h2{max-width:20ch}
.head-row__aside{margin:0;font-size:16px;line-height:1.6;color:var(--ink-64);max-width:38ch}
.section-lead{margin:12px 0 44px;font-size:17px;line-height:1.65;color:var(--ink-64);max-width:62ch}
@media(min-width:860px){
  .head-row{grid-template-columns:1fr auto;gap:48px}
  .head-row__aside{text-align:right}
}


/* --- 8. Leistungen (Aufklapper) ---------------------------- */
/* <details>/<summary>: von Haus aus mit Tastatur bedienbar und
   auch ohne JavaScript funktionsfähig. */

.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item summary{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:22px 8px;cursor:pointer;list-style:none;
  transition:background .3s;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary:hover{background:rgba(242,239,233,.03)}
.acc__num{font-family:var(--font-mono);font-size:13px;color:var(--ink);transition:color .3s;min-width:34px}
.acc__title{font-family:var(--font-display);font-size:clamp(21px,3.2vw,30px);font-weight:600;letter-spacing:-.02em;transition:color .3s}
.acc__plus{font-size:22px;line-height:1;transition:transform .35s cubic-bezier(.2,.7,.3,1),color .3s}
.acc__item[open] .acc__num,
.acc__item[open] .acc__title,
.acc__item[open] .acc__plus{color:var(--accent)}
.acc__item[open] .acc__plus{transform:rotate(45deg)}
.acc__body{display:grid;gap:20px;padding:0 8px 30px}
.acc__body p{margin:0;font-size:16.5px;line-height:1.7;color:var(--ink-72)}
.acc__points{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.acc__points li{font-size:15px;color:var(--ink-64);border-left:2px solid var(--accent);padding-left:14px}
@media(min-width:860px){
  .acc__item summary{grid-template-columns:74px 1fr 40px;gap:24px;padding:26px 16px}
  .acc__num{min-width:0}
  .acc__body{grid-template-columns:74px 1.1fr 1fr;gap:24px;padding:0 16px 34px}
  .acc__body::before{content:""}
}


/* --- 9. Arbeitsweise (Etappen) ----------------------------- */

.band{
  background:var(--surface);
  border-top:1px solid rgba(242,239,233,.1);
  border-bottom:1px solid rgba(242,239,233,.1);
}
.steps{display:grid;gap:20px;grid-template-columns:1fr}
.step{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 28px;
  transition:border-color .35s,background .35s,transform .35s;
}
.step:hover{border-color:rgba(232,163,61,.6);background:rgba(232,163,61,.05);transform:translateY(-6px)}
.step__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.step__meta .label{color:var(--accent);font-size:12px;letter-spacing:.16em}
.step__meta .label--muted{color:var(--ink-56)}
.step h3{margin:0 0 10px}
.step p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-64)}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}


/* --- 10. Das Prinzip --------------------------------------- */

.split{display:grid;gap:40px;align-items:center}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr;gap:72px}}
.prose p{font-size:clamp(16.5px,1.9vw,17.5px);line-height:1.7;color:var(--ink-72);margin:0 0 18px}
.prose p:last-child{margin-bottom:0}

.card{border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;background:rgba(242,239,233,.02)}
.bar-block{margin-bottom:26px}
.bar-block:last-of-type{margin-bottom:0}
.bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.bar-head span:first-child{font-size:15px;color:var(--ink-72)}
.bar-head span:last-child{font-family:var(--font-mono);font-size:14px;color:var(--ink-56)}
.bar-block--after .bar-head span:first-child{color:var(--accent);font-weight:700}
.bar-block--after .bar-head span:last-child{color:var(--accent)}
.bar{height:26px;background:rgba(242,239,233,.08);border-radius:var(--radius-klein);overflow:hidden}
.bar__fill{height:100%}
.bar__fill--before{width:88%;background:repeating-linear-gradient(45deg,rgba(242,239,233,.22) 0 8px,rgba(242,239,233,.12) 8px 16px);animation:growA 1.4s cubic-bezier(.2,.7,.3,1) both}
.bar__fill--after{width:34%;background:var(--accent);animation:growB 1.4s .25s cubic-bezier(.2,.7,.3,1) both}
.card__note{margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(242,239,233,.1);font-size:13.5px;line-height:1.55;color:var(--ink-56)}


/* --- 11. Projekt planen: das Formular ---------------------- */

.planner{
  border:1px solid rgba(242,239,233,.16);
  border-radius:var(--radius-gross);overflow:hidden;
  display:grid;grid-template-columns:1fr;
}
@media(min-width:1000px){.planner{grid-template-columns:1.25fr .75fr}}

.planner__main{padding:clamp(26px,4vw,44px)}
.planner__side{
  padding:clamp(26px,4vw,44px);
  background:rgba(232,163,61,.06);
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  border-top:1px solid rgba(242,239,233,.16);
}
@media(min-width:1000px){
  .planner__side{border-top:none;border-left:1px solid rgba(242,239,233,.16)}
}
.planner h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 12px;line-height:1.1}
.planner__lead{margin:0 0 28px;font-size:16px;line-height:1.6;color:var(--ink-64);max-width:52ch}

fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
legend{padding:0;margin:0 0 14px}

/* Auswahlfelder als Chips: das echte Bedienelement bleibt ein
   <input>, es wird nur visuell versteckt — Tastatur und
   Screenreader funktionieren dadurch unverändert. */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex}
.chip input{
  position:absolute;opacity:0;width:100%;height:100%;
  margin:0;cursor:pointer;
}
.chip span{
  padding:12px 22px;border-radius:var(--radius-chip);
  font-size:15px;font-weight:600;
  border:1px solid var(--line-strong);
  color:var(--ink);background:transparent;
  transition:background .25s,color .25s,border-color .25s;
  user-select:none;
}
.chip input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.chip input:hover + span{border-color:var(--accent)}

.chips--square span{border-radius:var(--radius-klein);padding:11px 20px;font-size:14.5px}
.chips--square input:checked + span{background:rgba(232,163,61,.16);border-color:var(--accent);color:var(--accent)}

/* Kontaktfelder */
.fields{display:grid;gap:18px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
@media(min-width:680px){
  .fields{grid-template-columns:1fr 1fr}
  .field--wide{grid-column:1 / -1}
}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:14.5px;color:var(--ink-72);font-weight:600}
.field .req{color:var(--accent)}
.field input,.field textarea{
  font-family:inherit;font-size:16px;color:var(--ink);
  background:rgba(242,239,233,.04);
  border:1px solid var(--line-strong);border-radius:var(--radius-klein);
  padding:13px 14px;width:100%;
  transition:border-color .2s,background .2s;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:rgba(242,239,233,.42)}
.field input:hover,.field textarea:hover{border-color:rgba(242,239,233,.45)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(242,239,233,.06)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.consent{
  grid-column:1 / -1;
  display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;line-height:1.55;color:var(--ink-72);
}
.consent input{
  width:24px;height:24px;flex:none;margin:1px 0 0;
  accent-color:var(--accent);cursor:pointer;
}
.consent a{text-decoration:underline;text-underline-offset:3px}

.form-note{grid-column:1 / -1;margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-56)}

/* Honigtopf: für Menschen unsichtbar, für einfache Spam-Skripte
   nicht. Nicht display:none — manche Skripte prüfen darauf. */
.hp{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;
}

.estimate__title{font-family:var(--font-display);font-size:clamp(22px,2.6vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
.estimate__note{margin:0 0 26px;font-size:15.5px;line-height:1.65;color:var(--ink-72)}
.estimate__rows{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.estimate__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.estimate__row span:first-child{font-size:14.5px;color:var(--ink-64)}
.estimate__row span:last-child{font-family:var(--font-mono);font-size:14px;text-align:right}
.planner__side .btn{width:100%}


/* --- 12. Vorteile ------------------------------------------ */

.tiles{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.tile{background:var(--bg);padding:28px 26px;transition:background .35s}
.tile:hover{background:rgba(232,163,61,.07)}
.tile h3{font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em}
.tile p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-64)}
@media(min-width:700px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tiles{grid-template-columns:repeat(4,1fr)}}


/* --- 13. Häufige Fragen ------------------------------------ */

.faq-wrap{display:grid;gap:32px}
@media(min-width:940px){.faq-wrap{grid-template-columns:340px 1fr;gap:64px;align-items:start}}
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:22px 4px;cursor:pointer;list-style:none;
  font-size:clamp(16.5px,2vw,18.5px);font-weight:700;
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__plus{font-size:20px;line-height:1;flex:none;transition:transform .35s,color .3s}
.faq__item[open] summary{color:var(--accent)}
.faq__item[open] .faq__plus{transform:rotate(45deg)}
.faq__item p{margin:0 4px 20px;font-size:16px;line-height:1.7;color:var(--ink-72);max-width:70ch}


/* --- 14. Kontakt ------------------------------------------- */

.contact{position:relative;overflow:hidden;border-top:1px solid rgba(242,239,233,.1)}
.contact .glow--3{
  position:absolute;top:-200px;left:35%;
  width:min(620px,90vw);height:min(620px,90vw);border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,61,.16),transparent 62%);
  filter:blur(30px);pointer-events:none;
}
.contact__inner{position:relative;display:grid;gap:40px;align-items:center}
@media(min-width:940px){.contact__inner{grid-template-columns:1.2fr .8fr;gap:72px}}
.contact h2{font-size:clamp(32px,5.4vw,54px);letter-spacing:-.03em;line-height:1.04;margin:0 0 20px}
.contact__lead{margin:0 0 34px;font-size:clamp(16.5px,2vw,18px);line-height:1.65;color:var(--ink-72);max-width:52ch}
.contact__cta{display:flex;flex-wrap:wrap;gap:14px}
.contact__cta .btn{word-break:break-word}
.reach{display:flex;flex-direction:column;gap:18px}
.reach__row p{margin:0}
.reach__row p:first-child{font-size:14px;color:var(--ink-64)}
.reach__row p:last-child{margin-top:4px;font-size:17px;font-weight:700}


/* --- 15. Fußzeile ------------------------------------------ */

.site-foot{
  padding:40px var(--pad-x) 28px;
  border-top:1px solid rgba(242,239,233,.1);
  display:grid;gap:32px;grid-template-columns:1fr;
}
@media(min-width:820px){.site-foot{grid-template-columns:1.4fr 1fr 1fr;gap:48px}}
.site-foot__about{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-56);max-width:38ch}
.foot-col{display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.foot-col a{color:var(--ink-64);padding:7px 0}
.foot-col a:hover{color:var(--accent)}
.foot-col span:not(.label){color:var(--ink-64)}
.copyright{
  padding:0 var(--pad-x) 30px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--ink-56);
}


/* --- 16. Unterseiten (Impressum, Datenschutz, Danke, 404) --- */

.page{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,60px) var(--pad-x) clamp(60px,8vw,90px)}
.page h1{font-size:clamp(29px,5vw,44px);line-height:1.15;font-weight:800;margin:0 0 10px}
.page .lede{color:var(--ink-64);font-size:15px;margin-bottom:44px}
.page h2{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-64);font-weight:400;
  margin:38px 0 12px;padding-top:18px;border-top:1px solid var(--line);
}
.page h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.page h3{font-family:var(--font-body);font-size:17px;margin:22px 0 8px;font-weight:700;letter-spacing:0}
.page p{margin:0 0 12px;color:var(--ink-72)}
.page ul{margin:0 0 14px;padding-left:22px;color:var(--ink-72)}
.page li{margin-bottom:5px}
.page strong{color:var(--ink)}
.page a{text-decoration:underline;text-underline-offset:3px}
.page .box{
  background:var(--surface);border-left:3px solid var(--accent);
  padding:18px 22px;margin:8px 0 24px;border-radius:var(--radius-klein);
}
.page .box p:last-child{margin-bottom:0}
.page .small{font-size:14.5px;color:var(--ink-56)}

.page-foot{
  border-top:1px solid var(--line);
  padding:26px var(--pad-x) 44px;
  font-size:14px;color:var(--ink-56);
  max-width:820px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:12px 22px;
}
.page-foot a{color:var(--ink-64)}
.page-foot a:hover{color:var(--accent)}

/* Zentrierte Meldungsseiten (Danke, Fehler, 404) */
.notice{
  min-height:70vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:60px var(--pad-x);gap:6px;
}
.notice h1{font-size:clamp(30px,5vw,46px);font-weight:800;margin:0 0 14px}
.notice p{color:var(--ink-72);max-width:52ch;font-size:17px}
.notice .btn{margin-top:22px}
.notice__mark{margin-bottom:26px}
.notice ul{text-align:left;color:var(--ink-72);max-width:52ch;margin:6px 0 0}


/* --- 17. Bewegung ------------------------------------------ */

@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes tilt{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes growA{from{width:0}to{width:88%}}
@keyframes growB{from{width:0}to{width:34%}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

.hero__kicker{animation:rise .8s ease both}
.hero h1 span:nth-child(1){animation:rise .9s .05s cubic-bezier(.2,.7,.3,1) both}
.hero h1 span:nth-child(2){animation:rise .9s .18s cubic-bezier(.2,.7,.3,1) both}
.hero__lead{animation:rise .9s .3s ease both}
.hero__cta{animation:rise .9s .42s ease both}
.hero__dot{animation:blink 2.4s ease-in-out infinite}

/* Sanftes Einblenden beim Scrollen — nur in Browsern, die es
   nativ können. Ältere Browser zeigen die Inhalte einfach
   sofort. Kein JavaScript, deshalb auch kein Aufblitzen. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:860px){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt eine ruhige Seite. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .bar__fill--before{width:88%}
  .bar__fill--after{width:34%}
}


/* --- 18. Vorschau-Hinweis ---------------------------------- */
/* Steht nur im HTML, wenn mit --vorschau gebaut wurde. Bewusst
   nicht klebend: die Kopfzeile der Seite ist es schon, und zwei
   klebende Leisten übereinander verdecken den halben Bildschirm.
   Der Streifen bleibt oben und scrollt mit weg. */

.vorschau-hinweis{
  background:var(--accent);
  color:var(--bg);
  padding:10px clamp(20px,5vw,60px);
  font-size:14px;line-height:1.5;font-weight:700;
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
}
.vorschau-hinweis__zusatz{font-weight:400}
.vorschau-hinweis a{
  color:var(--bg);
  text-decoration:underline;text-underline-offset:2px;
}
.vorschau-hinweis a:hover{color:var(--bg);text-decoration-thickness:2px}


/* --- 19. Druck --------------------------------------------- */

@media print{
  body{background:#fff;color:#000}
  .glow,.grid-lines,.arc,.marquee,.site-nav,.planner__side .btn{display:none}
  .page,.shell{max-width:none}
  a{color:#000}
  /* Der Hinweis muss auf dem Ausdruck bleiben — gerade dort wird
     eine Vorschau sonst für die fertige Seite gehalten. */
  .vorschau-hinweis{background:#fff;color:#000;border-bottom:2px solid #000}
  .vorschau-hinweis a{color:#000}
}