/* Manoberg mb2 - erzeugt von tools/build.py, nicht von Hand aendern */
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}
/* Nur fuer die Wortmarke im Hero, Latin-Teilsatz, 19 kB. */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#0d0f14;
  --paper:#ffffff;
  --warm:#faf9f7;
  --line:#e8e8ec;
  --fg:#12141a;
  --fg-mid:#4d5462;
  --fg-dim:#6a7180;
  --on-dark:#f2f4f8;
  --on-dark-mid:#a8b0bf;
  --red:#c21c0b;
  --red-hover:#a41607;
  --red-light:#f06a55;
  --red-soft:#fdf1ef;
  --maxw:1240px;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r-card:20px;
  --r-block:32px;
  --pad:clamp(72px,9vw,124px);
  --shadow:0 18px 40px -22px rgba(13,15,20,.28), 0 2px 8px -4px rgba(13,15,20,.10);
  --shadow-lift:0 28px 60px -28px rgba(13,15,20,.36), 0 4px 12px -6px rgba(13,15,20,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--fg);font-family:var(--sans);
  font-size:17px;line-height:1.62;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{fill:currentColor}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
/* Nur fuer Vorleseprogramme und Suchmaschinen sichtbar. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:0;top:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.dot{color:var(--red)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--red);display:block;margin-bottom:18px}
.eyebrow.on-dark{color:var(--red-light)}

/* ----------------------------------------------------- schwebende Kopfzeile */
.top{position:fixed;top:14px;left:0;right:0;z-index:60;padding-inline:clamp(10px,3vw,28px)}
.top-in{max-width:1420px;margin-inline:auto;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:22px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;
  padding:10px 12px 10px 22px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand img{width:40px}
.brand b{font-family:"Montserrat",var(--sans);font-weight:700;letter-spacing:.07em;font-size:15px;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{position:relative;text-decoration:none;font-size:15px;font-weight:500;color:var(--fg-mid);
  padding:9px 14px;border-radius:12px;white-space:nowrap;transition:color .2s ease,background .2s ease}
.nav a:hover{color:var(--fg);background:#f2f3f6}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;
  height:2px;border-radius:2px;background:var(--red)}
.top-act{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.nav + .top-act{margin-left:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;
  font-size:15px;font-weight:600;padding:13px 24px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 24px -12px rgba(194,28,11,.7)}
.btn-primary:hover{background:var(--red-hover);transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:#c9ccd4;color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg);transform:translateY(-1px)}
.btn-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
.btn-dark:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.icon-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;
  border-radius:14px;background:#f2f3f6;border:1px solid var(--line);color:var(--fg);cursor:pointer}
.icon-btn svg{width:20px;height:20px}

.sheet{position:fixed;top:12px;right:12px;bottom:12px;width:min(380px,calc(100vw - 24px));
  background:#fff;border-radius:24px;padding:26px 24px;z-index:80;overflow-y:auto;
  box-shadow:var(--shadow-lift);transform:translateX(calc(100% + 20px));visibility:hidden;
  transition:transform .38s cubic-bezier(.32,.72,0,1)}
.sheet.open{transform:none;visibility:visible}
.sheet h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:500;margin:24px 0 4px}
.sheet a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:500}
.sheet a::after{content:"→";color:var(--fg-dim)}
.sheet-gruppe{border-bottom:1px solid var(--line)}
/* Platz fuer den Schliessknopf: sonst liegt das Plus der ersten Gruppe darunter. */
.sheet-gruppe:first-of-type{margin-top:46px}
.sheet-gruppe summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:15px 0;font-size:17px;font-weight:600}
.sheet-gruppe summary::-webkit-details-marker{display:none}
.sheet-gruppe summary::after{content:"+";font-size:21px;line-height:1;color:var(--fg-dim);
  transition:transform .25s ease}
.sheet-gruppe[open] summary::after{transform:rotate(45deg)}
.sheet-liste{padding-bottom:8px}
.sheet-liste a{font-size:16px;font-weight:500;color:var(--fg-mid);padding:11px 0 11px 14px}
.sheet-liste a:last-child{border-bottom:none}
.sheet .btn{width:100%;margin-top:24px}
.sheet .btn::after{content:none}
.scrim{position:fixed;inset:0;background:rgba(13,15,20,.4);z-index:70;opacity:0;pointer-events:none;
  transition:opacity .3s ease}
.scrim.on{opacity:1;pointer-events:auto}
.sheet-close{position:absolute;top:18px;right:18px;display:inline-flex;width:40px;height:40px}

/* ------------------------------------------------------------------- Hero */
.hero{position:relative;background:var(--ink);color:var(--on-dark);
  border-radius:0 0 var(--r-block) var(--r-block);
  padding-block:clamp(150px,19vw,260px) clamp(96px,12vw,170px);overflow:hidden;isolation:isolate;
  min-height:min(96vh,1000px);display:flex;align-items:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  opacity:.92;pointer-events:none}
.hero::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;z-index:-1;
  background:radial-gradient(56% 56% at 28% 4%, rgba(194,28,11,.30) 0%, rgba(194,28,11,0) 68%),
             radial-gradient(48% 48% at 86% 24%, rgba(54,93,192,.22) 0%, rgba(54,93,192,0) 70%)}
.wordmark{font-family:"Montserrat",var(--sans);font-size:clamp(2.1rem,10.4vw,9.2rem);white-space:nowrap;font-weight:700;letter-spacing:.04em;
  line-height:1;margin:0 0 clamp(26px,3.2vw,42px);color:#fff;text-align:center}

/* Auftritt beim Laden: die Wortmarke faehrt von gross auf ihr Mass zurueck,
   der Rest zieht verzoegert nach. Laeuft auf Wunsch von Patrick auch bei
   gesetztem "Bewegung reduzieren", damit Handy und PC gleich aussehen. */
  @keyframes zoom-out{
    from{opacity:0;transform:scale(1.28);filter:blur(10px);letter-spacing:.16em}
    to  {opacity:1;transform:none;filter:blur(0);letter-spacing:.04em}
  }
  @keyframes auf{
    from{opacity:0;transform:translateY(16px)}
    to  {opacity:1;transform:none}
  }
  .hero .wordmark{animation:zoom-out 1.15s cubic-bezier(.16,.84,.26,1) both}
  .hero .hero-lede{animation:auf .8s cubic-bezier(.2,.7,.2,1) .42s both}
  .hero .hero-act{animation:auf .8s cubic-bezier(.2,.7,.2,1) .56s both}
  .hero .hero-facts{animation:auf .8s cubic-bezier(.2,.7,.2,1) .7s both}
  .hero::before{animation:auf 1.4s ease .1s both}

  /* Gleicher Auftritt auf den Unterseiten. Eigene Titel-Kurve: die Wortmarke
     der Startseite endet auf ihrer Sperrung, ein Fliesstitel darf das nicht. */
  @keyframes auf-titel{
    from{opacity:0;transform:scale(1.08);filter:blur(8px)}
    to  {opacity:1;transform:none;filter:blur(0)}
  }
  .page-head .eyebrow,.hero-mitte .eyebrow{animation:auf .7s cubic-bezier(.2,.7,.2,1) .06s both}
  .page-head h1,.hero-mitte h1{animation:auf-titel .95s cubic-bezier(.16,.84,.26,1) both}
  .page-head .lede,.hero-mitte .lede{animation:auf .8s cubic-bezier(.2,.7,.2,1) .34s both}
  .page-head .hero-act,.hero-mitte .asuche,.hero-mitte .aklein{
    animation:auf .8s cubic-bezier(.2,.7,.2,1) .48s both}
  .page-head::before,.hero-mitte::before{animation:auf 1.4s ease .1s both}
.hero .wrap{width:100%}
.wordmark .dot{color:var(--red-light)}
.hero-lede{max-width:46ch;margin-inline:auto;text-align:center;color:var(--on-dark-mid);
  font-size:clamp(1.04rem,1.5vw,1.28rem)}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;margin-top:42px;
  color:var(--on-dark-mid);font-size:.95rem}
.hero-facts span{display:inline-flex;align-items:center;gap:8px}
.hero-facts svg{width:17px;height:17px;color:var(--red-light);flex:0 0 auto}

.page-head{background:var(--ink);color:var(--on-dark);border-radius:0 0 var(--r-block) var(--r-block);
  padding-block:clamp(120px,14vw,168px) clamp(52px,6vw,84px);position:relative;overflow:hidden;
  isolation:isolate;text-align:center}
.page-head::before{content:"";position:absolute;inset:-50% -20% auto -20%;height:160%;z-index:-1;
  background:radial-gradient(48% 56% at 50% 2%, rgba(194,28,11,.26) 0%, rgba(194,28,11,0) 68%)}
.page-head h1{font-size:clamp(2.1rem,5.4vw,3.9rem);max-width:19ch;color:#fff;
  margin-inline:auto}
.page-head .lede{margin:22px auto 0;max-width:56ch;color:var(--on-dark-mid);font-size:1.1rem}
.page-head .hero-act{justify-content:center}

/* --------------------------------------------- Programme und Partner (Band) */
.partner{background:var(--paper);padding-block:clamp(30px,4vw,46px) clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--line)}
.partner-titel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);text-align:center;margin-bottom:clamp(20px,2.4vw,30px)}
.lauf{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lauf-spur{display:flex;width:max-content}
.lauf-reihe{display:flex;align-items:center;gap:clamp(40px,5.5vw,76px);
  padding-right:clamp(40px,5.5vw,76px)}
.lauf-logo{display:flex;align-items:center}
.lauf{--logo-h:30px}
.lauf-logo svg{width:var(--logo-h);height:var(--logo-h);color:#79818f;
  transition:color .25s ease;flex:0 0 auto}
.lauf-logo:hover svg{color:var(--fg)}
.lauf-logo svg.breit{width:calc(var(--logo-h) * 2.13)}
/* Die eigenen Marken sind Bilder und werden entfaerbt, damit die Reihe
   einheitlich grau bleibt - farbig zwischen grauen Zeichen wirkt wie ein
   Fehler. Beim Ueberfahren wird die ganze Reihe kraeftiger, nicht bunt. */
/* brightness(0) macht aus dem Bild eine volle Silhouette, die Deckkraft gibt
   danach denselben Grauwert wie #79818f bei den Fremdzeichen. Blosses
   grayscale() liesse die duennen Schreibschrift-Zuege als graues Gekritzel
   stehen, zweifarbig und viel unruhiger als die flachen Zeichen daneben. */
.lauf-logo.eigen img{height:var(--logo-h);width:auto;transition:filter .25s ease;
  filter:grayscale(1) brightness(0) opacity(.52)}
.lauf-logo.eigen:hover img{filter:grayscale(1) brightness(0) opacity(.88)}
@keyframes lauf{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.lauf-spur{animation:lauf 46s linear infinite}
.lauf:hover .lauf-spur{animation-play-state:paused}

/* -------------------------------------------------------------- Abschnitte */
.sec{padding-block:var(--pad);background:var(--paper)}
.sec.warm{background:var(--warm)}
.sec-head{margin-bottom:clamp(34px,4.5vw,58px)}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.4rem);max-width:17ch}
.sec-head .lede{margin-top:20px;max-width:58ch;color:var(--fg-mid);font-size:1.07rem}
.sec-head.mitte{text-align:center}
.sec-head.mitte h2,.sec-head.mitte .lede{margin-inline:auto}

/* ------------------------------------------------------------------ Karten */
.grid{display:grid;gap:clamp(16px,1.8vw,24px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,2.4vw,32px);box-shadow:var(--shadow);text-decoration:none;display:flex;
  flex-direction:column;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card h3{font-size:1.24rem;margin-bottom:10px}
.card p{color:var(--fg-mid);font-size:.99rem}
.chip{width:46px;height:46px;border-radius:14px;background:var(--red-soft);color:var(--red);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;flex:0 0 auto}
.chip svg{width:22px;height:22px}
.card .go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:.92rem;font-weight:600;color:var(--red)}
.card .go svg{width:15px;height:15px;transition:transform .25s ease}
a.card:hover .go svg{transform:translateX(4px)}
@property --trace{syntax:'<angle>';inherits:false;initial-value:0deg}
.card--trace{position:relative}
.card--trace::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--trace),transparent 0 62%,var(--red) 78%,#365dc0 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .25s ease;pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card--trace:hover::after{opacity:1;animation:trace 2.4s linear infinite}
}
.way.dark.card--trace::after{background:conic-gradient(from var(--trace),transparent 0 62%,var(--red-light) 78%,#7d9cf0 92%,transparent 100%)}
@keyframes trace{to{--trace:360deg}}
/* Ohne Maus gibt es kein Ueberfahren. Auf Tippgeraeten laeuft die Linie
   deshalb einmal, sobald die Kachel eingeblendet wird. */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .card--trace.in::after{animation:trace-einmal 2.6s linear .25s 1 both}
}
@keyframes trace-einmal{
  0%{--trace:0deg;opacity:0} 10%{opacity:1} 88%{opacity:1} 100%{--trace:360deg;opacity:0}
}

.ticks li{position:relative;padding:9px 0 9px 30px;color:var(--fg-mid);font-size:.99rem}
.ticks li + li{border-top:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;border-radius:50%;
  background:var(--red-soft)}
.ticks li::after{content:"";position:absolute;left:5px;top:20px;width:7px;height:4px;
  border-left:1.7px solid var(--red);border-bottom:1.7px solid var(--red);transform:rotate(-45deg)}

/* ------------------------------------------------------------- Projekte */
.proj-buehne{position:relative;margin-top:clamp(8px,1.5vw,18px)}
.proj-spur{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:6px clamp(18px,4vw,40px) 10px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.proj-spur::-webkit-scrollbar{display:none}
.proj{flex:0 0 auto;width:clamp(180px,16vw,226px);scroll-snap-align:center}
.proj-karte{display:block;text-decoration:none;border-radius:18px;overflow:hidden;
  background:#e9ebf0;box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.proj-karte figure{margin:0;overflow:hidden}
.proj-karte img{width:100%;aspect-ratio:620/1100;object-fit:cover;object-position:top center;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.proj-karte:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.proj-karte:hover img{transform:scale(1.04)}
.proj-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 2px 0}
.proj-fuss b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.proj-fuss span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-dim);margin-top:4px}
.round{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;color:var(--fg);
  background:var(--paper);text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.round svg{width:15px;height:15px}
.round:hover{background:var(--red);border-color:var(--red);color:#fff}

.proj-pfeil{position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);transition:background .2s ease,color .2s ease,opacity .2s ease}
.proj-pfeil svg{width:17px;height:17px}
.proj-pfeil:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.proj-pfeil.links{left:clamp(6px,2vw,26px)}
.proj-pfeil.links svg{transform:rotate(90deg)}
.proj-pfeil.rechts{right:clamp(6px,2vw,26px)}
.proj-pfeil.rechts svg{transform:rotate(-90deg)}
.proj-pfeil[disabled]{opacity:.35;cursor:default}
.more-line{margin-top:clamp(26px,3.4vw,42px);display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:var(--fg-mid);font-size:.9rem}
.sec.warm .pill{background:var(--warm)}

/* --------------------------------------------------------------- Schritte */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,2.2vw,30px)}
.step .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--red);font-weight:500;
  display:block;margin-bottom:16px}
.step h3{font-size:1.14rem;margin-bottom:8px}
.step p{color:var(--fg-mid);font-size:.97rem}

/* ------------------------------------------------------------- Zwei Wege */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px)}
.way{border-radius:var(--r-card);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow)}
.way.dark{background:var(--ink);color:var(--on-dark);border-color:transparent}
.way.dark h3{color:#fff}
.way.dark li{color:var(--on-dark-mid);border-color:rgba(255,255,255,.14)}
.way.dark .ticks li::before{background:rgba(240,106,85,.2)}
.way.dark .ticks li::after{border-color:var(--red-light)}
.way .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red)}
.way.dark .kicker{color:var(--red-light)}
/* Rechtsgrundlage ueber dem Landesnamen auf den Werkzeugseiten. */
.card .kicker{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);margin-bottom:8px}
.card .kicker + h3{margin-top:0}
.way h3{font-size:1.7rem;margin:12px 0 10px}
.way > p{color:var(--fg-mid);font-size:1rem}
.way.dark > p{color:var(--on-dark-mid)}
.way ul{margin:22px 0 28px;flex:1}
.way .btn{align-self:flex-start}

/* ------------------------------------------------------------- Abo-Preise */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);align-items:start}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan.best{border-color:rgba(194,28,11,.4);box-shadow:var(--shadow-lift);position:relative}
.plan .tag{position:absolute;top:-13px;left:clamp(24px,2.6vw,34px);background:var(--red);color:#fff;
  font-size:11px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px}
.plan h3{font-size:1.2rem}
.plan .amount{font-size:2.4rem;font-weight:700;letter-spacing:-.04em;margin:16px 0 2px}
.plan .amount small{font-size:1rem;font-weight:500;color:var(--fg-dim);letter-spacing:0}
.plan ul{margin:22px 0 26px;flex:1}
.plan-note{margin-top:24px;color:var(--fg-dim);font-size:.93rem;max-width:74ch}

/* -------------------------------------------------------------- Vergleich */
.vs-scroll{overflow-x:auto;border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--paper);box-shadow:var(--shadow)}
.vs{width:100%;border-collapse:collapse;min-width:640px}
.vs th,.vs td{text-align:left;padding:16px 22px;font-size:.98rem;vertical-align:top;
  border-bottom:1px solid var(--line)}
.vs thead th{font-size:1rem;font-weight:600;background:#f7f8fa}
.vs thead th.hi{background:var(--red-soft);color:var(--red)}
.vs td.hi{background:#fefaf9}
.vs td:first-child{font-weight:600;width:24%}
.vs td:not(:first-child){color:var(--fg-mid)}
.vs tbody tr:last-child td{border-bottom:0}

/* -------------------------------------------------------------- Dunkelband */
.band{background:var(--ink);color:var(--on-dark);border-radius:var(--r-block);
  padding:clamp(34px,5vw,72px);position:relative;overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;inset:auto -10% -70% 25%;height:180%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(194,28,11,.26) 0%, rgba(194,28,11,0) 70%)}
.band h2{font-size:clamp(1.8rem,3.6vw,2.9rem);color:#fff;max-width:18ch}
.band p{color:var(--on-dark-mid);margin-top:18px;max-width:56ch}
.band .hero-act{justify-content:flex-start;margin-top:30px}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);
  margin-top:clamp(34px,4vw,52px);border-top:1px solid rgba(255,255,255,.16);
  padding-top:clamp(26px,3vw,38px)}
.band-grid b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.band-grid span{color:var(--on-dark-mid);font-size:.94rem}

/* ------------------------------------------------------------------ Demo */
.demo-schalter{display:flex;width:max-content;margin-inline:auto;gap:4px;padding:5px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:clamp(28px,3.4vw,44px)}
.dsch{border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--fg-mid);
  padding:10px 24px;border-radius:999px;cursor:pointer;transition:background .25s ease,color .25s ease}
.dsch:hover{color:var(--fg)}
.dsch.aktiv{background:var(--ink);color:#fff}

.demo{position:relative;--demo-pt:clamp(40px,6vw,96px);padding-top:var(--demo-pt);
  padding-bottom:clamp(20px,3vw,40px)}
.browser{border-radius:18px;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow-lift);width:min(100%,880px);
  transition:transform .55s cubic-bezier(.32,.72,0,1),opacity .45s ease,filter .45s ease}
.browser-leiste{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#f4f5f8;
  border-bottom:1px solid var(--line)}
.punkte{display:inline-flex;gap:6px}
.punkte i{width:10px;height:10px;border-radius:50%;background:#d3d6dd}
.adresse{flex:1;text-align:center;font-family:var(--mono);font-size:12px;color:var(--fg-dim);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  max-width:330px;margin-inline:auto}
.browser-inhalt{background:#fff;height:408px;overflow:hidden}

/* Mittig zum Browserfenster: der Rahmen ist 468 hoch, das Telefon 454,
   also die halbe Differenz tiefer als dessen Oberkante. */
.handy{position:absolute;right:0;top:calc(var(--demo-pt) + 7px);width:240px;
  transform-origin:bottom right;
  transition:transform .55s cubic-bezier(.32,.72,0,1),opacity .45s ease,filter .45s ease}
.handy-rahmen{position:relative;border-radius:34px;background:#0d0f14;padding:10px;
  box-shadow:var(--shadow-lift)}
.kerbe{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:74px;height:6px;
  border-radius:99px;background:#2b3140;z-index:2}
.handy-inhalt{border-radius:26px;overflow:hidden;background:#fff;height:434px}

/* Umschalten: was gewaehlt ist, steht vorn */
.demo.handy-vorn .browser{transform:scale(.93) translateX(-2%);opacity:.38;filter:blur(2px)}
.demo.handy-vorn .handy{transform:scale(1.22) translateX(-98%);z-index:3}
.demo:not(.handy-vorn) .handy{opacity:.92}

/* Die Beispielseite im Rahmen */
.mini{font-size:12px;color:#1a1d26;background:#fff}
.mini .mini-marke,.mini .mini-titel,.mini .mini-kartentitel{font-weight:700;letter-spacing:-.02em}
.mini-kopf{display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid #edeef2}
.mini-kopf .mini-marke{font-size:13px;letter-spacing:.14em}
.mini-nav{display:inline-flex;gap:14px}
.mini-nav i{width:26px;height:5px;border-radius:3px;background:#dfe2e8}
.mini-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;padding:26px 22px;align-items:center}
.mini-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:#6a7180;display:block;margin-bottom:10px}
.mini-text .mini-titel{display:block;font-size:26px;line-height:1.08}
.mini-text p{color:#5b6274;margin:10px 0 16px;font-size:12px}
.mini-btn{display:inline-block;background:#1a1d26;color:#fff;border-radius:999px;
  padding:8px 16px;font-size:11px;font-weight:600}
.mini-bild{border-radius:12px;min-height:118px;
  background:linear-gradient(140deg,#c9d3e4 0%,#8fa2be 45%,#4f6285 100%)}
.mini-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px 26px}
.mini-karten > div{border:1px solid #edeef2;border-radius:12px;padding:14px}
.mini-karten i{display:block;width:20px;height:20px;border-radius:6px;background:#e7ebf2;margin-bottom:10px}
.mini-karten .mini-kartentitel{display:block;font-size:12px;margin-bottom:8px}
.mini-karten span:not(.mini-kartentitel){display:block;height:5px;border-radius:3px;background:#eef0f4;margin-bottom:5px}
.mini-karten span:last-child{width:62%}

/* Schmale Fassung: alles untereinander */
.mini-handy .mini-kopf{padding:12px 14px}
.mini-handy .mini-nav i{width:16px}
.mini-handy .mini-hero{grid-template-columns:1fr;gap:14px;padding:18px 14px}
.mini-handy .mini-text strong{font-size:20px}
.mini-handy .mini-bild{min-height:96px;order:-1}
.mini-handy .mini-karten{grid-template-columns:1fr;padding:0 14px 18px}

.demo-hinweis{margin-top:clamp(22px,3vw,34px);color:var(--fg-dim);font-size:.92rem;max-width:64ch}

@media (max-width:900px){
  .demo{display:grid;justify-items:center}
  .browser{width:100%}
  .handy{position:static;width:230px;margin-top:-30px}
  .demo.handy-vorn .browser{display:none}
  .demo.handy-vorn .handy{transform:none;margin-top:0}
  .demo:not(.handy-vorn) .handy{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .browser,.handy{transition:none}
}

/* -------------------------------------------------------------------- FAQ */
.faq{max-width:900px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;
  box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:20px 62px 20px 24px;position:relative;
  font-size:1.05rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:calc(50% - 13px);width:26px;height:26px;
  border-radius:50%;background:var(--red-soft)}
.faq summary::before{content:"+";position:absolute;right:22px;top:calc(50% - 13px);z-index:1;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:var(--red);font-size:19px;line-height:1;font-weight:600;transition:transform .25s ease}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;color:var(--fg-mid)}

/* ----------------------------------------------------------------- Zitat */
.claim{background:var(--warm);border-radius:var(--r-card);padding:clamp(28px,3vw,44px);
  border:1px solid var(--line)}
.sec.warm .claim{background:var(--paper)}
.claim h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:14px}
.claim p{color:var(--fg-mid);max-width:62ch}

/* --------------------------------------------------------------- Kontakt */
.kontakt{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3vw,44px);align-items:start}
.kontakt-list li{padding:16px 0;border-bottom:1px solid var(--line)}
.kontakt-list li:last-child{border-bottom:0}
.kontakt-list span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);margin-bottom:5px}
.kontakt-list a{text-decoration:none;font-size:1.12rem;font-weight:600}
.kontakt-list a:hover{color:var(--red)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;align-content:start;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:600;color:var(--fg-mid)}
.field input,.field textarea,.field select{font:inherit;font-size:16px;padding:14px 16px;
  border-radius:14px;border:1px solid #c2c6cf;background:var(--paper);color:var(--fg);width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(194,28,11,.14)}
.form-note{grid-column:1/-1;color:var(--fg-dim);font-size:.9rem}
.form-msg:empty{display:none}
.form-msg{grid-column:1/-1;padding:13px 16px;border-radius:14px;background:var(--red-soft);
  border:1px solid rgba(194,28,11,.3);font-size:.96rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ Fuss */
footer{background:var(--ink);color:var(--on-dark);border-radius:var(--r-block) var(--r-block) 0 0;
  padding-block:clamp(48px,6vw,80px) 30px;margin-top:clamp(40px,5vw,72px)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.foot-marke{font-weight:700;font-size:20px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:18px}
.foot-marke .dot{color:var(--red-light)}
.foot p{color:var(--on-dark-mid);font-size:.96rem;max-width:32ch}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-mid);font-weight:500;margin-bottom:20px}
.foot li{padding:8px 0}
.foot a{text-decoration:none;color:var(--on-dark);font-size:1.02rem;
  transition:color .2s ease}
.foot a:hover{color:var(--red-light)}
.foot-end{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;margin-top:clamp(36px,4vw,60px);
  padding-top:24px;border-top:1px solid rgba(255,255,255,.16);color:var(--on-dark-mid);font-size:.9rem}
.foot-end a{color:var(--on-dark-mid);font-size:.9rem}

/* ----------------------------------------------------------- Rechtstexte */
.legal{max-width:76ch}
.legal h2{font-size:1.4rem;margin:44px 0 14px}
.legal h3{font-size:1.1rem;margin:28px 0 10px}
.legal p{margin-bottom:14px;color:var(--fg-mid)}
.legal ul{margin:0 0 18px}
.legal li{padding:5px 0 5px 26px;position:relative;color:var(--fg-mid)}
.legal li::before{content:"";position:absolute;left:4px;top:15px;width:7px;height:7px;border-radius:50%;
  background:var(--red)}
.legal address{font-style:normal;color:var(--fg-mid);margin-bottom:14px}
.legal a{color:var(--red)}

/* -------------------------------------------------------------- Bewegung */
@media (scripting: enabled){
  .reveal{opacity:0;transform:translateY(20px);
    transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  /* Kein laufendes Bild: das Standbild des Videos bleibt als Hintergrund. */
  .hero-video{display:none}
  .hero{background-image:url("../img/hero-poster.jpg?v=97bf8656");background-size:cover;
    background-position:center}
  .reveal{opacity:1!important;transform:none!important;transition:none}
  .ref img,.card,.btn,.sheet{transition:none}
}

/* --------------------------------------------------------------- Breiten */
@media (max-width:1100px){
  .nav{display:none}
  .icon-btn{display:inline-flex}
  /* Ohne das hier klebt der Knopf an der Wortmarke: .nav ist zwar
     ausgeblendet, steht aber weiter im Baum und trifft .nav + .top-act. */
  .nav + .top-act{margin-left:auto}
  .g-4,.steps,.band-grid,.g-3,.refs,.plans{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .kontakt{grid-template-columns:1fr}
}
@media (max-width:820px){
  .g-2,.ways{grid-template-columns:1fr}
}
@media (max-width:700px){
  /* Auf schmalen Schirmen wird gewischt; die Tasten wuerden die Karten verdecken. */
  .proj-pfeil{display:none}
  .proj{width:min(70vw,240px)}
}
@media (max-width:640px){
  body{font-size:16px}
  html{scroll-padding-top:96px}
  .g-3,.g-4,.refs,.plans,.steps,.band-grid,.form{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .top-act .btn-primary{display:none}
  .hero-facts{gap:10px 20px}
  /* Auf 390 px eine einzige durchlaufende Reihe. Die Groesse steckt in
     --logo-h, sonst ueberschreibt eine harte Angabe hier die Variable oben. */
  .lauf{--logo-h:34px}
  .lauf-reihe{gap:30px;padding-right:30px}
  .band{border-radius:24px}
}

/* ------------------------------------------------------------ Generatoren */
.gnote{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  padding:clamp(20px,2.4vw,28px);margin-bottom:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
.gnote p{margin:0;color:var(--fg-mid)}
.gnote p + p{margin-top:12px}
/* Der Pflicht-Haken. Ohne ihn bleibt die Vorschau leer und die Knoepfe tot:
   der Hinweis soll gelesen und nicht weggeklickt werden. */
.gzustimmung{display:flex;gap:12px;align-items:start;margin-top:18px;padding:16px 18px;
  border:1px solid rgba(194,28,11,.35);border-radius:14px;background:rgba(194,28,11,.05);
  cursor:pointer;font-size:.93rem;line-height:1.55}
.gzustimmung input{margin-top:3px;flex:0 0 auto;accent-color:var(--red);width:19px;height:19px}
.gzustimmung.offen{border-color:var(--red);box-shadow:0 0 0 3px rgba(194,28,11,.12)}
.gsperre{color:var(--fg-dim)}
.gsperre strong{color:var(--fg)}
.btn[disabled]{opacity:.45;pointer-events:none}
.gtabs{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow);width:max-content;max-width:100%;
  margin-bottom:clamp(22px,2.6vw,32px);overflow-x:auto}
.gtab{border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--fg-mid);
  padding:10px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .25s ease,color .25s ease}
.gtab:hover{color:var(--fg)}
.gtab.aktiv{background:var(--ink);color:#fff}
.ggrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,2.6vw,34px);align-items:start}
.glede{margin:0 0 20px;color:var(--fg-mid)}
/* min-width:0 ist Pflicht: ein fieldset bekommt vom Browser min-width:min-content
   und schiebt sonst bei 320 px die ganze Spalte aus dem Fenster. */
.gblock{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  padding:clamp(18px,2vw,24px);margin:0 0 16px;display:grid;min-width:0;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-content:start}
.ggrid > *{min-width:0}
/* .btn setzt white-space:nowrap; der lange Uebernehmen-Knopf diktiert damit die
   Mindestbreite der ganzen Spalte. Auf schmalen Schirmen darf er umbrechen. */
.gform .btn{white-space:normal;text-align:center}
.gblock legend{grid-column:1/-1;font-weight:700;font-size:1.02rem;padding:0 6px}
.gfeld{display:grid;align-content:start;gap:6px;min-width:0}
.gfeld-weit,.ggruppe,.ghinweis{grid-column:1/-1}
.gfeld label{font-size:.9rem;font-weight:600}
.gpflicht{color:var(--red);font-weight:700}
/* Firefox faerbt leere Pflichtfelder von sich aus rot ein. Hier waere das ein
   Fehler, der keiner ist: die Felder sind beim Aufruf naturgemaess leer. */
.gfeld :invalid{box-shadow:none}
.gfeld input,.gfeld select,.gfeld textarea{width:100%;font:inherit;font-size:.95rem;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  color:var(--fg)}
.gfeld textarea{resize:vertical}
.gfeld input:focus-visible,.gfeld select:focus-visible,.gfeld textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:1px}
.gfeld small,.gschalter small{display:block;color:var(--fg-dim);font-size:.82rem;line-height:1.45}
.gschalter{display:flex;gap:10px;align-items:start;font-size:.93rem;cursor:pointer;min-width:0}
.gschalter input{margin-top:3px;flex:0 0 auto;accent-color:var(--red);width:17px;height:17px}
.ggruppe h4{margin:14px 0 8px;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-dim)}
.ggruppe{display:grid;gap:9px}
.ghinweis{margin:0;color:var(--fg-mid);font-size:.92rem}
.gsuche{display:flex;align-items:center;gap:12px;margin-top:4px}
.gsuche input{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:11px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--fg)}
.gsuche input:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.gsuche span{font-family:var(--mono);font-size:11px;color:var(--fg-dim);white-space:nowrap}
.ggruppe[hidden]{display:none}
/* Laenderabhaengige Felder blendet das JavaScript ein und aus. Ohne JavaScript
   sind sie sichtbar - lieber ein Feld zu viel als ein fehlendes Pflichtfeld. */
.gfeld[hidden],.gschalter[hidden],.gblock[hidden]{display:none}
.gaus{position:sticky;top:118px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-lift);
  overflow:hidden;display:grid;grid-template-rows:auto 1fr;max-height:calc(100vh - 150px)}
.gaus-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:#f7f8fa}
.ggrundlage{display:block;font-family:var(--mono);font-size:11px;color:var(--fg-dim);
  margin-top:3px}
.gaus-akt{display:flex;gap:8px;flex-wrap:wrap}
.gklein{padding:9px 16px;font-size:.86rem}
.gaus-text{padding:22px 24px 28px;overflow-y:auto;font-size:.95rem}
.gaus-text h2{font-size:1.06rem;margin:22px 0 8px}
.gaus-text h2:first-child{margin-top:0}
.gaus-text h3{font-size:.97rem;margin:16px 0 6px}
.gaus-text p,.gaus-text li{color:var(--fg-mid)}
.gaus-text .gleer{color:var(--fg-dim)}
.gcta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow)}
.gcta h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:0 0 8px}
.gcta p{margin:0;color:var(--fg-mid);max-width:62ch}
@media (max-width:1000px){
  .ggrid{grid-template-columns:minmax(0,1fr)}
  .gaus{position:static;max-height:none}
  .gaus-text{max-height:60vh}
}
@media (max-width:620px){
  .gblock{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------------------- Analyse */
/* Oben dasselbe Mass wie .page-head: die feste Kopfzeile endet je nach Breite
   bei 80-86px, mit nur 64px Polsterung lag die Rubrik dahinter. */
.hero-mitte{background:var(--ink);color:var(--on-dark);
  padding-block:clamp(120px,14vw,168px) clamp(64px,9vw,120px);
  border-radius:0 0 var(--r-block) var(--r-block);text-align:center}
.hero-mitte h1{font-size:clamp(2.3rem,6vw,4.2rem);max-width:16ch;margin-inline:auto}
.hero-mitte .lede{color:var(--on-dark-mid);max-width:58ch;margin:22px auto 0;font-size:1.1rem}
.asuche{display:flex;gap:8px;background:var(--paper);border-radius:999px;padding:8px;
  width:min(100%,640px);margin:clamp(28px,3.4vw,40px) auto 0;box-shadow:var(--shadow-lift)}
.asuche input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.02rem;
  padding:12px 18px;color:var(--fg)}
.asuche input:focus-visible{outline:2px solid var(--red);outline-offset:-2px;
  border-radius:999px}
.asuche .btn{flex:0 0 auto}
.ahinweis{color:#ffb4a8;margin:14px 0 0;font-size:.95rem}
.aklein{color:var(--on-dark-dim,rgba(255,255,255,.55));font-size:.86rem;margin-top:16px}
.sec .aklein{color:var(--fg-dim)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;color:var(--fg)}
/* Die Farbe ist hier egal - sichtbar ist nichts. Sie steht trotzdem da, weil die
   Kontrastpruefung auch weggeclippte Beschriftungen misst und sonst einen Fehler
   meldet, den niemand sehen kann. */

.alauf{max-width:560px;margin-inline:auto;text-align:center}
.alauf h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:18px 0 4px}
.ageprüft{color:var(--fg-dim);font-family:var(--mono);font-size:.9rem;margin:0 0 26px}
.aring{position:relative;width:118px;height:118px;margin-inline:auto}
.aring svg{width:100%;height:100%;transform:rotate(-90deg)}
.aring circle{fill:none;stroke-width:9}
.aring-bg{stroke:var(--line)}
.aring-vor{stroke:var(--red);stroke-linecap:round;stroke-dasharray:327;
  stroke-dashoffset:327;transition:stroke-dashoffset .6s cubic-bezier(.32,.72,0,1)}
.aring strong{position:absolute;inset:0;display:grid;place-items:center;
  font-size:1.5rem;letter-spacing:-.03em}
.aring-gross{width:150px;height:150px}
.aring-gross strong{font-size:2rem}
.aliste{display:grid;gap:12px;text-align:left;max-width:420px;margin-inline:auto}
.aschritt{display:flex;align-items:center;gap:14px;color:var(--fg-dim);
  transition:color .3s ease}
.aschritt .apunkt{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);position:relative;transition:background .3s ease,
  border-color .3s ease}
.aschritt.laeuft{color:var(--fg)}
.aschritt.laeuft .apunkt{border-color:var(--red);border-right-color:transparent;
  animation:adreh .8s linear infinite}
.aschritt.fertig{color:var(--fg)}
.aschritt.fertig .apunkt{background:#1f9d55;border-color:#1f9d55}
.aschritt.fertig .apunkt::after{content:"";position:absolute;left:6px;top:2px;width:5px;
  height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.aschritt.weg{opacity:.45}
@keyframes adreh{to{transform:rotate(360deg)}}

.abericht-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);
  align-items:center;margin-bottom:clamp(26px,3vw,40px)}
.abericht-kopf h2{font-size:clamp(1.6rem,3.4vw,2.4rem);word-break:break-word}
.anote{text-align:center;display:grid;gap:8px;justify-items:center}
.anote span{font-size:.86rem;color:var(--fg-dim)}
.abereiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px)}
.abereich{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  padding:clamp(18px,2vw,26px);box-shadow:var(--shadow)}
.abereich-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:6px}
.abereich-kopf h3{font-size:1.1rem}
.abereich-kopf b{font-size:1.4rem;letter-spacing:-.03em}
.abalken{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 0 18px}
.abalken i{display:block;height:100%;border-radius:99px;transition:width .7s ease}
.abefund{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.abefund:first-of-type{border-top:0}
.abefund .amarke{flex:0 0 auto;width:18px;height:18px;border-radius:50%;margin-top:2px}
.abefund strong{display:block;font-size:.97rem}
.abefund p{margin:3px 0 0;color:var(--fg-mid);font-size:.92rem}
.afolge{border-left:3px solid var(--line);padding-left:11px;margin-top:8px !important}
.abefund.problem .afolge{border-left-color:#c21c0b}
.abefund.warnung .afolge{border-left-color:#d98324}
.afolge b{color:var(--fg)}
.aaufwand{font-family:var(--mono);font-size:.8rem !important;color:var(--fg-dim);
  margin-top:7px !important}
.azaehler{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;font-size:.95rem}
.azaehler span{display:inline-flex;align-items:center;gap:8px;color:var(--fg-mid)}
.azaehler i{width:11px;height:11px;border-radius:50%;display:inline-block}
.aquelle{color:var(--fg-dim);font-size:.86rem;margin:22px 0 0}
.acta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,42px);margin-top:clamp(30px,4vw,54px);padding:clamp(24px,3vw,40px);
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  box-shadow:var(--shadow-lift)}
.acta h2{font-size:clamp(1.4rem,2.4vw,2rem);margin:6px 0 10px}
.acta .full{grid-column:1/-1}
/* Rasterkinder haben min-width:auto und schrumpfen sonst nicht unter ihren
   Inhalt - bei 320 px stand das Formular dann 40 px ueber dem Rand. */
.acta > *,.acta .form,.acta .field{min-width:0}
/* .btn hat white-space:nowrap - der lange Knopf diktiert sonst die
   Spaltenbreite des Formulars, siehe derselbe Fehler im Generator. */
.acta .btn,.asuche .btn{white-space:normal}
.acta .field input,.acta .field select,.acta .field textarea{width:100%;min-width:0}
.acta .gschalter{align-items:center}
.acta p{color:var(--fg-mid)}
.acta .ticks{margin:18px 0}
.aneu{margin-top:26px;text-align:center}
@media (max-width:860px){
  .abereiche,.acta,.abericht-kopf{grid-template-columns:minmax(0,1fr)}
  .abericht-kopf{justify-items:start}
}