/* ══════════════════════════════════════════════════════════════════════
   KAR-TESS HOLDING S.à r.l. · NIEDERLANDE (.nl) — ERWEITERUNG
   ══════════════════════════════════════════════════════════════════════
   Diese Datei ergaenzt stil.css, sie ersetzt nichts.

   Warum getrennt: stil.css traegt die Token der Marke — in der Vorlage
   eine neutrale Platzhalter-Palette, beim Kunden dessen Hausfarben. Diese
   Datei bleibt davon unberuehrt und traegt nur, was die Landesfassung
   zusaetzlich braucht. Jede Abweichung steht hier, nie dort. So bleibt
   eine Sprachfassung jederzeit gegen die andere vergleichbar.

   Fuenf Dinge, die die Schweizer Fassung nicht kennt:
     1. zwei Sprachen im Kopf
     2. ein Demo-Riegel, der IM Bild sitzt statt im Quelltext
     3. Portraets, die ohne Bilddatei traegt
     4. ein Sitz-Hinweis (Zuerich, keine niederlaendische Niederlassung)
     5. der Satz fuer Rechtstexte
   ══════════════════════════════════════════════════════════════════════ */


/* ─── 1 · SPRACHUMSCHALTER ───────────────────────────────────────────
   Zwei Sprachen, nicht mehr. Ein Aufklappmenue waere hier Zierrat: bei
   zwei Zustaenden ist der Schalter selbst schon die Anzeige.
   Der Kopf steht ueber der dunklen Buehne hell und wird beim Scrollen
   hell hinterlegt — der Schalter zieht in beiden Zustaenden mit.      */
.taal{
  display:inline-flex;align-items:center;gap:2px;margin-left:16px;
  border:1px solid var(--linie);border-radius:999px;padding:2px;
  transition:border-color var(--t-flaeche) var(--federn);
}
.taal a{
  font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px;color:var(--tekst);
  transition:background var(--t-hover) var(--federn),
             color var(--t-hover) var(--federn);
}
.taal a[aria-current="true"]{background:var(--diep);color:#fff}
.kopf.oben .taal{border-color:var(--linie-hell)}
.kopf.oben .taal a{color:rgba(255,255,255,.72)}
.kopf.oben .taal a[aria-current="true"]{background:#fff;color:var(--diep)}


/* ─── 2 · DEMO-RIEGEL ────────────────────────────────────────────────
   Der wichtigste Baustein dieser Datei.

   Auf der Seite eines kotierten Emittenten darf eine erfundene Zahl
   niemals wie eine echte aussehen. Ein Kommentar im Quelltext leistet
   das nicht: der Screenshot, der im Meeting herumgereicht wird, zeigt
   keinen Quelltext. Die Kennzeichnung sitzt deshalb IM Bild.

   Zwei Formen: ein Schild fuer Bloecke, ein Wort fuer Tabellenzellen
   und Fliesstext — dort waere der Kasten zu laut.                     */
.demo{position:relative}
.demo::after{
  content:attr(data-demo);
  position:absolute;z-index:4;top:10px;right:10px;
  font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:6px 9px;border-radius:5px;
  color:#7a1b00;background:#ffd9a8;border:1px solid #e08a2e;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  pointer-events:none;
}
.demo::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  background:repeating-linear-gradient(135deg,
    rgba(138,90,18,.06) 0 12px, transparent 12px 24px);
}
.demo-woord{
  font:700 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#7a1b00;background:#ffd9a8;border:1px solid #e08a2e;border-radius:4px;
  padding:3px 6px;vertical-align:2px;margin-left:8px;white-space:nowrap;
}
/* Auf der dunklen Bahn kehrt sich der Grund um, das Schild bleibt gleich
   laut — es soll auffallen, nicht sich einfuegen. */
.bahn-raum .demo::before{
  background:repeating-linear-gradient(135deg,
    rgba(253,242,223,.07) 0 12px, transparent 12px 24px);
}


/* ─── 3 · PORTRAETS OHNE BILDDATEI ───────────────────────────────────
   Die Fotos kommen erst mit der unterzeichneten Verwendungsvereinbarung
   zurueck. Ein graues Rechteck sagt „kaputt". Ein gesetztes Monogramm
   auf der Sandflaeche der Marke sagt „noch nicht geliefert" — und
   traegt die Seite bis dahin, auch vor dem Kunden.                    */
.raad{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(18px,2.6vw,32px);
}
.lid{display:flex;flex-direction:column}
.portret{
  position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;
  background:linear-gradient(158deg,var(--ton-hell),#dbcdbd);
  display:grid;place-items:center;border:1px solid var(--linie);
  margin-bottom:15px;
}
.portret img{width:100%;height:100%;object-fit:cover}
.portret .mono{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,4vw,3rem);letter-spacing:-.03em;
  color:var(--diep);opacity:.32;
}
.portret[data-wacht]::after{
  content:attr(data-wacht);
  position:absolute;left:9px;right:9px;bottom:9px;
  font:600 8.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--diep);background:rgba(255,255,255,.84);
  border:1px dashed rgba(15,43,35,.34);border-radius:5px;
  padding:6px 7px;text-align:center;
}
.lid h3{
  font-family:var(--text);font-size:1.04rem;font-weight:600;
  letter-spacing:-.008em;color:var(--diep);margin:0;
}
.lid .rol{
  font:500 10.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--akzent);display:block;margin-top:6px;
}
.lid .plaats{font-size:.88rem;color:var(--tekst);margin:6px 0 0}


/* ─── 4 · SITZ-HINWEIS ───────────────────────────────────────────────
   Diese Seite ist eine Marktpraesenz, keine niederlaendische
   Niederlassung. Steht das nicht sichtbar auf der Seite, liest ein
   niederlaendischer Anleger den Sitz falsch. Das ist keine
   Geschmacksfrage — an dieser Angabe haengt, welche Aufsicht und
   welches Recht gilt.                                                 */
.zetel{
  display:flex;gap:15px;align-items:flex-start;
  border:1px solid var(--linie);border-left:3px solid var(--akzent);
  border-radius:8px;padding:18px 21px;background:var(--papier-2);
  max-width:76ch;
}
.zetel svg{flex:0 0 auto;margin-top:3px;color:var(--akzent)}
.zetel p{margin:0;font-size:.93rem;line-height:1.62}
.zetel b{color:var(--diep)}
.abschluss .zetel{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32);
  border-left-color:#fff;
}
.abschluss .zetel p,.abschluss .zetel b,.abschluss .zetel svg{color:#fff}


/* ─── 5 · RECHTSTEXTE ────────────────────────────────────────────────
   Colofon, Privacy, Cookies. Eigener Satz, weil diese Seiten gelesen
   und nicht ueberflogen werden: eine Spalte, mehr Durchschuss,
   Zwischentitel mit Linie, die den Weg zeigen.                        */
.rechts{max-width:74ch;margin-inline:auto;padding-block:clamp(48px,7vw,100px)}
.rechts h1{
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;letter-spacing:-.026em;
  font-weight:300;margin:0 0 12px;
}
.rechts h2{
  font-size:clamp(1.14rem,1.7vw,1.44rem);line-height:1.26;letter-spacing:-.012em;
  font-weight:500;margin:54px 0 13px;padding-top:23px;
  border-top:1px solid var(--linie);
}
.rechts h3{
  font-family:var(--text);font-size:1rem;font-weight:600;color:var(--diep);
  margin:27px 0 7px;
}
.rechts p{margin:0 0 15px}
.rechts ul,.rechts ol{margin:0 0 17px;padding-left:21px}
.rechts li{margin-bottom:7px}
.rechts a{
  color:var(--akzent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.rechts a:hover{text-decoration-thickness:2px}
.rechts .datum{
  font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tekst);
}
.rechts table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 19px}
.rechts th{
  text-align:left;font:500 10px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tekst);font-weight:500;
  padding:0 12px 9px 0;border-bottom:1px solid var(--linie);
}
.rechts td{padding:11px 12px 11px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.rechts td:first-child{color:var(--diep);font-weight:500;width:34%}
.rechts .terug{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--akzent);text-decoration:none;
}
.rechts .terug:hover{text-decoration:underline;text-underline-offset:4px}
/* Rechtstexte haben keine Buehne — der Kopf braucht darum von Anfang an
   seinen hellen Grund und die Seite Luft darunter. */
body.rechtspagina{padding-top:74px;background:var(--papier)}
body.rechtspagina .kopf{
  background:rgba(246,247,244,.88);border-bottom:1px solid var(--linie);
}


/* ─── 6 · OFFENE STELLE, SICHTBAR ────────────────────────────────────
   Unterschied zu .ph aus der Grundfassung: .ph markiert einen fehlenden
   TEXT, .wacht eine fehlende DATEI oder FREIGABE — Logo, Foto, PDF,
   Zahl aus dem NAV-Datenblatt.                                        */
.wacht{
  border:1px dashed rgba(94,138,118,.55);border-radius:8px;
  background:rgba(94,138,118,.045);padding:15px 17px;
  font:400 .88rem/1.62 var(--text);color:var(--tekst);
}
/* Nur das ERSTE b ist die Ueberschrift. Ein `.wacht b` ohne diese
   Einschraenkung trifft auch jedes hervorgehobene Wort im Fliesstext und
   sprengt es zu einer eigenen orangen Zeile auf — gemessen am 08.09.2026
   auf privacy.html, wo „NIET", „VSBG" und „WERKDOCUMENT" den Satz
   zerrissen haben. */
.wacht > b:first-child{
  display:block;font:600 9.5px/1.4 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:6px;
}
/* Hervorhebung im Fliesstext bleibt Hervorhebung. Die Regel darueber ist
   spezifischer (0,2,1 gegen 0,1,1) und behaelt die Ueberschrift — eine
   Nachbesserung fuer den ersten b waere hier wirkungslos und damit ein
   Kommentar, der eine Wirkung behauptet, die es nicht gibt. */
.wacht b{font-weight:650;color:var(--diep)}
.wacht code{
  font:400 .92em/1.5 var(--mono);background:rgba(15,43,35,.055);
  border:1px solid var(--linie);border-radius:4px;padding:1px 5px;
}
.wacht + .wacht{margin-top:10px}


/* ─── 7 · WORTMARKE, SOLANGE KEIN LOGO VORLIEGT ──────────────────────
   Gesetzt, nicht gezeichnet. Faellt die echte Datei ein, wird nur das
   <img> eingehaengt; diese Regel greift dann nicht mehr.
   Versalien sind Absicht: das Handelsregister schreibt die Firma
   durchgehend gross — KAR-TESS HOLDING.                                             */
/* Spezifitaet: die Basis setzt `.marke .name span` (0,2,1). Eine Regel
   `.naam span` (0,1,1) wuerde verlieren, obwohl sie spaeter kommt —
   deshalb hier bewusst auf derselben Ebene geschrieben. */
.marke .naam{
  font-family:var(--display);font-weight:500;font-size:1.24rem;
  letter-spacing:.02em;line-height:1;color:inherit;font-size:1.06rem;
}
.marke .naam span{
  display:block;font:500 9px/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;opacity:.62;margin-top:5px;
}
.marke img{height:27px;width:auto}

/* Zeitstempel und Quelle. Gehoert unter JEDEN Block mit Marktdaten und
   wird nicht weggelassen, weil es unter dem vorigen schon stand. */
.stand{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  margin:14px 0 0;font:400 11.5px/1.6 var(--mono);color:var(--tekst);
}
.stand b{
  font:600 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--diep);background:var(--ton-hell);
  border:1px solid rgba(15,43,35,.18);border-radius:4px;padding:4px 7px;
}
.stand a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px}

/* ─── 9 · KLEINE SCHIRME ─────────────────────────────────────────────  */
@media (max-width:900px){
  .taal{margin-left:0;margin-top:10px}
  .zetel{padding:16px 17px}
  .papier-tab td:first-child{width:46%}
}
@media (max-width:560px){
  .papier-tab,.papier-tab tbody,.papier-tab tr,.papier-tab td{display:block;width:auto}
  .papier-tab td:first-child{padding:14px 0 2px;border-bottom:0}
  .papier-tab td:last-child{padding:0 0 14px;border-bottom:1px solid var(--linie)}
}
@media (prefers-reduced-motion:reduce){
  .taal,.taal a{transition:none}
}


/* ─── 10 · VEELGESTELDE VRAGEN ───────────────────────────────────────
   <details>/<summary> statt eigener Klapplogik: das Aufklappen bleibt
   dann auch ohne JavaScript erhalten, ist von Haus aus tastaturbedienbar
   und wird von der Suchfunktion des Browsers gefunden. Eine nachgebaute
   Version davon ist immer schlechter.

   Die Antwortflaeche animiert NICHT in der Hoehe. Eine Hoehenanimation
   auf <details> ist ohne feste Hoehe unsauber und ruckelt auf langen
   Antworten — und der Nutzer wartet dann auf Text, den er schon lesen
   koennte.                                                              */
.vragen{border-top:1px solid var(--linie)}
.vraag{border-bottom:1px solid var(--linie)}
.vraag summary{
  list-style:none;cursor:pointer;display:flex;gap:20px;align-items:baseline;
  justify-content:space-between;padding:22px 2px;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.32;letter-spacing:-.012em;
  color:var(--diep);
  transition:color var(--t-hover) var(--federn);
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary svg{
  flex:0 0 auto;color:var(--akzent);margin-top:6px;
  transition:transform var(--t-menue) var(--federn);
}
.vraag[open] summary svg{transform:rotate(180deg)}
.vraag[open] summary{color:var(--akzent)}
.vraag .antwoord{padding:0 2px 26px;max-width:74ch}
.vraag .antwoord p{margin:0;font-size:.98rem;line-height:1.68}
.vraag .antwoord b{color:var(--diep);font-weight:650}
.vraag:focus-within summary{outline:none}
.vraag summary:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){
  .vraag summary:hover{color:var(--akzent)}
}

/* ══════════════════════════════════════════════════════════════════════
   ERGÄNZUNGEN FÜR KAR-TESS
   Alles, was die Vorlage nicht mitbrachte: Login-Knopf im Kopf, laufende
   Partnerbahn, Stimmen und die sichtbare Platzhalter-Kennzeichnung.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Login im Kopf ───────────────────────────────────────────────────
   Sitzt in der Kopfzeile, nicht in der Navigation: er ist kein Thema
   der Seite, sondern ein Zugang. */
.nav .anmelden{
  margin-left:10px;padding:9px 18px;border:1px solid var(--linie);
  border-radius:999px;font:600 13px/1 var(--text);
  transition:background var(--t-hover) var(--federn),border-color var(--t-hover) var(--federn);
}
.nav .anmelden:hover{background:var(--diep);color:var(--papier);border-color:var(--diep)}
.nav .anmelden::before{display:none}
.kopf.oben .nav .anmelden{border-color:rgba(255,255,255,.42);color:#fff}
.kopf.oben .nav .anmelden:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}

/* ─── Partnerbahn ─────────────────────────────────────────────────────
   Zwei gleiche Spuren, Verschiebung um exakt die halbe Breite: dadurch
   ist die Naht unsichtbar. Ein Sprung an der Naht ist das Erste, was an
   solchen Bahnen auffällt. */
.partnerbahn{background:var(--diep);overflow:hidden;padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.1)}
.partnerbahn-innen{display:flex;width:max-content;animation:partnerlauf 48s linear infinite}
.partnerbahn:hover .partnerbahn-innen{animation-play-state:paused}
.partnerspur{display:flex;align-items:center;gap:clamp(40px,5vw,76px);
  padding-inline:clamp(20px,2.5vw,38px)}
.partner{display:flex;align-items:center;gap:10px;white-space:nowrap;opacity:.5;
  font:500 12.5px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;
  color:var(--papier)}
.partner .kasten{width:22px;height:22px;border:1px solid rgba(255,255,255,.42);border-radius:3px}
@keyframes partnerlauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.partnerbahn-innen{animation:none}}

/* ─── Platzhalter, sichtbar gekennzeichnet ────────────────────────────
   Die Kennzeichnung steht IM BILD, nicht nur im Quelltext: ein
   Bildschirmfoto zeigt keinen Quelltext. */
.platzhalter{position:relative;border:1px dashed var(--akzent);border-radius:16px;
  padding:clamp(26px,3.2vw,42px);background:rgba(94,138,118,.05)}
.platzhalter::before{content:attr(data-platzhalter);position:absolute;top:-10px;left:24px;
  background:var(--papier);padding:0 11px;font:600 9.5px/1.7 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent)}

/* ─── Stimmen ─────────────────────────────────────────────────────────
   Drei genügen. Mehr Zitate wirken auf einer Seite dieser Art nicht
   überzeugender, sondern beliebiger. */
.stimmen{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
  margin-top:28px}
.stimme{background:var(--papier);border:1px solid var(--linie);border-radius:16px;
  padding:28px 28px 24px}
.stimme p{margin:0;font-family:var(--display);font-size:1.08rem;line-height:1.5;
  color:var(--diep);font-weight:400}
.stimme .wer{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--linie);
  font:500 10.5px/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--akzent);font-family:var(--mono)}

/* ══════════════════════════════════════════════════════════════════════
   3 · PREMIUM-EBENE
   ══════════════════════════════════════════════════════════════════════
   Was eine Seite teuer aussehen lässt, ist nicht mehr Effekt, sondern
   mehr ZUSAMMENHANG: dieselbe Form kehrt in verschiedenen Massstäben
   wieder. Deshalb wird hier das Zeichen selbst zum Gestaltungsmittel —
   als Wasserzeichen, als Rahmen, als Aufzählungsmarke.

   Alles bleibt dezent: ein Wasserzeichen, das man bemerkt, ist zu stark.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Wasserzeichen ───────────────────────────────────────────────────
   Das Zeichen, riesig, fast unsichtbar, hinter dem Inhalt. Es bewegt
   sich beim Scrollen langsamer als die Seite — die Tiefe entsteht durch
   die Differenz, nicht durch einen Schatten. */
.mit-zeichen{position:relative;overflow:hidden}
.mit-zeichen>.wrap{position:relative;z-index:2}
.wasserzeichen{
  position:absolute;pointer-events:none;z-index:0;
  width:min(58vw,760px);aspect-ratio:1;
  right:-8%;top:50%;translate:0 -50%;
  color:var(--diep);opacity:.038;
  transition:transform 1.2s cubic-bezier(.23,1,.32,1);
}
.wasserzeichen.links{right:auto;left:-12%}
.sek.dunkel .wasserzeichen,.abschluss .wasserzeichen{color:#fff;opacity:.055}
@media(max-width:820px){.wasserzeichen{width:92vw;right:-30%;opacity:.03}}
@media (prefers-reduced-motion:reduce){.wasserzeichen{transition:none}}

/* ─── Klammer-Rahmen ──────────────────────────────────────────────────
   Dieselben zwei Klammern wie im Zeichen, jetzt als Rahmen um das, was
   gehalten wird. Die Form der Marke wird zur Form der Seite. */
.gehalten{position:relative;padding:clamp(30px,4vw,54px) clamp(26px,4vw,60px)}
.gehalten::before,.gehalten::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(18px,2.4vw,34px);
  border:1px solid var(--linie);
}
.gehalten::before{left:0;border-right:0}
.gehalten::after{right:0;border-left:0}
.abschluss .gehalten::before,.abschluss .gehalten::after{border-color:rgba(255,255,255,.22)}

/* ─── Verifikationsleiste ─────────────────────────────────────────────
   Vertrauen entsteht bei dieser Zielgruppe nicht durch Versprechen,
   sondern durch Prüfbarkeit. Jede Kennung ist ein Angebot zum
   Nachrechnen — deshalb stehen sie vollständig und früh. */
.pruefleiste{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.marke-pruef{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 12px;border:1px solid var(--linie);border-radius:999px;
  font:500 11.5px/1 var(--mono);letter-spacing:.07em;color:var(--diep);
  background:var(--papier);
  transition:border-color var(--t-hover) var(--federn),transform var(--t-hover) var(--federn);
}
.marke-pruef:hover{border-color:var(--akzent);transform:translateY(-1px)}
.marke-pruef svg{flex:0 0 auto;color:var(--akzent)}
.marke-pruef b{font-weight:600;letter-spacing:.02em}
.abschluss .marke-pruef,.hero .marke-pruef{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.abschluss .marke-pruef svg,.hero .marke-pruef svg{color:var(--akzent-2)}

/* ─── Zugangsbereich ──────────────────────────────────────────────────
   Der geschützte Bereich wird nicht versteckt, sondern gezeigt. Wer
   sieht, was darin liegt, fragt ihn an — wer nur einen Knopf „Login"
   sieht, geht daran vorbei. */
.zugang{display:grid;gap:clamp(28px,4vw,58px);grid-template-columns:1.05fr .95fr;
  align-items:start}
@media(max-width:900px){.zugang{grid-template-columns:1fr}}
.tresor{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.tresor li{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.tresor .sig{font:500 10px/1.6 var(--mono);letter-spacing:.12em;color:var(--akzent-2)}
.tresor b{font:600 15px/1.4 var(--text);color:#fff;display:block}
.tresor i{font-style:normal;font-size:.9rem;color:rgba(255,255,255,.6);display:block;margin-top:3px}
.tresor .stand{font:500 10px/1.6 var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.45);
  white-space:nowrap}

/* ─── Abschluss: eine Handlung, nicht fünf ────────────────────────────
   Zwei Wege, klar gewichtet. Ein dritter Knopf würde die Entscheidung
   nicht erweitern, sondern verzögern. */
.zwei-wege{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:34px}
@media(max-width:700px){.zwei-wege{grid-template-columns:1fr}}
.weg{border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:26px 26px 24px;
  background:rgba(255,255,255,.04);display:flex;flex-direction:column;
  transition:border-color var(--t-flaeche) var(--federn),background var(--t-flaeche) var(--federn)}
.weg:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.07)}
.weg.haupt{background:rgba(143,179,161,.12);border-color:rgba(143,179,161,.42)}
.weg h3{font-family:var(--display);font-weight:400;font-size:1.34rem;color:#fff;margin:0 0 10px}
.weg p{margin:0 0 20px;color:rgba(255,255,255,.72);font-size:.95rem;flex:1}
.weg .knopf{align-self:flex-start}
.weg .dazu{margin:14px 0 0;font:500 10.5px/1.6 var(--mono);letter-spacing:.08em;
  color:rgba(255,255,255,.5)}

/* ─── Formulare für Rückruf und Zugang ────────────────────────────── */
.anfrage{display:grid;gap:12px;margin-top:6px}
.anfrage input{width:100%;padding:14px 16px;border-radius:10px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);
  color:#fff;font:400 15px/1.3 var(--text)}
.anfrage input::placeholder{color:rgba(255,255,255,.42)}
.anfrage input:focus{outline:2px solid var(--akzent-2);outline-offset:1px}
.anfrage .zustimmung{display:flex;gap:11px;align-items:flex-start;
  font-size:.86rem;color:rgba(255,255,255,.66);line-height:1.5}
.anfrage .zustimmung input{width:auto;margin-top:3px}
.anfrage .hinweis{font:500 10.5px/1.6 var(--mono);letter-spacing:.06em;
  color:rgba(255,255,255,.45)}

/* ─── Reise-Anzeige am Rand ───────────────────────────────────────────
   Editorial statt Marketing: eine feine Leiste zeigt, wo im Ablauf man
   steht. Auf kleinen Schirmen entfällt sie — dort ist der Daumen die
   Navigation. */
.reise{position:fixed;right:22px;top:50%;translate:0 -50%;z-index:60;
  display:flex;flex-direction:column;gap:13px;align-items:flex-end}
.reise a{display:flex;align-items:center;gap:9px;font:500 9.5px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tekst);opacity:.4;
  transition:opacity var(--t-hover) var(--federn)}
.reise a span{opacity:0;transition:opacity var(--t-hover) var(--federn);white-space:nowrap}
.reise a i{display:block;width:16px;height:1px;background:currentColor;
  transition:width var(--t-hover) var(--federn)}
.reise a:hover,.reise a.hier{opacity:1}
.reise a:hover span{opacity:1}
.reise a.hier i{width:30px;background:var(--akzent)}
@media(max-width:1180px){.reise{display:none}}

/* ─── Wörtliches Zitat aus einem Dokument ─────────────────────────────
   Fuer Stellen, an denen die Seite eine amtliche Quelle WOERTLICH
   wiedergibt statt sie zusammenzufassen. Der senkrechte Strich links
   trennt sichtbar, was zitiert ist, von dem, was die Seite selbst sagt —
   bei einem Zweckartikel ist dieser Unterschied der ganze Punkt.
   Die Fundstelle steht im Zitat, nicht daneben: ein Zitat, dessen
   Herkunft man suchen muss, ist keine Quellenangabe.                  */
.zitat{margin:26px 0 0;padding:0 0 0 clamp(18px,2vw,26px);
  border-left:2px solid var(--akzent);}
.zitat p{margin:0;font-family:var(--display);font-size:clamp(1.02rem,1.45vw,1.16rem);
  line-height:1.62;color:var(--diep)}
.zitat p + p{margin-top:14px}
.zitat .uebersetzt{font-family:var(--text);font-size:.95rem;line-height:1.7;color:var(--tekst)}
.zitat .fundstelle{display:block;margin-top:16px;font:500 10.5px/1.6 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--akzent)}
.abschluss .zitat p{color:#fff}
.abschluss .zitat .uebersetzt{color:rgba(255,255,255,.76)}
.abschluss .zitat{border-left-color:var(--akzent-2)}
.abschluss .zitat .fundstelle{color:var(--akzent-2)}

/* ─── Ansprechpartner ─────────────────────────────────────────────────
   Ein Gesicht senkt die Hemmschwelle vor einem Anruf messbar stärker als
   jedes weitere Argument — aber nur, wenn es echt ist und die Funktion
   stimmt. Deshalb bleibt der Platz leer, bis beides bestätigt ist. */
.person{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.6vw,34px);
  align-items:center;margin-top:clamp(28px,3.4vw,44px)}
@media(max-width:620px){.person{grid-template-columns:1fr;text-align:left}}

/* Zwei Personen nebeneinander. Jede behaelt ihren eigenen Aufbau (Bild links,
   Text rechts) — nebeneinander gestellt wird das PAAR, nicht sein Innenleben.
   Unter 1000px haben zwei solche Bloecke keinen Platz mehr, ohne dass der Satz
   auf vier Zeichen pro Zeile bricht; dort stehen sie wieder untereinander.
   `align-items:start` statt `center`: sonst haengt die kuerzere Person in der
   Mitte ihrer Spalte und die beiden Namen stehen nicht mehr auf einer Linie. */
.personen{display:grid;gap:clamp(24px,3vw,40px)}
@media(min-width:1000px){
  .personen{grid-template-columns:1fr 1fr;align-items:start}
  .personen .person{margin-top:clamp(28px,3.4vw,44px)}
  .personen .person .satz{max-width:34ch}
}
.person .bild{width:clamp(96px,11vw,132px);aspect-ratio:4/5;border-radius:12px;
  overflow:hidden;background:var(--ton-hell);display:grid;place-items:center;
  border:1px solid var(--linie)}
.person .bild img{width:100%;height:100%;object-fit:cover;display:block}
.person .bild .mono{font-family:var(--display);font-size:2rem;color:var(--akzent);opacity:.5}
.abschluss .person .bild{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.person .wer{font:600 15.5px/1.4 var(--text);color:var(--diep);margin:0}
.abschluss .person .wer{color:#fff}
.person .rolle{font:500 10.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--akzent);margin:5px 0 0}
.abschluss .person .rolle{color:var(--akzent-2)}
.person .satz{margin:12px 0 0;font-size:.95rem;max-width:44ch;color:var(--tekst)}
.abschluss .person .satz{color:rgba(255,255,255,.72)}

/* ─── Wartemarkierung auf dunklem Grund ───────────────────────────────
   `.wacht b` faerbt die Ueberschrift in --diep. In einem hellen Abschnitt
   ist das richtig; in einem dunklen wird daraus dunkelgruen auf fast
   schwarz — gemessener Kontrast 1,02, also unsichtbar. */
.abschluss .wacht b,
.abschluss .wacht > b:first-child{color:#fff}
.abschluss .wacht{color:rgba(255,255,255,.82)}

/* Kleintexte auf dunklem Grund: 0,45 Deckkraft ergibt 4,0 — knapp unter
   der Schwelle von 4,5. Angehoben, nicht weggeredet. */
.abschluss .hinweis,
.anfrage .hinweis{color:rgba(255,255,255,.66)}
.tresor .stand{color:rgba(255,255,255,.62)}

/* ══════════════════════════════════════════════════════════════════════
   KONTRAST — gemessen, nicht geschätzt
   ══════════════════════════════════════════════════════════════════════
   Salbei #5E8A76 auf Papier ergibt 3,4:1. Für Fliesstext und grosse
   Schrift genügt das, für KLEINE Schrift nicht — dort verlangt die Regel
   4,5. Betroffen waren alle Etiketten, die Merkmal-Zahlen, die
   Kleintexte der Karten und die Knopfbeschriftung.

   Statt die Palette zu ändern, bekommt kleine Schrift den tieferen Ton
   derselben Farbe. Die Marke bleibt, die Lesbarkeit kommt dazu.
   ══════════════════════════════════════════════════════════════════════ */
.sek .klein,
.merkmale b,
.wacht > b:first-child,
.karte .quote small,
.bahn-hinweis span,
.fuss a{color:var(--akzent-tief)}

/* Auf dunklem Grund gilt das Gegenteil: dort muss es hell bleiben. */
.hero .klein,
.abschluss .klein,
.bahn-raum .kopfzeile .klein,
.abschluss .wacht > b:first-child,
.abschluss .merkmale b{color:var(--akzent-2)}
.karte .quote small{color:rgba(255,255,255,.72)}
.bahn-hinweis span{color:rgba(255,255,255,.72)}
.fuss a{color:rgba(231,233,228,.78)}

/* Knopf: weiss auf Salbei ergibt 3,9. Auf hellem Grund der tiefe Ton,
   auf dunklem Grund die helle Fassung mit dunkler Schrift. */
.knopf{background:var(--akzent-tief);border-color:var(--akzent-tief);color:#fff}
.knopf:hover{background:var(--diep);border-color:var(--diep)}
.abschluss .knopf,.hero .knopf,.karte .knopf{
  background:var(--akzent-2);border-color:var(--akzent-2);color:var(--nacht)}
.abschluss .knopf:hover,.hero .knopf:hover,.karte .knopf:hover{
  background:#a6c4b4;border-color:#a6c4b4}
.knopf.geist{background:transparent;color:inherit}
.hero .knopf.geist,.abschluss .knopf.geist{color:#fff;border-color:rgba(255,255,255,.42)}
.hero .knopf.geist:hover,.abschluss .knopf.geist:hover{background:rgba(255,255,255,.1)}

/* Letzte Haarrisse: Kleintexte auf dunklem Grund und im Fuss. */
.hero-leiste .k{color:rgba(255,255,255,.68)}
.fuss,.fuss .recht{color:rgba(231,233,228,.72)}
.vraag summary span{color:var(--diep)}

/* Fuss: 2,4:1 gemessen — der Text stand auf einer Deckkraft, die auf dem
   tiefen Grund nicht mehr traegt. */
.fuss{color:rgba(231,233,228,.74)}
.fuss a{color:rgba(231,233,228,.82)}
.fuss a:hover{color:#fff}

/* Fussaufbau: Angaben links, Verweise rechts. In beiden Sprachfassungen
   gleich — vorher trug die eine einen anderen Fuss als die andere. */
.fuss-innen{display:flex;flex-wrap:wrap;gap:22px 44px;justify-content:space-between;
  align-items:flex-start}
.fuss-innen nav{display:flex;flex-wrap:wrap;gap:18px}
.fuss .recht{font:500 11px/1.75 var(--mono);letter-spacing:.04em;
  color:rgba(231,233,228,.62);max-width:60ch}

/* Fuss stand auf var(--akzent) — mittlerem Salbei — mit weisser Schrift:
   3,9:1. Mit abgesenkter Deckkraft wurde daraus 2,4. Beides falsch. Der
   Fuss bekommt denselben tiefen Grund wie die uebrigen dunklen
   Abschnitte, dann traegt helle Schrift dort auch. */
.fuss{background:var(--diep);color:rgba(231,233,228,.84)}
.fuss a{color:rgba(231,233,228,.92);opacity:1}
.fuss a:hover{color:#fff}
.fuss .recht{color:rgba(231,233,228,.7)}

/* ══════════════════════════════════════════════════════════════════
   NACHTRAG — zwei gemessene Luecken
   ══════════════════════════════════════════════════════════════════ */

/* --kalk wurde im Fuss jeder Seite und auf dem Logo-Blatt benutzt, war
   aber nirgends definiert. Eine undefinierte Variable faellt still aus:
   der Firmenname im Fuss erbte die Deckkraft der Anschrift darunter und
   verlor damit genau die Hierarchie, fuer die er gesetzt war. Heller Ton
   fuer dunkle Gruende — derselbe Wert wie --ton-hell, aber unter eigenem
   Namen, weil er eine andere Rolle traegt. */
:root{--kalk:#e7e9e4}

/* .tafel trug im Impressum nur zwei Inline-Angaben und sonst nichts: eine
   nackte HTML-Tabelle auf einer Seite, die Sorgfalt behaupten soll. */
.tafel{font-size:.95rem}
.tafel td{
  padding:11px 0;
  border-bottom:1px solid var(--linie);
  vertical-align:top;
  line-height:1.55;
}
.tafel tr:last-child td{border-bottom:0}
.tafel td.f{
  width:38%;
  padding-right:26px;
  color:var(--akzent-tief);
  font-weight:600;
  letter-spacing:.01em;
}
@media (max-width:620px){
  /* Nebeneinander wird die Beschriftung zu schmal, um lesbar zu bleiben. */
  .tafel td,.tafel td.f{display:block;width:auto;padding-right:0}
  .tafel td.f{border-bottom:0;padding-bottom:2px}
  .tafel td:not(.f){padding-top:0}
}

/* Der Geisterknopf trug den Rand fuer DUNKLEN Grund: Weiss auf 32 %.
   Auf hellem Papier ist das kein schwacher Rand, sondern gar keiner —
   die Schaltflaeche sah aus wie ein vergessener Textlink. Die dunklen
   Buehnen ueberschreiben das weiter oben mit hoeherer Spezifitaet. */
.knopf.geist{border-color:rgba(28,74,59,.32);color:var(--akzent-tief)}
.knopf.geist:hover{border-color:var(--akzent-tief);background:rgba(28,74,59,.05)}

/* Der Assistenten-Knopf war der letzte Ort mit Weiss auf Salbei: gemessen
   3,91 gegen geforderte 4,5. Alle uebrigen Schaltflaechen tragen laengst
   den tiefen Ton — dieser eine war uebersehen worden, weil er fixiert ist
   und deshalb aus der ersten Kontrastmessung herausfiel. */
.bot-knopf{background:var(--akzent-tief);
  box-shadow:0 16px 34px -16px rgba(15,43,35,.9)}
.bot-knopf:hover{background:var(--diep)}

/* Die inaktive Sprachpille stand auf --tekst. Solange der Kopf ueber
   hellem Papier liegt, reicht das; schwebt er ueber der dunklen Buehne
   oder dem Schlussabschnitt, mischt sich sein durchscheinender Grund auf
   rgb(158,169,165) — und aus 8,6 werden gemessene 3,69. Der tiefe Ton
   haelt in BEIDEN Lagen (6,0 bzw. 6,3). Die aktive Pille bleibt
   unterscheidbar, weil sie ihren dunklen Grund mit weisser Schrift traegt. */
.taal a{color:var(--diep)}

/* Das Kennzeichen des Assistenten ist der Hinweis nach Art. 50 der
   KI-Verordnung: "Sie sprechen nicht mit einem Menschen." Er stand als
   Weiss auf Salbei bei gemessenen 3,91 und in 9,5 px — ausgerechnet die
   eine Auszeichnung, die erkennbar sein MUSS, war die schwaechste auf
   der Seite. Tiefer Ton: 10,04. */
.bot-hinweis b{background:var(--akzent-tief)}

/* Die Reiseleiste ueber dunklem Grund. Ihr Grundton --tekst auf 40 %
   ergab auf der Buehne gemessene 1,83 — die Fuehrung war genau dort
   unsichtbar, wo die Reise beginnt. reise.js setzt .auf-dunkel, sobald
   ein dunkler Abschnitt im Bild steht. */
.reise.auf-dunkel a{color:rgba(255,255,255,.82);opacity:.62}
.reise.auf-dunkel a:hover,.reise.auf-dunkel a.hier{opacity:1;color:#fff}
.reise.auf-dunkel a.hier i{background:var(--akzent-2)}

/* ── Zwei Befunde, die erst auffielen, als die Messung die wirksame
      DECKKRAFT mitrechnete statt nur die Farbe ───────────────────────── */

/* 1 · Die Unterzeile der Wortmarke lief auf 62 % bei 9 px. Gemessen 3,07
       ueber der dunklen Buehne und 4,31 auf hellem Grund — beides unter
       den geforderten 4,5. Volle Deckkraft. --tekst reichte noch immer
       nicht (3,99), weil die helle Kopfzeile ueber den DUNKLEN
       Abschnitten auf Mittelgrau mischt — dort traegt nur --diep, wie
       schon bei den Navigationspunkten daneben. Die Groesse (9 px gegen
       17 px) haelt die Rangordnung, nicht mehr die Blaesse. */
.marke .naam span{opacity:1;color:var(--diep)}
.kopf.oben .marke .naam span{color:rgba(255,255,255,.86)}

/* 2 · Links im Fliesstext standen auf --akzent: 3,63 auf Papier. Das traf
       auch die Kontaktadresse und die Telefonnummer im Impressum — die
       zwei Angaben, wegen derer jemand die Seite ueberhaupt aufschlaegt.
       Der tiefe Ton bringt 9,34; die Unterstreichung traegt die Erkennung
       als Link, nicht die Farbe allein. */
.fliess a:not(.knopf){color:var(--akzent-tief);border-bottom-color:rgba(28,74,59,.34)}
.fliess a:not(.knopf):hover{border-bottom-color:var(--akzent-tief)}

/* ══════════════════════════════════════════════════════════════════
   DIREKTES GESPRÄCH — Knopf und Feld
   ══════════════════════════════════════════════════════════════════
   Der Knopf steht dort, wo vorher die Rufnummer stand: bei Anschrift
   und E-Mail. Klein und ruhig — er soll erreichbar sein, nicht rufen.
   Bewusst NICHT schwebend: die rechte untere Ecke traegt schon den
   Assistenten und den Nach-oben-Knopf, ein dritter Bewohner verdeckt
   auf dem Telefon einen der beiden.                                  */

.anruf-start{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:9px 16px;                 /* >=40px: Fingerkuppe */
  border-radius:999px;cursor:pointer;
  font:600 12.5px/1 var(--text);letter-spacing:.01em;
  background:transparent;color:var(--diep);
  border:1px solid rgba(28,74,59,.34);
  transition:background var(--t-hover) var(--federn),
             border-color var(--t-hover) var(--federn);
}
.anruf-start svg{flex:0 0 auto;opacity:.85}
.anruf-start:hover{background:rgba(28,74,59,.06);border-color:var(--akzent-tief)}
.anruf-start:active{transform:scale(.98)}
/* Auf den dunklen Buehnen — dort steht der Kontaktbereich. */
.abschluss .anruf-start,.hero .anruf-start{
  color:#fff;border-color:rgba(255,255,255,.42)}
.abschluss .anruf-start:hover,.hero .anruf-start:hover{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

/* ── Das Feld ─────────────────────────────────────────────────────
   Mittig statt in der Ecke: es ist ein Gespraech, kein Hinweis.     */
.anruf{
  position:fixed;inset:0;z-index:95;
  display:grid;place-items:center;padding:20px;
  background:rgba(11,32,26,.58);
  opacity:0;transition:opacity var(--t-flaeche) var(--federn);
}
.anruf.auf-sicht{opacity:1}
@media (prefers-reduced-motion:reduce){.anruf{transition:none}}

.anruf-feld{
  width:min(420px,100%);background:var(--papier);border-radius:16px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75);overflow:hidden;
  transform:translateY(8px) scale(.99);
  transition:transform var(--t-flaeche) var(--federn);
}
.anruf.auf-sicht .anruf-feld{transform:none}
@media (prefers-reduced-motion:reduce){.anruf-feld{transition:none;transform:none}}

.anruf-kopf{padding:16px 18px 12px;border-bottom:1px solid var(--linie);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.anruf-kopf h2{font:600 15px/1.3 var(--text);color:var(--diep);margin:0}
.anruf-zu{background:none;border:0;cursor:pointer;color:var(--tekst);
  padding:8px;margin:-8px -8px -8px 0;border-radius:8px;line-height:0;min-width:40px;min-height:40px}
.anruf-zu:hover{background:var(--papier-2)}

.anruf-vorschau{
  flex:1 0 100%;margin:8px 0 0;padding:8px 11px;border-radius:8px;
  background:var(--warn-flaeche,#fbf1de);border:1px solid #e8d4ad;
  font:400 11.5px/1.5 var(--text);color:#7a4f10}
.anruf-vorschau b{display:inline-block;margin-right:7px;
  font:600 9.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}

.anruf-leib{padding:22px 18px;min-height:132px;display:grid;align-content:center;gap:8px}
.anruf-titel{margin:0;font:600 16px/1.4 var(--text);color:var(--diep)}
.anruf-text{margin:0;font-size:.94rem;line-height:1.55}
.anruf-klein{margin:4px 0 0;font-size:.82rem;color:var(--tekst);opacity:.85}

.anruf-fuss{padding:0 18px 18px;display:flex;flex-wrap:wrap;gap:9px}
.anruf-fuss .knopf{font-size:13px;padding:12px 20px}

/* Zustandsfarben: nur der schmale Streifen oben aendert sich, damit
   der Wechsel spuerbar, aber nicht laut ist. */
.anruf-feld{border-top:3px solid transparent}
.anruf[data-ton="gut"] .anruf-feld{border-top-color:var(--akzent)}
.anruf[data-ton="warn"] .anruf-feld{border-top-color:#c99a3c}
.anruf[data-ton="aufnahme"] .anruf-feld{border-top-color:#a33}

/* Puls waehrend Verbindung und Aufnahme. Drei Punkte, kein Kreisel:
   ein Kreisel laeuft ewig gleich und sagt nichts ueber Fortschritt. */
.anruf-puls{display:flex;gap:6px;margin:0 0 4px}
.anruf-puls i{width:7px;height:7px;border-radius:50%;background:var(--akzent);
  animation:anrufPuls 1.25s var(--federn-hin) infinite}
.anruf-puls i:nth-child(2){animation-delay:.16s}
.anruf-puls i:nth-child(3){animation-delay:.32s}
@keyframes anrufPuls{0%,100%{opacity:.28;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.anruf-puls i{animation:none;opacity:.7}}

/* ══════════════════════════════════════════════════════════════════
   RANGORDNUNG DER ZWEI WEGE
   ══════════════════════════════════════════════════════════════════
   Es sind nicht mehr zwei gleichwertige Angebote. Der Anruf ist das
   Ziel; der Zugang zum geschuetzten Bereich soll da sein, aber nicht
   um Aufmerksamkeit mitbieten. Zwei nebeneinanderstehende Kaesten mit
   gleicher Groesse und gleichem Gewicht sind eine Wahl — und jede
   Wahl kostet Entschlusskraft, die dann beim Anruf fehlt.

   Die Zuruecknahme laeuft ueber FLAECHE, GROESSE und RAND, nicht
   ueber Blaesse: ein grauer Text liest sich schlechter, ein kleinerer
   Kasten dagegen ordnet sich unter, ohne unlesbar zu werden.        */
.zwei-wege{grid-template-columns:1.32fr .82fr;align-items:start}
@media(max-width:700px){.zwei-wege{grid-template-columns:1fr}}

/* Der Hauptweg tritt vor. */
.weg.haupt{
  background:rgba(143,179,161,.16);
  border-color:rgba(143,179,161,.55);
  padding:30px 30px 28px;
}
.weg.haupt h3{font-size:1.52rem;margin-bottom:12px}
.weg.haupt .knopf{padding:16px 30px;font-size:14.5px}

/* Der Nebenweg tritt zurueck — leiser Rand, weniger Raum, kleinere
   Ueberschrift. Der Text bleibt gut lesbar. */
.weg.neben{
  background:rgba(255,255,255,.028);
  border-color:rgba(255,255,255,.14);
  padding:22px 22px 20px;
}
.weg.neben:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.055)}
.weg.neben h3{font-size:1.06rem;color:rgba(255,255,255,.9)}
.weg.neben p{font-size:.89rem;margin-bottom:16px}
.weg.neben .anfrage{gap:10px}
.weg.neben .anfrage input{padding:11px 14px;font-size:.9rem}
.weg.neben .knopf{padding:11px 20px;font-size:12.5px}
/* Der Hauptknopf laeuft ueber die ganze Spalte — er ist das Ziel des
   Abschnitts. Dann gehoert sein Inhalt in die Mitte: links angeschlagen
   mit dem Pfeil am rechten Rand sieht die Flaeche aus wie ein Versehen. */
.weg.haupt .anfrage .knopf{justify-content:center}
/* Der Anrufknopf steht im Impressum innerhalb von .fliess. Dort bekommt
   jeder Verweis eine Unterstreichung — ein Knopf soll keine haben. */
.fliess a.anruf-start{border-bottom:0;padding-bottom:0;color:inherit}
.anruf-start{text-decoration:none}

/*  10 � HANDY-MENUE UND KARTENBAHN 
   Ergaenzt 29.09.2026. stil.css blendet .nav unter 992px aus und zeigt
   den Burger  ohne einen Zustand fuer OFFEN. seite.js setzt `menu-auf`
   am Kopf; hier steht, was das heisst. Die Kartenbahn laeuft unter 992px
   als natives Wischen mit Einrasten, wie schon bei reduzierter Bewegung. */
@media (max-width:991px){
  .kopf{flex-wrap:wrap}
  .kopf.menu-auf .nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;
    flex:1 0 100%;order:9;padding:12px 0 6px;border-top:1px solid var(--linie)}
  .kopf.menu-auf .nav > a{padding:13px 0;font-size:16px}
  .kopf.menu-auf .nav > a::before{display:none}
  .kopf.menu-auf .nav .taal{margin:10px 0 4px;align-self:flex-start}
  .kopf.menu-auf .nav .anmelden{margin-top:8px;text-align:center}
  .kopf.menu-auf,.kopf.oben.menu-auf{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none}
  .kopf.oben.menu-auf .marke,.kopf.oben.menu-auf .nav a,.kopf.oben.menu-auf .burger{color:var(--diep)}
  .kopf.oben.menu-auf .marke .zeichen{border-color:var(--diep);color:var(--diep)}
  .kopf.oben.menu-auf .marke .naam span{color:var(--diep);opacity:.6}
  .kopf.oben.menu-auf .taal{border-color:var(--linie)}
  .kopf.oben.menu-auf .taal a{color:var(--diep)}
  .kopf.oben.menu-auf .taal a[aria-current="true"]{background:var(--diep);color:#fff}
  .kopf.menu-auf.weg{transform:none}
  .bahn-hoehe{height:auto}
  .bahn-fest{position:static;height:auto;padding-block:44px 52px}
  .bahn{overflow-x:auto;transform:none!important;scroll-snap-type:x mandatory;
    padding-bottom:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline:var(--pad)}
  .bahn::-webkit-scrollbar{display:none}
  .karte{scroll-snap-align:start;flex:0 0 min(84vw,360px)}
  .bahn-hinweis{display:none}
  /* Unterseiten haben keinen Burger, nur Zurueck" und die Sprachwahl. Ohne
     diese Regel war unter 992px beides weg. Die Sprachwahl bleibt im Kopf,
     Zurueck" gibt es auf der Seite und im Fuss ohnehin. */
  .kopf:not(:has(.burger)) .nav{display:flex}
  .kopf:not(:has(.burger)) .nav > a{display:none}
}