/* ============================================================
   BOOKLERA — gemeinsames Geruest fuer alle Landingpages
   Aus handwerker-neu.html herausgeloest, damit Handwerker,
   Fitness, E-Commerce, Todos und die Hauptseite dieselben
   Bausteine benutzen. Pro Seite wechselt nur --accent.
   ============================================================ */
/* ============================================================
   BOOKLERA — Craft-Upgrade, komplette Handwerker-Seite
   Richtung "Aufmaß": technisches Zeichenblatt, Messrail,
   erweiterte Grotesk, ein einziger Signalakzent.
   Bewusst einthemig hell — die Seite verkauft an Betriebe,
   nicht an Entwickler.
   ============================================================ */

:root{
  color-scheme:light;
  --ground:#EDEFF2;
  --ground-2:#E4E7EB;
  --surface:#FFFFFF;
  --ink:#0F1418;
  --ink-2:#4C5762;
  --ink-3:#7C8794;
  --line:#CBD2DA;
  --line-soft:#DDE2E8;
  --brand:#17427E;
  --brand-2:#2C63AE;
  --accent:#DF4E17;
  --accent-soft:#FBEDE6;
  --deep:#0D1826;
  --deep-ink:#E9EDF2;
  --deep-2:#8798AB;
  --deep-line:#22334A;
  --ok:#1F6B44;
  --shadow:0 1px 1px rgba(15,20,24,.04), 0 8px 18px -8px rgba(15,20,24,.14), 0 28px 60px -30px rgba(15,20,24,.30);
  --shadow-sm:0 1px 1px rgba(15,20,24,.04), 0 6px 14px -8px rgba(15,20,24,.18);
  --ease:cubic-bezier(.22,.68,.24,1);
}

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

/* Die Auftritte warten in verschobener Position — "von rechts" steht also
   42 px neben der Seite, solange der Abschnitt noch nicht dran war. Ohne
   diese Zeile laesst sich die Seite dadurch seitlich schieben. Am Wurzel-
   element gesetzt, damit die klebenden Rail-Nummern weiter kleben. */
html{overflow-x:clip}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.20;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

a{color:inherit}
img{max-width:100%}
h1,h2,h3,h4{text-wrap:balance}

/* ---------- Typo-Rollen ---------- */
.display{
  font-family:"Archivo",Impact,"Arial Narrow Bold",sans-serif;
  font-variation-settings:"wdth" 112;
  font-weight:700;letter-spacing:-.035em;line-height:.96;
}
.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

.wrap{max-width:1380px;margin:0 auto;padding-inline:clamp(20px,4.2vw,64px);position:relative;z-index:1}

/* ---------- Messrail ---------- */
.railed{display:grid;grid-template-columns:118px minmax(0,1fr)}
.rail{position:relative;border-right:1px solid var(--line)}
.rail::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:9px;
  background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 24px);
  opacity:.75;
}
.rail-tag{position:sticky;top:100px;display:block;padding:0 20px 0 0;text-align:right;color:var(--ink-3);font-size:10px;letter-spacing:.1em;line-height:1.5;white-space:nowrap}
.rail-tag b{display:block;color:var(--accent);font-weight:600;font-size:11px;letter-spacing:.08em;margin-bottom:2px}
.railed > .col{padding-left:clamp(20px,3vw,44px);min-width:0}
@media (max-width:900px){
  .railed{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .railed > .col{padding-left:0}
}

/* ---------- Sektions-Rhythmus ---------- */
.sec{padding-block:clamp(60px,7.5vw,116px)}
.sec--tight{padding-block:clamp(48px,5.5vw,84px)}
.sec + .sec{border-top:1px solid var(--line)}
.eyebrow-lbl{margin:0 0 14px;color:var(--ink-3)}
h2.sec-h{
  margin:0;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112;
  font-weight:700;letter-spacing:-.035em;line-height:.99;
  font-size:clamp(1.95rem,3.7vw,3.05rem);
}
.sec-lead{margin:18px 0 0;color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.11rem);max-width:56ch}
.sec-head{margin-bottom:clamp(32px,4vw,56px)}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(237,239,242,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px);height:66px}
/* flex:none — sonst quetscht das Raster bei knapper Breite das Logo
   zusammen, statt die Leiste daneben schmaler zu machen. */
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex:none}
.logo-img{height:32px;width:auto;display:block}
.ft .logo-img{height:28px}


/* ---------- Sprach-Umschalter ----------------------------------
   Gleiche Struktur wie includes/lang_switcher_public.html: natives
   <details>, kein Inline-Handler, damit es unter der strengen CSP
   ohne Nonce laeuft. Hier nur neu eingekleidet. */
.bk-lang-menu{position:relative;display:inline-block}
.bk-lang-menu>summary{
  display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  padding:7px 11px;border:1px solid var(--line);background:transparent;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
  transition:border-color .2s ease,color .2s ease;
}
.bk-lang-menu>summary::-webkit-details-marker{display:none}
.bk-lang-menu>summary::marker{content:""}
.bk-lang-menu>summary:hover,.bk-lang-menu[open]>summary{border-color:var(--accent);color:var(--ink)}
.bk-lang-menu__flag{font-size:14px;line-height:1}
.bk-lang-menu__chev{font-size:9px;transition:transform .2s ease}
.bk-lang-menu[open] .bk-lang-menu__chev{transform:rotate(180deg)}
.bk-lang-menu__panel{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  width:min(432px,86vw);max-height:min(62vh,460px);overflow-y:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--ground);border:1px solid var(--line);
  box-shadow:0 22px 48px -18px rgba(13,24,38,.34);
}
@media (max-width:520px){
  /* Am Telefon steht der Knopf so weit links, dass ein rechts verankertes
     Feld aus dem Bild laeuft — deshalb dort am Fenster ausrichten. */
  .bk-lang-menu__panel{
    grid-template-columns:repeat(2,minmax(0,1fr));
    position:fixed;top:calc(66px + 6px);left:10px;right:10px;width:auto;
    max-height:min(66vh,440px);
  }
}
@media (max-width:360px){.bk-lang-menu__panel{grid-template-columns:1fr}}
.bk-lang-menu__item{
  display:flex;align-items:center;gap:9px;padding:9px 13px;text-decoration:none;
  font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line-soft);
  transition:background .18s ease,color .18s ease;
}
.bk-lang-menu__item:nth-child(2n){border-left:1px solid var(--line-soft)}
.bk-lang-menu__item:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.bk-lang-menu__item.is-active{color:var(--ink);font-weight:600}
.bk-lang-menu__check{margin-left:auto;color:var(--accent);font-size:11px}
@media (max-width:640px){.bk-lang-menu>summary .bk-lang-menu__cur{display:none}}

/* Beschriftungen duerfen nie mitten im Wort umbrechen — "Alle Branchen"
   auf zwei Zeilen sieht kaputt aus. Stattdessen rueckt der Abstand
   zusammen, und unterhalb der Schwelle verschwindet die Leiste ganz. */
.nav-links{display:flex;gap:clamp(13px,1.5vw,24px);list-style:none;margin:0;padding:0;white-space:nowrap}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--accent)}
/* Bevor die Leiste verschwindet, ruecken Schrift und Abstand noch einmal
   zusammen — das rettet die Handwerker-Seite, die als einzige sieben
   Punkte hat, ueber den engen Bereich. */
@media (max-width:1220px){
  .nav-links{gap:12px}
  .nav-links a{font-size:13.7px}
  .nav .btn-ghost,.nav .btn-solid{padding-inline:14px
  .nav .btn-ghost,.nav .btn-solid{flex:none}
}
}
/* Unterhalb dieser Breite passt sie auch so nicht mehr. */
@media (max-width:1100px){.nav-links{display:none}}
@media (max-width:640px){
  .nav-in{gap:12px}
  .nav .btn-ghost{display:none}
  .nav .btn-solid{padding:9px 14px;font-size:13.5px}
  
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"Inter",sans-serif;font-size:14.5px;font-weight:500;
  padding:11px 20px;text-decoration:none;border:1px solid transparent;background:none;
  transition:transform .16s var(--ease),background .2s,color .2s,border-color .2s;
  cursor:pointer;white-space:nowrap;
}
.btn-solid{background:var(--ink);color:var(--ground)}
.btn-solid:hover{background:var(--brand);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#C34211;transform:translateY(-1px)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-block{width:100%}
:where(a,button,summary,input,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(52px,6.5vw,100px);padding-bottom:clamp(46px,5.5vw,86px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.hero-copy{container-type:inline-size}
@media (max-width:1080px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}}

.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:6px 12px 6px 10px;color:var(--ink-2);background:var(--surface)}
.eyebrow .dot{width:5px;height:5px;background:var(--accent);flex:none}
.eyebrow .trade{color:var(--ink);min-width:8.5ch;display:inline-block}

h1.hero-h{margin:26px 0 0;font-size:clamp(2.25rem,10.4cqi,4.5rem)}
@supports not (font-size:1cqi){h1.hero-h{font-size:clamp(2.25rem,5.2vw,4.2rem)}}
h1.hero-h .em{color:var(--brand)}
.line{display:block;padding-bottom:.06em}
.line > span{display:block}
html.js-motion .line{clip-path:inset(0 -100% -18% -100%)}

.hero-sub{margin:26px 0 0;max-width:44ch;font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--ink-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-meta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--ink-3)}
.hero-meta .sep{width:3px;height:3px;background:var(--line);flex:none}
.hero-meta strong{color:var(--ink-2);font-weight:600}
.price-line{margin-top:16px;display:flex;align-items:baseline;gap:10px;font-size:14.5px;color:var(--ink-2)}
.price-line b{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.price-line a{color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- Produktfenster ---------- */
.shot-holder{position:relative;margin-right:calc(-1 * clamp(20px,4.2vw,64px))}
@media (max-width:1080px){.shot-holder{margin-right:0}}
.shot{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-soft);background:var(--ground-2)}
.crumb{font-size:12.5px;color:var(--ink-3);display:flex;gap:7px;align-items:center;min-width:0}
.crumb b{color:var(--ink-2);font-weight:500}
.pill{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 8px;white-space:nowrap}
.shot-head{padding:18px 20px 12px;border-bottom:1px solid var(--line-soft)}
.shot-head .t{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;font-weight:700;font-size:19px;letter-spacing:-.02em}
.shot-head .s{font-size:12.5px;color:var(--ink-3);margin-top:3px;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.tbl-scroll{overflow-x:auto}
table.pos{width:100%;border-collapse:collapse;font-size:13px;min-width:430px}
table.pos th{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:9px 20px;border-bottom:1px solid var(--line-soft)}
table.pos td{padding:10px 20px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
table.pos td:first-child{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;width:1%;white-space:nowrap}
table.pos td.txt{color:var(--ink)}
table.pos td.n,table.pos th.n{text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace;font-size:12.5px;white-space:nowrap}
table.pos tr:last-child td{border-bottom:0}
.shot-sum{display:flex;justify-content:space-between;align-items:baseline;padding:14px 20px;background:var(--ground-2);border-top:1px solid var(--line-soft)}
.shot-sum .lbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.shot-sum .val{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:19px;font-weight:600}
.shot-foot{display:flex;align-items:center;gap:10px;padding:13px 20px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-2)}
.shot-foot .arrow{color:var(--accent);font-family:"IBM Plex Mono",monospace}

/* ---------- Dunkles Band ---------- */
.band{background:var(--deep);color:var(--deep-ink);border-block:1px solid var(--deep-line)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.band-cell{padding:34px clamp(16px,2.4vw,34px);border-left:1px solid var(--deep-line)}
.band-cell:first-child{border-left:0}
.band-cell .k{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.band-cell:last-child .k{color:var(--accent)}
.band-cell .v{margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--deep-2)}
@media (max-width:820px){
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .band-cell:nth-child(3){border-left:0}
  .band-cell:nth-child(n+3){border-top:1px solid var(--deep-line)}
}

/* ---------- Haarlinien-Liste ---------- */
.prob-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,80px)}
@media (max-width:960px){.prob-grid{grid-template-columns:minmax(0,1fr);gap:36px}}
.prob-aside{position:sticky;top:120px;align-self:start}
.prob-aside .sec-lead{max-width:32ch;font-size:15.5px}
/* Unter 960px steht der Aside NICHT mehr neben der Liste, sondern darueber —
   ein klebender Block wandert dann mit und schiebt sich ueber den Text
   darunter (gemessen 01.09.2026 bei 375px: bis 884px Ueberlappung nach
   800px Scrollweg). Zurueck in den normalen Fluss.
   ⚠️ Diese Regel MUSS nach `.prob-aside{position:sticky}` stehen — gleiche
   Spezifitaet, es gewinnt die spaetere. In der 960er-Query oberhalb wurde
   sie stillschweigend ueberschrieben (erst die Messung zeigte es). */
@media (max-width:960px){.prob-aside{position:static;top:auto}}
.rule-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rule-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease)}
.rule-item:hover{padding-left:8px}
.rule-item .ix{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);letter-spacing:.08em;padding-top:4px;font-variant-numeric:tabular-nums}
.rule-item h3{margin:0 0 5px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.rule-item p{margin:0;color:var(--ink-2);font-size:14.8px;max-width:58ch}
.rule-item.turn{border-bottom:0;padding-top:30px}
.rule-item.turn .ix{color:var(--accent)}
.rule-item.turn h3{color:var(--accent);font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;font-size:22px;letter-spacing:-.025em}
.rule-item.turn p b{color:var(--ink);font-weight:600}

/* ---------- Wortherkunft ---------- */
.origin{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,44px);align-items:start}
@media (max-width:760px){.origin{grid-template-columns:1fr;gap:26px}.origin .plus{justify-self:start}}
.origin-half .w{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:-.04em;line-height:1;color:var(--brand)}
.origin-half:last-of-type .w{color:var(--accent)}
.origin-half .sub{margin-top:10px;color:var(--ink-3)}
.origin-half p{margin:16px 0 0;color:var(--ink-2);font-size:15px;max-width:38ch;border-top:1px solid var(--line);padding-top:16px}
.origin .plus{font-family:"Archivo",sans-serif;font-weight:700;font-size:2rem;color:var(--ink-3);padding-top:12px}
.origin-foot{margin:clamp(28px,4vw,48px) 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--ink-2)}
.origin-foot b{color:var(--ink);font-weight:600}

/* ---------- Säulen ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{padding:30px clamp(18px,2.4vw,34px);border-left:1px solid var(--line)}
.pillar:first-child{border-left:0;padding-left:0}
@media (max-width:900px){.pillar{border-left:0;border-top:1px solid var(--line);padding-left:0}.pillar:first-child{border-top:0}}
.pillar h3{margin:0 0 18px;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;font-weight:700;font-size:1.35rem;letter-spacing:-.025em}
.pillar ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pillar li{position:relative;padding-left:20px;font-size:15px;color:var(--ink-2)}
.pillar li::before{content:"—";position:absolute;left:0;top:0;color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.65}
.pillar .tag{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft);color:var(--ink-3)}

/* ---------- Workflow ---------- */
.flow-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(26px,3.6vw,56px);align-items:start}
@media (max-width:960px){.flow-grid{grid-template-columns:1fr}}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.step{border-bottom:1px solid var(--line)}
.step button{
  width:100%;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;
  background:none;border:0;padding:18px 0;text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:padding-left .28s var(--ease);
}
.step button:hover{padding-left:8px}
.step .no{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);letter-spacing:.1em;padding-top:5px}
.step .ti{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;font-weight:700;font-size:1.18rem;letter-spacing:-.02em;margin:0}
.step .tx{margin:6px 0 0;font-size:14.6px;color:var(--ink-2);max-width:52ch;display:none}
.step[aria-current="true"] .no{color:var(--accent)}
.step[aria-current="true"] .ti{color:var(--brand)}
.step[aria-current="true"] .tx{display:block}
.step[aria-current="true"]{box-shadow:inset 3px 0 0 var(--accent)}
.step[aria-current="true"] button{padding-left:14px}
.flow-foot{margin:26px 0 0;font-size:15px;color:var(--ink-2)}
.flow-foot b{color:var(--ink);font-weight:600}
.panel{display:none}
.panel[data-on="1"]{display:block}
.kv{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:13px 20px;border-bottom:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-2)}
.kv b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);font-size:13px}
.kv:last-child{border-bottom:0}

/* ---------- Preise ---------- */
.toggle{display:inline-flex;border:1px solid var(--line);background:var(--surface);margin-top:22px}
.toggle button{padding:9px 16px;border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px;color:var(--ink-2)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.toggle .save{color:var(--accent);font-size:11.5px;margin-left:7px}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--surface)}
@media (max-width:1080px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tiers{grid-template-columns:1fr}}
.tier{padding:26px clamp(16px,1.7vw,24px);border-left:1px solid var(--line);display:flex;flex-direction:column}
.tier:first-child{border-left:0}
@media (max-width:1080px){.tier:nth-child(3){border-left:0}.tier:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:640px){.tier{border-left:0;border-top:1px solid var(--line)}.tier:first-child{border-top:0}}
.tier.hot{box-shadow:inset 0 3px 0 var(--accent)}
.tier .nm{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;font-weight:700;font-size:1.2rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.tier .hotlbl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:2px 6px}
.tier .pr{margin-top:14px;display:flex;align-items:baseline;gap:6px}
.tier .pr .v{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;font-weight:700;font-size:2.15rem;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tier .pr .u{font-size:13px;color:var(--ink-3)}
.tier .seats{margin-top:4px;color:var(--ink-3)}
.tier .who{margin:14px 0 18px;font-size:13.8px;color:var(--ink-2);min-height:3.2em}
.tier ul{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:1px solid var(--line-soft);display:grid;align-content:start;gap:8px;font-size:13.6px;color:var(--ink-2);flex:1}
.tier li{position:relative;padding-left:19px}
.tier li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-size:11px;line-height:1.75}
.tier li b{color:var(--ink);font-weight:600}
.tier li .hint{display:block;color:var(--ink-3);font-size:12.4px;font-family:"IBM Plex Mono",monospace}
.tier .plus-lbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--line-soft);margin:0}
.tier .plus-lbl + ul{border-top:0;padding-top:12px}
.price-foot{margin:22px 0 0;font-size:13px;color:var(--ink-3);max-width:78ch}

/* ---------- Vergleichstabelle ---------- */
details.cmp{margin-top:30px;border:1px solid var(--line);background:var(--surface)}
details.cmp > summary{
  list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:12px;
  font-weight:600;font-size:15px;
}
details.cmp > summary::-webkit-details-marker{display:none}
details.cmp > summary::after{content:"+";margin-left:auto;font-family:"IBM Plex Mono",monospace;color:var(--ink-3);font-size:18px}
details.cmp[open] > summary::after{content:"–"}
details.cmp[open] > summary{border-bottom:1px solid var(--line)}
.cmp-scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
/* Zugeklappt darf die Mindestbreite nicht zaehlen — sonst schiebt die
   unsichtbare Tabelle auf dem Telefon die ganze Seite zur Seite. */
details.cmp:not([open]) table.grid{min-width:0}
table.grid th,table.grid td{padding:10px 16px;border-bottom:1px solid var(--line-soft);text-align:left}
table.grid thead th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);position:sticky;top:0;background:var(--surface)}
table.grid tbody th{font-weight:400;color:var(--ink-2)}
/* Honigtopf des Kontaktformulars: fuer Menschen unsichtbar und nicht
   anspringbar, Bots fuellen ihn aus. */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Gruppenzeile in der grossen Funktionsmatrix */
table.grid tr.mx-grp th{
  padding-top:20px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--line);background:transparent;
}
table.grid tr.mx-grp:first-child th{padding-top:10px}
table.grid td.val{color:var(--ink);font-variant-numeric:tabular-nums;text-align:center}
table.grid td.yes,table.grid td.no{text-align:center}
table.grid td{text-align:center;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.grid .yes{color:var(--ok)}
table.grid .no{color:var(--ink-3)}
table.grid tr.grp th{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand);background:var(--ground-2);padding-top:13px;padding-bottom:13px;
}
table.grid tr.grp td{background:var(--ground-2)}
table.grid thead th:nth-child(3){color:var(--accent)}

/* ---------- Funktionsgruppen ---------- */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
@media (max-width:1000px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.feat{grid-template-columns:1fr}}
.feat > div{padding:26px clamp(16px,2vw,30px) 30px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.feat > div:nth-child(3n+1){border-left:0;padding-left:0}
@media (max-width:1000px){.feat > div:nth-child(3n+1){border-left:1px solid var(--line);padding-left:clamp(16px,2vw,30px)}.feat > div:nth-child(2n+1){border-left:0;padding-left:0}}
@media (max-width:680px){.feat > div{border-left:0!important;padding-left:0!important}}
.feat .from{color:var(--accent);margin-bottom:10px}
.feat h3{margin:0 0 14px;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;font-weight:700;font-size:1.18rem;letter-spacing:-.022em}
.feat ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.2px;color:var(--ink-2)}
.feat li{position:relative;padding-left:17px}
.feat li::before{content:"·";position:absolute;left:2px;top:0;color:var(--accent);font-weight:700;line-height:1.45}
.feat li b{color:var(--ink);font-weight:600}
.feat li i{font-style:normal;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:11.5px}
.feat-plus{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline}
.feat-plus p{margin:0;color:var(--ink-2);font-size:14.4px;max-width:70ch}
.feat-plus .pin{color:var(--accent)}

/* ---------- Web / Sparrechnung ---------- */
.web-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(26px,4vw,64px);align-items:start}
@media (max-width:960px){.web-grid{grid-template-columns:1fr}}
.web-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.web-list li{padding:20px 0;border-bottom:1px solid var(--line)}
.web-list h3{margin:0 0 5px;font-size:16.5px;font-weight:600}
.web-list p{margin:0;color:var(--ink-2);font-size:14.6px;max-width:58ch}
.calc{border:1px solid var(--line);background:var(--surface);padding:22px}
.calc h4{margin:0 0 16px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.calc .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.8px;color:var(--ink-2)}
.calc .row span:last-child{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .row.sum{border-bottom:0;border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-weight:600;color:var(--ink)}
.calc .out{margin:16px 0 0;padding:12px 14px;background:var(--accent-soft);color:#8A3210;font-size:13.6px}

/* ---------- Sprachen ---------- */
.langs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){.langs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.langs span{background:var(--surface);padding:11px 14px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2);display:flex;gap:10px}
.langs span i{font-style:normal;color:var(--ink-3);font-size:11px;letter-spacing:.08em;min-width:2.6ch}
.langs span.de{background:var(--deep);color:var(--deep-ink)}
.langs span.de i{color:var(--accent)}

/* ---------- Heute vs. Booklera ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
.vs-col{background:var(--surface)}
.vs-col:last-child{border-left:1px solid var(--line);background:var(--deep);color:var(--deep-ink)}
@media (max-width:760px){.vs-col:last-child{border-left:0;border-top:1px solid var(--line)}}
.vs-hd{padding:16px 22px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.vs-col:last-child .vs-hd{border-bottom-color:var(--deep-line);color:var(--accent)}
.vs ul{list-style:none;margin:0;padding:0}
.vs li{padding:15px 22px;border-bottom:1px solid var(--line-soft);font-size:14.8px;color:var(--ink-2)}
.vs-col:last-child li{border-bottom-color:var(--deep-line);color:var(--deep-ink)}
.vs li:last-child{border-bottom:0}

/* ---------- Vertrauen ---------- */
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:860px){.badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
.badges > div{background:var(--surface);padding:22px}
.badges h3{margin:0 0 6px;font-size:15px;font-weight:600}
.badges p{margin:0;font-size:13.6px;color:var(--ink-2)}
.trust-foot{margin:22px 0 0;font-size:15.5px;color:var(--ink-2)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 0;display:grid;grid-template-columns:1fr 24px;gap:16px;
  font-size:17px;font-weight:600;letter-spacing:-.01em;transition:padding-left .28s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:19px;justify-self:end;line-height:1.3}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{padding-left:8px}
.faq .a{padding:0 0 24px;color:var(--ink-2);font-size:15px;max-width:74ch}
.faq .a p{margin:0 0 12px}
.faq .a ul{margin:0 0 12px;padding-left:18px;display:grid;gap:6px}
.faq .a b{color:var(--ink);font-weight:600}

/* ---------- Kontakt ---------- */
.form{display:grid;gap:14px;max-width:520px}
.field{display:grid;gap:6px}
.field label{color:var(--ink-3)}
.field input,.field textarea{
  font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.field textarea{min-height:120px;resize:vertical}
.form-note{margin:0;font-size:13px;color:var(--ink-3)}

/* ---------- Abschluss + Footer ---------- */
.close-cta{background:var(--deep);color:var(--deep-ink);border-block:1px solid var(--deep-line);padding-block:clamp(56px,7vw,100px);text-align:left}
.close-cta h2{margin:0;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112;font-weight:700;letter-spacing:-.035em;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1}
.close-cta p{margin:18px 0 0;color:var(--deep-2);font-size:1.05rem}
.close-cta .row{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.close-cta a.log{color:var(--deep-2);font-size:14px;text-underline-offset:4px}
.close-cta a.log b{color:var(--accent);font-weight:500}
footer.ft{padding-block:clamp(40px,5vw,64px);font-size:14px;color:var(--ink-2)}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,60px);padding-bottom:30px;border-bottom:1px solid var(--line)}
@media (max-width:760px){.ft-top{grid-template-columns:1fr}}
.ft-links{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:0}
.ft-links a{text-decoration:none;color:var(--ink-2)}
.ft-links a:hover{color:var(--accent)}
.ft-btm{padding-top:22px;color:var(--ink-3);font-size:13px}

/* ---------- Motion: ohne JS immer sichtbar ---------- */
html.js-motion [data-reveal]{opacity:0;transform:translateY(16px)}
html.js-motion [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
html.js-motion .line > span{transform:translateY(105%)}
html.js-motion .hero-ready .line > span{transform:none;transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
@media (prefers-reduced-motion: reduce){
  html.js-motion [data-reveal],
  html.js-motion [data-reveal].is-in,
  html.js-motion .line > span{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important}
  .btn:hover,.rule-item:hover,.step button:hover,.faq summary:hover{transform:none;padding-left:0}
}


/* ============================================================
   Schmale Fenster — muss am Ende stehen, sonst gewinnen die
   frueheren Regeln mit gleicher Gewichtung.
   ============================================================ */
@media (max-width:560px){
  /* Die Mindestbreite der Positionstabelle hat die Seite um gut 20 px
     aufgeschoben; auf dem Telefon rueckt sie stattdessen zusammen. */
  table.pos{min-width:0}
  table.pos th,table.pos td{padding-inline:12px}
  table.pos td:first-child,table.pos th:first-child{display:none}
}


/* ============================================================
   Bildfenster — das Foto lebt: ein Zoom, der sich beim
   Durchfahren setzt (--z), ein seitliches Driften (--dx), und
   waehrenddessen entwickelt es sich vom blaugrauen Zeichnungston
   zur Farbe (--dev). Alles setzt effects.js pro Frame aus der
   Scrollposition — rueckwaerts laeuft es von selbst zurueck.
   Steht die Seite still, atmet das Bild langsam weiter.
   ============================================================ */
.fenster{
  position:relative;overflow:hidden;
  height:clamp(320px,46vw,560px);
  border-block:1px solid var(--line);
}
.fenster .bg{
  position:absolute;inset:0;z-index:0;
  animation:fenster-atmen 26s ease-in-out infinite alternate;
}
.fenster .bg i{
  position:absolute;inset:-14%;display:block;
  background-size:cover;background-position:center;
  transform:scale(var(--z,1.06)) translate3d(calc(var(--dx,0)*1%),0,0);
  will-change:transform;
  filter:grayscale(calc(1 - var(--dev,1)*.9)) contrast(1.04) brightness(calc(.9 + var(--dev,1)*.14));
}
@keyframes fenster-atmen{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.045) translate3d(-1.2%,0.8%,0)}
}
.fenster .ton{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg, #17427E, #0D1826 70%);
  mix-blend-mode:multiply;
  opacity:calc(.82 - var(--dev,1)*.5);
}
/* Bleibende Abdunklung unten links, unabhaengig von der Entwicklung —
   sonst steht die weisse Schrift am Ende auf hellem Foto. */
.fenster::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(75deg, rgba(13,24,38,.62) 0%, rgba(13,24,38,.26) 44%, rgba(13,24,38,0) 68%),
    linear-gradient(0deg, rgba(13,24,38,.58), rgba(13,24,38,0) 58%);
}
.fenster .wrap{height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(24px,3.4vw,48px);position:relative;z-index:3}
.fenster-copy{color:#fff;max-width:640px}
.fenster-copy .gross{
  display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 116;
  font-weight:700;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(2.6rem,7.2vw,5.6rem);
  color:#fff;text-shadow:0 2px 26px rgba(13,24,38,.45);
}
.fenster-copy p{
  margin:14px 0 0;font-size:clamp(.95rem,1.2vw,1.08rem);color:rgba(255,255,255,.88);
  max-width:44ch;text-shadow:0 1px 14px rgba(13,24,38,.5);
}
.fenster-copy .mono{color:rgba(255,255,255,.65);display:block;margin-bottom:12px}
@media (prefers-reduced-motion: reduce){
  .fenster .bg{animation:none}
  .fenster .bg i{transform:none;filter:none}
  .fenster .ton{opacity:.4}
}


/* ============================================================
   Der Durchgang — das Bild beginnt als gerahmtes Fenster mitten
   im Raster und waechst beim Scrollen bildschirmfuellend auf.
   Die Sektion ist hoeher als der Bildschirm; waehrend man sie
   durchscrollt, klebt der Inhalt (sticky) und --gp laeuft 0..1.
   Der Ausschnitt selbst ist ein clip-path — billig fuer die
   Grafikkarte, das Bild darunter bleibt ruhig.
   ============================================================ */
.durchgang{position:relative;height:240vh}
.dg-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.dg-bild{
  position:absolute;inset:0;
  clip-path:inset(calc((1 - var(--gp,1))*26%) calc((1 - var(--gp,1))*32%));
}
.dg-bild i{
  position:absolute;inset:-6%;display:block;
  background-size:cover;background-position:center;
  transform:scale(calc(1.14 - var(--gp,1)*.12));
  filter:grayscale(calc(.85 - var(--gp,1)*.85)) brightness(calc(.92 + var(--gp,1)*.1));
  will-change:transform;
}
/* Helle Motive brauchen mehr Grund unter der Schrift — sonst kaempft Weiss
   auf Weiss. Zwei Verlaeufe: einer von unten, einer von links. */
.dg-bild::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(13,24,38,.76), rgba(13,24,38,.10) 58%),
    linear-gradient(75deg, rgba(13,24,38,.54) 0%, rgba(13,24,38,.14) 46%, rgba(13,24,38,0) 70%);
}
.dg-lbl{
  position:absolute;top:calc(26% - 34px);left:32%;
  color:var(--ink-3);opacity:calc(1 - var(--gp,1)*2.5);
}
.dg-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 clamp(20px,4.2vw,64px) clamp(28px,4vw,56px);
  opacity:calc((var(--gp,1) - .72)/.28);
  transform:translateY(calc((1 - var(--gp,1))*30px));
}
@media (prefers-reduced-motion: reduce){
  .durchgang{height:auto}
  .dg-sticky{position:relative;height:clamp(340px,52vw,620px)}
  .dg-bild{clip-path:none}
  .dg-bild i{transform:none;filter:none}
  .dg-copy{opacity:1;transform:none}
  .dg-lbl{display:none}
}

/* ============================================================
   Die Streifen — das Bild ist in senkrechte Latten zerlegt, die
   beim Heranscrollen aus Versatz und Grau zusammenfahren.
   Die Streifen baut effects.js; ohne JS steht das ganze Bild
   als normaler Hintergrund da.
   ============================================================ */
.streifen{position:relative;overflow:hidden;height:clamp(340px,48vw,580px);border-block:1px solid var(--line)}
.st-bild{position:absolute;inset:0;background-size:cover;background-position:center}
.st-bild.gebaut{background:none}
.st-bild i{
  position:absolute;top:-4%;bottom:-4%;display:block;
  background-size:auto 100%;
  transform:translateY(calc((1 - var(--sp,1)) * var(--vz,0) * 1px));
  filter:grayscale(calc(1 - var(--sp,1)));
  opacity:calc(.25 + var(--sp,1)*.75);
  will-change:transform;
}
.streifen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(75deg, rgba(13,24,38,.55) 0%, rgba(13,24,38,.16) 46%, rgba(13,24,38,0) 70%);
}
.streifen .wrap{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(24px,3.4vw,48px)}
@media (prefers-reduced-motion: reduce){
  .st-bild i{transform:none;filter:none;opacity:1}
}

/* Abschluss: das Planungs-Foto als kaum sichtbare Textur */
.close-cta{position:relative;overflow:hidden}
.close-cta .textur{
  position:absolute;inset:0;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:.1;filter:grayscale(1) contrast(1.1);
  mix-blend-mode:screen;
}
.close-cta .wrap{position:relative;z-index:1}


/* ============================================================
   Drei Spielarten des Bildfensters — je Band ein eigener Auftritt.
   data-art="vorhang" : zwei Blatthaelften schieben sich auf (--vp 0..1)
   data-art="zeiger"  : ein Uhrzeiger entwickelt das Bild rundum (--zg 0..1)
   data-art="kippen"  : das Blatt liegt flach und richtet sich auf (--kp 0..1)
   ============================================================ */

/* --- Vorhang ------------------------------------------------ */
.fenster[data-art="vorhang"] .vorhang{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fenster[data-art="vorhang"] .vorhang::before,
.fenster[data-art="vorhang"] .vorhang::after{
  content:"";position:absolute;top:-1px;bottom:-1px;width:51%;
  background:var(--ground);
}
.fenster[data-art="vorhang"] .vorhang::before{
  left:0;border-right:1px solid var(--line);
  transform:translate3d(calc(var(--vp,1)*-103%),0,0);
}
.fenster[data-art="vorhang"] .vorhang::after{
  right:0;border-left:1px solid var(--line);
  transform:translate3d(calc(var(--vp,1)*103%),0,0);
}

/* --- Zeiger ------------------------------------------------- */
/* Grundlage bleibt blaugrau; die Farbschicht darueber wird von
   einer Kreisblende freigegeben, die mit dem Zeiger mitlaeuft. */
.fenster[data-art="zeiger"] .bg i{filter:grayscale(.88) contrast(1.04) brightness(.92)}
.fenster[data-art="zeiger"] .bg .farbe{
  filter:none;z-index:1;
  -webkit-mask-image:conic-gradient(from 0deg at 50% 50%, #000 calc(var(--zg,1)*1turn), transparent 0);
  mask-image:conic-gradient(from 0deg at 50% 50%, #000 calc(var(--zg,1)*1turn), transparent 0);
}
.fenster[data-art="zeiger"] .ton{opacity:calc(.5 - var(--dev,1)*.28)}

/* --- Kippen ------------------------------------------------- */
.fenster[data-art="kippen"]{perspective:1100px}
.fenster[data-art="kippen"] .bg{
  animation:none;
  transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--kp,1))*38deg)) scale(calc(.9 + var(--kp,1)*.1));
  will-change:transform;
}
/* Die Platte darf nicht ueberstehen, sonst sieht man die Neigung nicht:
   erst die zurueckweichenden Kanten machen die Drehung lesbar. */
.fenster[data-art="kippen"] .bg i{inset:0}
.fenster[data-art="kippen"]::before{
  content:"";position:absolute;left:6%;right:6%;bottom:0;height:14%;z-index:0;
  background:radial-gradient(50% 100% at 50% 100%, rgba(13,24,38,calc(.5 - var(--kp,1)*.4)), transparent 70%);
}

@media (prefers-reduced-motion: reduce){
  .fenster[data-art="vorhang"] .vorhang{display:none}
  .fenster[data-art="zeiger"] .bg .farbe{-webkit-mask-image:none;mask-image:none}
  .fenster[data-art="kippen"] .bg{transform:none}
}


/* ============================================================
   Der Abschluss mit Blende — eine Kreisblende oeffnet sich aus
   der Mitte und gibt das Bild frei (--ir 0..1, setzt effects.js).
   Sechste Spielart, bewusst anders als die fuenf davor: kein
   Schieben, kein Kippen, sondern ein Aufgehen.
   ============================================================ */
.close-cta{ position:relative;overflow:hidden }
.close-bild{ position:absolute;inset:0;z-index:0;pointer-events:none }
.close-bild i{
  position:absolute;inset:-8%;display:block;
  background-size:cover;background-position:center;
  clip-path:circle(calc(var(--ir,1) * 86%) at 50% 58%);
  filter:grayscale(calc(1 - var(--ir,1)*.85)) brightness(calc(.52 + var(--ir,1)*.3));
  transform:scale(calc(1.18 - var(--ir,1)*.14));
  will-change:transform,clip-path;
}
/* Ein Ring auf der Blendenkante, solange sie sich oeffnet */
.close-bild::after{
  content:"";position:absolute;left:50%;top:58%;translate:-50% -50%;
  width:calc(var(--ir,1) * 172%);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--accent);
  opacity:calc(.55 - max(0, var(--ir,1) - .82) * 3);
}
.close-cta > .wrap{ position:relative;z-index:2 }
.close-cta::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(75deg, rgba(13,24,38,.72) 0%, rgba(13,24,38,.34) 46%, rgba(13,24,38,.12) 72%),
    linear-gradient(0deg, rgba(13,24,38,.60), rgba(13,24,38,.18) 62%);
}
@media (prefers-reduced-motion: reduce){
  .close-bild i{ clip-path:none;transform:none;filter:none;opacity:.35 }
  .close-bild::after{ display:none }
}


/* ============================================================
   Siebte Spielart · Faecher — waagerechte Lamellen fahren
   abwechselnd von links und rechts ein und schliessen sich zum
   Bild. Gegenstueck zu den senkrechten Streifen.
   ============================================================ */
.faecher{position:relative;overflow:hidden;height:clamp(340px,48vw,580px);border-block:1px solid var(--line)}
.fa-bild{position:absolute;inset:0;background-size:cover;background-position:center}
.fa-bild.gebaut{background:none}
.fa-bild i{
  position:absolute;left:-4%;right:-4%;display:block;
  background-size:100% auto;
  transform:translateX(calc((1 - var(--fp,1)) * var(--hz,0) * 1px));
  filter:grayscale(calc(1 - var(--fp,1)));
  opacity:calc(.22 + var(--fp,1)*.78);
  will-change:transform;
}
.faecher::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(75deg,rgba(13,24,38,.58) 0%,rgba(13,24,38,.18) 46%,rgba(13,24,38,0) 70%);
}
.faecher .wrap{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(24px,3.4vw,48px)}

/* ============================================================
   Achte Spielart · Rollo — das Bild rollt sich von oben ab.
   Der Kasten waechst in der Hoehe, das Bild darin wird gegen-
   skaliert, damit nichts gestaucht wirkt. An der Kante laeuft
   eine Rolle mit.
   ============================================================ */
/* Das Rollo braucht Standzeit: als kurzes Band war es fertig aufgerollt,
   bevor es ueberhaupt in der Mitte des Bildschirms stand. Deshalb laeuft
   es jetzt wie der Durchgang ueber eine hohe Sektion mit haftendem Kern. */
.rollo{position:relative;height:170vh;border-block:1px solid var(--line);background:var(--ground-2)}
.ro-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--deep)}
.ro-bild{
  position:absolute;left:0;right:0;top:0;height:100%;overflow:hidden;
  transform-origin:50% 0;transform:scaleY(var(--rp,1));
  will-change:transform;
}
/* Die Unterkante des Rollos: ein schmaler Schatten, damit die Bahn eine
   Kante hat und nicht einfach abgeschnitten wirkt. Kein Farbstrich. */
.ro-bild::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;z-index:2;
  transform:scaleY(calc(1 / max(var(--rp,1), .05)));transform-origin:50% 100%;
  background:linear-gradient(to bottom,rgba(13,24,38,0),rgba(13,24,38,.55));
  opacity:calc(1 - max(0, var(--rp,1) - .88) * 8.3);pointer-events:none;
}
.ro-bild i{
  position:absolute;inset:0;display:block;background-size:cover;background-position:center;
  transform-origin:50% 0;
  transform:scaleY(calc(1 / max(var(--rp,1), .05)));
  filter:grayscale(calc(1 - var(--rp,1)*.92)) brightness(calc(.9 + var(--rp,1)*.12));
}
.ro-sticky::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(13,24,38,.72) 0%,rgba(13,24,38,.34) 34%,rgba(13,24,38,0) 62%),
    linear-gradient(75deg,rgba(13,24,38,.62) 0%,rgba(13,24,38,.22) 48%,rgba(13,24,38,0) 72%);
}
.ro-sticky .wrap{position:relative;z-index:3;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(24px,4vw,64px)}

@media (prefers-reduced-motion: reduce){
  .fa-bild i{transform:none;filter:none;opacity:1}
  .ro-bild{transform:none}
  .ro-bild i{transform:none;filter:none}
}


/* ============================================================
   Zehnte Spielart · Farbauszug — nur der Design-Service.
   Das Bild kommt als drei versetzte Farbauszuege an (Cyan, Magenta,
   Gelb) und faehrt in den Stand, wie eine Druckmaschine, die die
   Platten justiert. Passt zur Seite, auf der es um Gestaltung geht,
   und laeuft nirgendwo sonst. Steuert --fa 0..1 aus effects.js.
   ============================================================ */
.farbauszug{position:relative;height:170vh;border-block:1px solid var(--line);background:#fff}
.fa-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff}
.fa-platten{position:absolute;inset:0;overflow:hidden}
.fa-platten i{
  position:absolute;inset:0;display:block;
  background-size:cover;background-position:center;
  will-change:transform,opacity;
}
/* Echte Kanaltrennung statt Farbfilter-Bastelei.
   screen(Bild, Cyan) ergibt (R,1,1) — eine Platte, die beim
   Multiplizieren nur den Rotkanal durchlaesst. Magenta ergibt (1,G,1),
   Gelb (1,1,B). Multipliziert man die drei deckungsgleich, kommt exakt
   das Ausgangsbild heraus; versetzt man sie, entsteht der Passerfehler
   einer schlecht justierten Druckmaschine. */
.fa-platten i.platte{
  mix-blend-mode:multiply;
  background-size:cover,cover;
  background-position:center,center;
  background-blend-mode:screen;
}
.fa-platten i.p-c{
  background-image:linear-gradient(#00ffff,#00ffff),var(--bild);
  transform:translate3d(calc((1 - var(--fa,1)) * -1.9%), calc((1 - var(--fa,1)) * .9%), 0);
}
.fa-platten i.p-m{
  background-image:linear-gradient(#ff00ff,#ff00ff),var(--bild);
  transform:translate3d(calc((1 - var(--fa,1)) * 1.7%), calc((1 - var(--fa,1)) * -1.05%), 0);
}
.fa-platten i.p-y{
  background-image:linear-gradient(#ffff00,#ffff00),var(--bild);
  transform:translate3d(calc((1 - var(--fa,1)) * .5%), calc((1 - var(--fa,1)) * 1.7%), 0);
}
/* Passermarken an den Ecken, wie auf einem Andruckbogen. */
.fa-passer{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:calc(1 - max(0, var(--fa,1) - .62) * 2.9)}
.fa-passer span{
  position:absolute;width:24px;height:24px;
  background:
    linear-gradient(to right, transparent 45%, rgba(13,24,38,.62) 45%, rgba(13,24,38,.62) 55%, transparent 55%),
    linear-gradient(to bottom, transparent 45%, rgba(13,24,38,.62) 45%, rgba(13,24,38,.62) 55%, transparent 55%);
}
.fa-passer span:nth-child(1){top:24px;left:24px}
.fa-passer span:nth-child(2){top:24px;right:24px}
.fa-passer span:nth-child(3){bottom:24px;left:24px}
.fa-passer span:nth-child(4){bottom:24px;right:24px}
.fa-sticky::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(13,24,38,.80) 0%,rgba(13,24,38,.38) 38%,rgba(13,24,38,0) 66%),
    linear-gradient(78deg,rgba(13,24,38,.60) 0%,rgba(13,24,38,.16) 52%,rgba(13,24,38,0) 76%);
}
.fa-sticky .wrap{position:relative;z-index:3;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(24px,4vw,64px)}

@media (prefers-reduced-motion: reduce){
  .fa-platten i.platte{transform:none}
  .fa-passer{display:none}
}


/* ============================================================
   Neunte Spielart · Aufmass — das Bild kommt als technische
   Zeichnung an und wird zur Fotografie gewischt. An der Grenze
   laeuft eine Messkante mit, unten ein Massband, das mitfuellt.
   Traegt den Namen der ganzen Gestaltungsrichtung; deshalb
   bleibt sie dem Handwerk vorbehalten.
   ============================================================ */
.aufmass{position:relative;overflow:hidden;height:clamp(340px,48vw,580px);border-block:1px solid var(--line)}
.am-bild{position:absolute;inset:0}
.am-bild i{position:absolute;inset:0;display:block;background-size:cover;background-position:center}
/* Die Zeichnung: ausgewaschen und hart, damit nur die Kanten stehen
   bleiben — invertieren waere ein Negativ, keine Zeichnung. */
.am-bild i.riss{ filter:grayscale(1) brightness(1.52) contrast(2.9) }
/* Blaustich, aber nur ueber dem Teil, der noch Zeichnung ist */
.am-bild::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--brand);mix-blend-mode:multiply;opacity:.3;
  clip-path:inset(0 0 0 calc(var(--ap,1) * 100%));
}
/* das Foto wird von links darueber gewischt */
.am-bild i.foto{ clip-path:inset(0 calc((1 - var(--ap,1)) * 100%) 0 0) }
.am-kante{
  position:absolute;top:0;bottom:0;left:calc(var(--ap,1) * 100%);width:1px;z-index:2;
  background:var(--accent);
  opacity:calc(.95 - max(0, var(--ap,1) - .9) * 9);
}
.am-kante::before{
  content:attr(data-mass);
  position:absolute;top:14px;left:10px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
.am-skala{
  position:absolute;left:0;bottom:0;height:20px;z-index:2;
  width:calc(var(--ap,1) * 100%);
  background-image:repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 26px);
  opacity:.55;
}
.aufmass::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(75deg,rgba(13,24,38,.6) 0%,rgba(13,24,38,.2) 46%,rgba(13,24,38,0) 70%);
}
.aufmass .wrap{position:relative;z-index:3;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(24px,3.4vw,48px)}
@media (prefers-reduced-motion: reduce){
  .am-bild i.riss{display:none}
  .am-bild i.foto{clip-path:none}
  .am-kante,.am-skala{display:none}
}