/* SLL Hosting
   Bildsprache: Leitstand. Die Hauptseiten sind der dunkle Schaltraum,
   jede Unterseite kippt als helles Datenblatt heraus. Ein Signalorange fuer
   Handlungen, ein Minton fuer alles, was lebt. */

@font-face{font-family:'Bricolage';src:url('/schrift/bricolage.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Instrument';src:url('/schrift/instrument.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Martian';src:url('/schrift/martian.woff2') format('woff2');font-weight:400 700;font-display:swap}

@view-transition{navigation:auto}

:root{
  --display:'Bricolage',Georgia,serif;
  --text:'Instrument',system-ui,-apple-system,sans-serif;
  --mono:'Martian',ui-monospace,monospace;

  --rand:clamp(20px,5vw,72px);
  --breite:1240px;
  --e:cubic-bezier(.22,.61,.36,1);

  --grund:#0b1f24;
  --grund-2:#0f2a30;
  --flaeche:#143840;
  --linie:rgba(180,220,215,.15);
  --linie-2:rgba(180,220,215,.32);
  --schrift:#e9f2ef;
  --schrift-2:#93aeab;
  --schrift-3:#8ea9a6;
  --signal:#ff7a1a;
  --signal-tief:#e0670c;
  --leuchte:#5fe3b0;
  --auf-signal:#170a00;
}

[data-thema="hell"]{
  --grund:#e9ebe4;
  --grund-2:#dfe2d9;
  --flaeche:#f7f8f4;
  --linie:rgba(11,31,36,.15);
  --linie-2:rgba(11,31,36,.34);
  --schrift:#0b1f24;
  --schrift-2:#4d5f5c;
  --schrift-3:#475754;
  --signal:#bf440a;
  --signal-tief:#9c3707;
  --leuchte:#0f6b58;
  --auf-signal:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--grund);color:var(--schrift);
  font:400 17px/1.6 var(--text);
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px; /* Platz fuer die Leiste */
  overflow-x:hidden;
}
/* feines Korn, damit die Flaechen nicht steril wirken */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
[data-thema="hell"] body::before{opacity:.7;mix-blend-mode:multiply}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.04;margin:0;hyphens:none}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:3px}

.huelle{max-width:var(--breite);margin:0 auto;padding-inline:var(--rand);position:relative;z-index:2}
section[id],main{scroll-margin-top:96px}

.ueberspringen{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--signal);color:var(--auf-signal);
  padding:12px 18px;font-weight:600;border-radius:0 0 6px 0;
}
.ueberspringen:focus{left:0}

.augenbraue{
  display:block;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--schrift-3);margin-bottom:20px;
}

.pfeil{width:18px;height:11px;flex:none;transition:transform .3s var(--e)}
.haken{width:15px;height:15px;flex:none;margin-top:4px;color:var(--leuchte)}

/* ------------------------------------------------------------ Kopfleiste */
.kopf{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--grund) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--linie);
}
.kopf__innen{display:flex;align-items:center;gap:clamp(14px,3vw,34px);height:68px}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.marke__zeichen{
  width:32px;height:32px;border-radius:8px;background:var(--signal);color:var(--auf-signal);
  display:grid;place-items:center;flex:none;
}
.marke__zeichen svg{width:19px;height:19px}
.marke__wort{font:800 18px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.marke__wort span{color:var(--schrift-2);font-weight:400}
.kopf__nav{display:flex;gap:clamp(12px,2.4vw,26px);font:500 15px/1 var(--text)}
.kopf__nav a{text-decoration:none;color:var(--schrift-2);padding:8px 0;position:relative}
.kopf__nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:var(--signal);transition:right .3s var(--e);
}
.kopf__nav a:hover{color:var(--schrift)}
.kopf__nav a:hover::after,.kopf__nav a[aria-current="page"]::after{right:0}
.kopf__nav a[aria-current="page"]{color:var(--schrift)}
@media(max-width:720px){.kopf__nav{display:none}}

/* ----------------------------------------------------------------- Knopf */
.knopf{
  display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  font:600 16px/1 var(--text);padding:16px 24px;border-radius:8px;text-decoration:none;
  transition:transform .18s var(--e),background .2s var(--e),box-shadow .2s var(--e),color .2s var(--e);
  white-space:nowrap;
}
.knopf--klein{padding:11px 17px;font-size:14px}
.knopf--gross{padding:19px 30px;font-size:17px}
.knopf--voll{background:var(--signal);color:var(--auf-signal)}
.knopf--voll:hover{background:var(--signal-tief);transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--signal)}
.knopf--linie{background:transparent;color:var(--schrift);box-shadow:inset 0 0 0 1.5px var(--linie-2)}
.knopf--linie:hover{box-shadow:inset 0 0 0 1.5px var(--schrift);transform:translateY(-2px)}
.knopf:hover .pfeil{transform:translateX(4px)}
.knopf:active{transform:translateY(0)}

.zurueck{
  display:inline-flex;align-items:center;gap:9px;color:var(--schrift-2);
  font:500 14px/1 var(--text);margin-bottom:34px;transition:color .2s var(--e);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.zurueck .pfeil{transform:rotate(180deg)}
.zurueck:hover{color:var(--schrift)}
.zurueck:hover .pfeil{transform:rotate(180deg) translateX(4px)}

/* ------------------------------------------------------------------ Held */
.held{padding:clamp(48px,8vw,104px) 0 clamp(32px,5vw,56px);position:relative}
.held__gitter{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:940px){.held__gitter{grid-template-columns:1fr}.held__anlage{display:none}}
.held__satz{font-size:clamp(34px,5.6vw,68px);max-width:19ch}
.held__und{color:var(--signal)}
.held__kursiv{color:var(--schrift-2);font-weight:400}
.held__lauf{margin-top:clamp(20px,3vw,30px);max-width:52ch;color:var(--schrift-2);font-size:clamp(17px,1.6vw,19px)}
.held__tasten{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,4vw,38px)}

/* Signatur: die Anlage, die sich aufschaltet */
.anlage{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;aspect-ratio:1;
  padding:14px;border:1px solid var(--linie);border-radius:14px;background:var(--grund-2);
  position:relative;overflow:hidden;
}
.anlage__zelle{
  border-radius:8px;background:var(--flaeche);position:relative;overflow:hidden;
  animation:aufschalten 6.5s var(--e) infinite;animation-delay:calc(var(--i)*.22s);
}
.anlage__zelle::after{
  content:'';position:absolute;inset:0;background:
    linear-gradient(120deg,transparent 40%,color-mix(in srgb,var(--leuchte) 55%,transparent) 50%,transparent 60%);
  transform:translateX(-100%);animation:streifen 6.5s linear infinite;
  animation-delay:calc(var(--i)*.22s);
}
@keyframes aufschalten{
  0%,8%{background:var(--flaeche)}
  16%,58%{background:color-mix(in srgb,var(--leuchte) 24%,var(--flaeche))}
  70%,100%{background:var(--flaeche)}
}
@keyframes streifen{0%,10%{transform:translateX(-100%)}22%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.anlage__puls{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 60px -20px color-mix(in srgb,var(--leuchte) 60%,transparent);
  animation:pulsen 6.5s ease-in-out infinite;
}
@keyframes pulsen{0%,20%{opacity:0}50%{opacity:1}80%,100%{opacity:0}}
.anlage__unter{margin-top:14px;font:400 12px/1.4 var(--mono);color:var(--schrift-3);text-align:center}

/* ------------------------------------------------------------- Abschnitt */
.abschnitt{padding:clamp(46px,7vw,92px) 0;position:relative}
.abschnitt--tafel{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--grund-2)}
.abschnitt--eng{padding-block:clamp(32px,4vw,56px)}
.abschnitt__kopf{max-width:56ch;margin-bottom:clamp(30px,4vw,44px)}
.abschnitt__titel{font-size:clamp(26px,3.8vw,44px)}
.abschnitt__titel--klein{font-size:clamp(21px,2.4vw,27px);margin-bottom:20px}
.abschnitt__titel--abstand{margin-top:clamp(38px,5vw,62px)}
.abschnitt__lauf{margin-top:16px;color:var(--schrift-2)}
.fussnote{margin-top:26px;font-size:14px;color:var(--schrift-3);max-width:66ch}
.fussnote a{color:var(--signal);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fussnote a:hover{text-decoration-thickness:2px}

/* ------------------------------------------------------ Tafel (Fahrplan) */
.tafel__rahmen{
  background:var(--grund);border:1px solid var(--linie);border-radius:12px;
  overflow:hidden;position:relative;
}
.tafel__reihe{
  display:grid;grid-template-columns:92px 24px 1fr auto;align-items:center;gap:0 18px;
  padding:20px 24px;border-top:1px solid var(--linie);position:relative;
}
.tafel__reihe:first-of-type{border-top:0}
.tafel__min{font:400 14px/1 var(--mono);color:var(--schrift-3);font-variant-numeric:tabular-nums;transition:color .4s var(--e)}
.tafel__punkt{
  width:12px;height:12px;border-radius:50%;justify-self:center;position:relative;z-index:2;
  background:var(--grund);box-shadow:inset 0 0 0 2px var(--linie-2);
  transition:box-shadow .4s var(--e),background .4s var(--e);
}
.tafel__schiene{
  position:absolute;left:calc(24px + 92px + 18px + 6px - 1px);
  top:var(--schiene-oben,0px);bottom:var(--schiene-unten,0px);width:2px;
  background:var(--linie);z-index:1;
}
.tafel__schritt{font-weight:600;display:block}
.tafel__detail{display:block;font-size:14px;color:var(--schrift-3);margin-top:3px;line-height:1.45}
.tafel__zustand{
  font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--schrift-3);white-space:nowrap;transition:color .4s var(--e);
}
.tafel__reihe.ist-fertig .tafel__punkt{background:var(--leuchte);box-shadow:inset 0 0 0 2px var(--leuchte),0 0 14px -2px var(--leuchte)}
.tafel__reihe.ist-fertig .tafel__min{color:var(--schrift)}
.tafel__reihe.ist-fertig .tafel__zustand{color:var(--leuchte)}
.tafel__jetzt{position:absolute;left:0;right:0;top:0;height:2px;background:var(--signal);z-index:3;opacity:0;pointer-events:none;box-shadow:0 0 18px 1px var(--signal)}
.tafel.laeuft .tafel__jetzt,.laeuft>.tafel__jetzt{animation:fahrt 2.8s cubic-bezier(.4,0,.25,1) forwards}
@keyframes fahrt{0%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0;transform:translateY(var(--hoehe,100%))}}
@media(max-width:640px){
  .tafel__reihe{grid-template-columns:62px 18px 1fr;padding:16px 16px;gap:0 12px}
  .tafel__zustand{grid-column:1/-1;margin-top:9px;padding-left:74px}
  .tafel__schiene{left:calc(16px + 62px + 12px + 5px)}
}

/* ----------------------------------------------------------------- Raster */
.raster{display:grid;gap:16px}
.raster--drei{grid-template-columns:repeat(3,1fr)}
.raster--zwei{grid-template-columns:repeat(2,1fr)}
.raster--eng{margin-top:16px}
.raster--text{margin-top:36px}
@media(max-width:980px){.raster--drei{grid-template-columns:1fr}}
@media(max-width:760px){.raster--zwei{grid-template-columns:1fr}}

/* ----------------------------------------------------------------- Karte */
.karte{
  display:flex;flex-direction:column;text-decoration:none;position:relative;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;
  padding:26px 24px 22px;overflow:hidden;
  transition:transform .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e);
}
.karte::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e);
}
.karte:hover{transform:translateY(-4px);border-color:var(--linie-2);box-shadow:0 22px 44px -28px rgba(0,0,0,.75)}
.karte:hover::before{transform:scaleX(1)}
.karte--betont{border-color:var(--signal)}
.karte--betont::before{transform:scaleX(1)}
.karte__fahne{
  position:absolute;top:0;right:20px;background:var(--signal);color:var(--auf-signal);
  font:400 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 10px;border-radius:0 0 5px 5px;
}
.karte__art{font:400 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--schrift-3)}
.karte__name{font-size:24px;margin-top:14px}
.karte__zeile{color:var(--schrift-2);font-size:15px;margin-top:9px;flex:1;min-height:2.9em}
.karte__mehr{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font:600 14px/1 var(--text);color:var(--signal);
}
.karte:hover .karte__mehr .pfeil{transform:translateX(5px)}

/* ----------------------------------------------------------------- Preis */
.preis{display:flex;align-items:baseline;gap:7px;margin-top:20px;flex-wrap:wrap}
.preis__praefix{font:400 13px/1 var(--mono);color:var(--schrift-3)}
.preis__waehrung{font:400 14px/1 var(--mono);color:var(--schrift-3)}
/* Zahlen im Anzeigeschnitt, nicht in der Monoschrift: der Schweizer
   Tausender-Apostroph bekaeme dort eine volle Zelle und risse den Preis auf. */
.preis__wert{font:800 clamp(32px,3.6vw,40px)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.preis__tr{display:inline-block;margin-inline:-.13em;transform:translateY(-.04em)}
.preis--gross .preis__wert{font-size:clamp(44px,6.4vw,72px)}
.preis__einheit{font-size:13px;color:var(--schrift-3);margin-top:6px}

/* ------------------------------------------------------------- Datenblatt */
.blatt__kopf{padding:clamp(34px,5vw,64px) 0 clamp(18px,3vw,30px)}
.blatt__titel{font-size:clamp(30px,5vw,58px);max-width:20ch}
.blatt__lauf{margin-top:20px;max-width:60ch;color:var(--schrift-2);font-size:clamp(16px,1.5vw,18px)}
.blatt{padding-bottom:clamp(18px,3vw,26px)}
.blatt__gitter{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);
  align-items:end;padding:clamp(24px,3.4vw,38px);border-radius:14px;
  background:var(--flaeche);border:1px solid var(--linie);
}
@media(max-width:820px){.blatt__gitter{grid-template-columns:1fr;align-items:start}}
.blatt__preis .knopf{margin-top:22px;width:100%;justify-content:center}
.blatt__spalten{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,60px)}
@media(max-width:820px){.blatt__spalten{grid-template-columns:1fr}}
.blatt__untertitel{font-size:clamp(19px,2vw,23px);margin-bottom:18px}
.blatt__spalte .blatt__untertitel:not(:first-child){margin-top:34px}
.blatt__text{color:var(--schrift-2);max-width:60ch}
.blatt__text a{color:var(--signal);display:inline-flex;align-items:center;gap:6px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.blatt__text a:hover{text-decoration-thickness:2px}

.liste{display:grid;gap:13px}
.liste li{display:grid;grid-template-columns:15px 1fr;gap:12px;align-items:start;line-height:1.5}
.liste--offen li{grid-template-columns:1fr;color:var(--schrift-2);padding-left:19px;position:relative}
.liste--offen li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:var(--schrift-3)}

.notiz{
  padding:26px 24px;border-radius:12px;background:var(--flaeche);border:1px solid var(--linie);
}

/* ------------------------------------------------------------------ Live */
.messfeld{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.messfeld{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.messfeld{grid-template-columns:1fr}}
.messwert{
  padding:26px 24px;border-radius:12px;background:var(--flaeche);border:1px solid var(--linie);
  display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
}
.messwert__marke{font:400 10px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--schrift-3)}
.messwert__zahl{
  font:700 clamp(30px,4vw,46px)/1.05 var(--mono);letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--leuchte);
}
/* Laufzeiten wie «1 min 50 s» sind lang — kleiner setzen statt umbrechen lassen. */
.messwert--lang .messwert__zahl{font-size:clamp(22px,2.5vw,30px);white-space:nowrap}
.messwert__einheit{font:400 12px/1 var(--mono);color:var(--schrift-3)}
.messwert.ist-frisch{animation:aufblitzen .6s var(--e)}
@keyframes aufblitzen{0%{background:color-mix(in srgb,var(--leuchte) 14%,var(--flaeche))}100%{background:var(--flaeche)}}

.verlauf{margin-top:16px;padding:22px 24px;border-radius:12px;background:var(--flaeche);border:1px solid var(--linie)}
.verlauf__marke{font:400 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--schrift-3)}
.verlauf__bild{display:block;width:100%;height:120px;margin-top:14px;color:var(--signal);overflow:visible}

/* ---------------------------------------------------------------- Leiste */
.leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--grund) 92%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--linie);
}
.leiste__innen{display:flex;align-items:center;gap:clamp(14px,2.6vw,32px);height:64px;overflow-x:auto;scrollbar-width:none}
.leiste__innen::-webkit-scrollbar{display:none}
.leiste__lampe{
  width:9px;height:9px;border-radius:50%;flex:none;background:var(--schrift-3);
  transition:background .3s var(--e),box-shadow .3s var(--e);
}
.leiste__lampe[data-zustand="live"]{background:var(--leuchte);box-shadow:0 0 0 0 color-mix(in srgb,var(--leuchte) 70%,transparent);animation:herzschlag 2s ease-out infinite}
.leiste__lampe[data-zustand="weg"]{background:var(--signal)}
@keyframes herzschlag{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--leuchte) 65%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.leiste__titel{font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--schrift-3);white-space:nowrap}
.leiste__feld{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.leiste__marke{font-size:12px;color:var(--schrift-3)}
.leiste__wert{font:700 15px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--schrift)}
.leiste__einheit{font:400 11px/1 var(--mono);color:var(--schrift-3)}
.leiste__laed{color:var(--schrift-3);font-weight:400}
.leiste__mehr{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font:600 13px/1 var(--text);color:var(--signal);text-decoration:none;
}
.leiste__mehr:hover .pfeil{transform:translateX(4px)}
.wert-wechsel{animation:ticken .45s var(--e)}
@keyframes ticken{0%{transform:translateY(-.42em);opacity:0}100%{transform:translateY(0);opacity:1}}
.leiste__wert{display:inline-block}
@media(max-width:820px){
  .leiste__feld:nth-of-type(n+4){display:none}
  .leiste__titel{display:none}
}

/* ------------------------------------------------------------------- Ruf */
.ruf{border-top:1px solid var(--linie);background:var(--grund-2);padding:clamp(52px,7vw,88px) 0}
.ruf__innen{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.ruf__satz{font-size:clamp(27px,4vw,46px)}
.ruf__lauf{color:var(--schrift-2);max-width:46ch}
.ruf .knopf{margin-top:10px}

/* ---------------------------------------------------------------- Formular */
.anfrage__gitter{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(26px,4vw,58px);align-items:start}
@media(max-width:880px){.anfrage__gitter{grid-template-columns:1fr}}
.form{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:clamp(22px,3vw,34px)}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.feldpaar{grid-template-columns:1fr}}
.feld{display:block;margin-bottom:18px}
.feld__name{display:block;font:600 13px/1 var(--text);margin-bottom:8px;color:var(--schrift-2)}
.feld__name i{color:var(--signal);font-style:normal}
.feld input,.feld select,.feld textarea{
  width:100%;font:400 16px/1.5 var(--text);color:var(--schrift);
  background:var(--grund);border:1px solid var(--linie);border-radius:8px;padding:13px 14px;
  transition:border-color .2s var(--e),background .2s var(--e);
}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--schrift-2);outline-offset:1px}
.feld textarea{resize:vertical;min-height:112px}
.feld select{appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f817e' stroke-width='1.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__fuss{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form__hinweis{font-size:13px;color:var(--schrift-3);flex:1;min-width:210px}
.meldung{margin-top:18px;padding:16px 18px;border-radius:9px;font-size:15px;display:none}
.meldung.ist-sichtbar{display:block;animation:einblenden .4s var(--e)}
@keyframes einblenden{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.meldung--gut{background:color-mix(in srgb,var(--leuchte) 12%,transparent);color:var(--leuchte);border:1px solid color-mix(in srgb,var(--leuchte) 40%,transparent)}
.meldung--schlecht{background:color-mix(in srgb,var(--signal) 10%,transparent);color:var(--signal);border:1px solid color-mix(in srgb,var(--signal) 40%,transparent)}
.meldung ul{margin:8px 0 0;padding-left:20px;list-style:disc}

.beistand__mail{
  display:block;font:700 clamp(19px,2.3vw,24px)/1.2 var(--mono);letter-spacing:-.03em;
  color:var(--signal);text-decoration:none;word-break:break-word;margin-bottom:6px;
}
.beistand__mail:hover{text-decoration:underline;text-underline-offset:4px}
.beistand__mail--klein{font-size:clamp(14px,1.5vw,16px);margin-top:16px}
.beistand__zeiten{font-size:13px;color:var(--schrift-3);margin-bottom:18px}
.schritte{display:grid;gap:15px;counter-reset:s}
.schritte li{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start;color:var(--schrift-2);font-size:15px;line-height:1.5}
.schritte li span{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font:700 12px/1 var(--mono);background:var(--grund);color:var(--schrift);border:1px solid var(--linie-2);
}

/* ----------------------------------------------------------- Rechtstexte */
/* Nicht zusaetzlich .huelle vergeben — deren `margin:0 auto` wuerde diese
   schmalere Spalte zentrieren statt am Satzspiegel auszurichten. */
.recht{max-width:74ch}
.ist-recht .abschnitt--eng{padding-top:clamp(16px,2vw,26px)}
.recht__block{margin-bottom:38px}
.recht__kopf{font-size:clamp(19px,2vw,23px);margin-bottom:14px}
.recht__text{color:var(--schrift-2);margin-bottom:12px;line-height:1.68}
.recht__stand{font:400 12px/1 var(--mono);color:var(--schrift-3);padding-top:20px;border-top:1px solid var(--linie)}

/* ------------------------------------------------------------------ Fuss */
.fuss{border-top:1px solid var(--linie);padding:clamp(40px,5vw,64px) 0 34px;background:var(--grund-2)}
.fuss__gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(22px,3vw,44px)}
@media(max-width:880px){.fuss__gitter{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss__gitter{grid-template-columns:1fr}}
.fuss__marke{font:800 18px/1 var(--display);letter-spacing:-.02em;display:block;margin-bottom:14px}
.fuss__kopf{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--schrift-3);display:block;margin-bottom:14px}
.fuss__adresse{color:var(--schrift-2);font-size:14px;line-height:1.6;margin-bottom:12px}
.fuss__mail{display:block;color:var(--signal);text-decoration:none;font-size:14px;font-family:var(--mono);margin-bottom:4px;word-break:break-word}
.fuss__mail:hover{text-decoration:underline;text-underline-offset:3px}
.fuss__zeiten{font-size:12px;color:var(--schrift-3);margin-top:8px}
.fuss__block ul{display:grid;gap:9px}
.fuss__block a{color:var(--schrift-2);text-decoration:none;font-size:14px}
.fuss__block a:hover{color:var(--schrift)}
.fuss__panel{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--signal);text-decoration:none;font-size:14px;font-weight:600}
.fuss__panel:hover .pfeil{transform:translateX(4px)}
.fuss__zeile{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(30px,4vw,48px);padding-top:22px;border-top:1px solid var(--linie);
  font-size:13px;color:var(--schrift-3);
}

/* ---------------------------------------------------- Einblenden im Lauf */
.zeigt{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e),transform .7s var(--e)}
.zeigt.sichtbar{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .zeigt{opacity:1;transform:none}
  @view-transition{navigation:none}
}