/* STUDIO KINETIC — gemeinsames Stylesheet
 *
 * Erzeugt am 12.10.2026 aus dem Inline-CSS der index.html (Zeilen 112-533),
 * damit Startseite und Detailseiten dieselben Tokens, Typografie und
 * Bausteine benutzen. Aenderungen an Farbwelt oder Abstaenden passieren
 * ab jetzt NUR hier.
 *
 * Aufbau:
 *   1  Tokens und Grundlagen
 *   2  Navigation (inkl. mobile Navigation, ab 12.10. neu)
 *   3  Typografie und Abschnitts-Koepfe
 *   4  Bausteine der Startseite (Arbeiten, Baender, Preise, Ablauf, FAQ)
 *   5  Formular und Fuss
 *   6  Neue Bausteine der Neuordnung (Bereichskarten, Detailseiten)
 */

:root{
  --bone:#F2ECE1; --bone2:#EAE1D2; --panel:#FBF7F0;
  --ink:#17130F; --ink2:#5A5147; --muted:#7A7062;
  --accent:#E4502B;         /* burnt tangerine — signature */
  --accent-ink:#B83A18;
  --pine:#1F5F4E;           /* deep pine — rare secondary */
  --line:rgba(23,19,15,.14);
  --line-soft:rgba(23,19,15,.08);
  --r:20px; --maxw:1360px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}
/* Breite auf grossen Schirmen. Vorher stand --maxw fest auf 1240px, ohne
   jede Media Query oberhalb 1000px: auf 1920 fuellte der Inhalt 65 %, auf
   2560 nur noch 48 %, auf 3440 noch 36 % — die Seite stand in der Mitte
   eines leeren Feldes (Martin 23.10.2026 mit Schnappschuss).
   Das Hochziehen ist unbedenklich, weil JEDER Fliesstextblock bereits einen
   eigenen Deckel traegt (.lead 640px, .faq p 720px, .page-hero .lead 62ch,
   .angebot-fall 58ch, .sec-head p 420px). Breiter wird damit nur, was von
   Breite profitiert: die mehrspaltigen Raster und die Bildstrecken.
   Deshalb reicht die Variable — ein zweiter Container waere Umbau ohne
   Mehrwert. */
@media(min-width:1600px){ :root{ --maxw:1520px; } }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bone);color:var(--ink);line-height:1.55;overflow-x:hidden}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:900;line-height:.98;letter-spacing:-.02em}
.serif{font-family:var(--serif)}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent-ink);font-weight:700}

/* reveal */
/* Einblendung. Umgebaut am 12.10.2026, weil die alte Fassung Inhalte
   dauerhaft unsichtbar liess: body traegt overflow-x:hidden, und sobald
   eine Achse nicht 'visible' ist, rechnet die andere zu 'auto' — body
   wird damit selbst zum Scroll-Container. ScrollTrigger beobachtet aber
   das Fenster, bekam nie ein Scroll-Ereignis und loeste nicht aus:
   9 von 13 Elementen der Startseite blieben auf opacity 0, darunter
   alle drei Bereichskarten.

   Jetzt uebernimmt ein IntersectionObserver (haengt am Element, nicht
   am Scroller) und setzt .an. Faellt JavaScript aus, greift die
   noscript-Regel im Seitenkopf; faellt der Observer aus, setzt
   studio.js nach drei Sekunden alles sichtbar. Unsichtbar bleiben
   kann damit nichts mehr. */
.rv{opacity:0;transform:translateY(26px);
    transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
.rv.an{opacity:1;transform:none}
.rv.d1{transition-delay:.05s}.rv.d2{transition-delay:.13s}.rv.d3{transition-delay:.21s}
.rv.d4{transition-delay:.29s}.rv.d5{transition-delay:.37s}.rv.d6{transition-delay:.45s}
@media(prefers-reduced-motion:reduce){
  .rv,.rv.an{opacity:1;transform:none;transition:none;transition-delay:0s}
}
/* (die Regel fuer reduzierte Bewegung steht oben bei .rv) */

/* NAV */
#nav{position:fixed;inset:0 0 auto 0;z-index:60;height:70px;display:flex;align-items:center;
    backdrop-filter:blur(12px);background:rgba(242,236,225,.72);border-bottom:1px solid var(--line-soft);transition:transform .4s ease}
#nav.hide{transform:translateY(-100%)}
/* Direktes Kind, nicht jedes .wrap darunter: seit P4 liegt die mobile
   Schublade IM Kopf und bringt ihr eigenes .wrap mit. Mit dem offenen
   Nachfahren-Selektor erbte die Linkliste hier align-items:center und
   gap:20px (Eintraege zentriert statt ueber die Breite) — und weiter
   unten warf nav .wrap>.btn.solid den Anfrage-Knopf aus der Schublade
   heraus. Beides eine Kollision aus Bauteil- und Hilfsklasse, nicht
   aus dem Markup. */
#nav>.wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:-.02em;white-space:nowrap;flex:0 0 auto}
.logo .mark{width:32px;height:32px;display:block;flex:0 0 auto}
.logo .mark .play{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.logo:hover .mark .play{transform:translateX(2px)}
.logo .mark .s1,.logo .mark .s2{transition:opacity .28s ease}
.logo:hover .mark .s1{opacity:.85}
.logo:hover .mark .s2{opacity:.5}
.navlinks{display:flex;gap:34px;font-size:14px;font-weight:500;color:var(--ink2)}
.navlinks a{position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--accent);transition:width .25s ease}
.navlinks a:hover::after{width:100%}
@media(max-width:860px){.navlinks{display:none}}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;
     font-family:var(--sans);background:var(--ink);color:var(--bone);transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
.btn:hover{transform:translateY(-2px);background:var(--accent)}
.btn.solid{background:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}

/* HERO */
header{position:relative;padding:116px 0 36px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}
.blob.a{width:520px;height:520px;background:radial-gradient(circle,rgba(228,80,43,.28),transparent 70%);top:-80px;right:-60px}
/* Der Blob ragt mit bottom:-140px unter den Header, und der Header
   schneidet mit overflow:hidden an seiner Unterkante ab. Ohne Auslauf
   endet die Weichzeichnung dort in einer geraden Linie — gemessen am
   13.10. ein Farbsprung von 13 Stufen (mobil 12, quer ueber die ganze
   Breite) in EINER Pixelzeile, waehrend der Verlauf sonst nur 0 bis 1
   Stufe je Zeile macht. 'overflow:hidden' darf nicht weg: es haelt die
   Blobs vom Querscroll ab. Also nimmt die Maske dem Blob die Deckkraft,
   BEVOR die Schnittkante kommt. Die Prozente haengen an bottom und
   height, nicht an der Fensterbreite: die Kante liegt immer bei
   (440-140)/440 = 68% der Blobhoehe, die Maske ist bei 64% schon
   durchsichtig. Wer bottom oder height aendert, zieht sie mit nach.
   Riegel: bin/pruefe-abschnittskante.py */
.blob.b{width:440px;height:440px;background:radial-gradient(circle,rgba(31,95,78,.18),transparent 70%);bottom:-140px;left:-90px;
    -webkit-mask-image:linear-gradient(to bottom,#000 36%,transparent 64%);mask-image:linear-gradient(to bottom,#000 36%,transparent 64%)}
header .wrap{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel);
    padding:8px 16px;border-radius:999px;font-size:13px;color:var(--ink2);margin-bottom:22px;font-weight:500}
.hero-badge .live{width:8px;height:8px;border-radius:50%;background:var(--pine);box-shadow:0 0 0 0 rgba(31,95,78,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,95,78,.5)}70%{box-shadow:0 0 0 12px rgba(31,95,78,0)}100%{box-shadow:0 0 0 0 rgba(31,95,78,0)}}
h1{font-size:clamp(46px,9vw,116px);letter-spacing:-.035em}
h1 .it{font-style:italic;font-weight:600;color:var(--accent)}
h1 .ol{-webkit-text-stroke:2px var(--ink);color:transparent}
@media(max-width:600px){h1 .ol{-webkit-text-stroke-width:1.4px}}
/* Mobile: Hero-Headline offener setzen (line-height .98 klebt sonst), Nav-Button kompakter, damit er nie umbricht */
@media(max-width:600px){
  h1{font-size:clamp(38px,10vw,116px);line-height:1.06}
  #nav{height:62px}
  #nav .btn{padding:10px 16px;font-size:13.5px;gap:7px}
  .logo{font-size:18px}
  header{padding:96px 0 32px}
}
.lead{font-size:clamp(17px,2.1vw,22px);color:var(--ink2);max-width:640px;margin:22px 0 30px;line-height:1.45}
.hero-cta{display:flex;gap:15px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:14px;color:var(--muted)}
.hero-micro{font-size:13.5px;color:var(--muted);margin-top:14px}

/* MARQUEE */
.marquee{margin-top:42px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;animation:slide 26s linear infinite;font-family:var(--serif);font-size:26px;font-weight:600}
.marquee-track span{margin:0 26px;color:var(--ink)}
.marquee-track b{color:var(--accent);font-weight:900}
@keyframes slide{to{transform:translateX(-50%)}}
/* Reduzierte Bewegung: der Lauf haelt an. Nur 'animation:none' genuegt
 * nicht — die Spur ist breiter als der Ausschnitt und waere rechts
 * abgeschnitten (overflow:hidden, also ohne Weg, den Rest zu lesen).
 * Deshalb darf sie hier umbrechen, der rein dekorative zweite Durchlauf
 * entfaellt ganz, und der Trenner am Ende der Folge verschwindet. */
@media(prefers-reduced-motion:reduce){
  .marquee{white-space:normal}
  .marquee-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
                 animation:none;font-size:clamp(19px,2.6vw,24px);line-height:1.5}
  .marquee-track span{margin:0 11px}
  .marquee-track span[aria-hidden="true"],.marquee-track .sep-end{display:none}
}

/* SECTION shell */
section{padding:38px 0;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(32px,5vw,60px)}
.sec-head p{max-width:420px;color:var(--ink2);font-size:16px}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
      overflow:hidden;background:var(--panel);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.case:hover{transform:translateY(-6px);box-shadow:0 30px 70px -30px rgba(23,19,15,.4)}
.case-body{padding:26px;display:flex;flex:1;flex-direction:column}
.case-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;margin-bottom:12px}
.case-body h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:12px}
.case-body p{color:var(--ink2);font-size:15px;margin-bottom:20px;max-width:420px}
.case-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:15px;width:fit-content}
.case-link .arr{transition:transform .25s}
.case:hover .case-link .arr{transform:translate(4px,-4px)}
.case-media{position:relative;order:-1;aspect-ratio:4/3;min-height:0;overflow:hidden;background:var(--ink)}
.case-media .art{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case:hover .case-media .art{transform:scale(1.04)}
/* Diese Regel gilt seit 13.10.2026 nur noch fuer 'Weitere Arbeiten'
 (ahornsteig, voyara): echte Aufnahmen der Live-Seiten, 4:3, 1200x900,
 WebP, ahornsteig mittig und voyara rechts beschnitten - sonst waere
 eine Bahn sichtbar gewesen. Originale in assets/original/. Die sechs
 Hauptkarten tragen seither Illustrationen und laufen ueber
 .project-art weiter unten; 'center top' waere dort falsch.
 Das Motiv steht seit S3 als <img src> im HTML, nicht als .art-*
 Hintergrund hier: url(assets/...) war relativ zu dieser Datei unter
 /assets/studio.css und haette auf /assets/assets/... gezeigt (404),
 und --prefix haengt nur Pfade im HTML um, nicht im Stylesheet. */
.case-media img.art{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.art-badge{position:absolute;top:14px;right:14px;z-index:2;background:rgba(251,247,240,.92);color:var(--ink);
   padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em}

/* PROJEKTILLUSTRATIONEN — die sechs Hauptkarten, seit 13.10.2026.
   Die Motive sind erzeugte Bilder, keine Aufnahmen der Seiten. Das muss
   sichtbar dranstehen, und zwar UNTER dem Bild, nicht darin.

   Warum eine eigene Klasse und nicht die bestehenden .case-media-Regeln:
   drei davon sind fuer Illustrationen falsch.

   1  .case-media traegt aspect-ratio UND overflow:hidden. Eine
      figcaption als Flusskind laege damit im 4:3-Kasten und wuerde
      abgeschnitten. Also wandert das Verhaeltnis auf .art-box, und
      .project-art ist nur noch der Behaelter: Bild oben, Kennzeichnung
      darunter. Der Hover-Zoom bleibt in .art-box eingesperrt.
   2  @media(max-width:980px) stellt .case-media auf 16/9. Fuer Aufnahmen
      von Startseiten richtig, fuer diese Motive nicht — die Anleitung
      verlangt 4:3 in jedem Fenster. .art-box kennt die Regel nicht.
   3  .case.wide .case-media setzt aspect-ratio:auto, dasselbe Problem.
      Trifft wirklich zu: /videos-visuelle-inhalte zeigt genau eine
      Referenz, und die laeuft als .case.wide.

   object-position ist center, nicht 'center top' wie bei den Aufnahmen:
   die Motive sind fertig gestaltet, das Hauptmotiv sitzt in der Mitte.
   Kein dunkler Filter, kein zusaetzlicher Verlauf — die Dateien bringen
   ihr Licht selbst mit. */
.case-media.project-art{aspect-ratio:auto;overflow:visible;background:transparent;display:block}
.project-art .art-box{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.project-art img.art{position:absolute;inset:0;width:100%;height:100%;
   object-fit:cover;object-position:center;display:block}
.project-art-note{padding:9px 14px 10px;background:var(--panel);border-top:1px solid var(--line-soft);
   color:var(--muted);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* Ungerade Anzahl Cases: der letzte laeuft ueber beide Spalten und dreht auf
   Bild-rechts, sonst bleibt eine leere Zelle im Raster stehen. */
@media(min-width:981px){
  .case.wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
  .case.wide .case-body{flex:0 1 44%;justify-content:center;padding:34px 30px}
  .case.wide .case-body p{margin-bottom:22px}
  .case.wide .case-media{order:0;flex:1 1 56%;aspect-ratio:auto;min-height:340px}
  .case.wide .case-media .art{background-position:center top}
  /* unten rechts, sonst deckt das Badge den oberen Rand des Motivs zu —
     bei den Aufnahmen war das die Navigation der gezeigten Seite */
  .case.wide .art-badge{top:auto;bottom:14px}
}
@media(max-width:980px){.work-grid{grid-template-columns:1fr}.case-body{padding:28px}.case-media{aspect-ratio:16/9}}

/* REEL-BAND — der Bewegtbild-Beleg im Werk-Abschnitt.
   WARUM UEBERHAUPT: Die Seite verkauft "Werbefilm / Promo-Clip ab 1.200 EUR" und ein
   "Launch-Paket" mit Film, zeigte aber bis 03.10.2026 kein einziges <video>. Eine
   Leistung ohne sichtbaren Beleg ist eine Behauptung.
   CLICK-TO-PLAY STATT AUTOPLAY: Der Spot lebt vom gesprochenen Text und hat keine
   Untertitel - ein stummer Autoplay-Loop transportiert nichts und kostet trotzdem
   Bandbreite.
   preload="none" BLEIBT (geprueft 05.10.2026): Mit "none" steht readyState auf 0 und
   duration auf NaN, der Spieler zeigt vor dem Antippen 00:00/00:00. Das sieht tot aus,
   ist aber der Preis fuer 0 geladene Bytes. Der Versuch mit "metadata" wurde wieder
   zurueckgenommen: die Annahme war, es lade nur das moov-Atom (21.329 B), gemessen hat
   Chromium die vollen 2.199.160 B gezogen - 2,2 MB auf jedem Mobilaufruf einer Seite,
   die Tempo verkauft. Datei und Auslieferung sind geprueft in Ordnung: H.264 High,
   Level 4.0, yuv420p, AAC-LC, moov vorne, Server liefert accept-ranges und 206.
   LABEL "EIGENE PRODUKTION": Der Spot bewirbt Spaeti Tycoon, ein eigenes Produkt,
   keinen Kunden. Ohne das Label steht er neben sechs Kundenreferenzen und liest sich
   als siebte - der Vorwurf "fiktive Cases" kam im Kaltmail-Gleis schon einmal. */
.reel-band{margin-top:22px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
   background:var(--panel);padding:30px 34px 30px 39px;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.reel-band::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--pine)}
.rb-left{position:relative;z-index:2;flex:1 1 360px;min-width:0}
.rb-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;margin-bottom:12px}
.rb-name{font-family:var(--serif);font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.05;margin-bottom:10px}
.rb-sub{font-size:14.5px;color:var(--ink2);line-height:1.55;margin-bottom:14px;max-width:540px}
.rb-tags{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:20px}
.rb-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.rb-right{position:relative;z-index:2;flex:0 0 228px;max-width:228px}
.rb-right video{display:block;width:100%;aspect-ratio:9/16;border-radius:14px;border:1px solid var(--line);
   background:var(--ink);object-fit:cover}
@media(max-width:980px){
  .reel-band{padding:26px 22px 26px 27px;gap:24px}
  .rb-right{flex:1 1 100%;max-width:280px;margin:0 auto}
}

/* PRICING */
/* 300px statt 232px: seit der KI-Spot-Karte (05.10.2026) sind es fuenf Karten.
   Bei 232px passen vier in eine Reihe, die fuenfte stand allein neben drei leeren
   Spalten - das liest sich wie ein Fehler. Bei 300px bricht es als 3+2. */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;background:var(--panel);
      display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.card:hover{transform:translateY(-8px);border-color:var(--accent)}
.card.feature{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.card.feature .p-sub,.card.feature .p-eta{color:rgba(242,236,225,.62)}
.card.feature .p-price{color:#fff}
.flag{position:absolute;top:-13px;right:26px;background:var(--accent);color:#fff;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}
.p-name{font-family:var(--serif);font-size:24px;font-weight:900;margin-bottom:10px}
.p-sub{font-size:14.5px;color:var(--ink2);margin-bottom:20px;line-height:1.5;min-height:60px}
.p-price{font-family:var(--serif);font-size:38px;font-weight:900;letter-spacing:-.02em}
.p-eta{font-size:13.5px;color:var(--muted);margin:6px 0 22px}
.card .btn{margin-top:auto;justify-content:center}
.card.feature .btn{background:var(--accent);color:#fff}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
/* Optional-Block: Wartung (zwei Stufen) + SEO-Basis */
.addon-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin:34px 0 18px}
.addon-head p{color:var(--ink2);font-size:15px;margin:0}
.price-grid.addons{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.p-price small{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink2)}
.tiers{display:flex;gap:8px;margin-bottom:16px}
.tier{flex:1;font:inherit;font-size:14px;font-weight:600;padding:10px 12px;border-radius:12px;cursor:pointer;
      border:1.5px solid var(--line);background:transparent;color:var(--ink2);transition:border-color .2s,background .2s,color .2s}
.tier b{font-weight:800;color:var(--ink)}
.tier.on{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.tier.on b{color:var(--bone)}
.tiers.compact{gap:6px}
.tiers.compact .tier{padding:9px 6px;font-size:12.5px;line-height:1.3;white-space:nowrap}
.tiers.compact .tier b{display:block;font-size:13.5px}
.p-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.p-list[hidden]{display:none}
.p-list li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2);line-height:1.4}
.p-list li::before{content:"✓";color:var(--accent);font-weight:900;flex:0 0 auto}
/* Eingeklappte Produktbeschreibungen — Schritt 5 */
.p-details{margin-bottom:16px}
.p-details>summary{font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;list-style:none;padding:4px 0 4px;border-bottom:1px solid var(--line)}
.p-details>summary::-webkit-details-marker{display:none}
.p-details>summary::marker{display:none}
.p-details>summary::after{content:" ▾"}
.p-details[open]>summary::after{content:" ▴"}
.p-details[open]>summary{margin-bottom:8px}
.p-details .p-sub{min-height:0;margin-bottom:0}
.p-details .p-list{margin-top:6px}
.card.feature .p-details>summary{color:rgba(242,236,225,.55);border-bottom-color:rgba(242,236,225,.2)}
.band-intro{margin:38px 0 0;max-width:720px;font-size:17px;color:var(--ink2);line-height:1.55}

/* INSTAGRAM band (flagship recurring content service, accent-tangerine) */
.insta-band{margin-top:22px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
    background:var(--panel);padding:36px 40px 36px 44px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.insta-band::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--accent)}
.insta-band::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(80px);
    background:radial-gradient(circle,rgba(228,80,43,.15),transparent 70%);top:-120px;right:-60px;pointer-events:none}
.ib-left,.ib-right{position:relative;z-index:2}
.ib-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;margin-bottom:12px}
.ib-name{font-family:var(--serif);font-size:28px;font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.ib-sub{font-size:14.5px;color:var(--ink2);line-height:1.55;margin-bottom:14px;max-width:540px}
.ib-tags{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.ib-right{text-align:right}
.ib-price{font-family:var(--serif);font-size:40px;font-weight:900;letter-spacing:-.02em}
.ib-price small{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink2)}
.ib-eta{font-size:13.5px;color:var(--muted);margin:4px 0 20px}
.ib-btn{background:var(--accent);color:#fff;justify-content:center}
@media(max-width:820px){.insta-band{grid-template-columns:1fr;gap:24px;padding:32px 24px 32px 28px}.ib-right{text-align:left}}

/* BOOKING band (eigene Online-Terminbuchung, warm-ochre accent for a distinct new product) */
/* FIGUR-BAND — die wiederkehrende Werbefigur zum KI-Spot (05.10.2026).
   WARUM BILD STATT TEXT: Die KI-Spot-Karte verkauft eine Figur, die ueber Wochen
   gleich aussieht. Das ist eine Behauptung, solange niemand die Figur sieht.
   LABEL "EIGENE PRODUKTION": steht neben echten Kundenreferenzen; ohne das Label
   liest sie sich als siebter Case - der Vorwurf "fiktive Cases" kam schon einmal.
   Die Kennzeichnung als KI-erzeugt steht ausserdem im Fusstext, nicht nur im Label. */
.figur-band{margin-top:22px;display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center;
    border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:30px 34px}
.fg-media{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);background:#eceae6}
.fg-media img{display:block;width:100%;height:auto;aspect-ratio:720/982;object-fit:cover}
.fg-label{position:absolute;left:10px;bottom:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    background:rgba(23,19,15,.82);color:var(--bone);padding:5px 9px;border-radius:999px}
.fg-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:9px}
.figur-band h3{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-weight:400;margin:0 0 12px;line-height:1.15}
.figur-band p{margin:0 0 12px;color:var(--ink2);max-width:62ch}
.fg-foot{margin-top:16px;font-size:13px;color:var(--ink2);opacity:.8}
@media(max-width:820px){.figur-band{grid-template-columns:1fr;gap:22px;padding:26px 24px}
    .fg-media{max-width:260px}}

.book-band{--book:#B8862B;margin-top:22px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
    background:var(--panel);padding:36px 40px 36px 44px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.book-band::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--book)}
.book-band::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(80px);
    background:radial-gradient(circle,rgba(184,134,43,.16),transparent 70%);top:-120px;right:-60px;pointer-events:none}
.bk-left,.bk-right{position:relative;z-index:2}
.bk-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--book);font-weight:700;margin-bottom:12px}
.bk-name{font-family:var(--serif);font-size:28px;font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.bk-sub{font-size:14.5px;color:var(--ink2);line-height:1.55;margin-bottom:14px;max-width:560px}
.bk-tags{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.bk-right{text-align:right}
.bk-price{font-family:var(--serif);font-size:34px;font-weight:900;letter-spacing:-.02em}
.bk-price small{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink2)}
.bk-eta{font-size:13.5px;color:var(--muted);margin:4px 0 20px}
.bk-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.bk-demo{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;
    background:var(--book);color:#fff;transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
.bk-demo:hover{transform:translateY(-2px);filter:brightness(1.08)}
.bk-ask{font-size:14px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.book-band{grid-template-columns:1fr;gap:24px;padding:32px 24px 32px 28px}.bk-right{text-align:left}.bk-actions{align-items:flex-start}}

/* DEMO-Reihe: dasselbe Werkzeug, drei Branchen. Gleicher Ocker-Akzent wie das
   Buchungs-Band, damit es als EIN Produkt gelesen wird und nicht als drei. */
.demo-row{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.demo-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
    background:var(--panel);overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s}
.demo-card:hover{transform:translateY(-3px);border-color:#B8862B}
/* height:auto ist hier PFLICHT, nicht Kosmetik: das height="550" am <img> ist
   ein Praesentationshinweis und wird zur benutzten Hoehe, wenn im CSS nur die
   Breite steht. aspect-ratio verliert dann gegen die feste Hoehe - die Karte
   wird hochkant und object-fit:cover zoomt mitten ins Bild. Genau so sahen
   die ersten zwei Vorschauen aus. */
.demo-shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;
    border-bottom:1px solid var(--line);background:#f3f3f4}
.demo-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.demo-kind{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#B8862B;font-weight:700;margin-bottom:7px}
.demo-title{font-family:var(--serif);font-size:19px;font-weight:900;letter-spacing:-.01em;margin-bottom:6px}
.demo-text{font-size:13.5px;color:var(--ink2);line-height:1.5;flex:1}
.demo-link{margin-top:14px;font-size:14px;font-weight:700;color:#B8862B;display:inline-flex;align-items:center;gap:7px}
.demo-card:hover .demo-link{gap:11px}
.demo-hint{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
@media(max-width:820px){.demo-row{grid-template-columns:1fr}}

/* RETAINER band (recurring, pine-accented to read as "ongoing") */
.retainer{margin-top:22px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
    background:var(--panel);padding:36px 40px 36px 44px;display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.retainer::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--pine)}
.retainer::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(80px);
    background:radial-gradient(circle,rgba(31,95,78,.14),transparent 70%);top:-120px;right:-60px;pointer-events:none}
.ret-left{position:relative;z-index:2}
.ret-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--pine);font-weight:700;margin-bottom:12px}
.ret-name{font-family:var(--serif);font-size:28px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.ret-price{font-family:var(--serif);font-size:34px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px}
.ret-price small{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink2)}
.ret-sub{font-size:14.5px;color:var(--ink2);margin:12px 0 22px;max-width:320px;line-height:1.5}
.ret-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:15px;
    background:var(--pine);color:var(--bone);transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
.ret-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
/* Rechte Haelfte: zwei beschriftete Gruppen untereinander. Die Punkte
 * stehen einspaltig, damit sie nicht unterschiedlich hoch umbrechen. */
.ret-right{position:relative;z-index:2;display:grid;gap:22px}
.ret-grp{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine);font-weight:800;margin-bottom:10px}
.ret-list{position:relative;z-index:2;display:grid;gap:9px;margin:0;padding:0}
.ret-list li{list-style:none;display:flex;gap:11px;font-size:14.5px;color:var(--ink2);line-height:1.4}
.ret-list li::before{content:"✓";color:var(--pine);font-weight:900;flex:0 0 auto;margin-top:1px}
@media(max-width:820px){.retainer{grid-template-columns:1fr;gap:28px;padding:34px 26px 34px 30px}}

/* PROCESS */
/* Der Trennstrich klebte mit 12 px am Einleitungstext darueber, waehrend
 * unter ihm reichlich Platz war (Martin 12.10.). Der Abstand gehoert nach
 * oben, nicht nach unten. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:40px}
/* Die Spaltentexte begannen mit 0 px Abstand direkt an der senkrechten
 * Trennlinie (Martin 12.10.). Jede Spalte bekommt links Luft; nur die
 * erste bleibt buendig mit der Seitenspalte, sonst stuende der ganze
 * Abschnitt gegenueber allen anderen eingerueckt. Der Akzentstrich
 * wandert mit, sonst begaenne er vor seinem Text. */
.step{padding:28px 24px 28px 26px;border-right:1px solid var(--line-soft);position:relative}
.step:first-child{padding-left:0}
.step:last-child{border-right:none}
.step .num{font-family:var(--serif);font-size:15px;font-weight:900;color:var(--accent);letter-spacing:.1em;margin-bottom:14px}
.step h3{font-size:22px;margin-bottom:12px}
.step p{font-size:14.5px;color:var(--ink2);max-width:230px}
.step::before{content:"";position:absolute;top:-1px;left:26px;width:0;height:3px;background:var(--accent);transition:width .6s ease}
.step:first-child::before{left:0}
.step.on::before{width:50%}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}.step{border-right:none;border-bottom:1px solid var(--line-soft);padding-right:20px;padding-left:0}.step::before{left:0}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* WHY */
.why{background:var(--bone2);border-radius:calc(var(--r) + 6px);padding:52px 44px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:32px}
.why-item .ic{width:48px;height:48px;border-radius:13px;background:var(--ink);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-size:22px;font-weight:900;margin-bottom:16px}
.why-item h3{font-size:22px;margin-bottom:12px}
.why-item p{font-size:15px;color:var(--ink2)}
@media(max-width:820px){.why{padding:44px 28px}.why-grid{grid-template-columns:1fr;gap:32px}}

/* FAQ */
/* Keine eigene Breitenschranke mehr: die Liste lief bei 860 px aus und
 * endete sichtbar vor der Spalte, waehrend der Einleitungstext rechts
 * daneben stand (Martin 12.10.). Die Trennlinien laufen jetzt bis zur
 * Spaltenkante wie in den uebrigen Abschnitten; die Lesbarkeit der
 * Antworten haelt weiterhin die max-width auf .faq p. */
.faq-list{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:22px 0;font-family:var(--serif);font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:26px;font-weight:300;color:var(--accent);flex:0 0 auto;transition:transform .25s ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-ink)}
.faq summary:focus-visible{outline:2.5px solid var(--accent);outline-offset:4px;border-radius:6px}
.faq p{padding:0 40px 24px 0;color:var(--ink2);font-size:16px;max-width:720px}
/* Zwei Spalten ab 1000px (Martin 13.10.): einspaltig standen am Desktop
 * 464 von 1184 px leer -- die Antwort hoerte bei 720 px auf, die
 * Trennlinien liefen weiter bis zur Spaltenkante. Gemessen, nicht
 * geschaetzt. Zwei Spalten loesen beides zugleich: die Flaeche ist
 * genutzt, und das Lesemass sinkt von ~90 auf ~70 Zeichen je Zeile --
 * die Antwort wird also nicht nur breiter verteilt, sondern besser
 * lesbar. Breiter ziehen waere der falsche Tausch gewesen.
 * Die Trennlinie oben traegt in zwei Spalten die erste Zeile selbst
 * (nth-child(-n+2)), sonst spannte sie ueber beide Spalten und stuende
 * ueber einer Luecke. */
@media(min-width:1000px){
  .faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-content:start;border-top:0}
  .faq:nth-child(-n+2){border-top:1px solid var(--line)}
  .faq p{max-width:none}
}

/* CONTACT (dark drama section) */
.cta{background:var(--ink);color:var(--bone);border-radius:calc(var(--r) + 8px);padding:64px 48px;position:relative;overflow:hidden;text-align:center}
.cta .blob{filter:blur(80px);position:absolute}
.cta .blob.x{width:480px;height:480px;background:radial-gradient(circle,rgba(228,80,43,.45),transparent 70%);top:-140px;left:-80px}
.cta .blob.y{width:420px;height:420px;background:radial-gradient(circle,rgba(31,95,78,.4),transparent 70%);bottom:-160px;right:-80px}
.cta > *{position:relative;z-index:2}
.cta h2{font-size:clamp(34px,6vw,68px);margin-bottom:20px}
.cta h2 .it{font-style:italic;color:var(--accent);font-weight:600}
.cta p{color:rgba(242,236,225,.72);max-width:520px;margin:0 auto 30px;font-size:17px}
.cta .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.cta .mail{color:var(--bone);font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:2px}
.cta-proof{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.cta-proof .lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,236,225,.55);font-weight:600}
.cta-proof .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cta-proof .pill{font-size:13px;font-weight:600;color:var(--bone);padding:6px 14px;border:1px solid rgba(242,236,225,.2);border-radius:999px;background:rgba(242,236,225,.05)}

/* WORK-MORE: weitere Referenzen hinter native-HTML-Toggle, kein JS nötig */
.work-more{margin-top:20px}
.work-more>summary{cursor:pointer;list-style:none;padding:14px 0;font-size:15px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:8px;border:none;background:none}
.work-more>summary::-webkit-details-marker{display:none}
.work-more>summary::after{content:"↓";font-size:16px;transition:transform .25s ease;color:var(--accent)}
.work-more[open]>summary::after{transform:rotate(180deg)}
.work-more-grid{margin-top:18px}

/* FOOTER */
footer{padding:40px 0 32px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--ink2);font-size:14px}
.foot a:hover{color:var(--accent)}

/* progress bar */
.prog{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:70;width:0}

/* contact form (inside dark .cta box) */
.cform{margin:34px auto 0;text-align:left;display:grid;gap:22px;max-width:680px}
.cform .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:620px){.cform .fgrid{grid-template-columns:1fr}}
.cform label{display:block;font-size:12.5px;letter-spacing:.06em;color:rgba(242,236,225,.62);margin-bottom:9px;font-weight:600}
.cform input,.cform select,.cform textarea{
  width:100%;box-sizing:border-box;padding:15px 17px;font:inherit;font-size:15px;
  background:rgba(242,236,225,.06);border:1px solid rgba(242,236,225,.18);border-radius:12px;
  color:var(--bone);transition:border-color .2s,background .2s}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(242,236,225,.4)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--accent);background:rgba(242,236,225,.09)}
.cform select option{background:#17130F;color:var(--bone)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform .send{justify-self:center;margin-top:10px;padding:16px 34px;cursor:pointer;border:0}
.cform textarea{min-height:104px;resize:vertical}
.cform .note{font-size:13px;color:rgba(242,236,225,.6);text-align:center;margin-top:4px}
.cform .note .mail{white-space:nowrap}
.cform.ok .fields{display:none}
.cform-done{display:none;padding:26px 4px;font-size:17px;color:var(--bone)}
.cform.ok .cform-done{display:block}
.cform-done b{color:var(--accent)}

/* ============================================================
   6  NEUORDNUNG 12.10.2026 — gemeinsame Bausteine
   ============================================================
   Alles unterhalb dieser Linie ist neu und wird von allen
   erzeugten Seiten benutzt (Startseite und fuenf Detailseiten).
   ------------------------------------------------------------ */

/* --- Sprungmarke fuer Tastatur und Screenreader ------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bone);
      padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;font-size:14px}
.skip:focus{left:0}

/* --- Mobile Navigation -------------------------------------- *
 * Bis 12.10. wurden die Navigationslinks unter 860px nur
 * ausgeblendet (.navlinks{display:none}) — auf dem Telefon gab
 * es damit ueberhaupt keine Navigation. Jetzt: Schaltflaeche
 * plus Schublade, gleiche Linkliste aus derselben Quelle.
 *
 * P4 (13.10.): die Schublade ist ein details/summary. Der alte
 * Aufbau (Button + <div hidden>) war ohne JavaScript tot — das
 * Attribut stand im erzeugten Markup, und nur das Skript nahm
 * es weg. details/summary oeffnet und schliesst der Browser
 * selbst, auch ohne Skript, und meldet den Zustand von sich
 * aus an die Vorlesehilfe (deshalb KEIN aria-expanded von Hand
 * — das wuerde den nativen Zustand ueberschreiben).
 *
 * Die Schublade liegt jetzt IM Kopf (nav), nicht daneben: #nav
 * hat backdrop-filter und beim Wegscrollen ein transform, ist
 * damit Bezugsrahmen fuer seine Kinder. Ein position:fixed
 * Kind waere daran geklebt statt am Fenster. position:absolute
 * mit top:100% haengt die Schublade an die Unterkante der
 * Leiste — das trifft auch die 62px-Leiste unter 600px, bei
 * der die alte feste Angabe (inset:70px) 8px Luft liess.     */
.mnavbox{display:none}
summary.burger{display:inline-flex;width:44px;height:44px;flex:0 0 auto;
        align-items:center;justify-content:center;
        background:transparent;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
        color:var(--ink);transition:border-color .2s ease,background .2s ease;
        list-style:none;-webkit-tap-highlight-color:transparent}
/* Dreieck des Browsers weg — in beiden Schreibweisen, Safari
   kennt nur die ::-webkit-Form, Firefox nur list-style. */
summary.burger::-webkit-details-marker{display:none}
summary.burger::marker{content:""}
.burger:hover{border-color:var(--ink);background:rgba(23,19,15,.04)}
.burger:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.burger span{display:block;width:19px;height:1.8px;background:currentColor;border-radius:2px;
             position:relative;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.8px;
             background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.mnavbox[open] .burger span{transform:rotate(45deg)}
.mnavbox[open] .burger span::before{transform:translateY(6px) rotate(-90deg)}
.mnavbox[open] .burger span::after{opacity:0}

.mnav{position:absolute;top:100%;left:0;right:0;background:var(--panel);
      border-bottom:1px solid var(--line);padding:18px 0 26px;
      box-shadow:0 22px 44px -28px rgba(23,19,15,.35)}
.mnav .wrap{display:flex;flex-direction:column;gap:2px}
.mnav a{display:flex;align-items:center;justify-content:space-between;gap:14px;
        padding:15px 2px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line-soft)}
.mnav a:last-of-type{border-bottom:none}
.mnav a::after{content:"→";color:var(--accent);font-weight:400;opacity:.5}
.mnav a[aria-current="page"]{color:var(--accent-ink)}
.mnav .btn{margin-top:16px;justify-content:center}
.mnav .btn::after{content:none}

@media(max-width:860px){
  .mnavbox{display:flex;align-items:center}
  #nav>.wrap>.btn.solid{display:none}
  /* Seite hinter der offenen Schublade festhalten. Zweimal, weil
     beides gebraucht wird: die Klasse setzt das Skript, :has
     greift auch ohne Skript. Beide Regeln stehen IM Medienblock —
     sonst bliebe der Riegel auf dem Desktop stehen, wenn jemand
     mit offener Schublade aufs Breitbild dreht. */
  body.mnav-open{overflow:hidden}
  body:has(.mnavbox[open]){overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .burger span,.burger span::before,.burger span::after{transition:none}
}

/* --- Drei Leistungsbereiche --------------------------------- *
 * Ersetzt auf der Startseite die flache Kartenwand: erst der
 * Bereich, dann die Angebote darin. Jede Karte verlinkt auf
 * ihre Detailseite.                                            */
.bereiche{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.bereich{display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;background:var(--panel);
         border:1px solid var(--line);border-radius:var(--r);
         transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
.bereich:hover{transform:translateY(-4px);border-color:var(--accent);
               box-shadow:0 26px 48px -32px rgba(23,19,15,.4)}
.bereich-num{font-family:var(--serif);font-size:13px;font-weight:900;letter-spacing:.2em;color:var(--accent-ink)}
.bereich h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.12;letter-spacing:-.02em}
.bereich-teaser{color:var(--ink2);font-size:15.5px}
.bereich-liste{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:2px;
               padding-top:16px;border-top:1px solid var(--line-soft)}
.bereich-liste li{position:relative;padding-left:17px;font-size:14.5px;color:var(--ink2);line-height:1.45}
.bereich-liste li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
                          border-radius:50%;background:var(--accent);opacity:.55}
.bereich-mehr{margin-top:auto;padding-top:18px;font-weight:600;font-size:14.5px;color:var(--accent-ink)}
.bereich-mehr .arr{display:inline-block;transition:transform .25s ease}
.bereich:hover .bereich-mehr .arr{transform:translateX(4px)}
@media(max-width:980px){.bereiche{grid-template-columns:1fr}}

/* --- Detailseiten ------------------------------------------- */
.page-hero{padding:124px 0 10px}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-family:var(--serif);font-size:clamp(34px,5.4vw,62px);line-height:1.04;
              letter-spacing:-.035em;max-width:16ch}
.page-hero .lead{margin-top:20px;max-width:62ch;font-size:clamp(16.5px,1.5vw,19px);color:var(--ink2)}
.krumen{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:22px;flex-wrap:wrap}
.krumen a:hover{color:var(--accent-ink)}
.krumen span{opacity:.5}

/* Angebotstafel: ein Angebot je Zeile, alle Felder aus der
   gemeinsamen Quelle — Umfang, Korrekturen, Lieferzeit,
   Voraussetzungen, Zusatzkosten, Einstiegspreis. */
.angebot{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;padding:34px 0;
         border-top:1px solid var(--line)}
.angebot:last-of-type{border-bottom:1px solid var(--line)}
.angebot h3{font-family:var(--serif);font-size:clamp(23px,2.6vw,31px);line-height:1.12;letter-spacing:-.025em}
.angebot-fall{margin-top:12px;color:var(--ink2);font-size:16px;max-width:58ch}
.angebot-block{margin-top:22px}
.angebot-block h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
                  font-weight:700;margin-bottom:10px}
.angebot-block ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.angebot-block li{position:relative;padding-left:17px;font-size:15px;color:var(--ink2);line-height:1.45}
.angebot-block li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
                          border-radius:50%;background:var(--accent);opacity:.5}
/* Abgrenzung: hebt sich ab, weil sie den Unterschied zu einem aehnlichen
   Angebot traegt. Kein Rahmen rundherum, nur eine Kante links. */
.angebot-abgrenzung{border-left:2px solid var(--accent);padding-left:16px}
.angebot-abgrenzung p{font-size:15px;color:var(--ink2);line-height:1.55;max-width:58ch}
.angebot-fakten{display:flex;flex-direction:column;gap:3px;margin-top:22px;font-size:14.5px;color:var(--ink2)}
.angebot-fakten b{color:var(--ink);font-weight:600}
.angebot-notiz{margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:58ch}
.angebot-seite{align-self:start;position:sticky;top:94px;padding:26px 24px;background:var(--panel);
               border:1px solid var(--line);border-radius:var(--r)}
.angebot-preis{font-family:var(--serif);font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1}
.angebot-preis small{display:block;font-family:var(--sans);font-size:13px;font-weight:500;
                     letter-spacing:0;color:var(--muted);margin-top:7px}
.angebot-seite .btn{margin-top:18px;width:100%;justify-content:center}
/* Der Knopf in der schmalen Spalte darf umbrechen: .btn steht global
   auf white-space:nowrap, und das geht in 250px Spaltenbreite nicht
   auf — eine zu lange Beschriftung schob dort die ganze Seite
   24px ueber den rechten Rand. */
.angebot-seite .btn{white-space:normal;text-align:center;line-height:1.3}
.angebot-hinweis{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.45}
@media(max-width:860px){
  /* minmax(0,1fr) statt 1fr: ein nacktes 1fr ist minmax(auto,1fr) und
     kann nicht unter die Mindestbreite seines Inhalts schrumpfen. Mit
     '1fr' standen auf 360px Breite 353px breite Textbloecke in 304px
     Platz — 170px Text liefen aus dem Bild und waren nicht erreichbar,
     weil body overflow-x:hidden traegt und nichts scrollbar macht. */
  .angebot{grid-template-columns:minmax(0,1fr);gap:24px}
  .angebot-seite{position:static;top:auto}
}

/* Betreuung: drei Saeulen statt einer Sammelkarte */
.saeulen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.saeule{display:flex;flex-direction:column;gap:12px;padding:28px 26px;background:var(--panel);
        border:1px solid var(--line);border-radius:var(--r)}
.saeule h3{font-family:var(--serif);font-size:23px;letter-spacing:-.02em}
.saeule-preis{font-family:var(--serif);font-size:26px;font-weight:900;letter-spacing:-.025em}
.saeule-preis small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted)}
.saeule p{font-size:15px;color:var(--ink2)}
.saeule-liste,.saeule-nicht{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.saeule-liste li,.saeule-nicht li{position:relative;padding-left:20px;color:var(--ink2);line-height:1.45}
.saeule-liste li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--pine);font-weight:700}
.saeule-nicht li::before{content:"–";position:absolute;left:0;top:-1px;color:var(--muted);font-weight:700}
.saeule-grp{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:4px}
.saeule-kuendbar{margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--muted)}
@media(max-width:980px){.saeulen{grid-template-columns:1fr}}

/* Laufende Kosten: getrennt von Einrichtung, wie beauftragt */
.kosten{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.kosten th,.kosten td{text-align:left;padding:13px 14px 13px 0;border-bottom:1px solid var(--line-soft);
                      vertical-align:top}
.kosten th{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kosten td:last-child{text-align:right;padding-right:0;white-space:nowrap;font-weight:600}
.kosten-hinweis{margin-top:16px;font-size:14px;color:var(--ink2);max-width:72ch}

/* Auf dem Telefon stapeln statt quetschen. Eine Tabelle schrumpft
   nicht unter die Mindestbreite ihrer Spalten: auf 360px war die
   Preistabelle 433px breit, also 101px abgeschnitten. Seitwaerts
   scrollen ist bei einer Preisliste die schlechtere Antwort — jede
   Zeile wird deshalb ein Block, die Spaltennamen kommen aus
   data-spalte (vom Generator gesetzt, nicht im CSS doppelt gepflegt). */
@media(max-width:620px){
  .kosten{font-size:14.5px}
  .kosten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .kosten tr{display:block;padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .kosten tr:last-child{border-bottom:none}
  .kosten td{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
             padding:3px 0;border-bottom:none;text-align:left}
  .kosten td:first-child{font-weight:600;color:var(--ink)}
  .kosten td:last-child{text-align:right;white-space:normal}
  .kosten td::before{content:attr(data-spalte);flex:0 0 auto;font-size:11.5px;letter-spacing:.14em;
                     text-transform:uppercase;color:var(--muted);font-weight:700;
                     transform:translateY(-1px)}
  .kosten td:first-child::before{display:none}
}

/* Regelblock: Lieferzeit, Festpreis, Preisindikation */
.regeln{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:10px}
.regel{padding:22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.regel h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink);
          font-weight:700;margin-bottom:9px}
.regel p{font-size:14.5px;color:var(--ink2);line-height:1.5}
@media(max-width:820px){.regeln{grid-template-columns:1fr}}

/* Preisrahmen (S5): untere und obere Kante je Bereich. Drei Bereiche,
   darum drei Spalten — dieselbe Schwelle wie .saeulen, damit beide
   Gitter auf dem Tablet gemeinsam umbrechen und nicht nacheinander. */
.rahmen-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.rahmen{display:flex;flex-direction:column;gap:10px;padding:26px 24px;background:var(--panel);
        border:1px solid var(--line);border-radius:var(--r)}
.rahmen h3{font-family:var(--serif);font-size:21px;letter-spacing:-.02em}
.rahmen-spanne{font-family:var(--serif);font-size:25px;font-weight:900;letter-spacing:-.025em;
               line-height:1.15}
/* 'bis' klein und ruhig: die beiden Zahlen sind die Aussage, das Wort
   dazwischen ist nur das Bindeglied. */
.rahmen-spanne span{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);
                    letter-spacing:0}
.rahmen p{font-size:14.5px;color:var(--ink2);line-height:1.5;flex:1}
.rahmen a{font-size:14.5px;font-weight:600;color:var(--accent-ink)}
@media(max-width:980px){.rahmen-gitter{grid-template-columns:1fr}}

/* P2: Weg von der Spanne in den Rechner. Text links, Knopf rechts; der
   Knopf behaelt seine Breite (flex:0 0 auto), sonst quetscht ihn der
   laengere Text auf dem Tablet unter seine Mindestbreite — und
   '.btn{white-space:nowrap}' laesst ihn dann aus der Karte laufen. */
.rahmen-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
            flex-wrap:wrap;margin-top:18px;padding:22px 24px;background:var(--panel);
            border:1px solid var(--line);border-radius:var(--r)}
.rahmen-cta h3{font-family:var(--serif);font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.rahmen-cta p{font-size:14.5px;color:var(--ink2);line-height:1.5;max-width:62ch}
.rahmen-cta>div{flex:1 1 320px;min-width:0}
.rahmen-cta .btn{flex:0 0 auto}
/* Unter 620px traegt die Karte den Knopf auf voller Breite: daneben
   blieben fuer den Text keine 40 Zeichen, und ein Knopf, der breiter
   als seine Karte ist, erzeugt Querscroll. */
@media(max-width:620px){
  .rahmen-cta{flex-direction:column;align-items:stretch}
  .rahmen-cta .btn{justify-content:center}
}

/* Fuss: die Detailseiten noch einmal als Textlinks, damit sie auch
   unten erreichbar sind und nicht nur ueber die Kopfnavigation. */
.foot-nav{display:flex;gap:16px;flex-wrap:wrap}
.foot-nav a{font-weight:500}
/* Rufnummer und Mailadresse im Fuss (23.10.). inline-block mit Polsterung,
   damit die Trefferflaeche am Handy nicht nur die Texthoehe ist — eine
   14-px-Zeile ist als Anruf-Ziel zu klein. nowrap, weil eine ueber zwei
   Zeilen gebrochene Rufnummer nicht mehr als Nummer lesbar ist. */
/* min-height:44px und nicht nur Polsterung: bin/web-check-browser misst
   gegen Apples 44 x 44 und begruendet den Befund mit genau diesem Fall —
   "wer zweimal daneben tippt, ruft nicht an". Eine 14-px-Zeile mit ein
   paar Pixeln Polsterung kommt auf 32 px und bliebe ein Befund; zwei neue
   Elemente unter der Schwelle einzubauen, waehrend wir dieselbe Messung
   verkaufen, waere die Fehlerklasse, die dieser Auftrag beseitigt. */
.foot-kontakt{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.foot-kontakt a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 2px;font-weight:500;white-space:nowrap}
@media(max-width:700px){.foot{flex-direction:column;align-items:flex-start;gap:14px}}

/* ============================================================
   7 — STARTSEITE S3 (Arbeiten, Pakete, Ablauf, Über uns, FAQ)
   Nur, was die neuen Startseiten-Abschnitte zusaetzlich brauchen.
   Alles andere kommt aus den Abschnitten oben, die aus der alten
   Startseite herausgeloest wurden.
   ============================================================ */

/* Paketkarte hat zwei Schaltflaechen: Details und Anfragen. .card .btn
   steht auf margin-top:auto — die zweite klebte damit an der ersten. */
.card .btn + .btn{margin-top:10px}

/* Optional-Kennzeichnung an Formularlabels. Stand vorher als
   style="opacity:.55" im Markup; der Generator schreibt keine
   Stilattribute ins HTML. */
.cform label .opt{opacity:.55;font-weight:500}

/* Vorstellung: Fliesstext zwischen Abschnittskopf und Punkteraster. */
.ueber-text{max-width:62ch;color:var(--ink2);font-size:16.5px;line-height:1.6;margin-bottom:14px}
.ueber-text:last-of-type{margin-bottom:34px}

/* Vier statt drei Punkte: feste drei Spalten haetten den vierten
   allein in eine zweite Reihe gestellt. */
.why-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ============================================================
   8 — BEREICHSSEITEN S4 (Beispiele, Ablauf, Anfrage)
   Die Bereichsseiten nutzen die Bausteine der Startseite
   (.work-grid, .steps, .cta). Neu ist nur der Abnahmeblock:
   er steht dort, wo es keine Referenz gibt (KI) und erklaert
   stattdessen, woran das Ergebnis abgenommen wird.
   ============================================================ */
.abnahme{max-width:74ch;padding:26px 28px;background:var(--panel);
         border:1px solid var(--line);border-radius:var(--r)}
.abnahme p{font-size:16px;color:var(--ink2);line-height:1.6}
.abnahme-liste{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:18px}
.abnahme-liste li{position:relative;padding-left:22px;font-size:15px;color:var(--ink2);line-height:1.5}
.abnahme-liste li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--pine);font-weight:700}

/* Die Bereichsseite hat kein <header> mit Blobs, der Anfrageblock
   aber eigene (.blob.x/.y) — ohne Abstand nach oben klebt er am
   Ablaufabschnitt. */
.page-hero ~ section #anfrage,.page-hero ~ section .cta{margin-top:0}

/* ===== Absprung zum Website-Check (Martin 21.10.2026) ====================
   Der Check ist eine eigene Seite in einer eigenen Welt. Dieser Abschnitt ist
   die Bruecke: Studio-Flaeche und Studio-Knopf, aber die limefarbene Zeile
   der Check-Seite als Zitat. Lime kommt auf der Website NUR hier vor — es
   bleibt das Zeichen des Checks und wird nicht zur zweiten Markenfarbe. */
/* Text links, Handlung rechts. Der erste Entwurf setzte den Knopf unter den
   Text — auf 1440 px blieb rechts die halbe Flaeche leer, dieselbe Klasse wie
   am 13.10. im FAQ. Jetzt traegt die Breite die zweite Spalte. */
#website-check .check-band{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:48px 44px;display:flex;gap:40px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
#website-check .check-text{max-width:42rem;min-width:0}
#website-check .check-tat{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-start;gap:14px}
#website-check .check-klein{font-size:14px;color:var(--muted);margin:0}
#website-check h2{font-size:clamp(28px,3.6vw,46px);line-height:1.02;margin:10px 0 16px}
#website-check .check-lime{
  background:#CDFA63;color:var(--ink);padding:0 .09em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  box-shadow:.09em 0 0 #CDFA63,-.09em 0 0 #CDFA63}
#website-check .check-text p{color:var(--ink2);font-size:16.5px;max-width:40em;margin:0}
#website-check .btn.solid{min-height:48px}
@media(max-width:820px){
  #website-check .check-band{padding:34px 24px;flex-direction:column;align-items:stretch;gap:26px}
  #website-check .check-tat{width:100%;align-items:stretch}
  #website-check .btn.solid{width:100%;justify-content:center}
  #website-check .check-klein{text-align:center}
}

/* ============== Terminbuchung — Produktseite und Startseitenband ==========
 *
 * Fassung 2 nach ARGUS-AUFTRAG.md (23.10.2026). Die Farbwelt bleibt die der
 * Website; neu sind nur zwei lokale Toene:
 *
 *   --tb-cta           Knopfgrund = var(--accent), also exakt der Ton der
 *                      Startseite (Martin 23.10.: 'die gleiche Farbe wie auf
 *                      der mainpage'). Bewusst als VERWEIS auf --accent und
 *                      nicht als fester Hexwert: aendert sich die Marke,
 *                      zieht diese Seite ohne zweiten Pflegeort mit.
 *
 *                      Dazu gehoert ein gemessener Vorbehalt, der NICHT diese
 *                      Seite betrifft, sondern die ganze Website: --accent
 *                      (#E4502B) erreicht auf weissem Text 3,83:1. Fuer
 *                      15-px-Knopftext verlangt WCAG AA 4,5:1. Gemessen am
 *                      23.10. an der Startseite: Navigationsknopf,
 *                      Website-Check-Band und Anfrageformular liegen alle bei
 *                      3,83:1. Eine Sonderfarbe nur hier haette das Problem
 *                      nicht geloest, sondern nur verschoben und die Marke
 *                      zerrissen. Zwei Wege fuer die GANZE Seite stehen im
 *                      Pruefbericht: Markenton auf #C24425 abdunkeln (5,06:1,
 *                      optisch kaum unterscheidbar) oder Knopftext auf
 *                      19px/700 (dann gilt die Schwelle 3,0:1).
 *   --tb-olive #777C65 ruhiger Zweitton fuer Icons und Rahmen.
 *
 * Maximalbreite der Seite bleibt die der Website; der Auftrag nennt 1240 px,
 * der Bestand steht auf 1360/1520 — eine Sonderbreite nur fuer diese Seite
 * waere ein zweiter Pflegeort und ein sichtbarer Bruch beim Seitenwechsel.
 */
.tb-hero, #demo, #funktionen, #fuer-wen, #pakete, #dazu, #ablauf,
.tb-anfrage, #terminbuchung-band{ --tb-cta:var(--accent); --tb-olive:#777C65; }

/* Spezifitaet: '.btn.solid' im Bestand traegt zwei Klassen und gewinnt gegen
   ein einzelnes '.tb-cta' - gemessen lieferte der Knopf rgb(228,80,43), also
   den globalen Akzent mit nur 3,83:1 auf Weiss. Deshalb hier ebenfalls zwei
   Klassen bzw. ein Elternselektor. */
.btn.tb-cta, .btn.tb-paketwahl, .tb-anfrage .send{
  background:var(--tb-cta); border-color:var(--tb-cta); color:#fff;
  min-height:48px; display:inline-flex; align-items:center; justify-content:center}
.btn.tb-cta:hover, .btn.tb-paketwahl:hover, .tb-anfrage .send:hover{
  background:var(--accent-ink); border-color:var(--accent-ink) }

/* ---------- Hero: links Text, rechts Produktbild ---------- */
.tb-hero-raster{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  gap:48px;align-items:center}
.tb-hero-text h1{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.035em;
  margin:10px 0 18px}
.tb-hero-text .lead{max-width:30em}
.tb-tat{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:26px}
.tb-sek{font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--tb-cta);padding:12px 2px;min-height:44px;
  display:inline-flex;align-items:center}
.tb-sek:hover{color:var(--tb-cta)}

.tb-vorteile{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:26px;flex-wrap:wrap}
.tb-vorteile li{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink2)}
.tb-haken{width:20px;height:20px;flex:none}

.tb-preisanker{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px}
.tb-preisanker b{font-family:var(--serif);font-size:clamp(20px,2.2vw,27px);letter-spacing:-.01em}
.tb-preisanker span{font-size:14px;color:var(--muted)}

/* Die Illustration sitzt auf einem terrakottafarbenen Bogen. Der Bogen ist
   reine Dekoration und traegt deshalb aria-hidden; er darf die Grafik nicht
   ueberlagern, sondern steht dahinter. */
.tb-hero-bild{position:relative;display:flex;justify-content:center;align-items:center}
/* Der Bogen ist Dekoration und darf nicht lauter sein als die Knoepfe.
   Mit dem vollen Signalton (--accent) wurde er zum groessten farbigen
   Element der Seite und zog den Blick von 'Live-Demo ausprobieren' weg.
   Deshalb das ruhigere Terrakotta aus dem Auftragspaket - dieselbe
   Farbfamilie, eine Stufe zurueckgenommen. */
.tb-bogen{position:absolute;inset:6% -4% 14% 8%;background:#B95F38;
  border-radius:48% 52% 44% 56%/52% 44% 56% 48%;opacity:.88}
.tb-hero-bild picture, .tb-hero-bild img{position:relative;width:100%;height:auto;display:block}
.tb-bildhinweis{position:absolute;right:4px;bottom:-4px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:var(--bone);
  padding:4px 9px;border-radius:999px;border:1px solid var(--line)}
/* Einmaliges sanftes Einblenden, hoechstens 8 px Weg - keine Dauerbewegung. */
@media(prefers-reduced-motion:no-preference){
  .tb-hero-bild picture{animation:tb-auf 520ms cubic-bezier(.22,.61,.36,1) both}
  @keyframes tb-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---------- Demo: zwei gleichwertige Flaechen mit echtem Screenshot ------- */
.tb-demo-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.tb-demo-karte{display:flex;flex-direction:column;gap:18px;padding:26px 26px 0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;overflow:hidden;transition:border-color .14s,transform .14s}
.tb-demo-karte:hover{border-color:var(--tb-cta);transform:translateY(-2px)}
.tb-demo-kopf{display:flex;gap:14px;align-items:flex-start}
.tb-demo-ikon{flex:none;width:44px;height:44px;border-radius:50%;background:var(--bone2);
  display:grid;place-items:center}
.tb-demo-ikon img{width:22px;height:22px}
.tb-demo-txt{display:flex;flex-direction:column;gap:4px}
.tb-demo-txt b{font-size:17px}
.tb-demo-txt span{font-size:14.5px;color:var(--ink2)}
/* Der Screenshot steht angeschnitten am unteren Kartenrand: er belegt die
   Aussage, ohne die Karte zur Bildstrecke zu machen. */
.tb-demo-shot{margin-top:auto;max-height:230px;overflow:hidden;border-radius:12px 12px 0 0;
  border:1px solid var(--line);border-bottom:0}
.tb-demo-shot img{width:100%;height:auto;display:block}
.tb-demo-hinweis{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* ---------- Drei Vorteile ---------- */
.tb-nutzen-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.tb-nutzen{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.tb-ikon{width:30px;height:30px;margin-bottom:16px}
.tb-nutzen h3{font-size:20px;line-height:1.2;margin:0 0 10px}
.tb-nutzen p{color:var(--ink2);font-size:15.5px;margin:0}
.tb-mehr{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:14px}
.tb-mehr>summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--tb-cta);
  list-style:none;min-height:44px;display:flex;align-items:center;gap:8px}
.tb-mehr>summary::-webkit-details-marker{display:none}
.tb-mehr>summary::after{content:"+";font-size:18px;line-height:1}
.tb-mehr[open]>summary::after{content:"−"}
.tb-mehr ul{margin:8px 0 2px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.tb-mehr li{font-size:14.5px;color:var(--ink2)}

/* ---------- Fuer wen ---------- */
.tb-branchen{display:flex;flex-wrap:wrap;gap:10px}
.tb-branche{border:1px solid var(--line);border-radius:999px;padding:11px 18px;
  font-size:15px;color:var(--ink2);background:var(--panel)}
.tb-grenze{margin-top:22px;max-width:46em;font-size:15.5px;color:var(--ink2);
  border-left:3px solid var(--tb-olive);padding-left:18px}

/* ---------- Pakete: gleiche Zeilen in beiden Karten ---------- */
.tb-pakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;
  align-items:start}
.tb-paket{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.tb-paket.hervor{border-color:var(--tb-cta);box-shadow:0 14px 38px rgba(228,80,43,.10)}
.tb-paket h3{font-size:21px;margin:0}
.tb-preis{font-family:var(--serif);font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.tb-paket>p{color:var(--ink2);font-size:15.5px;margin:0}
.tb-zeilen{margin:6px 0 4px;display:flex;flex-direction:column;gap:0}
.tb-zeile{display:grid;grid-template-columns:minmax(0,38%) minmax(0,62%);gap:14px;
  padding:12px 0;border-top:1px solid var(--line-soft)}
.tb-zeile dt{font-size:13.5px;color:var(--muted);font-weight:600}
.tb-zeile dd{margin:0;font-size:14.5px;color:var(--ink2)}
.tb-paketwahl{margin-top:auto;width:100%}
.tb-fussnote{margin-top:22px;font-size:14px;color:var(--muted);max-width:52em}

/* ---------- Was dazugehoert ---------- */
.tb-dazu-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tb-dazu{display:flex;flex-direction:column;gap:7px;padding:24px 22px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.tb-dazu b{font-size:16.5px}
.tb-dazu span{font-size:14.5px;color:var(--ink2)}

/* ---------- Ablauf ---------- */
.tb-schritte{list-style:none;counter-reset:tb;padding:0;margin:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tb-schritt{counter-increment:tb;border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.tb-schritt::before{content:"0" counter(tb);font-family:var(--serif);font-size:17px;
  color:var(--tb-cta)}
.tb-schritt b{font-size:17px;line-height:1.25}
.tb-schritt span{color:var(--ink2);font-size:15.5px}

/* ---------- Anfrage ---------- */
.tb-anfrage .cform-karte{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(28px,4vw,52px);max-width:58rem;margin:0 auto}
.tb-anfrage h2{font-size:clamp(26px,3.4vw,40px);line-height:1.04;margin:10px 0 12px}
.tb-anfrage-text{color:var(--ink2);font-size:16.5px;max-width:42em;margin:0 0 26px}
.cform-raster{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfeld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.cfeld>span{font-size:13.5px;font-weight:600;color:var(--ink2)}
.cfeld input, .cfeld select, .cfeld textarea{font:inherit;font-size:15px;padding:13px 14px;
  min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;
  color:var(--ink);width:100%;box-sizing:border-box}
.cfeld textarea{min-height:92px;resize:vertical}
.cfeld input:focus-visible, .cfeld select:focus-visible, .cfeld textarea:focus-visible{
  outline:2px solid var(--tb-cta);outline-offset:1px;border-color:var(--tb-cta)}
.tb-mehrfragen{margin:2px 0 18px;border-top:1px solid var(--line-soft);padding-top:12px}
.tb-mehrfragen>summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--tb-cta);
  min-height:44px;display:flex;align-items:center;list-style:none}
.tb-mehrfragen>summary::-webkit-details-marker{display:none}
.tb-mehrfragen>summary::after{content:"+";margin-left:8px;font-size:18px}
.tb-mehrfragen[open]>summary::after{content:"−"}
.cform-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.tb-anfrage .send{width:100%;margin-top:6px}
.cform-note{min-height:1.4em;margin:12px 0 0;font-size:14.5px}
.cform-klein{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.cform-klein a{color:var(--tb-cta)}
/* Die Erfolgsmeldung erscheint erst, wenn studio.js dem Formular 'ok' gibt -
   und das passiert nur nach bestaetigter Serverannahme. */
.tb-anfrage .cform-done{display:none;font-size:17px}
.tb-anfrage .cform.ok{display:none}
.tb-anfrage .cform.ok ~ .cform-done{display:block}

/* ---------- Startseitenband ---------- */
#terminbuchung-band .tb-band{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:48px 44px;display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
#terminbuchung-band h2{font-size:clamp(28px,3.6vw,46px);line-height:1.02;margin:10px 0 16px}
#terminbuchung-band .tb-band-text p{color:var(--ink2);font-size:16.5px;max-width:40em;margin:0}
#terminbuchung-band .tb-band-bild{display:flex;justify-content:center}
#terminbuchung-band .tb-band-bild img{width:auto;max-width:100%;max-height:420px;height:auto;
  display:block;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.10)}
#terminbuchung-band .btn.solid{background:var(--tb-cta);border-color:var(--tb-cta);
  min-height:48px;display:inline-flex;align-items:center}

/* ---------- Mobil ---------- */
@media(max-width:900px){
  /* Text und Demo-Knopf VOR der Grafik - wer auf dem Telefon landet, soll
     zuerst lesen und klicken koennen, nicht erst an einer Illustration
     vorbeiscrollen. */
  .tb-hero-raster{grid-template-columns:1fr;gap:30px}
  .tb-hero-text{order:1}
  .tb-hero-bild{order:2;max-width:460px;margin:0 auto}
  .tb-demo-raster,.tb-nutzen-raster,.tb-pakete,.tb-dazu-raster,.tb-schritte{
    grid-template-columns:1fr}
  .cform-raster{grid-template-columns:1fr}
  #terminbuchung-band .tb-band{grid-template-columns:1fr;padding:32px 22px;gap:26px}
  .tb-tat{gap:12px}
  .tb-tat .btn.solid,.tb-tat .tb-cta{width:100%}
  .tb-vorteile{gap:14px;flex-direction:column}
}
@media(max-width:420px){
  .tb-zeile{grid-template-columns:1fr;gap:3px;padding:11px 0}
  .tb-demo-karte{padding:22px 20px 0}
  .tb-anfrage .cform-karte{padding:24px 18px}
}

/* Das Bestandsformular der Startseite steht auf DUNKLEM Grund: '.cform'
   setzt Platzhalter und Auswahlliste auf helle Farben (rgba(242,236,225,.4)
   bzw. #17130F-Grund). Die Anfragekarte der Terminbuchung ist hell - dort
   stand der Beispieltext 'z. B. Kosmetik, 12 Leistungen' damit nahezu weiss
   auf weiss. Gemessen, nicht vermutet. Deshalb hier beides zuruecksetzen;
   das Startseitenformular bleibt unberuehrt. */
.tb-anfrage .cform input::placeholder,
.tb-anfrage .cform textarea::placeholder{color:#8A8176;opacity:1}
.tb-anfrage .cform select option{background:#fff;color:var(--ink)}
.tb-anfrage .cform label{color:inherit;letter-spacing:normal;margin-bottom:0;font-size:inherit}

/* Die Brotkrume und die beiden Verweise im Kleingedruckten lagen unter
   44 px. Sie bekommen Polsterung statt fester Hoehe, damit der Textfluss
   bleibt - und das Kleingedruckte wird zur eigenen Zeile, weil zwei
   44-px-Ziele in einem Fliesstext sonst uebereinanderliegen. */
.krumen a{display:inline-flex;align-items:center;justify-content:flex-start;min-height:44px;min-width:44px;padding-right:8px}
.tb-anfrage .cform-klein{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}
.tb-anfrage .cform-klein a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}