:root{
  /* Hell und ruhig: gebrochenes Weiss wie Kalkputz, dazu ein tiefes
     Waldgruen und Messing. Nichts Schwarzes, nichts Grelles - der
     Eindruck soll von Papier kommen, nicht von einem Bildschirm. */
  --papier:#fcfaf6; --papier-warm:#f6f1e8; --karte:#ffffff;
  --tinte:#17150f; --leise:#6c6458; --feiner:#938a7b;
  --linie:#e7e0d2; --linie-fein:#f2ece1;
  --akzent:#1c4b37; --akzent-hell:#e9f1eb; --akzent-tief:#123626;
  --messing:#8f7434; --messing-hell:#f7f1e2; --messing-linie:#e0d2b0;
  --warm:#8f5f2e; --warm-hell:#fbf3e9; --himmel:#eef4f6;
  --radius:3px; --radius-gross:6px;
  --schmal:min(100% - 2.5rem, 58rem); --breit:min(100% - 2.5rem, 82rem);
  --schatten:0 1px 2px rgba(23,21,15,.04), 0 14px 38px -20px rgba(23,21,15,.16);
  --schatten-hoch:0 2px 8px rgba(23,21,15,.05), 0 36px 80px -34px rgba(23,21,15,.3);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
          Georgia,"Times New Roman",serif;
  --schleier:252,250,246;
  color-scheme:light;
}

/* ------------------------------------------------------------ Dunkle Fassung
   Dieselbe Seite bei Abendlicht. Nur die Farbmarken werden getauscht -
   jede Regel weiter unten gilt unveraendert. Das Modell im Titelbild
   schaltet mit um: dunkle Seite heisst Haus am Abend, mit Licht an. */
html[data-thema="dunkel"]{
  --papier:#14161a; --papier-warm:#1a1d22; --karte:#1e2128;
  --tinte:#eceae4; --leise:#a8a49a; --feiner:#847f75;
  --linie:#2e323a; --linie-fein:#262a31;
  --akzent:#7fc3a2; --akzent-hell:#1d2a24; --akzent-tief:#a6dcc0;
  --messing:#d3b072; --messing-hell:#241f16; --messing-linie:#4a3f28;
  --warm:#d8a068; --warm-hell:#241c15; --himmel:#1b2129;
  --schleier:20,22,26;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 14px 38px -20px rgba(0,0,0,.7);
  --schatten-hoch:0 2px 8px rgba(0,0,0,.5), 0 36px 80px -34px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:17px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"kern","liga","ss01";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mitte{width:var(--schmal);margin-inline:auto}
.weit{width:var(--breit);margin-inline:auto}
a{color:var(--akzent);text-underline-offset:3px}
h1,h2,h3{margin:0 0 .5em;font-weight:600;line-height:1.05;
  letter-spacing:-.032em;text-wrap:balance}
h1{font-size:clamp(2.6rem,1.2rem + 5.4vw,6rem);letter-spacing:-.042em}
h2{font-size:clamp(1.9rem,1.1rem + 2.6vw,3.4rem);margin-top:0}
h3{font-size:clamp(1.05rem,.98rem + .35vw,1.3rem);margin-top:0;
  letter-spacing:-.018em;font-weight:600}
p{margin:0 0 1rem}
.vor{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--messing);font-weight:650;margin:0 0 1.1rem;
  display:inline-flex;align-items:center;gap:.6rem}
.vor::before{content:"";width:1.6rem;height:1px;background:var(--messing-linie)}
.fuehrt{font-size:clamp(1.1rem,1rem + .55vw,1.4rem);color:var(--leise);
  max-width:42rem;line-height:1.5;letter-spacing:-.012em}

header.kopf{border-bottom:1px solid var(--linie);background:var(--karte)}
/* Erst ab Tablettbreite mitlaufen lassen - auf dem Telefon braucht die
   zweizeilige Navigation sonst ein Drittel des Bildschirms. */
@media(min-width:720px){header.kopf{position:sticky;top:0;z-index:20}}
.kopf .weit{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;flex-wrap:wrap}
.marke{font-weight:700;letter-spacing:-.03em;color:var(--tinte);
  text-decoration:none;font-size:1.22rem}
.marke span{color:var(--messing)}
nav.haupt{display:flex;gap:1.35rem;flex-wrap:wrap;margin-left:auto}
@media(max-width:760px){nav.haupt{gap:.9rem;width:100%;margin-left:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.2rem;
  scrollbar-width:none}
  nav.haupt::-webkit-scrollbar{display:none}
  nav.haupt a{white-space:nowrap}}
nav.haupt a{color:var(--leise);text-decoration:none;font-size:.86rem;
  font-weight:500;letter-spacing:.03em;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav.haupt a:hover,nav.haupt a[aria-current]{color:var(--tinte);
  border-bottom-color:var(--messing)}

.held{padding:3.6rem 0 2.2rem}
.held-farbig{background:
  radial-gradient(120% 90% at 12% 0%, var(--messing-hell) 0%, transparent 55%),
  linear-gradient(168deg, var(--akzent-hell) 0%, var(--papier) 68%);
  border-bottom:1px solid var(--linie);margin-bottom:2.6rem}
.gitter{display:grid;gap:1.1rem}
@media(min-width:720px){.g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--karte);border:1px solid transparent;
  border-radius:var(--radius-gross);padding:1.7rem 1.8rem;
  box-shadow:0 1px 2px rgba(23,21,15,.03), 0 10px 30px -18px rgba(23,21,15,.14);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s}
.karte h3{margin-top:0}
a.karte{text-decoration:none;color:inherit;display:block;
  transition:border-color .15s, transform .15s, box-shadow .15s}
a.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}

.zahl{font-variant-numeric:tabular-nums}
.gross{font-family:var(--serif);font-size:1.8rem;font-weight:400}
.marke-preis{font-family:var(--serif);font-size:1.7rem;font-weight:400;
  color:var(--akzent);letter-spacing:-.01em}

table{width:100%;border-collapse:collapse;font-size:.93rem;margin:.6rem 0 1.4rem}
th,td{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--linie);
  vertical-align:top}
th{font-weight:600;color:var(--messing);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;border-bottom-color:var(--linie)}
td.z,th.z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.summe td{font-weight:700;border-top:2px solid var(--tinte);border-bottom:none}
tr.zwischen td{font-weight:600;background:var(--akzent-hell);
  color:var(--akzent-tief);letter-spacing:.02em}
.rollt{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Grundrisse tragen feste Zeichnungsfarben. Sie liegen deshalb immer auf
   hellem Grund - sonst waeren Bemassung und Fusszeile im dunklen Modus
   unlesbar, weil sie ausserhalb der eingefaerbten Raeume stehen. */
.plan{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  padding:.7rem .9rem;margin-bottom:1rem;box-shadow:var(--schatten)}
.plan svg{display:block;width:100%;height:auto}
.plan.gross3d{padding:0;margin-bottom:1.6rem;overflow:hidden}
.karte3d{padding-top:0;overflow:hidden}
.bild3d{margin:-1.25rem -1.35rem 1rem;background:var(--himmel);
  border-bottom:1px solid var(--linie);border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden}
.bild3d svg{display:block;width:100%;height:auto}

.hinweis{background:var(--warm-hell);border-left:3px solid var(--warm);
  border-radius:6px;padding:.9rem 1.1rem;margin:1.4rem 0;font-size:.94rem}
.hinweis strong{color:var(--warm)}
.merk{background:var(--akzent-hell);border-left:3px solid var(--akzent);
  border-radius:6px;padding:.9rem 1.1rem;margin:1.4rem 0;font-size:.94rem}

ul.klar{list-style:none;padding:0;margin:0 0 1.2rem}
ul.klar li{padding-left:1.4rem;position:relative;margin-bottom:.4rem}
ul.klar li::before{content:"";position:absolute;left:.3rem;top:.68em;width:.34rem;
  height:.34rem;transform:rotate(45deg);background:var(--messing)}
ul.nein li::before{background:var(--leise);border-radius:0;height:2px;top:.82em;width:.6rem}

.paragraf{margin-bottom:1.6rem}
.paragraf h3{margin-top:0;font-size:1rem;color:var(--akzent)}
.leiste{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 1.6rem}
.knopf{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.4rem;
  border-radius:100px;font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;border:1px solid var(--linie);color:var(--tinte);
  background:var(--karte);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), background .2s,
             border-color .2s, box-shadow .2s}
.knopf{transition:background .15s,border-color .15s,color .15s}
.knopf:hover{border-color:var(--akzent);color:var(--akzent)}
.knopf.voll{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.knopf.voll:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);
  color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(28,75,55,.6)}
.knopf.gross{padding:1rem 1.9rem;font-size:1.02rem}
.knopf[aria-current]{border-color:var(--akzent);color:var(--akzent)}

.wolke{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--linie)}
.wolke-kopf{font-size:.92rem;color:var(--leise);max-width:44rem;margin:0 0 .9rem}
.wolke-links{display:flex;flex-wrap:wrap;gap:.4rem}
.wolke-links a{display:inline-flex;align-items:baseline;gap:.32rem;
  background:var(--karte);border:1px solid var(--linie-fein);border-radius:999px;
  padding:.28rem .7rem;font-size:.84rem;text-decoration:none;color:var(--tinte);
  transition:border-color .15s,background .15s}
.wolke-links a:hover{border-color:var(--akzent);background:var(--akzent-hell)}
.wolke-links a span{color:var(--messing);font-weight:600}

footer.fuss{border-top:1px solid var(--linie);margin-top:4rem;padding:2rem 0 3rem;
  color:var(--leise);font-size:.9rem}
footer.fuss a{color:var(--leise)}
.fuss-gitter{display:grid;gap:1.2rem}
@media(min-width:720px){.fuss-gitter{grid-template-columns:2fr 1fr 1fr}}

/* Der Block, der zur begehbaren Ansicht fuehrt. */
.dreid{display:grid;gap:0;border:1px solid var(--linie);border-radius:var(--radius-gross);
  overflow:hidden;background:var(--karte);box-shadow:var(--schatten-hoch);
  margin-bottom:2.4rem}
@media(min-width:840px){.dreid{grid-template-columns:1fr 1fr}}
.dreid-text{padding:2rem 2.2rem}
.dreid-text h2{margin-top:0}
.dreid-bild{display:flex;align-items:center;justify-content:center;min-height:270px;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(150deg,#2c4a3c 0%,#1a3128 55%,#141f1a 100%);
  text-decoration:none;position:relative;overflow:hidden}
.dreid-bild::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,
             transparent 2px 22px)}
.dreid-bild span{font-family:var(--serif);font-size:4.4rem;color:#e8ddc8;
  letter-spacing:.06em;position:relative;z-index:1;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.handy{margin-top:1.6rem;padding:1.1rem 1.2rem;border-radius:var(--radius);
  background:var(--messing-hell);border:1px solid #efe4cd}
.handy strong{display:block;color:var(--messing);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.handy p{font-size:.92rem;margin:0 0 .7rem;color:var(--leise)}
.handy code{display:block;font-size:.98rem;font-weight:600;color:var(--tinte);
  background:var(--karte);border:1px solid var(--linie);border-radius:2px;
  padding:.55rem .75rem;word-break:break-all}

/* Das Kernprodukt auf der Startseite. */
.kern{display:grid;gap:0;border:1px solid var(--linie);border-radius:var(--radius-gross);
  overflow:hidden;background:var(--karte);box-shadow:var(--schatten-hoch)}
@media(min-width:900px){.kern{grid-template-columns:1.15fr 1fr}}
.kern>div{padding:2.4rem 2.6rem}
.kern h2{margin-top:0}
.kern-bild{display:flex;align-items:center;justify-content:center;min-height:300px;
  background:
    radial-gradient(85% 65% at 28% 18%, rgba(255,255,255,.45), transparent 62%),
    linear-gradient(152deg,#2f5040 0%,#1b3227 58%,#131d18 100%);
  text-decoration:none;position:relative;overflow:hidden}
.kern-bild::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.04) 0 2px,
             transparent 2px 24px)}
.kern-bild span{font-family:var(--serif);font-size:2.9rem;line-height:1.05;
  color:#e8ddc8;letter-spacing:.05em;text-align:center;position:relative;z-index:1;
  text-shadow:0 2px 26px rgba(0,0,0,.4)}

/* ---------------------------------------------------------------- Abschnitte
   Die Seite ist eine einzige Bahn. Jeder Abschnitt fuellt die Breite,
   wechselt den Untergrund und endet mit demselben naechsten Schritt. */
.bahn{padding:clamp(3.5rem,7vw,7rem) 0;position:relative}
.bahn + .bahn{border-top:1px solid var(--linie-fein)}
.bahn-warm{background:var(--papier-warm)}
.bahn-tief{background:linear-gradient(168deg,#16352a 0%,#0f241c 100%);color:#efe7d6}
.bahn-tief h2,.bahn-tief h3{color:#f6efe0}
.bahn-tief .vor{color:#c8ab68}
.bahn-tief p{color:#d8cfbd}
.bahn-tief .karte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);
  box-shadow:none;color:#e6ddcb}
.bahn-tief table{color:#e2d9c7}
.bahn-tief th{color:#c8ab68;border-bottom-color:rgba(255,255,255,.18)}
.bahn-tief td{border-bottom-color:rgba(255,255,255,.1)}
.bahn-tief a{color:#d9bd7c}

.zaehler{font-size:.72rem;color:var(--messing);letter-spacing:.22em;
  font-weight:650;margin:0 0 1.1rem;display:inline-flex;align-items:center;gap:.6rem}
.zaehler::after{content:"";width:2.4rem;height:1px;background:var(--messing-linie)}

/* --------------------------------------------------------------------- Hero */
.buehne{position:relative;min-height:min(92vh,860px);display:grid;
  grid-template-rows:1fr auto;background:var(--papier-warm);overflow:hidden}
.buehne-modell{position:absolute;inset:0;border:0;width:100%;height:100%;
  z-index:0}
.buehne-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Der Text muss lesbar bleiben, auch wenn hinter ihm gerade das Dach
     steht. Deshalb deckt der Schleier die linke Haelfte fast ganz ab und
     laeuft erst danach aus. */
  background:linear-gradient(100deg, rgba(var(--schleier),.985) 0%,
             rgba(var(--schleier),.975) 40%, rgba(var(--schleier),.93) 56%,
             rgba(var(--schleier),.55) 68%, rgba(var(--schleier),0) 84%)}
/* Auf dem Telefon wird nichts ueberlagert: Oben steht das Modell, darunter
   der Text auf Papier. Ein Verlauf ueber einer bewegten 3D-Ansicht ist auf
   kleinen Schirmen nie so lesbar, wie er im Entwurf aussieht. */
@media(max-width:820px){
  .buehne{min-height:0;display:block;overflow:visible}
  .buehne-modell{position:relative;inset:auto;display:block;width:100%;
    height:min(46svh,380px)}
  .buehne-schleier{position:absolute;top:0;left:0;right:0;bottom:auto;
    height:min(46svh,380px);
    background:linear-gradient(180deg, rgba(var(--schleier),0) 58%,
               rgba(var(--schleier),.55) 82%, rgba(var(--schleier),.97) 97%,
               rgb(var(--schleier)) 100%)}
  .buehne-text{background:var(--papier);padding-top:1.4rem}}
.buehne-text{position:relative;z-index:2;align-self:center;
  padding:clamp(2rem,5vw,4.5rem) 0}
.buehne-text .mitte{max-width:min(100% - 2.5rem, 46rem);margin-inline:0;
  margin-left:max(1.25rem, calc((100vw - 82rem)/2 + 1.25rem))}
.buehne h1{font-size:clamp(2.4rem,1.3rem + 4vw,4.6rem);margin-bottom:.35em}
.buehne-preis{font-family:var(--serif);font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);
  color:var(--akzent);margin:.2rem 0 .1rem}
.buehne-fuss{position:relative;z-index:2;border-top:1px solid var(--linie);
  background:rgba(var(--schleier),.88);backdrop-filter:blur(8px)}
.buehne-fuss .weit{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;
  padding:1rem 0;align-items:baseline}
.buehne-fuss b{font-family:var(--serif);font-size:1.25rem;font-weight:400;
  color:var(--tinte);display:block}
.buehne-fuss span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--feiner)}

/* --------------------------------------------------------- Handlungsaufruf */
.tat{margin:2.4rem 0 0;padding:1.6rem 1.8rem;border-radius:var(--radius-gross);
  background:var(--messing-hell);border:1px solid var(--messing-linie);
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;
  justify-content:space-between}
.tat p{margin:0;max-width:34rem;font-size:.98rem}
.bahn-tief .tat{background:rgba(255,255,255,.07);border-color:rgba(200,171,104,.35)}


/* ------------------------------------------------------------------ Formular */
.pruefung{background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius-gross);padding:clamp(1.6rem,3vw,2.6rem);
  box-shadow:var(--schatten-hoch)}
.feldreihe{display:grid;gap:1rem}
@media(min-width:680px){.feldreihe.zwei{grid-template-columns:1fr 1fr}}
.feld{display:flex;flex-direction:column;gap:.35rem}
.feld label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--feiner);font-weight:600}
.feld input,.feld select,.feld textarea{font:inherit;font-size:1rem;
  padding:.72rem .85rem;border:1px solid var(--linie);border-radius:2px;
  background:var(--papier);color:var(--tinte)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--akzent);
  outline-offset:1px;background:var(--karte)}
.pflichthinweis{font-size:.85rem;color:var(--leise);margin:.4rem 0 0}

/* ------------------------------------------------------------- Vertrauenszeile */
.belege{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:760px){.belege{grid-template-columns:repeat(4,1fr)}}
.beleg{text-align:center;padding:1.1rem .8rem;border:1px solid var(--linie-fein);
  border-radius:var(--radius);background:var(--karte)}
.beleg b{display:block;font-family:var(--serif);font-size:1.5rem;
  color:var(--akzent);font-weight:400}
.beleg span{font-size:.8rem;color:var(--leise);line-height:1.35;display:block;
  margin-top:.2rem}

/* ------------------------------------------------- Mitlaufende Handlungsleiste
   Erscheint, sobald der Startbildschirm oben weg ist, und verschwindet
   wieder, wenn das Formular selbst im Bild steht. */
.mitlauf{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(var(--schleier),.92);backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--linie);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
  padding-bottom:env(safe-area-inset-bottom)}
.mitlauf.da{transform:translateY(0)}
.mitlauf .weit{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem 0}
.mitlauf b{font-weight:600;font-size:1.02rem;letter-spacing:-.02em}
.mitlauf s{text-decoration:none;color:var(--leise);font-size:.88rem;display:block}
@media(max-width:620px){.mitlauf s{display:none}.mitlauf .knopf{width:100%;
  justify-content:center}.mitlauf .weit{gap:.7rem}}

/* Fortschritt am oberen Rand */
.fortschritt{position:fixed;top:0;left:0;height:2px;z-index:50;width:0;
  background:linear-gradient(90deg,var(--messing),var(--akzent));
  transition:width .1s linear}

/* Abschnitte kommen beim Scrollen herein */
.zeigt{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.zeigt.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .zeigt{opacity:1;transform:none;transition:none}
  .knopf,.karte,.mitlauf{transition:none}}

/* Grosse Zahlen statt Tabellenzeilen */
.kennzahlen{display:grid;gap:1px;background:var(--linie-fein);
  border:1px solid var(--linie-fein);border-radius:var(--radius-gross);
  overflow:hidden;margin-top:2.4rem}
@media(min-width:700px){.kennzahlen{grid-template-columns:repeat(4,1fr)}}
.kennzahl{background:var(--karte);padding:1.6rem 1.4rem}
.kennzahl b{display:block;font-size:clamp(1.9rem,1.2rem + 2vw,2.9rem);
  font-weight:600;letter-spacing:-.04em;color:var(--tinte);line-height:1}
.kennzahl span{display:block;margin-top:.5rem;font-size:.82rem;
  color:var(--leise);letter-spacing:.02em}
.bahn-tief .kennzahlen{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14)}
.bahn-tief .kennzahl{background:rgba(255,255,255,.04)}
.bahn-tief .kennzahl b{color:#f6efe0}
.bahn-tief .kennzahl span{color:#c4bbaa}

/* Kopfzeile schlanker, mit Glas */
header.kopf{background:rgba(var(--schleier),.88);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .3s}
header.kopf.gescrollt{border-bottom-color:var(--linie)}

/* ------------------------------------------------------- Schalter hell/dunkel */
.thema{margin-left:1.2rem;border:1px solid var(--linie);background:var(--papier-warm);
  color:var(--leise);width:2.1rem;height:2.1rem;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  flex:0 0 auto;transition:color .2s,border-color .2s,background .2s}
.thema:hover{color:var(--tinte);border-color:var(--feiner)}
.thema svg{width:1.05rem;height:1.05rem;display:block}
.thema .mond{display:none}
html[data-thema="dunkel"] .thema .sonne{display:none}
html[data-thema="dunkel"] .thema .mond{display:block}
@media(max-width:760px){.thema{margin-left:auto;order:2}}

/* ------------------------------------------------------------------ Schleuse
   Die Grundstueckspruefung liegt nicht mehr als Formular in der Seite,
   sondern kommt als Dialog nach vorn. Dadurch fuehrt jeder Knopf auf der
   ganzen Website an genau dieselbe Stelle. */
dialog.schleuse{border:0;padding:0;background:transparent;max-width:min(100% - 1.6rem,44rem);
  width:100%;max-height:min(92svh,64rem);overflow:visible}
dialog.schleuse::backdrop{background:rgba(12,14,11,.62);backdrop-filter:blur(5px)}
.schleuse-blatt{background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius-gross);box-shadow:var(--schatten-hoch);
  padding:clamp(1.3rem,3.2vw,2.4rem);max-height:min(92svh,64rem);overflow-y:auto}
.schleuse-kopf{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.schleuse-kopf h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);margin:0}
.schleuse-zu{margin-left:auto;border:1px solid var(--linie);background:var(--papier);
  color:var(--leise);width:2rem;height:2rem;border-radius:999px;cursor:pointer;
  font-size:1.1rem;line-height:1;flex:0 0 auto}
.schleuse-zu:hover{color:var(--tinte)}
@media(prefers-reduced-motion:no-preference){
  dialog.schleuse[open]{animation:herein .22s ease-out}
  @keyframes herein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* -------------------------------------------- Was technisch verbaut wird */
ul.technik{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:.55rem}
@media(min-width:900px){ul.technik{grid-template-columns:1fr 1fr;gap:.55rem 1.8rem}}
ul.technik li{padding-left:1.25rem;position:relative;line-height:1.35}
ul.technik li::before{content:"";position:absolute;left:.15rem;top:.55em;
  width:.32rem;height:.32rem;transform:rotate(45deg);background:var(--messing)}
ul.technik b{display:block;font-weight:600;font-size:.95rem;letter-spacing:-.01em}
ul.technik span{display:block;font-size:.83rem;color:var(--feiner);line-height:1.4}

/* --------------------------------------- Nachbesserungen der dunklen Fassung
   Der Akzent ist dunkel ein helles Gruen. Weisse Schrift darauf waere
   unlesbar - der volle Knopf bekommt deshalb dunkle Schrift. */
html[data-thema="dunkel"] .knopf.voll,
html[data-thema="dunkel"] .knopf.voll:hover{color:#0d1a13}
html[data-thema="dunkel"] .knopf{border-color:var(--linie)}
html[data-thema="dunkel"] .knopf:hover{background:var(--akzent);color:#0d1a13}
/* Die tiefe Bahn hebt sich dunkel kaum noch ab - sie wird eine Spur
   dunkler als das Papier, statt eine Spur heller. */
html[data-thema="dunkel"] .bahn-tief{
  background:linear-gradient(168deg,#0e1f19 0%,#0a1512 100%)}
html[data-thema="dunkel"] .bahn-warm{background:#1a1d22}
/* Grundrisse tragen feste Zeichnungsfarben und bleiben auf hellem Grund. */
html[data-thema="dunkel"] .plan{background:#fff}