/* =========================================================
   Pius Kleiner | Webdesign & Entwicklung
   Schriften lokal eingebunden, keine externen Verbindungen.
   Lizenzen: assets/fonts/OFL.txt
   ========================================================= */

@font-face{
  font-family:'Manrope';
  font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;font-weight:400;font-display:swap;
  src:url('../assets/fonts/instrumentserif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}

:root{
  /* Graphit und Weiß seit 01.11.2026, vorher Elfenbein #eadcbc auf Navy #0a1730,
     davor Kupfer #ea8a5b auf Braunschwarz #0c0806 und Bernstein #feba3e auf Blauschwarz #07080b */
  --bg:#121315;
  --bg-soft:#16171a;
  --bg-card:#1c1d21;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.2);
  --text:#ededee;
  --hell:#ffffff;         /* Überschriften und starke Schrift */
  --muted:#a3a5ab;
  --platzhalter:#8d8f96;  /* Platzhalter in Feldern */
  --key:#ffffff;
  --key-dim:rgba(255,255,255,.1);
  --key-rgb:255,255,255;  /* Weiß als Zahlen für rgba() */
  --key-hell:#dcdcde;     /* Weiß leicht gedämpft, für Hover */
  --auf-key:#121315;      /* Schrift auf Weiß */
  --flaeche:28,29,33;     /* Glasfläche der Leiste */
  --geraet:#08090a;       /* Rahmen der Geräte in den Szenen */
  --scharnier:#303136;    /* Unterkante des Rechners */
  --schirm:#0c0d0f;       /* Leerer Bildschirm im Film */
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,'Roboto Mono',monospace;
  --transition:380ms cubic-bezier(.2,.7,.3,1);
  --radius:16px;
  --wrap:1200px;
  /* Abstandsstufen im 8er-System */
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:40px;--s-6:64px;--s-7:104px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:120px;}

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

img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.center{text-align:center;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--key);color:var(--auf-key);padding:12px 20px;font-weight:700;}
.skip-link:focus{left:0;}

/* ---------- Typografie ---------- */
.h2{
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.05;
  letter-spacing:-0.035em;
  font-weight:800;
  color:var(--hell);
  margin:0 0 20px;
  text-wrap:balance;
}
.serif{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.01em;
}
.key{color:var(--key);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;
  font-weight:700;font-size:15px;
  border:1px solid transparent;cursor:pointer;
  transition:var(--transition);
}
.btn--key{background:var(--key);color:var(--auf-key);}
.btn--key:hover{background:var(--key-hell);transform:translateY(-2px);}
.btn--ghost{border-color:var(--line-strong);color:var(--text);}
.btn--ghost:hover{border-color:var(--key);color:var(--key);}
.btn--sm{padding:10px 20px;font-size:14px;}
.btn--block{width:100%;}

/* ---------- Schwebende Navigation ---------- */
.nav{
  position:fixed;top:18px;left:0;right:0;z-index:100;
  display:flex;justify-content:center;
  pointer-events:none;
  padding:0 16px;
}
.nav__inner{
  pointer-events:auto;
  display:flex;align-items:center;gap:6px;
  padding:7px 7px 7px 20px;
  background:rgba(var(--flaeche),.82);
  backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
}
.nav__brand{
  font-weight:800;font-size:14px;letter-spacing:-0.01em;
  margin-right:12px;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
}
.nav__dot{width:7px;height:7px;border-radius:50%;background:var(--key);flex:none;}
.nav__links{display:flex;align-items:center;gap:2px;}
.nav__links a{
  padding:9px 15px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--muted);
  transition:var(--transition);white-space:nowrap;
}
.nav__links a:hover{color:var(--text);background:rgba(255,255,255,.06);}
.nav__links a.btn{color:var(--auf-key);}

.nav__burger{
  display:none;width:38px;height:38px;border:0;border-radius:999px;
  background:rgba(255,255,255,.07);cursor:pointer;
  padding:11px;flex-direction:column;justify-content:space-between;
}
.nav__burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:var(--transition);}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.hero__glow{
  position:absolute;top:-30%;left:50%;
  transform:translateX(-50%) translateY(var(--schein-y,0));
  will-change:transform;
  width:min(1100px,130vw);height:900px;
  background:radial-gradient(ellipse at center,rgba(var(--key-rgb),.13),transparent 62%);
  pointer-events:none;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  transform:translateY(var(--raster-y,0));
  will-change:transform;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 72%);
  opacity:.55;
}
.hero__inner{
  position:relative;text-align:center;
  transform:translateY(var(--hero-y,0));
  opacity:var(--hero-o,1);
  will-change:transform,opacity;
}

.hero__title{
  font-size:clamp(44px,9vw,120px);
  line-height:.98;
  letter-spacing:-0.045em;
  font-weight:800;
  margin:0 0 30px;
  color:var(--hell);
}
.hero__title .serif{
  font-size:1.06em;
  letter-spacing:-0.02em;
}

.hero__lead{
  font-size:clamp(16px,1.5vw,19px);
  color:var(--muted);
  max-width:600px;
  margin:0 auto 40px;
  text-wrap:balance;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ---------- Abschnitte ---------- */
.section{padding:clamp(70px,9vw,130px) 0;position:relative;}
.section--line{border-top:1px solid var(--line);}

/* Kopf der Leistungen: Überschrift links, Text rechts. Der Text beginnt auf
   derselben Linie wie Zeitleiste und Fragen weiter unten. */
.section__head{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);row-gap:20px;
  align-items:end;align-items:last baseline;
  margin:0 0 clamp(40px,5vw,64px);
}
.section__head .h2{margin:0;padding-right:clamp(30px,5vw,70px);}
.section__lead{font-size:17px;color:var(--muted);margin:0;max-width:520px;padding-left:clamp(30px,5vw,70px);}

/* ---------- Leistungskarten ----------
   Fünf Karten: oben drei, darunter zwei breitere, damit keine Lücke bleibt.
   Bei zwei Spalten geht die letzte Karte über die ganze Breite. */
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
.cards > .card{grid-column:span 2;}
.cards > .card:nth-child(n+4){grid-column:span 3;}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cards > .card,.cards > .card:nth-child(n+4){grid-column:auto;}
  .cards > .card:last-child{grid-column:1 / -1;}
}
@media (max-width:700px){
  .cards{grid-template-columns:1fr;}
  .cards > .card:last-child{grid-column:auto;}
}
.card{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 26px 28px;
  transition:var(--transition);
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(var(--key-rgb),.13),transparent 70%);
  opacity:0;transition:var(--transition);pointer-events:none;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);}
.card:hover::after{opacity:1;}
.card h3{font-size:19px;font-weight:800;color:var(--hell);margin:0 0 9px;letter-spacing:-0.01em;}
.card > p{margin:0;font-size:15px;color:var(--muted);line-height:1.6;}

/* ---------- Szenen auf den Leistungskarten ----------
   Statt eines Symbols zeigt jede Karte oben ein kleines Stück echten Inhalt,
   nur aus Text und CSS. Balken und Antwort erscheinen, sobald die Karte
   eingeblendet ist. Ohne JavaScript ist alles sofort da. */
.card__szene{
  height:138px;margin-bottom:22px;
  display:flex;flex-direction:column;justify-content:center;
  padding:16px 18px;
  background:var(--bg);
  border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
  transition:border-color var(--transition);
}
.card:hover .card__szene{border-color:rgba(var(--key-rgb),.3);}

/* Webdesign: dieselbe Startseite am Rechner und auf dem Handy */
.szene-geraete{flex-direction:row;align-items:flex-end;justify-content:center;gap:16px;}
.geraet{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--bg-card);border:1px solid var(--line-strong);
  text-align:center;color:var(--hell);
}
.geraet--rechner{position:relative;width:150px;height:88px;margin-bottom:6px;border-radius:7px;padding:0 12px;}
.geraet--rechner::after{
  content:"";position:absolute;left:-14px;right:-14px;bottom:-7px;height:5px;
  border-radius:1px 1px 5px 5px;background:var(--line-strong);
}
.geraet--handy{width:52px;height:98px;border-radius:10px;padding:0 5px;}
.geraet__titel{font-weight:800;line-height:1.05;letter-spacing:-0.03em;}
.geraet__titel em{display:block;font-family:var(--serif);font-weight:400;letter-spacing:0;color:var(--key);}
.geraet--rechner .geraet__titel{font-size:13px;}
.geraet--handy .geraet__titel{font-size:7.5px;}
.geraet__text{font-size:5.5px;line-height:1.3;color:var(--muted);}
.geraet__knopf{width:32px;height:7px;border-radius:999px;background:var(--key);}
.geraet--handy .geraet__knopf{width:100%;height:6px;}

/* Webentwicklung: Gewicht dieser Startseite neben dem Durchschnitt im Netz */
.szene-gewicht{gap:16px;}
.gewicht{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:8px;}
.gewicht__zahl{font-size:20px;font-weight:800;line-height:1;letter-spacing:-0.02em;color:var(--key);white-space:nowrap;}
.gewicht--schnitt .gewicht__zahl{color:var(--hell);}
.gewicht__name{font-size:13px;color:var(--muted);}
.gewicht__balken{
  grid-column:1 / -1;
  width:calc(var(--anteil,1) * 100%);min-width:6px;height:4px;border-radius:2px;
  background:var(--key);
  transform-origin:0 50%;
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1) .3s;
}
.gewicht--schnitt .gewicht__balken{background:var(--line-strong);}
.js .card:not(.is-visible) .gewicht__balken{transform:scaleX(0);}

/* Impressum und Datenschutz: zwei eigene Seiten mit ihrer ersten Überschrift */
.szene-seiten{flex-direction:row;align-items:center;justify-content:center;gap:12px;}
.blatt{
  display:flex;flex-direction:column;gap:6px;
  width:108px;height:104px;padding:12px 10px;
  background:var(--bg-card);border:1px solid var(--line-strong);border-radius:8px;
  font-size:9.5px;line-height:1.35;color:var(--muted);
}
.blatt b{font-size:12px;font-weight:800;letter-spacing:-0.01em;color:var(--hell);}

/* Hosting und Domain: die eigene Adresse */
.szene-adresse{align-items:center;}
.adresse{
  display:flex;align-items:center;gap:11px;
  padding:12px 20px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--line-strong);
  font-size:15px;font-weight:700;color:var(--hell);white-space:nowrap;
}
.adresse__vorne{font-weight:500;color:var(--muted);}
.adresse__schloss{position:relative;flex:none;width:11px;height:8px;margin-top:5px;border-radius:2px;background:var(--key);}
.adresse__schloss::before{
  content:"";position:absolute;left:2px;right:2px;bottom:100%;height:5px;
  border:1.5px solid var(--key);border-bottom:0;border-radius:4px 4px 0 0;
}

/* Änderungen später: kurze Nachricht, kurze Antwort */
.szene-nachricht{gap:8px;}
.blase{
  align-self:flex-start;max-width:86%;
  padding:8px 12px;border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.07);
  font-size:13px;line-height:1.4;color:var(--text);
}
.blase--antwort{
  align-self:flex-end;
  border-radius:14px 14px 4px 14px;
  background:var(--key);color:var(--auf-key);font-weight:700;
  transition:opacity 500ms ease 900ms,transform 500ms cubic-bezier(.2,.7,.3,1) 900ms;
}
.js .card:not(.is-visible) .blase--antwort{opacity:0;transform:translateY(8px);}

/* ---------- Zweispaltig: Ablauf und Häufige Fragen ----------
   Links bleibt die Überschrift stehen, rechts läuft der Inhalt. */
.ablauf,.faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;}
.ablauf__kopf,.faq__kopf{position:sticky;top:120px;padding-right:clamp(30px,5vw,70px);}
.ablauf__kopf p,.faq__kopf p{color:var(--muted);margin:0;max-width:380px;}
.ablauf .steps,.faq__liste{padding-left:clamp(30px,5vw,70px);}

@media (max-width:1024px){
  .ablauf,.faq{grid-template-columns:1fr;}
  .ablauf__kopf,.faq__kopf{position:static;padding-right:0;margin-bottom:30px;}
  .ablauf .steps,.faq__liste{padding-left:0;}
}

/* ---------- Ablauf als Zeitleiste ----------
   Eine senkrechte Linie verbindet die Kreise. Jedes Stück läuft vom eigenen
   Kreis bis zum nächsten und füllt sich beim Scrollen in Weiß
   (main.js setzt --fuellung). Ein Kreis leuchtet auf, sobald die Füllung
   ihn erreicht. Ohne JavaScript ist alles gefüllt. */
.steps{display:grid;}
.step{
  --kreis:44px;
  display:grid;
  grid-template-columns:var(--kreis) 1fr;
  column-gap:26px;row-gap:6px;
  padding-bottom:46px;
  position:relative;isolation:isolate;
}
.step:last-child{padding-bottom:0;}
.step:not(:last-child)::before,
.step:not(:last-child)::after{
  content:"";position:absolute;
  left:calc(var(--kreis) / 2 - .5px);width:1px;
  top:calc(var(--kreis) / 2);bottom:calc(var(--kreis) / -2);
  pointer-events:none;
}
.step:not(:last-child)::before{background:var(--line-strong);}
.step:not(:last-child)::after{
  background:linear-gradient(180deg,rgba(var(--key-rgb),.35),var(--key));
  transform-origin:50% 0;
}
.js .step:not(:last-child)::after{transform:scaleY(var(--fuellung,0));}
.step__num{
  grid-column:1;grid-row:1 / span 2;
  position:relative;z-index:1;
  width:var(--kreis);height:var(--kreis);border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--key);
  background:linear-gradient(var(--key-dim),var(--key-dim)),var(--bg);
  border:1px solid var(--key);
  box-shadow:0 0 0 6px rgba(var(--key-rgb),.07);
  transition:color 500ms ease,border-color 500ms ease,background 500ms ease,box-shadow 500ms ease;
}
.js .step:not(.is-erreicht) .step__num{
  color:var(--muted);
  background:var(--bg);
  border-color:var(--line-strong);
  box-shadow:0 0 0 6px rgba(var(--key-rgb),0);
}
.step h3{
  grid-column:2;
  font-size:21px;font-weight:800;color:var(--hell);margin:0;letter-spacing:-0.015em;
  line-height:1.25;padding-top:calc((var(--kreis) - 1.25em) / 2);
}
.step p{grid-column:2;margin:0;font-size:15px;color:var(--muted);line-height:1.65;max-width:560px;}

@media (max-width:560px){
  .step{--kreis:38px;column-gap:18px;padding-bottom:34px;}
  .step h3{font-size:19px;}
}

/* ---------- Häufige Fragen ----------
   Links die Überschrift, rechts die Fragen zum Aufklappen, dazwischen eine
   feine Linie. Es ist immer nur eine Antwort offen. Ohne JavaScript stehen
   alle Antworten offen da. */
.faq__liste{border-left:1px solid var(--line);}
.faq__eintrag + .faq__eintrag{border-top:1px solid var(--line);}
.faq__eintrag h3{margin:0;}
.faq__frage{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-0.01em;
  color:var(--hell);text-align:left;
  transition:color var(--transition);
}
.faq__frage:hover{color:var(--key);}
.faq__frage:focus-visible{outline:2px solid var(--key);outline-offset:4px;border-radius:6px;}
.faq__zeichen{
  position:relative;flex:none;width:14px;height:14px;
  color:var(--muted);
  transition:transform var(--transition),color var(--transition);
}
.faq__zeichen::before,
.faq__zeichen::after{
  content:"";position:absolute;left:0;top:50%;
  width:100%;height:1.5px;margin-top:-.75px;
  background:currentColor;border-radius:2px;
}
.faq__zeichen::after{transform:rotate(90deg);}
.faq__eintrag.is-offen .faq__zeichen{transform:rotate(45deg);color:var(--key);}
.faq__antwort{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows var(--transition),visibility 0s;
}
.faq__antwort > div{overflow:hidden;}
.faq__antwort p{margin:0;padding:0 34px 24px 0;font-size:16px;color:var(--muted);}
.js .faq__eintrag:not(.is-offen) .faq__antwort{
  grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--transition),visibility 0s 380ms;
}

@media (max-width:1024px){
  .faq__liste{border-left:0;border-top:1px solid var(--line);}
}
@media (max-width:560px){
  .faq__frage{font-size:16px;padding:19px 0;}
  .faq__antwort p{padding-right:0;font-size:15px;}
}

/* ---------- Kontakt ---------- */
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px);align-items:start;}
.contact__text p{color:var(--muted);max-width:440px;}
.contact__list{margin-top:34px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.contact__list li{background:var(--bg);padding:16px 20px;display:flex;flex-direction:column;gap:3px;}
.contact__label{font-size:13px;font-weight:600;color:var(--muted);}
.contact__list a,.contact__list li>span:last-child{font-size:17px;font-weight:700;color:var(--hell);transition:var(--transition);}
.contact__list a:hover{color:var(--key);}

.form{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);
}
.form__row{margin-bottom:16px;}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form__row label{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.form input,.form select,.form textarea{
  width:100%;padding:13px 15px;
  font-family:inherit;font-size:15px;color:var(--text);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  transition:var(--transition);
}
.form textarea{resize:vertical;min-height:112px;}
.form input::placeholder,.form textarea::placeholder{color:var(--platzhalter);}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--key);background:var(--bg-soft);
}
.form input.is-error,.form textarea.is-error{border-color:#e65757;}
.form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

.form__check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--muted);margin:4px 0 20px;cursor:pointer;
}
.form__check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--key);}
.form__check a{text-decoration:underline;color:var(--text);}
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form__note{margin:13px 0 0;font-size:14px;font-weight:600;text-align:center;min-height:20px;}
.form__note.is-ok{color:#4ade80;}
.form__note.is-err{color:#f87171;}

/* ---------- Anruf-Knopf (nur schmale Bildschirme) ----------
   Erscheint erst unterhalb des Hero-Bereichs und verschwindet wieder
   beim Kontaktbereich und im Footer, dort steht die Nummer ohnehin. */
.anruf{display:none;}
@media (max-width:860px){
  .anruf{
    position:fixed;z-index:90;
    right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    display:inline-flex;align-items:center;gap:9px;
    padding:13px 20px 13px 16px;border-radius:999px;
    background:var(--key);color:var(--auf-key);
    font-weight:800;font-size:15px;line-height:1;
    box-shadow:0 12px 30px rgba(0,0,0,.5);
    transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
  }
  .anruf svg{width:19px;height:19px;stroke-linecap:round;stroke-linejoin:round;}
  .js .anruf{opacity:0;visibility:hidden;transform:translateY(16px);}
  .js .anruf.is-sichtbar{opacity:1;visibility:visible;transform:none;}
}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:56px 0 24px;}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:40px;}
.footer__mark{
  display:inline-grid;place-items:center;
  width:38px;height:38px;
  border:1px solid var(--line-strong);border-radius:10px;
  font-size:13px;font-weight:800;letter-spacing:-0.01em;color:var(--key);
}
.footer__brand p{margin:14px 0 0;font-size:14px;color:var(--muted);max-width:270px;}
.footer__col h4,.footer__col h2{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 12px;}
.footer__col a{display:block;font-size:14px;color:var(--text);padding:5px 0;transition:var(--transition);}
.footer__col a:hover{color:var(--key);}
.footer__bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.footer__bottom p{margin:0;}
.footer__bottom a:hover{color:var(--key);}

/* ---------- Unterseiten ---------- */
.legal{padding:150px 0 90px;}
.legal__inner{max-width:760px;}
.legal h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-0.035em;color:var(--hell);margin:0 0 26px;}
.legal h2{font-size:19px;font-weight:800;color:var(--hell);margin:36px 0 11px;letter-spacing:-0.01em;}
.legal p{margin:0 0 13px;color:var(--muted);}
.legal ul{list-style:none;padding:0;margin:0 0 13px;}
.legal ul li{padding-left:20px;position:relative;margin-bottom:6px;color:var(--muted);}
.legal ul li::before{content:"→";position:absolute;left:0;color:var(--key);}
.legal a{color:var(--text);text-decoration:underline;}
.legal a:hover{color:var(--key);}
.legal code{font-family:var(--mono);font-size:.9em;color:var(--key);}

.todo{
  background:var(--key-dim);
  border:1px solid rgba(var(--key-rgb),.35);
  border-radius:12px;padding:17px 20px;margin:0 0 30px;
  font-size:14px;color:var(--text);
}
.todo strong{color:var(--key);}
.placeholder{
  background:rgba(255,255,255,.05);
  border:1px dashed var(--line-strong);
  border-radius:5px;padding:2px 7px;color:var(--text);font-weight:600;
}

/* ---------- Einblenden ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 800ms ease,transform 800ms cubic-bezier(.2,.7,.3,1);}
.js .reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .section__head{grid-template-columns:1fr;}
  .section__head .h2{padding-right:0;}
  .section__lead{padding-left:0;}
  .contact__inner{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
  .nav__burger{display:flex;}
  .nav__inner{width:100%;justify-content:space-between;border-radius:26px;padding:9px 9px 9px 18px;}
  .nav__links{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(var(--flaeche),.97);backdrop-filter:blur(16px);
    border:1px solid var(--line);border-radius:18px;
    padding:9px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:var(--transition);
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none;}
  .nav__links a{padding:13px 16px;text-align:center;}
  .nav__cta{margin-top:4px;}
  .hero{min-height:auto;padding:130px 0 70px;}
}

@media (max-width:560px){
  body{font-size:16px;}
  .form__grid{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr;gap:26px;}
  .btn{width:100%;}
  .footer__bottom{justify-content:flex-start;}
}

/* Knoepfe auf den Unterseiten: die Unterstreichung aus .legal a gilt fuer
   Fliesstext, nicht fuer Schaltflaechen. Farben ebenfalls zurueckholen. */
.legal .btn{text-decoration:none;}
.legal .btn--key{color:var(--auf-key);}
.legal .btn--ghost{color:var(--text);}

/* =========================================================
   Scroll-Effekte
   ========================================================= */

/* Lesefortschritt */
.fortschritt{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
}
.fortschritt span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--key),var(--key-hell));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* Ueberschriften: jedes Wort klappt aus seiner Huelle hoch.
   Das Polster faengt Unterlaengen und die kursive Serifenschrift ab,
   damit beim Abschneiden nichts verloren geht. */
.js .split .wort{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:.08em .08em .16em;margin:-.08em -.08em -.16em;
}
.js .split .wort > span{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 900ms cubic-bezier(.2,.8,.25,1);
  will-change:transform;
}
.js .split.is-visible .wort > span{transform:none;}


/* Knopf, der leicht zum Zeiger zieht */
.hero__actions .btn--key{transition:transform 260ms cubic-bezier(.2,.8,.25,1),background var(--transition);}

@media (prefers-reduced-motion:reduce){
  /* Nur die Scroll-Werte zuruecksetzen. "transform:none" wuerde hier auch
     die Zentrierung des Lichtscheins aufheben. */
  .hero{--hero-y:0;--hero-o:1;--raster-y:0;--schein-y:0;}
  .js .split .wort > span{transform:none !important;transition:none;}
  .gewicht__balken,.blase--antwort{transition:none;}
  .fortschritt{display:none;}
}



/* =========================================================
   Vorschlag 2: Raster, feste Abstände, kein Kasten im Kasten
   Abstände nur noch in den Stufen --s-1 bis --s-7. Eine Schriftgröße
   pro Ebene: Zwischenüberschriften 20 px, Fließtext 16 px (auf dem
   Handy 18 und 15 px). Überschreibt die Werte weiter oben, damit der
   Block als Ganzes wieder herausgenommen werden kann.
   ========================================================= */
p{text-wrap:pretty;}
.h2{margin-bottom:var(--s-3);}
.hero__title{margin-bottom:var(--s-4);}

.cards{gap:var(--s-3);}
.card{padding:var(--s-4);}
.card__szene{margin-bottom:var(--s-3);border:0;}

.card h3,.step h3,.faq__frage{font-size:20px;}
.card h3{margin-bottom:var(--s-1);}
.card > p,.step p,.faq__antwort p{font-size:16px;}
.step p,.faq__antwort p{max-width:65ch;}

.step{column-gap:var(--s-3);padding-bottom:var(--s-5);}
.faq__frage{padding:var(--s-3) 0;}
.faq__antwort p{padding:0 var(--s-4) var(--s-3) 0;}

.contact__list{margin-top:var(--s-4);}
.form__grid{gap:var(--s-2);}

.footer{padding-top:var(--s-6);}
.footer__inner{gap:var(--s-4);padding-bottom:var(--s-5);}

@media (max-width:560px){
  .card h3,.step h3,.faq__frage{font-size:18px;}
  .card > p,.step p,.faq__antwort p{font-size:15px;}
  .step{column-gap:var(--s-2);padding-bottom:var(--s-4);}
  .faq__frage{padding:var(--s-2) 0;}
  .faq__antwort p{padding-right:0;}
  .footer__inner{gap:var(--s-3);}
  .form__grid{gap:0;}
}


/* =========================================================
   Vorschlag 5: Anfrage in drei Schritten
   Mit JavaScript ist immer nur ein Schritt zu sehen (main.js setzt
   .is-aktiv). Ohne stehen alle untereinander, Fortschritt und die
   Knöpfe „Weiter“ und „Zurück“ bleiben dann verborgen.
   ========================================================= */
.form__schritt{border:0;margin:0;padding:0;min-width:0;}
.form__schritt + .form__schritt{margin-top:var(--s-5);}
.js .form__schritt + .form__schritt{margin-top:0;}
.js .form__schritt:not(.is-aktiv){display:none;}
.js .form__schritt.is-aktiv{animation:schritt-rein 420ms cubic-bezier(.2,.7,.3,1);}
@keyframes schritt-rein{from{opacity:0;transform:translateY(10px);}}

.form__frage{
  padding:0;margin:0 0 var(--s-3);
  font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-0.01em;color:var(--hell);
  outline:none;
}
.form__gruppe{border:0;margin:0 0 var(--s-3);padding:0;min-width:0;}
.form__gruppe legend{padding:0;margin-bottom:var(--s-1);font-size:14px;font-weight:600;color:var(--muted);}

/* Fortschritt: „Schritt 2 von 3“ und drei Striche */
.form__fortschritt{display:none;}
.js .form__fortschritt{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  margin-bottom:var(--s-3);
}
.form__stand{font-size:13px;font-weight:600;color:var(--muted);}
.form__striche{display:flex;gap:6px;}
.form__striche span{width:28px;height:3px;border-radius:2px;background:var(--line-strong);transition:background var(--transition);}
.form__striche span.is-voll{background:var(--key);}

/* Kacheln: Auswahlknöpfe, die als ganze Fläche anklickbar sind */
.kacheln{display:grid;gap:10px;}
.kacheln--klein{grid-template-columns:1fr 1fr;}
.kacheln--klein .kachel:last-child{grid-column:1 / -1;}
.kachel{position:relative;display:block;cursor:pointer;}
.kachel input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.kachel span{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:var(--s-2) 18px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  font-size:15px;font-weight:700;color:var(--text);
  transition:var(--transition);
}
.kachel span::after{
  content:"";flex:none;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line-strong);
  transition:var(--transition);
}
.kacheln--klein .kachel span{padding:12px 14px;font-size:14px;}
.kachel:hover span{border-color:var(--line-strong);}
.kachel input:checked + span{border-color:var(--key);background:linear-gradient(var(--key-dim),var(--key-dim)),var(--bg);color:var(--hell);}
.kachel input:checked + span::after{border-color:var(--key);background:radial-gradient(circle,var(--key) 0 4px,transparent 4.5px);}
.kachel input:focus-visible + span{outline:2px solid var(--key);outline-offset:3px;}
.kacheln.is-error .kachel span{border-color:#e65757;}
@media (max-width:560px){
  .kacheln--klein{grid-template-columns:1fr;gap:8px;}
  .kacheln--klein .kachel span{padding:11px 14px;}
}

/* Weiter und Zurück nur mit JavaScript, Absenden immer */
.form__knoepfe{display:flex;gap:12px;margin-top:var(--s-3);}
.form__knoepfe .btn{width:auto;font-family:inherit;}
.form__knoepfe .btn--ghost{background:none;}
.form__knoepfe .btn--key{flex:1;}
.form [data-weiter],.form [data-zurueck]{display:none;}
.js .form [data-weiter],.js .form [data-zurueck]{display:inline-flex;}
.form__schritt .form__check{margin-bottom:0;}
@media (max-width:560px){
  /* Auf dem Handy untereinander, der Hauptknopf oben */
  .form__knoepfe{flex-direction:column-reverse;}
  .form__knoepfe .btn{width:100%;}
}

/* Nach dem Absenden: Haken und was als Nächstes passiert */
.form.is-fertig .form__schritt,
.form.is-fertig .form__fortschritt,
.form.is-fertig .form__note{display:none;}
.form__fertig{text-align:center;padding:var(--s-6) var(--s-2);outline:none;}
.form__fertig h3{margin:var(--s-3) 0 var(--s-1);font-size:20px;font-weight:800;color:var(--hell);letter-spacing:-0.01em;}
.form__fertig p{margin:0 auto;max-width:36ch;color:var(--muted);}
.form__haken{
  position:relative;display:inline-block;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--key);background:var(--key-dim);
  box-shadow:0 0 0 8px rgba(var(--key-rgb),.07);
  animation:haken-rein 600ms cubic-bezier(.2,.8,.25,1.3);
}
.form__haken::after{
  content:"";position:absolute;left:50%;top:46%;width:18px;height:9px;
  border-left:2px solid var(--key);border-bottom:2px solid var(--key);
  transform:translate(-50%,-50%) rotate(-45deg);
}
@keyframes haken-rein{from{opacity:0;transform:scale(.6);}}


/* =========================================================
   Vorschlag 6: Navigation zeigt den aktiven Abschnitt
   main.js setzt aria-current am Link des Abschnitts in der
   Bildschirmmitte und schiebt .nav__marke dorthin. Beim Scrollen
   (.is-stuck) wird die Leiste etwas kompakter.
   ========================================================= */
.nav__inner{transition:padding var(--transition),background var(--transition),box-shadow var(--transition);}
.nav.is-stuck .nav__inner{
  padding:5px 5px 5px 18px;
  background:rgba(var(--flaeche),.92);
  box-shadow:0 18px 50px rgba(0,0,0,.65);
}
/* Nur am Rechner. Auf dem Handy liegt die Liste als Klappmenü absolut unter der Leiste. */
@media (min-width:861px){.nav__links{position:relative;}}
.nav__links a{position:relative;z-index:1;}
.nav__links a[aria-current]{color:var(--key);}
.nav__links a.btn[aria-current]{color:var(--auf-key);box-shadow:0 0 0 3px rgba(var(--key-rgb),.25);}
.nav__marke{
  position:absolute;left:0;top:0;z-index:0;
  border-radius:999px;background:var(--key-dim);
  opacity:0;pointer-events:none;
  transition:transform var(--transition),width var(--transition),opacity var(--transition);
}
.nav__marke.is-da{opacity:1;}

@media (max-width:860px){
  .nav.is-stuck .nav__inner{padding:7px 7px 7px 16px;}
  .nav__marke{display:none;}
  .nav__links a[aria-current]:not(.btn){background:rgba(255,255,255,.06);}
}


/* =========================================================
   Runde 4, Idee 1: Die Isar statt Raster im Hero
   Fester Ausschnitt von 1600 × 900 in der Mitte des Hero. Beim Laden
   deckt sich die Karte einmal von West nach Ost auf, Landau erscheint,
   wenn die Kante dort ankommt. Das Aufdecken sind zwei gegenläufige
   Verschiebungen, die nur die Grafikkarte rechnet. Eine Linie, die
   sich zeichnet, hätte jedes Bild neu gemalt und die Seite messbar
   gebremst (Lighthouse, Total Blocking Time). Raster und großer
   Lichtschein bleiben ausgeblendet; ohne diesen Block und das SVG in
   index.html kommen sie zurück. Auf schmalen Bildschirmen wird der
   Ausschnitt kleiner und hängt am unteren Rand, damit Landau unter
   den Knöpfen liegt.
   ========================================================= */
.hero__grid,.hero__glow{display:none;}
.isar{
  position:absolute;left:50%;top:50%;
  width:1600px;height:900px;margin:-450px 0 0 -800px;
  transform:translateY(var(--raster-y,0));
  will-change:transform;
  pointer-events:none;
}
.isar__wisch{width:100%;height:100%;overflow:hidden;animation:isar-wisch-aussen 2.4s cubic-bezier(.45,.05,.2,1) .3s both;}
.isar__karte{display:block;width:100%;height:100%;animation:isar-wisch-innen 2.4s cubic-bezier(.45,.05,.2,1) .3s both;}
@keyframes isar-wisch-aussen{from{transform:translateX(-100%);}}
@keyframes isar-wisch-innen{from{transform:translateX(100%);}}
.isar__lauf{fill:none;stroke:url(#isarVerlauf);stroke-width:1.4;stroke-linecap:round;}
/* Auf dem Handy läuft der Fluss hinter dem zweiten Knopf durch */
.hero .btn--ghost{background:var(--bg);}
.isar__ring{fill:none;stroke:var(--key);stroke-opacity:.45;stroke-width:1;}
.isar__punkt{fill:var(--key);}
.isar__ort{fill:var(--muted);font-size:13px;font-weight:600;}

@media (max-width:860px){
  .isar{width:1120px;height:630px;top:auto;bottom:-59px;margin:0;left:calc(50% + 120px - 651px);}
  .isar__lauf{stroke-width:2;}
  .isar__ring{stroke-width:1.4;}
  .isar__ort{font-size:19px;}
}
@media (max-width:560px){
  .isar{width:880px;height:495px;bottom:-36px;left:calc(50% - 65px - 512px);}
  .isar__lauf{stroke-width:2.5;}
  .isar__ring{stroke-width:1.8;}
  .isar__ort{font-size:24px;}
}
@media (prefers-reduced-motion:reduce){
  .isar__wisch,.isar__karte{animation:none;}
}


/* =========================================================
   Runde 4, Idee 2: Szenen erzählen statt glänzen
   Lichtfleck auf den Karten und Magnet-Knopf sind aus (main.js,
   altEffekte). Jede Szene spielt ihre kleine Geschichte, sobald
   main.js .spielt setzt: beim Einblenden und am Rechner bei Hover
   noch einmal. Ohne JavaScript und bei reduzierter Bewegung steht
   sofort der Endzustand da. Zum Entfernen auch Tipp-Blase und
   „gerade eben“ in index.html löschen.
   ========================================================= */
.card::after{content:none;}

/* Webentwicklung: beide Balken laden gleich schnell, die kleine Seite ist sofort fertig */
.gewicht__balken{transition:none;}
.js .card:not(.spielt) .gewicht__balken{transform:scaleX(0);}
.js .card.spielt .gewicht__balken{animation:balken-laden 3.2s linear .3s both;}
.js .card.spielt .gewicht:first-child .gewicht__balken{animation-duration:.12s;}
@keyframes balken-laden{from{transform:scaleX(0);}}
/* Der Haken hängt absolut hinter dem Text, damit er auf schmalen Karten
   keine neue Zeile erzwingt */
.gewicht__name{position:relative;}
.gewicht__name::after{
  content:"";position:absolute;width:8px;height:4px;margin:7px 0 0 8px;
  border-left:1.5px solid var(--key);border-bottom:1.5px solid var(--key);
  transform:rotate(-45deg);
}
.gewicht--schnitt .gewicht__name::after{border-color:var(--muted);}
.js .card:not(.spielt) .gewicht__name::after{opacity:0;}
.js .card.spielt .gewicht__name::after{animation:haken-auf .3s ease .45s both;}
.js .card.spielt .gewicht--schnitt .gewicht__name::after{animation-delay:3.55s;}
@keyframes haken-auf{from{opacity:0;transform:rotate(-45deg) scale(.4);}}

/* Hosting und Domain: die Adresse tippt sich, dann schnappt das Schloss zu.
   main.js zerlegt die Adresse dafür in einzelne Zeichen mit --i. */
.js .card:not(.spielt) .adresse__tipp > span{opacity:0;}
.js .card.spielt .adresse__tipp > span{
  animation:zeichen-auf .01s linear both;
  animation-delay:calc(.35s + var(--i) * 70ms);
}
@keyframes zeichen-auf{from{opacity:0;}}
.js .card:not(.spielt) .adresse__schloss::before{transform:translateY(-3px);}
.js .card.spielt .adresse__schloss::before{animation:schloss-zu .35s cubic-bezier(.3,1.6,.5,1) 1.45s both;}
@keyframes schloss-zu{from{transform:translateY(-3px);}}

/* Änderungen später: erst tippt es, dann kommt die Antwort, darunter „gerade eben“ */
.szene-nachricht{height:auto;min-height:138px;gap:6px;}
.szene-nachricht .antwort{display:grid;justify-items:end;align-self:flex-end;max-width:86%;}
.szene-nachricht .antwort > .blase{grid-area:1 / 1;max-width:none;}
.blase--tippt{display:none;}
.js .blase--tippt{
  display:flex;align-items:center;gap:4px;align-self:end;
  padding:11px 12px;border-radius:14px 14px 4px 14px;
  opacity:0;
}
.blase--tippt i{width:5px;height:5px;border-radius:50%;background:var(--muted);}
.js .card.spielt .blase--tippt{animation:tippt 1.3s ease .4s both;}
.js .card.spielt .blase--tippt i{animation:punkt-huepft .6s ease-in-out .5s 2;}
.js .card.spielt .blase--tippt i:nth-child(2){animation-delay:.6s;}
.js .card.spielt .blase--tippt i:nth-child(3){animation-delay:.7s;}
@keyframes tippt{0%,100%{opacity:0;}12%,88%{opacity:1;}}
@keyframes punkt-huepft{50%{transform:translateY(-3px);opacity:.5;}}
.blase--antwort{transition:none;}
.js .card:not(.spielt) .szene-nachricht .blase--antwort{opacity:0;}
.js .card.spielt .szene-nachricht .blase--antwort{animation:antwort-auf .45s cubic-bezier(.2,.7,.3,1) 1.7s both;}
@keyframes antwort-auf{from{opacity:0;transform:translateY(6px);}}
.blase__zeit{align-self:flex-end;font-size:11px;line-height:1.2;color:var(--muted);}
.js .card:not(.spielt) .blase__zeit{opacity:0;}
.js .card.spielt .blase__zeit{animation:zeit-auf .4s ease 2.1s both;}
@keyframes zeit-auf{from{opacity:0;}}

/* Impressum und Datenschutz: die zwei Blätter fächern sich auf */
.szene-seiten .blatt:first-child{--weg:60px;transform:rotate(-3deg);}
.szene-seiten .blatt:last-child{--weg:-60px;transform:rotate(3deg);}
.js .card:not(.spielt) .szene-seiten .blatt{transform:translateX(var(--weg));}
.js .card.spielt .szene-seiten .blatt{animation:blatt-auf .7s cubic-bezier(.2,.7,.3,1) .3s both;}
@keyframes blatt-auf{from{transform:translateX(var(--weg));}}

@media (prefers-reduced-motion:reduce){
  .js .card.spielt *,.js .card.spielt *::before,.js .card.spielt *::after{animation:none !important;}
}


/* =========================================================
   Runde 4, Idee 3: Ihr Betrieb in der Vorschau
   Feld unter dem Text der Karte „Webdesign“. Ohne JavaScript
   ausgeblendet, weil es dann nichts bewirkt.
   ========================================================= */
.vorschau-feld{display:none;margin-top:var(--s-3);}
.js .vorschau-feld{display:block;}
.vorschau-feld label{display:block;margin-bottom:var(--s-1);font-size:14px;font-weight:600;color:var(--muted);}
.vorschau-feld input{
  width:100%;padding:12px 14px;
  font-family:inherit;font-size:15px;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  transition:border-color var(--transition);
}
.vorschau-feld input:focus{outline:none;border-color:var(--key);}
/* Platzhalter etwas heller, damit sie lesbar bleiben (4,5 : 1), auch im Formular */
.vorschau-feld input::placeholder,.form input::placeholder,.form textarea::placeholder{color:var(--platzhalter);}
/* Lange Namen werden kleiner, damit sie auf die Geräte passen (main.js setzt data-laenge) */
.geraet__titel{overflow-wrap:anywhere;}
.szene-geraete[data-laenge="m"] .geraet--rechner .geraet__titel{font-size:11px;}
.szene-geraete[data-laenge="l"] .geraet--rechner .geraet__titel{font-size:9.5px;}
.szene-geraete[data-laenge="m"] .geraet--handy .geraet__titel{font-size:6.5px;}
.szene-geraete[data-laenge="l"] .geraet--handy .geraet__titel{font-size:5.5px;}


/* =========================================================
   Runde 4, Idee 4: Belege zum Selbstprüfen
   Gemessene Ladezeit in der Szene „Webentwicklung“. Die Zeile
   „Selbst nachprüfen“ unter den Karten ist am 23.10.2026 entfallen.
   ========================================================= */
.szene-gewicht{gap:11px;}
.gewicht__live{font-size:12px;line-height:1.3;color:var(--muted);}
.gewicht__live b{font-weight:700;color:var(--hell);}


/* =========================================================
   Runde 4, Idee 5: Rückruf in 20 Sekunden
   Vierte Kachel im ersten Schritt und ein eigener kurzer Schritt
   (main.js). Ohne JavaScript bleibt der Rückruf-Schritt ausgeblendet.
   ========================================================= */
.form__schritt--rueckruf{display:none;}
.js .form__schritt--rueckruf.is-aktiv{display:block;}
.kachel--rueckruf{margin-top:var(--s-1);}
.kachel--rueckruf span{justify-content:flex-start;gap:12px;}
.kachel--rueckruf svg{flex:none;width:18px;height:18px;color:var(--key);stroke-linecap:round;stroke-linejoin:round;}
.kachel--rueckruf b{margin-right:auto;font-weight:inherit;}
.form__schritt--rueckruf .kacheln--klein{grid-template-columns:1fr 1fr;}
.form__schritt--rueckruf .kacheln--klein .kachel:last-child{grid-column:auto;}
.form.is-rueckruf .form__striche span:last-child{display:none;}


/* =========================================================
   Runde 4, Idee 6: Unterschrift
   Schreibt sich von links nach rechts, sobald main.js .is-visible
   setzt. Die Unterschrift in der Danke-Ansicht hat die Klasse von
   Anfang an; dort startet die Bewegung, wenn die Ansicht erscheint.
   ========================================================= */
.unterschrift{display:block;width:200px;height:auto;margin:var(--s-3) 0 0;fill:var(--text);}
.js .unterschrift:not(.is-visible){clip-path:inset(0 100% 0 0);}
.js .unterschrift.is-visible{animation:unterschrift-schreiben 1.6s cubic-bezier(.55,.1,.35,1) .2s both;}
@keyframes unterschrift-schreiben{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.unterschrift--danke{width:150px;margin:var(--s-3) auto 0;}
@media (max-width:560px){
  .unterschrift{width:170px;}
  .unterschrift--danke{width:140px;}
}
@media (prefers-reduced-motion:reduce){
  .js .unterschrift{clip-path:none;animation:none;}
}


/* =========================================================
   Runde 4, Zusatz: Kopfleiste erst beim Scrollen
   Ganz oben ist die Leiste weg, ab 40 px Scrollweg fliegt sie von
   oben herein (main.js setzt .is-sichtbar). Bekommt ein Link darin
   den Tastaturfokus, erscheint sie ebenfalls. Gilt nur auf der
   Startseite (.js); Unterseiten und Besuche ohne JavaScript behalten
   die stehende Leiste.
   ========================================================= */
.js .nav{transition:transform 700ms cubic-bezier(.16,1,.3,1),opacity 400ms ease;}
.js .nav:not(.is-sichtbar):not(:focus-within){
  transform:translateY(calc(-100% - 30px));opacity:0;
  transition:transform 450ms cubic-bezier(.5,0,.75,0),opacity 300ms ease 100ms;
}
.js .nav:not(.is-sichtbar):not(:focus-within) .nav__inner{pointer-events:none;}


/* =========================================================
   Runde 4, Zusatz: Kopfzeile im Hero
   Füllt oben die Fläche, solange die schwebende Leiste fehlt:
   Marke links, Abschnitte und Telefon rechts, auf dem Handy nur
   Marke und Telefon. Ohne JavaScript steht die schwebende Leiste
   oben, dann bleibt die Kopfzeile weg.
   ========================================================= */
.kopfzeile{display:none;}
.js .kopfzeile{display:block;position:absolute;top:0;left:0;right:0;z-index:2;padding-top:var(--s-4);}
.kopfzeile__innen{display:flex;align-items:center;gap:var(--s-4);}
.kopfzeile__marke{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:800;letter-spacing:-0.01em;color:var(--hell);white-space:nowrap;}
.kopfzeile__pk{
  display:inline-grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line-strong);border-radius:10px;
  font-size:13px;font-weight:800;color:var(--key);
}
.kopfzeile__links{display:flex;gap:var(--s-4);margin-left:auto;}
.kopfzeile__links a{font-size:14px;font-weight:600;color:var(--muted);transition:color var(--transition);}
.kopfzeile__links a:hover{color:var(--hell);}
.kopfzeile__tel{
  display:flex;align-items:center;gap:var(--s-1);
  padding-left:var(--s-4);border-left:1px solid var(--line-strong);
  font-size:14px;font-weight:700;color:var(--hell);white-space:nowrap;
  transition:color var(--transition);
}
.kopfzeile__tel svg{width:16px;height:16px;color:var(--key);stroke-linecap:round;stroke-linejoin:round;}
.kopfzeile__tel:hover{color:var(--key);}
@media (max-width:860px){
  .js .kopfzeile{padding-top:var(--s-3);}
  .kopfzeile__links{display:none;}
  .kopfzeile__tel{margin-left:auto;padding-left:0;border-left:0;}
}


/* =========================================================
   Runde 4, Zusatz: Ablauf nebeneinander statt wie die Fragen
   Am Rechner stehen Überschrift und Satz oben, die vier Schritte
   darunter in einer Reihe. Die Linie läuft waagerecht durch die
   Kreise und füllt sich von links nach rechts (main.js). Auf Tablet
   und Handy bleibt die senkrechte Zeitleiste.
   ========================================================= */
@media (min-width:1025px){
  .ablauf{display:block;}
  .ablauf__kopf{position:static;max-width:640px;padding-right:0;margin-bottom:var(--s-6);}
  .ablauf .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s-4);padding-left:0;}
  .ablauf .step{grid-template-columns:minmax(0,1fr);align-content:start;row-gap:var(--s-1);padding-bottom:0;}
  .ablauf .step__num{grid-row:auto;margin-bottom:var(--s-2);}
  .ablauf .step h3,.ablauf .step p{grid-column:1;}
  .ablauf .step h3{padding-top:0;}
  .ablauf .step:not(:last-child)::before,
  .ablauf .step:not(:last-child)::after{
    top:calc(var(--kreis) / 2 - .5px);bottom:auto;left:calc(var(--kreis) / 2);
    width:calc(100% + var(--s-4));height:1px;
  }
  .ablauf .step:not(:last-child)::after{
    background:linear-gradient(90deg,rgba(var(--key-rgb),.35),var(--key));
    transform-origin:0 50%;
  }
  .js .ablauf .step:not(:last-child)::after{transform:scaleX(var(--fuellung,0));}
}


/* =========================================================
   Runde 5, Idee 1: Schrift als Bild
   Der Hero steht randbündig auf dem Seitenraster. „Webdesign &“ füllt
   die ganze Spaltenbreite (5,898 em bei 16,96cqw), „Entwicklung“ steht
   rechtsbündig darunter, Text und Knöpfe in einer Reihe. Die Größe
   hängt an der Breite von .hero__inner, nicht am Fenster. Das HTML ist
   unverändert; ohne diesen Block ist der Hero wieder mittig.
   ========================================================= */
.hero__inner{
  container-type:inline-size;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  column-gap:var(--s-5);
  text-align:left;
}
.hero__title{grid-column:1 / -1;font-size:16.96cqw;margin:0 0 var(--s-5) -.015em;}
/* Der Abstand hält das g von „Webdesign“ vom k darunter frei, das Polster holt
   den Überhang der kursiven Schrift zurück auf die rechte Rasterkante */
.hero__title .serif{display:block;margin-top:.07em;padding-right:.075em;text-align:right;}
.hero__lead{max-width:none;margin:0;}
.hero__actions{flex-wrap:nowrap;justify-content:flex-end;}
@media (max-width:860px){
  .hero__inner{grid-template-columns:minmax(0,1fr);}
  .hero__title{margin-bottom:var(--s-4);}
  .hero__lead{margin-bottom:var(--s-3);}
  .hero__actions{flex-wrap:wrap;justify-content:flex-start;}
}


/* =========================================================
   Runde 5, Idee 2: Bühne mit Branchen-Probe
   Die Karte „Webdesign“ ist die große Fläche im Raster: vier von sechs
   Spalten, zwei Zeilen hoch. Karte 2 und 3 stehen rechts übereinander.
   Rechner und Handy zeigen eine Beispielseite (.kunde), Branche und
   Name setzt main.js. Alle Größen darin hängen per cqw an der Breite
   des Geräts. Nur Manrope und Instrument Serif, keine Bilder. Hell
   dürfen die Beispiele sein, es sind Seiten für andere Betriebe.
   ========================================================= */
.cards > .card--buehne{grid-column:span 4;grid-row:span 2;display:flex;flex-direction:column;}
.card--buehne:hover{transform:none;}
.buehne{
  flex:1 1 auto;height:auto;min-height:clamp(210px,50vw,400px);padding:0;
  display:grid;align-items:center;justify-content:stretch;justify-items:start;
  isolation:isolate;
}
.buehne .geraet{
  grid-area:1 / 1;
  display:block;position:relative;padding:0;
  container-type:inline-size;
  background:var(--geraet);border:1px solid var(--line-strong);
}
.buehne .geraet--rechner{
  width:76%;height:auto;aspect-ratio:16 / 10;margin:0 0 8px 4%;
  border-radius:10px;
  box-shadow:0 22px 48px rgba(0,0,0,.5);
}
.buehne .geraet--rechner::after{left:-4%;right:-4%;bottom:-9px;height:8px;border-radius:1px 1px 7px 7px;background:var(--scharnier);}
.buehne .geraet--handy{
  z-index:1;justify-self:end;
  width:21%;height:auto;aspect-ratio:9 / 18.5;margin:13% 4% 0 0;
  border-radius:16px;
  box-shadow:0 18px 36px rgba(0,0,0,.6);
}

/* Die Beispielseite. Grundform ist die Schreinerei. */
.kunde{
  --k-bg:#f2eadc;--k-text:#2a1c10;--k-leise:#6d5a47;--k-key:#7c4a1e;--k-auf:#fff8ee;
  --titel:3.1em;
  position:absolute;inset:0;overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"kopf kopf" "inhalt bild" "info info";
  column-gap:2em;row-gap:1.1em;
  padding:1.2em 2em;
  font-size:2.5cqw;line-height:1.4;text-align:left;
  background:var(--k-bg);color:var(--k-text);
  transition:background-color 500ms ease,color 500ms ease,opacity 500ms ease;
}
/* Rechts bleibt Platz für das Handy, das den Rechner überlappt */
.geraet--rechner .kunde{inset:1.1cqw;padding-right:8.5cqw;border-radius:5px;}
.kunde__kopf{grid-area:kopf;display:flex;align-items:center;justify-content:space-between;gap:1em;min-width:0;}
.kunde__name{min-width:0;overflow:hidden;font-weight:800;letter-spacing:-0.01em;white-space:nowrap;text-overflow:ellipsis;}
.kunde__menue{flex:none;display:flex;gap:.8em;}
.kunde__menue i{display:block;width:2.4em;height:.3em;border-radius:1em;background:var(--k-text);opacity:.3;}
.kunde__inhalt{grid-area:inhalt;align-self:center;min-width:0;}
.kunde__titel{display:block;margin-bottom:.32em;font-size:var(--titel);font-weight:800;line-height:1.02;letter-spacing:-0.03em;overflow-wrap:anywhere;hyphens:auto;text-wrap:balance;}
.kunde__text{display:block;margin-bottom:1.1em;color:var(--k-leise);}
.kunde__knopf{display:inline-block;padding:.6em 1.1em;border-radius:.25em;background:var(--k-key);color:var(--k-auf);font-weight:700;white-space:nowrap;}
.kunde__bild{
  grid-area:bild;position:relative;min-height:0;
  border-radius:.3em;
  /* Holz: Bretter mit Fugen und feiner Maserung */
  background:
    repeating-linear-gradient(90deg,transparent 0 24.4%,rgba(45,22,6,.55) 24.4% 25%),
    repeating-linear-gradient(90deg,rgba(60,30,10,.12) 0 1px,transparent 1px 5px,rgba(60,30,10,.06) 5px 6px,transparent 6px 11px),
    linear-gradient(112deg,#c08a52,#a4703c 46%,#b9824a 72%,#96632f);
}
.kunde__info{grid-area:info;padding-top:.7em;border-top:1px solid rgba(128,110,95,.3);font-size:.85em;color:var(--k-leise);}

/* Lange Namen werden kleiner (main.js setzt data-laenge) */
.kunde[data-laenge="m"]{--titel:2.4em;}
.kunde[data-laenge="l"]{--titel:1.8em;}

/* Friseur: mittig, große kursive Serif, Locken statt Bild */
.kunde[data-branche="friseur"]{
  --k-bg:#f7e3de;--k-text:#2c1418;--k-leise:#77545a;--k-key:#b3324f;--k-auf:#fff5f3;
  --titel:3.9em;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"kopf" "inhalt" "info";
  text-align:center;
}
.kunde[data-branche="friseur"][data-laenge="m"]{--titel:3em;}
.kunde[data-branche="friseur"][data-laenge="l"]{--titel:2.3em;}
.kunde[data-branche="friseur"] .kunde__inhalt{position:relative;z-index:1;}
.kunde[data-branche="friseur"] .kunde__titel,
.kunde[data-branche="cafe"] .kunde__titel{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em;}
.kunde[data-branche="friseur"] .kunde__knopf{border-radius:999px;}
.kunde[data-branche="friseur"] .kunde__bild{
  grid-area:auto;position:absolute;inset:0;border-radius:0;
  background:
    radial-gradient(circle at 4% 104%,transparent 0 21%,rgba(179,50,79,.2) 21.2% 21.9%,transparent 22.1% 29%,rgba(179,50,79,.14) 29.2% 29.9%,transparent 30.1% 37%,rgba(179,50,79,.09) 37.2% 37.9%,transparent 38.1%),
    radial-gradient(circle at 98% -6%,transparent 0 17%,rgba(179,50,79,.2) 17.2% 17.9%,transparent 18.1% 25%,rgba(179,50,79,.12) 25.2% 25.9%,transparent 26.1%);
}

/* Café: Bild links, die Tasse von oben, Knopf als Umriss */
.kunde[data-branche="cafe"]{
  --k-bg:#1e3a2d;--k-text:#f5ecd9;--k-leise:#b9c7b3;--k-key:#e8b85c;--k-auf:#1c2a1a;
  --titel:3.2em;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  grid-template-areas:"kopf kopf" "bild inhalt" "info info";
}
.kunde[data-branche="cafe"][data-laenge="m"]{--titel:2.8em;}
.kunde[data-branche="cafe"][data-laenge="l"]{--titel:2.1em;}
.kunde[data-branche="cafe"] .kunde__knopf{background:none;color:var(--k-key);box-shadow:inset 0 0 0 1px var(--k-key);border-radius:999px;}
.kunde[data-branche="cafe"] .kunde__bild{
  align-self:center;justify-self:center;
  width:auto;height:100%;max-width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle closest-side,#2b170b 0 38%,#7a4a28 39% 41%,#f5ecd9 42% 54%,#c9bda6 55% 57%,#efe5d2 58% 88%,#c9bda6 89% 91%,transparent 92%);
}

/* Praxis: ruhig und aufgeräumt, das Kreuz auf einer hellen Fläche */
.kunde[data-branche="praxis"]{
  --k-bg:#eaf2f4;--k-text:#0f2f3a;--k-leise:#4e6a74;--k-key:#0f7686;--k-auf:#f4fbfc;
  --titel:2.9em;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
}
.kunde[data-branche="praxis"][data-laenge="m"]{--titel:2.4em;}
.kunde[data-branche="praxis"][data-laenge="l"]{--titel:1.8em;}
.kunde[data-branche="praxis"] .kunde__titel{font-weight:700;letter-spacing:-0.02em;}
.kunde[data-branche="praxis"] .kunde__knopf{border-radius:.6em;}
.kunde[data-branche="praxis"] .kunde__bild{
  align-self:center;justify-self:center;
  width:auto;height:78%;max-width:100%;aspect-ratio:1;border-radius:18%;
  background:
    linear-gradient(var(--k-key),var(--k-key)) center / 16% 56% no-repeat,
    linear-gradient(var(--k-key),var(--k-key)) center / 56% 16% no-repeat,
    #fff;
}

/* Handy: alles untereinander, Bild oben, das Menü als drei Striche */
.geraet--handy .kunde,
.geraet--handy .kunde[data-branche]{
  inset:3.5cqw;border-radius:12%/5.8%;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"kopf" "bild" "inhalt" "info";
  row-gap:.7em;
  padding:1em .9em;
  font-size:7cqw;
  --titel:1.75em;
}
.geraet--handy .kunde[data-laenge="m"]{--titel:1.4em;}
.geraet--handy .kunde[data-laenge="l"]{--titel:1.1em;}
.geraet--handy .kunde[data-branche="friseur"]{--titel:2em;}
.geraet--handy .kunde__menue{flex-direction:column;gap:.16em;}
.geraet--handy .kunde__menue i{width:1em;height:.13em;}
.geraet--handy .kunde__bild{height:5.6em;}
.geraet--handy .kunde[data-branche="friseur"] .kunde__bild{height:auto;}
.geraet--handy .kunde[data-branche="cafe"] .kunde__bild,
.geraet--handy .kunde[data-branche="praxis"] .kunde__bild{width:auto;height:5.6em;}
.geraet--handy .kunde__text{margin-bottom:.8em;line-height:1.3;}
.geraet--handy .kunde__knopf{display:block;padding:.55em .4em;text-align:center;white-space:normal;}
.geraet--handy .kunde__info{padding-top:.5em;}

/* Beim Wechsel baut sich die Seite kurz neu auf */
.kunde.wechselt .kunde__inhalt,
.kunde.wechselt .kunde__bild{animation:kunde-rein 560ms cubic-bezier(.2,.7,.3,1) both;}
@keyframes kunde-rein{from{opacity:0;transform:translateY(3%);}}

/* Bedienung unter dem Text */
.probe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-3);align-items:end;margin-top:var(--s-3);}
.probe .vorschau-feld{margin-top:0;}
.probe .vorschau-feld input{height:46px;}
.probe__branchen{display:none;min-width:0;margin:0;padding:0;border:0;}
.js .probe__branchen{display:block;}
.probe__branchen legend{margin-bottom:var(--s-1);padding:0;font-size:14px;font-weight:600;color:var(--muted);}
.probe__knoepfe{display:flex;flex-wrap:wrap;gap:var(--s-1);}
.probe__knopf{position:relative;display:block;cursor:pointer;}
.probe__knopf input{position:absolute;width:1px;height:1px;margin:0;opacity:0;}
.probe__knopf span{
  display:flex;align-items:center;height:46px;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:999px;
  font-size:14px;font-weight:700;color:var(--text);
  transition:background-color var(--transition),border-color var(--transition),color var(--transition);
}
.probe__knopf:hover span{border-color:var(--key);}
.probe__knopf input:checked + span{background:var(--key);border-color:var(--key);color:var(--auf-key);}
.probe__knopf input:focus-visible + span{outline:2px solid var(--key);outline-offset:3px;}
.card > p.probe__hinweis{margin-top:var(--s-2);font-size:13px;}

@media (max-width:1024px){
  .cards > .card--buehne{grid-column:1 / -1;grid-row:auto;}
  .cards > .card:last-child{grid-column:auto;}
}
@media (max-width:760px){
  .probe{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px){
  .cards > .card--buehne{grid-column:auto;}
  .card--buehne{padding:var(--s-2) var(--s-2) var(--s-3);}
  .card--buehne > h3,.card--buehne > p,.card--buehne > .probe{margin-left:var(--s-1);margin-right:var(--s-1);}
  .buehne .geraet--rechner{width:78%;margin-left:4%;}
  .buehne .geraet--handy{width:24%;margin-right:2%;}
}


/* =========================================================
   Runde 5, Idee 4: Website-Check
   Eine große Adresszeile als Eingabe, darunter die fünf Fakten. Vor dem
   Check stehen dort die Fragen, danach die Antworten. Keine Ampel und
   keine Punktzahl: Was fehlt, ist nur in Weiß hervorgehoben. Die
   Texte setzt main.js. Ohne JavaScript ist der Abschnitt ausgeblendet.
   ========================================================= */
.check{display:none;background:var(--bg-soft);}
.js .check{display:block;}
.check__kopf{max-width:760px;margin-bottom:var(--s-5);}
.check__kopf p{max-width:600px;margin:0;color:var(--muted);}
.check__form > label{display:block;margin:0 0 var(--s-1) var(--s-3);font-size:14px;font-weight:600;color:var(--muted);}
.check__leiste{
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;
  transition:border-color var(--transition);
}
.check__leiste:focus-within{border-color:var(--key);}
.check__leiste .adresse__schloss{margin-top:4px;}
.check__leiste input{
  flex:1 1 auto;min-width:0;padding:var(--s-1) 0;
  background:none;border:0;outline:none;
  font-family:inherit;font-size:clamp(18px,2.2vw,26px);font-weight:700;letter-spacing:-0.01em;color:var(--hell);
}
.check__leiste input::placeholder{font-weight:600;color:var(--platzhalter);}
.check__leiste .btn{flex:none;width:auto;font-family:inherit;}
.check__leiste .btn:disabled{cursor:progress;opacity:.7;transform:none;}
.check__meldung{min-height:24px;margin:var(--s-1) 0 var(--s-2) var(--s-3);font-size:14px;font-weight:600;color:var(--muted);}
.check__meldung.is-err{color:#f87171;}
.check__fakten{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  overflow:hidden;
  background:var(--line);border:1px solid var(--line);border-radius:12px;
}
.check__fakt{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);background:var(--bg-soft);}
.check__name{display:flex;align-items:center;gap:var(--s-1);font-size:14px;font-weight:600;color:var(--muted);}
.check__marke{
  position:relative;flex:none;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line-strong);
  transition:background-color var(--transition),border-color var(--transition);
}
.check__fakt[data-zustand="ja"] .check__marke::after{
  content:"";position:absolute;left:50%;top:44%;width:8px;height:4px;
  border-left:1.5px solid var(--text);border-bottom:1.5px solid var(--text);
  transform:translate(-50%,-50%) rotate(-45deg);
}
.check__fakt[data-zustand="nein"] .check__marke{background:var(--key);border-color:var(--key);}
.check__wert{font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-0.01em;color:var(--hell);overflow-wrap:anywhere;}
.check__wert:empty{display:none;}
.check__fakt[data-zustand="nein"] .check__wert{color:var(--key);}
.check__text{font-size:14px;line-height:1.5;color:var(--muted);}
.check__balken{position:relative;display:block;height:4px;border-radius:2px;background:var(--line-strong);overflow:hidden;}
.check__balken[hidden]{display:none;}
.check__balken::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--anteil,0) * 100%);min-width:4px;border-radius:2px;background:var(--key);}
.check__fakten.is-laedt .check__marke{animation:check-puls 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * 120ms);}
@keyframes check-puls{50%{background-color:var(--key-dim);border-color:var(--key);}}
.check__fakten.is-fertig .check__fakt > *{animation:fakt-rein 500ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 90ms);}
@keyframes fakt-rein{from{opacity:0;transform:translateY(8px);}}
.check__ende{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-top:var(--s-3);}
.check__ende p{flex:1 1 320px;margin:0;font-size:14px;color:var(--muted);}
.check__ende a{color:var(--text);text-decoration:underline;text-underline-offset:.2em;}
.check__ende a:hover{color:var(--key);}
.check__ende .btn{font-family:inherit;}
.check__ende .btn[hidden]{display:none;}
@media (max-width:1024px){
  .check__fakten{grid-template-columns:repeat(6,minmax(0,1fr));}
  .check__fakt{grid-column:span 2;}
  .check__fakt:nth-child(n+4){grid-column:span 3;}
}
@media (max-width:700px){
  .check__fakten{grid-template-columns:minmax(0,1fr);}
  .check__fakt,.check__fakt:nth-child(n+4){grid-column:auto;}
  .check__leiste{flex-wrap:wrap;gap:var(--s-1) 12px;padding:var(--s-2);border-radius:20px;}
  .check__leiste input{flex-basis:calc(100% - 24px);}
  .check__leiste .btn{width:100%;}
  .check__form > label,.check__meldung{margin-left:0;}
}


/* =========================================================
   Runde 5, Idee 5: Unterlagen zum Vorab-Lesen
   Zwei Blätter in der sechsten Frage, im Stil der Karte „Impressum
   und Datenschutz“, diesmal als Links.
   ========================================================= */
.unterlagen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);padding-bottom:var(--s-3);}
.unterlagen .blatt{
  width:auto;height:auto;gap:var(--s-1);padding:var(--s-2);
  font-size:14px;line-height:1.45;
  transition:border-color var(--transition),transform var(--transition);
}
.unterlagen .blatt b{font-size:16px;}
.unterlagen .blatt:hover{border-color:var(--key);transform:translateY(-2px);}
.unterlagen .blatt:focus-visible{outline:2px solid var(--key);outline-offset:3px;}
.unterlagen__los{margin-top:auto;padding-top:var(--s-1);font-weight:700;color:var(--key);}
/* Platz für den Fokusrahmen, die Antwort schneidet sonst am Rand ab */
#faq-1 > div,#faq-6 > div{margin:0 -6px;padding:0 6px;}
@media (max-width:560px){
  .unterlagen{grid-template-columns:minmax(0,1fr);}
}


/* =========================================================
   Runde 5, Idee 6: Preisrechner
   In der ersten Frage. Drei Reihen Kacheln, darunter die Spanne und
   der Knopf ins Formular. Zahlen und Rechnung stehen in main.js.
   ========================================================= */
.rechner{display:none;}
.js .rechner{display:block;padding-bottom:var(--s-3);}
.rechner .form__gruppe{margin-bottom:var(--s-2);}
.rechner .kacheln--klein{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1);}
.rechner .kacheln--klein .kachel:last-child{grid-column:auto;}
.rechner .kachel span{height:100%;justify-content:center;gap:var(--s-1);padding:10px 12px;line-height:1.25;text-align:center;hyphens:manual;}
.rechner .kachel input[type="radio"] + span::after{display:none;}
.rechner .kachel input[type="checkbox"] + span{justify-content:space-between;text-align:left;}
.rechner .kachel input[type="checkbox"] + span::after{border-radius:4px;}
.rechner .kachel input[type="checkbox"]:checked + span::after{
  border-color:var(--key);
  background:var(--key) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23121315' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.rechner__ergebnis{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3);
  margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.rechner__zahl{flex:1 1 260px;min-width:0;}
.rechner__spanne{display:block;margin-bottom:var(--s-1);font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1.1;letter-spacing:-0.025em;font-variant-numeric:tabular-nums;color:var(--key);}
.rechner__hinweis{display:block;max-width:44ch;font-size:13px;line-height:1.45;color:var(--muted);}
.rechner__ergebnis .btn{flex:none;font-family:inherit;}
@media (max-width:560px){
  .rechner__extras .kacheln--klein{grid-template-columns:minmax(0,1fr);}
  .rechner .kachel span{padding:10px 8px;}
  .rechner__extras .kachel span{padding:10px 12px;}
  .rechner__ergebnis .btn{flex:1 1 100%;}
}


/* =========================================================
   Runde 6: Eine Beispielseite baut sich beim Scrollen zusammen
   Ersetzt das Fenster beim Ablauf (Runde 5, Idee 3). Ohne JavaScript und
   bei reduzierter Bewegung steht alles fertig untereinander. Sonst bleibt
   die Bühne kleben und main.js stellt jedes Teil nach dem Scrollweg:
   Adresse, Raster, Bauplan, Farben, Texte, Bild, untere Abschnitte, Handy,
   online. Der Rahmen bleibt gerade, nur die Teile fliegen.
   Die Beispielseite (.muster) steht auf denselben zwölf Spalten wie das
   Raster, alle Größen hängen per cqw und cqh am Fenster.
   ========================================================= */
.bau{--bau-chrom:#17181b;--bau-reiter:#26272b;padding-top:clamp(70px,9vw,130px);}
.bau__buehne{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.bau__kopf{margin-bottom:var(--s-5);}
.bau__titel{margin:0;font-size:clamp(24px,2.8vw,40px);font-weight:500;line-height:1.25;letter-spacing:-0.02em;}
.bau__raum{position:relative;}
.bau__fenster{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--bau-chrom);
  border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* Reiter sind die Branchen-Wahl, die Adresszeile tippt sich selbst */
.bau__reiterzeile{display:none;align-items:flex-end;gap:2px;padding:8px 12px 0;}
.js .bau__reiterzeile{display:flex;}
.bau__punkte{flex:none;display:flex;gap:6px;align-self:center;margin:0 12px 8px 4px;}
.bau__punkte i{display:block;width:10px;height:10px;border-radius:50%;background:var(--line-strong);}
.bau__reiter{
  --farbe:#7c4a1e;
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:7px 14px 8px;border:0;border-radius:9px 9px 0 0;
  background:none;color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--transition),color var(--transition);
}
.bau__reiter::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--farbe);box-shadow:0 0 0 1px rgba(255,255,255,.14);}
.bau__reiter:hover{color:var(--hell);}
.bau__reiter:focus-visible{outline:2px solid var(--key);outline-offset:-2px;}
.bau__reiter[aria-pressed="true"]{background:var(--bau-reiter);color:var(--hell);}
.bau__reiter[data-wahl="friseur"]{--farbe:#b3324f;}
.bau__reiter[data-wahl="cafe"]{--farbe:#2c6a50;}
.bau__reiter[data-wahl="praxis"]{--farbe:#0f7686;}
.bau__adresszeile{display:flex;align-items:center;gap:var(--s-2);padding:8px 12px;background:var(--bau-reiter);border-bottom:1px solid var(--line);}
.bau__adresse{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:8px;
  height:28px;padding:0 14px;border-radius:999px;
  background:var(--bg);
  font-size:13px;font-weight:600;line-height:1;color:var(--text);
}
.bau__adresse .adresse__schloss{margin-top:3px;}
.bau__url{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.bau__online{flex:none;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--key);}
.bau__online::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--key);}

.bau__seite{
  position:relative;flex:none;aspect-ratio:16 / 9.4;overflow:hidden;
  container-type:size;
  background:var(--schirm) radial-gradient(var(--line) 1px,transparent 1.2px) 0 0 / 22px 22px;border-radius:0 0 13px 13px;
  pointer-events:none;
}
.bau__raster,.bau__kante,.bau__handy,.bau__meldung,.bau__lauf,.bau__zeiger,.bau__weiter{display:none;}

/* Unter dem Fenster: ein Satz je Schritt, ohne Film als Liste */
.bau__unten{margin-top:var(--s-4);}
.bau__zeilen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2) var(--s-4);margin-bottom:var(--s-3);color:var(--muted);font-size:15px;line-height:1.45;}
.nur-klein{display:none;}
.bau__rechts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);}
.bau__hinweis{margin:0;font-size:13px;color:var(--muted);}

/* Die Beispielseite. Grundform ist die Schreinerei. */
.muster{
  --k-bg:#f2eadc;--k-text:#2a1c10;--k-leise:#6d5a47;--k-key:#7c4a1e;--k-auf:#fff8ee;--k-linie:rgba(42,28,16,.16);
  --m-titel:4.9em;
  position:absolute;left:0;right:0;top:0;min-height:100%;
  font-size:1.5cqw;line-height:1.45;text-align:left;color:var(--k-text);
}
.muster__grund{position:absolute;inset:0;background:var(--k-bg);transform-origin:left;transition:background-color 500ms ease;}
.muster__kopf{position:relative;margin:0 4cqw;height:5.2em;}
.muster__kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:1em;height:100%;}
.muster__name{min-width:0;overflow:hidden;font-size:1.25em;font-weight:800;letter-spacing:-0.015em;white-space:nowrap;text-overflow:ellipsis;}
.muster__menue{flex:none;display:flex;gap:2em;font-weight:600;color:var(--k-leise);}
.muster__start{
  position:relative;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.6cqw;
  height:calc(100cqh - 5.2em);padding:0 4cqw 4cqw;
}
.muster__inhalt{position:relative;z-index:1;grid-column:1 / span 6;grid-row:1;align-self:center;min-width:0;}
.muster__titel,.muster__text,.muster__knopf{position:relative;display:block;}
.muster__titel{margin-bottom:.32em;font-size:var(--m-titel);font-weight:800;line-height:1.02;letter-spacing:-0.035em;overflow-wrap:anywhere;text-wrap:balance;}
.muster__text{max-width:27em;margin-bottom:1.4em;font-size:1.2em;color:var(--k-leise);}
.muster__knopf{display:inline-block;}
.muster__knopf .echt{display:block;padding:.75em 1.35em;border-radius:.3em;background:var(--k-key);color:var(--k-auf);font-weight:700;white-space:nowrap;transition:background-color 500ms ease;}
.muster__bild{position:relative;display:block;grid-column:7 / span 6;grid-row:1;min-height:0;}
.muster__bild .echt{
  position:absolute;inset:0;display:block;border-radius:.45em;
  /* Holz: Bretter mit Fugen, die Maserung kommt aus Rauschen */
  background:
    repeating-linear-gradient(90deg,transparent 0 24.5%,rgba(40,18,4,.6) 24.5% 25%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .006' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .1 0 0 0 0 .02 1.5 .6 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") center / cover,
    linear-gradient(112deg,#c58f55,#a9743e 46%,#bd864c 72%,#9a6632);
}
.muster__dienste{position:relative;padding:3.6em 4cqw 2.6em;}
.muster__zwischen{display:block;margin-bottom:.8em;font-size:2.3em;font-weight:800;line-height:1.1;letter-spacing:-0.025em;}
.muster__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw;}
.muster__dienst{display:block;padding-top:1em;border-top:2px solid var(--k-key);color:var(--k-leise);}
.muster__dienst b{display:block;margin-bottom:.2em;font-size:1.3em;font-weight:800;letter-spacing:-0.015em;color:var(--k-text);}
.muster__fuss{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.6cqw;align-items:center;padding:0 4cqw 4cqw;}
.muster__ort{
  position:relative;grid-column:1 / span 7;display:block;height:15em;border-radius:.45em;overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-10 215C120 170 190 245 320 195S520 90 610 122' fill='none' stroke='rgba(84,140,172,.5)' stroke-width='17'/%3E%3Cpath d='M0 74H600M0 152H600M118 0V300M302 0V300M472 0V300M36 300L242 0M362 300L600 44' fill='none' stroke='rgba(128,110,95,.3)' stroke-width='5'/%3E%3C/svg%3E") center / cover,
    rgba(128,110,95,.14);
}
.muster__ort::after{content:"";position:absolute;left:50%;top:44%;width:1.5em;height:1.5em;border-radius:50% 50% 50% 0;background:var(--k-key);box-shadow:inset 0 0 0 .42em var(--k-key),inset 0 0 0 1em var(--k-bg);transform:translate(-50%,-50%) rotate(-45deg);}
.muster__daten{grid-column:8 / span 5;display:flex;flex-direction:column;gap:.25em;min-width:0;color:var(--k-leise);}
.muster__daten b{margin-bottom:.3em;font-size:1.7em;font-weight:800;line-height:1.15;letter-spacing:-0.02em;color:var(--k-text);}
.muster[data-laenge="m"]{--m-titel:4em;}
.muster[data-laenge="l"]{--m-titel:3.2em;}

/* Friseur: mittig, große kursive Serif, Locken auf der ganzen Fläche */
.muster[data-branche="friseur"]{--k-bg:#f7e3de;--k-text:#2c1418;--k-leise:#77545a;--k-key:#b3324f;--k-auf:#fff5f3;--k-linie:rgba(44,20,24,.16);--m-titel:6.2em;}
.muster[data-branche="friseur"][data-laenge="m"]{--m-titel:5em;}
.muster[data-branche="friseur"][data-laenge="l"]{--m-titel:3.8em;}
.muster[data-branche="friseur"] .muster__inhalt{grid-column:2 / span 10;text-align:center;}
.muster[data-branche="friseur"] .muster__text{margin-left:auto;margin-right:auto;}
.muster[data-branche="friseur"] .muster__titel,
.muster[data-branche="cafe"] .muster__titel{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em;}
.muster[data-branche="friseur"] .muster__knopf .echt{border-radius:999px;}
.muster[data-branche="friseur"] .muster__bild{grid-column:1 / -1;margin:0 -4cqw -4cqw;}
.muster[data-branche="friseur"] .muster__bild .echt{
  border-radius:0;
  background:
    radial-gradient(circle at 3% 104%,transparent 0 21%,rgba(179,50,79,.2) 21.2% 21.8%,transparent 22% 29%,rgba(179,50,79,.14) 29.2% 29.8%,transparent 30% 37%,rgba(179,50,79,.09) 37.2% 37.8%,transparent 38%),
    radial-gradient(circle at 98% -6%,transparent 0 17%,rgba(179,50,79,.2) 17.2% 17.8%,transparent 18% 25%,rgba(179,50,79,.13) 25.2% 25.8%,transparent 26% 33%,rgba(179,50,79,.08) 33.2% 33.8%,transparent 34%);
}

/* Café: Bild links, die Tasse von oben, Knopf als Umriss */
.muster[data-branche="cafe"]{--k-bg:#1e3a2d;--k-text:#f5ecd9;--k-leise:#b9c7b3;--k-key:#e8b85c;--k-auf:#1c2a1a;--k-linie:rgba(245,236,217,.2);--m-titel:5.2em;}
.muster[data-branche="cafe"][data-laenge="m"]{--m-titel:4.4em;}
.muster[data-branche="cafe"][data-laenge="l"]{--m-titel:3.4em;}
.muster[data-branche="cafe"] .muster__inhalt{grid-column:6 / span 7;}
.muster[data-branche="cafe"] .muster__bild{grid-column:1 / span 5;}
.muster[data-branche="cafe"] .muster__knopf .echt{background:none;color:var(--k-key);box-shadow:inset 0 0 0 1.5px var(--k-key);border-radius:999px;}
.muster[data-branche="cafe"] .muster__bild .echt{
  border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='178' fill='%23efe5d2'/%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='%23d5c8ae' stroke-width='2'/%3E%3Crect x='300' y='176' width='78' height='48' rx='24' fill='%23f8f1e3'/%3E%3Ccircle cx='200' cy='200' r='118' fill='%23f8f1e3'/%3E%3Ccircle cx='200' cy='200' r='104' fill='%23553017'/%3E%3Cpath d='M200 262c-44-30-72-56-72-90 0-24 18-40 38-40 14 0 26 8 34 22 8-14 20-22 34-22 20 0 38 16 38 40 0 34-28 60-72 90Z' fill='%23e3c79f'/%3E%3Cpath d='M200 232c-26-18-42-34-42-54 0-14 10-23 22-23 8 0 15 5 20 13 5-8 12-13 20-13 12 0 22 9 22 23 0 20-16 36-42 54Z' fill='%23553017'/%3E%3Cpath d='M200 206c-12-9-19-16-19-25 0-6 4-10 9-10 4 0 7 2 10 6 3-4 6-6 10-6 5 0 9 4 9 10 0 9-7 16-19 25Z' fill='%23e3c79f'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Praxis: ruhig und aufgeräumt, das Kreuz auf einer hellen Fläche */
.muster[data-branche="praxis"]{--k-bg:#eaf2f4;--k-text:#0f2f3a;--k-leise:#4e6a74;--k-key:#0f7686;--k-auf:#f4fbfc;--k-linie:rgba(15,47,58,.16);--m-titel:4.5em;}
.muster[data-branche="praxis"][data-laenge="m"]{--m-titel:3.8em;}
.muster[data-branche="praxis"][data-laenge="l"]{--m-titel:3em;}
.muster[data-branche="praxis"] .muster__inhalt{grid-column:1 / span 7;}
.muster[data-branche="praxis"] .muster__titel{font-weight:700;letter-spacing:-0.025em;}
.muster[data-branche="praxis"] .muster__knopf .echt{border-radius:.6em;}
.muster[data-branche="praxis"] .muster__bild{grid-column:8 / span 5;}
.muster[data-branche="praxis"] .muster__bild .echt{
  inset:12% 0;border-radius:.9em;
  background:
    linear-gradient(var(--k-key),var(--k-key)) center / 12% 44% no-repeat,
    linear-gradient(var(--k-key),var(--k-key)) center / 44% 12% no-repeat,
    linear-gradient(150deg,#fff,#d6e8ec);
}

/* Beim Wechsel der Branche baut sich die Seite kurz neu auf */
.muster.wechselt .muster__inhalt,
.muster.wechselt .muster__bild{animation:kunde-rein 560ms cubic-bezier(.2,.7,.3,1) both;}

/* Schmales Fenster und Handy: alles untereinander, vier Spalten */
@container (max-width:520px){
  .muster,.muster[data-branche]{font-size:4.1cqw;--m-titel:2.65em;}
  .muster[data-laenge="m"],.muster[data-branche][data-laenge="m"]{--m-titel:2.2em;}
  .muster[data-laenge="l"],.muster[data-branche][data-laenge="l"]{--m-titel:1.8em;}
  .muster__kopf{height:3.8em;margin:0 5cqw;}
  .muster__menue{gap:.8em;font-size:.82em;}
  .muster__menue span:not(:last-child){display:none;}
  .muster__start,.muster[data-branche] .muster__start{
    display:flex;flex-direction:column;gap:1.1em;
    height:auto;min-height:calc(100cqh - 3.8em);padding:0 5cqw 5cqw;
  }
  .muster__inhalt,.muster[data-branche] .muster__inhalt{align-self:stretch;order:2;}
  .muster__bild,.muster[data-branche] .muster__bild{flex:1 1 34cqh;min-height:30cqh;margin:0;order:1;}
  .muster__text{margin-bottom:1em;font-size:1.05em;}
  .muster__knopf,.muster[data-branche="friseur"] .muster__knopf{display:block;}
  .muster__knopf .echt{text-align:center;}
  .muster__dienste{padding:2.4em 5cqw 1.6em;}
  .muster__zwischen{font-size:1.8em;}
  .muster__reihe{grid-template-columns:minmax(0,1fr);gap:1.2em;}
  .muster__fuss{display:flex;flex-direction:column;align-items:stretch;gap:1.2em;padding:0 5cqw 6cqw;}
  .muster__ort{height:13em;}
}

/* Der Film. Nur mit JavaScript und ohne Wunsch nach reduzierter Bewegung. */
@media (prefers-reduced-motion:no-preference){
  .js .bau{padding:0;height:600vh;}
  .js .bau__buehne{
    --fenster-b:min(1152px,calc(100vw - 48px),calc((100vh - 222px) * 1.455));
    position:sticky;top:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4);
    max-width:none;height:100vh;height:100svh;padding:84px 24px 16px;
    overflow:hidden;
  }
  .js .bau__kopf{
    position:absolute;inset:0 24px auto;z-index:1;height:90%;margin:0;
    display:grid;place-items:center;
    text-align:center;pointer-events:none;
  }
  .js .bau__raum{flex:none;width:var(--fenster-b);height:calc(var(--fenster-b) / 1.455);z-index:2;}
  .js .bau__fenster{will-change:transform;}
  .js .bau__seite{flex:1 1 0;min-height:0;aspect-ratio:auto;}
  .js .bau__fenster.is-offen .bau__seite{overflow:visible;}

  .js .bau__raster{
    position:absolute;inset:0;display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.6cqw;padding:0 4cqw;
  }
  .js .bau__raster i{display:block;background:rgba(var(--key-rgb),.1);box-shadow:inset 1px 0 rgba(var(--key-rgb),.24),inset -1px 0 rgba(var(--key-rgb),.24);transform-origin:top;}
  .js .bau__kante{position:absolute;left:0;top:0;bottom:0;z-index:4;display:block;width:2px;background:var(--key);box-shadow:0 0 22px 5px rgba(var(--key-rgb),.5);opacity:0;}
  .js .bau__zeiger{display:block;flex:none;width:1.5px;height:14px;margin-left:-6px;background:var(--key);animation:bau-zeiger 1s steps(2) infinite;}

  /* Bauplan: gestrichelter Kasten mit Namen, liegt im Teil selbst */
  .teil{position:relative;display:block;}
  .muster__knopf.teil{display:inline-block;}
  .plan{position:absolute;inset:0;border:1px dashed rgba(var(--key-rgb),.85);border-radius:4px;background:rgba(var(--key-rgb),.09);pointer-events:none;}
  .plan em{position:absolute;left:.5em;top:.25em;font-size:max(9px,.72rem);font-style:normal;font-weight:700;line-height:1.3;letter-spacing:0;color:var(--key);white-space:nowrap;}

  .bau__handy{
    position:absolute;right:-1.5%;bottom:-2%;z-index:3;display:block;
    height:84%;aspect-ratio:9 / 18.5;padding:5px;
    background:var(--geraet);border:1px solid var(--line-strong);border-radius:26px;
    box-shadow:0 26px 60px rgba(0,0,0,.7);
    opacity:0;
  }
  .bau__schirm{position:relative;height:100%;overflow:hidden;border-radius:20px;container-type:size;background:var(--schirm);}
  .bau__meldung{
    position:absolute;right:-1%;top:18%;z-index:4;display:flex;align-items:center;gap:12px;
    width:min(360px,44%);padding:12px 18px 12px 12px;
    background:rgba(var(--flaeche),.94);border:1px solid var(--line-strong);border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.5);
    color:var(--text);font-size:14px;line-height:1.35;
    opacity:0;
  }
  .bau__meldung-zeichen{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--key);color:var(--auf-key);}
  .bau__meldung-zeichen svg{width:20px;height:20px;}
  .bau__meldung b{display:block;font-weight:800;color:var(--hell);}
  .bau__online.is-live::before{animation:bau-puls 1.8s ease-out infinite;}

  .js .bau__unten{
    position:relative;z-index:1;flex:none;width:var(--fenster-b);min-height:74px;margin:0;
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
    padding-top:20px;
  }
  .js .bau__lauf{position:absolute;left:0;right:0;top:0;display:block;height:2px;border-radius:2px;background:var(--line);}
  .js .bau__lauf::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--key);transform:scaleX(var(--lauf,0));transform-origin:left;}
  .js .bau__zeilen{position:relative;flex:1 1 auto;display:block;align-self:stretch;min-height:54px;margin:0;font-size:clamp(17px,1.75vw,25px);font-weight:700;line-height:1.2;letter-spacing:-0.015em;color:var(--hell);}
  .js .bau__zeilen li{position:absolute;left:0;right:0;top:50%;margin-top:-.6em;opacity:0;text-wrap:balance;will-change:transform,opacity;}
  .js .bau__zeilen li.ist-lang{margin-top:-1.2em;}
  .js .bau__rechts{flex:none;flex-direction:column;flex-wrap:nowrap;align-items:flex-end;justify-content:center;gap:2px;min-width:200px;position:relative;}
  .js .bau__weiter{display:block;font-size:13px;font-weight:600;color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.25em;transition:color var(--transition);}
  .js .bau__weiter:hover{color:var(--key);}
  .js .bau__cta{position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:nowrap;opacity:0;visibility:hidden;}
  .js .bau__rechts.ist-am-ende .bau__weiter,.js .bau__rechts.ist-am-ende .bau__hinweis{opacity:0;visibility:hidden;}
  .js .bau__rechts.ist-am-ende .bau__cta{opacity:1;visibility:visible;transition:opacity 400ms ease,background-color var(--transition);}
  .js .bau__rechts.ist-am-ende .bau__cta:hover{transform:translateY(calc(-50% - 2px));}

  @media (max-width:700px) and (min-height:521px){
    .js .bau{height:560vh;}
    .js .bau__buehne{padding:76px 16px 12px;gap:var(--s-2);}
    .js .bau__raum{flex:1 1 0;min-height:0;width:100%;height:auto;}
    .js .bau__unten{width:100%;flex-wrap:wrap;gap:4px var(--s-2);min-height:112px;align-content:flex-start;padding-top:var(--s-2);}
    .js .bau__zeilen{flex:1 1 100%;min-height:62px;font-size:19px;}
    .js .bau__rechts{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;min-height:42px;min-width:0;}
    .js .bau__punkte{display:none;}
    .js .bau__reiterzeile{padding:6px 6px 0;}
    .js .bau__reiter{gap:5px;padding:7px 8px 8px;font-size:12px;}
    .js .bau__reiter::before{width:6px;height:6px;}
    .js .bau__online{display:none;}
    .js .bau__adresszeile{padding:6px 8px;}
    .bau__handy{display:none;}
    .bau__meldung{left:4%;right:4%;top:17%;width:auto;}
  }
  @media (max-width:700px){
    .nur-klein{display:inline;}
    .nur-gross{display:none;}
  }
  /* Flache Fenster, zum Beispiel das Handy quer */
  @media (max-height:520px){
    .js .bau__buehne{--fenster-b:min(1152px,calc(100vw - 32px),calc((100vh - 118px) * 1.455));gap:4px;padding:60px 16px 4px;}
    .js .bau__kopf{height:100%;padding-top:32px;}
    .js .bau__punkte,.js .bau__hinweis{display:none;}
    .js .bau__reiterzeile{padding:4px 6px 0;}
    .js .bau__reiter{gap:5px;padding:5px 8px 6px;font-size:12px;}
    .js .bau__adresszeile{padding:4px 8px;}
    .js .bau__adresse{height:22px;font-size:12px;}
    .js .bau__unten{min-height:48px;padding-top:6px;}
    .js .bau__zeilen{min-height:40px;font-size:15px;}
    .js .bau__rechts{min-width:0;}
    .js .bau__zeilen li.ist-lang{margin-top:-.6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .bau__meldung{width:min(280px,62%);padding:6px 10px 6px 6px;font-size:12px;}
    .bau__meldung-zeichen{width:28px;height:28px;}
    .bau__meldung-zeichen svg{width:15px;height:15px;}
  }
}
@keyframes bau-zeiger{to{opacity:0;}}
@keyframes bau-puls{0%{box-shadow:0 0 0 0 rgba(var(--key-rgb),.55);}100%{box-shadow:0 0 0 9px rgba(var(--key-rgb),0);}}
@media (max-width:860px){
  .bau__zeilen{grid-template-columns:minmax(0,1fr);}
}


/* Die Kopfzeile im Hero hat zwei Einträge mehr, die Links passen erst ab 961 px */
@media (max-width:960px){
  .kopfzeile__links{display:none;}
  .kopfzeile__tel{margin-left:auto;padding-left:0;border-left:0;}
}


/* =========================================================
   Runde 6: Weitere Scroll-Effekte
   Hero: die zwei Zeilen fahren beim Scrollen auseinander.
   Abschnittstexte: Wort für Wort füllen sie sich beim Lesen, main.js
   setzt die Deckkraft. Karte „Webdesign“: das Handy läuft schneller als
   der Rechner.
   ========================================================= */
.hero__title > .wort{transform:translateX(calc(var(--hero-x,0px) * -1));}
.hero__title .serif{transform:translateX(var(--hero-x,0px));}
.fuell-wort{transition:opacity 220ms linear;}
.fuell-text{color:var(--text);}
.buehne .geraet--handy{translate:0 var(--tiefe,0);}

/* =========================================================
   Graphit und Weiß (01.11.2026)
   Weiß ist so hell wie die Überschriften. Was vorher die Akzentfarbe
   abgehoben hat, braucht deshalb einen anderen Unterschied.
   ========================================================= */
::selection{background:var(--key);color:var(--auf-key);}

/* Hover: Dieselbe Farbe würde nichts zeigen, also dimmen oder unterstreichen */
.faq__frage:hover{color:var(--muted);}
.faq__frage:hover .faq__zeichen{color:var(--key);}
.contact__list a:hover,.footer__col a:hover,.kopfzeile__tel:hover{text-decoration:underline;text-underline-offset:.2em;}
.legal a:hover,.check__ende a:hover{text-decoration-thickness:2px;}
.js .bau__weiter:hover{text-decoration-color:var(--key);}

/* Hervorhebung: Weiß hebt sich nur von gedämpfter Schrift ab */
.bau__titel{color:var(--muted);}
.gewicht--schnitt .gewicht__zahl{color:var(--muted);}
.check__wert{color:var(--muted);}

/* Bauplan-Schilder im Film: auf hellen wie dunklen Beispielseiten lesbar */
.plan em{background:var(--key);color:var(--auf-key);padding:.1em .45em;border-radius:3px;}

/* Hero: Die Isar wandert beim Scrollen nach unten. Die Unterkante läuft weich
   aus, damit der Schein um Landau nicht hart abreißt. Schrift und Knöpfe
   liegen darüber. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;
  background:linear-gradient(transparent,var(--bg));
}
.hero__inner{z-index:1;}

/* Film: Der Schatten des Handys legt sich sonst über den Knopf am Ende */
.js .bau__unten{z-index:6;}

@media (max-width:860px){
  .hero::after{height:40px;}
  .isar__hof{display:none;}
}


/* =========================================================
   Runde 7, Idee 3: Unterseiten ohne weißen Blitz
   Beim Wechsel zwischen Startseite, Impressum, Datenschutz und
   Muster-Angebot blendet der Inhalt über, die Leiste gleitet an ihren
   Platz. Bei reduzierter Bewegung aus. Das Vorladen steht als
   speculationrules am Ende von index.html. Browser ohne Unterstützung
   laden die Seite wie bisher.
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
}
/* Nur am Rechner: auf dem Handy hängt das Klappmenü an der Leiste */
@media (min-width:861px){
  .nav__inner{view-transition-name:leiste;}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:250ms;}
::view-transition-group(leiste){animation-duration:400ms;animation-timing-function:cubic-bezier(.2,.7,.3,1);}