:root{
  /* Reduziert und neutral: Weiss, Schwarz, dazwischen nur Grau. Die Farbe
     kommt aus dem, was gezeigt wird - dem Haus, den Plaenen, dem Garten -
     und nicht aus der Oberflaeche. Kein Serif, keine Zierde, grosse
     Schrift in leichtem Schnitt, viel Luft. */
  --papier:#ffffff; --papier-warm:#f4f3f1; --karte:#ffffff;
  --tinte:#111111; --leise:#5c5b58; --feiner:#8d8b86;
  --linie:#e4e2de; --linie-fein:#efedea;
  --akzent:#111111; --akzent-hell:#f4f3f1; --akzent-tief:#000000;
  --messing:#8d8b86; --messing-hell:#f4f3f1; --messing-linie:#d8d5d0;
  --warm:#6b6862; --warm-hell:#f4f3f1; --himmel:#f4f3f1;
  --radius:4px; --radius-gross:14px;
  --schmal:min(100% - 2.5rem, 62rem); --breit:min(100% - 2.5rem, 88rem);
  --schatten:0 1px 2px rgba(17,17,17,.04), 0 12px 32px -22px rgba(17,17,17,.2);
  --schatten-hoch:0 2px 10px rgba(17,17,17,.06), 0 40px 90px -40px rgba(17,17,17,.35);
  --serif:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
          "Helvetica Neue",Arial,sans-serif;
  --schleier:255,255,255;
  color-scheme:light;
}

/* ------------------------------------------------------------ Dunkle Fassung */
html[data-thema="dunkel"]{
  --papier:#0e0e0e; --papier-warm:#171717; --karte:#1a1a1a;
  --tinte:#f2f1ef; --leise:#a5a39e; --feiner:#7e7c77;
  --linie:#2a2a2a; --linie-fein:#212121;
  --akzent:#f2f1ef; --akzent-hell:#1c1c1c; --akzent-tief:#ffffff;
  --messing:#8d8b86; --messing-hell:#1c1c1c; --messing-linie:#3a3a3a;
  --warm:#a5a39e; --warm-hell:#1c1c1c; --himmel:#171717;
  --schleier:14,14,14;
  --schatten:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -22px rgba(0,0,0,.8);
  --schatten-hoch:0 2px 10px rgba(0,0,0,.6), 0 40px 90px -40px rgba(0,0,0,.9);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:15px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",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:400;line-height:1.04;
  letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.6rem,1rem + 7vw,7rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,1.05rem + 2.1vw,2.9rem);margin-top:0}
h3{font-size:clamp(1rem,.95rem + .25vw,1.12rem);margin-top:0;
  letter-spacing:-.012em;font-weight:500}
p{margin:0 0 1rem}
.vor{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--feiner);font-weight:500;margin:0 0 1.4rem;
  display:block}
.fuehrt{font-size:clamp(1rem,.95rem + .35vw,1.18rem);color:var(--leise);
  max-width:44rem;line-height:1.55;letter-spacing:-.006em}

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}
/* Der Name des Hauses traegt seine Kennzahlen. Er ist deshalb laenger als
   eine Marke und darf nicht in der Groesse der Startseite stehen. */
.held h1{font-size:clamp(1.9rem,1rem + 3.4vw,3.7rem);letter-spacing:-.03em;
  line-height:1.06}
/* Die Preiszeile: kursiv und in der Serifenschrift des Systems - der
   einzige Serifensatz der Seite, und deshalb der, der auffaellt. Kein
   Webfont, also auch keine Ladezeit. Sie steht in der Ueberschrift und
   setzt deshalb Schnitt, Laufweite und Zeilenhoehe selbst. */
.edel{display:block;font-family:"Iowan Old Style","Palatino Linotype",
  Palatino,Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,1rem + 1.15vw,2.1rem);
  color:inherit;letter-spacing:-.012em;line-height:1.28;
  margin:.35rem 0 0;text-wrap:balance}
.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-size:1.6rem;font-weight:400;letter-spacing:-.02em}
.marke-preis{font-size:1.55rem;font-weight:400;letter-spacing:-.02em;
  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}

.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 zu den Zeichnungen fuehrt. */
.planhinweis{border:1px solid var(--linie);border-radius:var(--radius-gross);
  background:var(--karte);box-shadow:var(--schatten-hoch);
  padding:2.6rem 0;margin-bottom:2.4rem}
.planhinweis h2{margin-top:.2rem}
.planhinweis p{max-width:44rem}

/* 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,#3a3a38 0%,#232322 58%,#161615 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-size:2.6rem;font-weight:300;line-height:1.05;
  color:#efece6;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,#1a1a19 0%,#111110 100%);color:#efe7d6}
.bahn-tief h2,.bahn-tief h3{color:#ffffff}
.bahn-tief .vor{color:rgba(255,255,255,.55)}
.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:rgba(255,255,255,.6);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-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%)}
/* Auch auf dem Telefon bleibt das Haus im Bild und die Schrift darin -
   der Abdunkler von unten traegt sie. */
.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(1.55rem,.85rem + 2.6vw,3rem);margin-bottom:.35em}
.buehne-preis{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);font-weight:400;letter-spacing:-.02em;
  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-size:1.2rem;font-weight:400;letter-spacing:-.015em;
  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}

/* ------------------------------------------------ Reiter auf der Planseite */
.reiter{display:flex;flex-wrap:wrap;gap:.4rem;margin:2.4rem 0 1.6rem;
  border-bottom:1px solid var(--linie);padding-bottom:.1rem}
.reiter button{font:inherit;font-size:.95rem;font-weight:500;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;
  color:var(--leise);padding:.7rem .95rem;margin-bottom:-1px;
  letter-spacing:-.01em;border-radius:2px 2px 0 0}
.reiter button:hover{color:var(--tinte);background:var(--papier-warm)}
.reiter button[aria-selected=true]{color:var(--tinte);
  border-bottom-color:var(--akzent)}
.reiter button:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
/* Auf schmalen Geraeten lieber seitwaerts schieben als in zwei Reihen
   umbrechen - eine Reihe Reiter liest sich als eine Reihe. */
@media(max-width:620px){
  .reiter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .reiter::-webkit-scrollbar{display:none}
  .reiter button{flex:0 0 auto;padding:.7rem .75rem;font-size:.9rem}
}

.blatt[hidden]{display:none}
.messleiste{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-bottom:1.2rem}
.messleiste s{text-decoration:none;color:var(--feiner);font-size:.86rem}
.knopf.klein{padding:.46rem .85rem;font-size:.86rem}
.knopf.klein.an{background:var(--akzent);color:var(--papier);
  border-color:var(--akzent)}

.plaene{display:grid;gap:1.4rem}
@media(min-width:900px){.plaene{grid-template-columns:1fr 1fr}}
.plan-karte{margin:0;border:1px solid var(--linie);border-radius:var(--radius-gross);
  background:#ffffff;padding:1rem 1.1rem 1.2rem;box-shadow:var(--schatten)}
.plan-karte.breit{grid-column:1/-1}
.plan-karte figcaption{font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--feiner);font-weight:600;
  margin-bottom:.8rem}
.plan-karte svg{display:block;width:100%;height:auto}
/* Die Zeichnungen sind auf Papier gedacht: dunkle Linien auf Weiss. In der
   dunklen Fassung bleibt das Blatt deshalb hell - nur sein Rahmen nicht. */
.plan-karte .ans{margin:0}
.plan-karte .ans h3{font-size:.9rem;margin:0 0 .5rem}
.ansichten-gitter .ans{border:1px solid var(--linie);
  border-radius:var(--radius-gross);background:#fff;padding:1rem 1.1rem}

.messbar{position:relative}
.messbar.messen svg{cursor:crosshair}
.messpunkt{fill:#c2410c;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.messlinie{stroke:#c2410c;stroke-width:2;stroke-dasharray:8 5;
  vector-effect:non-scaling-stroke}
.messtext{fill:#c2410c;font:600 22px/1 Menlo,ui-monospace,monospace;
  paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}

.modellrahmen{position:relative;border:1px solid var(--linie);
  border-radius:var(--radius-gross);overflow:hidden;background:var(--papier-warm);
  aspect-ratio:16/10;min-height:340px}
.modellrahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  opacity:0;transition:opacity .5s ease}
.modellrahmen.da iframe{opacity:1}
.modell-warte{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--feiner);font-size:.9rem;margin:0}
.modellrahmen.da .modell-warte{display:none}

/* ------------------------------------------------------ Finanzierungsrechner
   Links die Eingaben, rechts das Ergebnis - auf dem Telefon untereinander.
   Die Ergebnisspalte bleibt am Bildschirm stehen, solange der Rechner zu
   sehen ist, damit die Zahl beim Tippen im Blick bleibt. */
.rechner{display:grid;gap:1.6rem;margin-top:2.4rem;align-items:start}
@media(min-width:900px){.rechner{grid-template-columns:1.05fr .95fr;gap:2.4rem}}
.rechner-eingang{display:grid;gap:1rem}
.rechner .feld{position:relative}
.rechner .feld input{padding-right:5.2rem}
.rechner .einheit{position:absolute;right:.85rem;bottom:.78rem;font-size:.9rem;
  color:var(--feiner);pointer-events:none}
.rechner-ausgang{border:1px solid var(--linie);border-radius:var(--radius-gross);
  background:var(--karte);box-shadow:var(--schatten);
  padding:clamp(1.4rem,2.4vw,2rem)}
@media(min-width:900px){.rechner-ausgang{position:sticky;top:5.5rem}}
.rechner-ausgang .vor{margin-bottom:.5rem}
.rechner-summe{font-size:clamp(2.4rem,1.4rem + 3vw,3.6rem);line-height:1;
  letter-spacing:-.035em;margin:0 0 .35rem;font-weight:400}
.rechner-teil{font-size:.9rem;color:var(--leise);margin:0 0 1.2rem;
  min-height:1.3em}
.rechner-tab{width:100%;border-collapse:collapse;font-size:.92rem}
.rechner-tab th{text-align:left;font-weight:400;color:var(--leise);
  padding:.46rem 0;border-bottom:1px solid var(--linie-fein);vertical-align:top}
.rechner-tab td{text-align:right;padding:.46rem 0;white-space:nowrap;
  border-bottom:1px solid var(--linie-fein)}
.rechner-tab th s{display:block;text-decoration:none;font-size:.74rem;
  color:var(--feiner);line-height:1.35;margin-top:.15rem;
  text-transform:none;letter-spacing:0;font-weight:400}
.rechner-tab tr.summe th,.rechner-tab tr.summe td{color:var(--tinte);
  font-weight:500;border-bottom:1px solid var(--linie)}
.klein{font-size:.82rem;line-height:1.55;color:var(--feiner);
  max-width:52rem;margin-top:1.8rem}
.klein strong{color:var(--leise);font-weight:600}

/* ------------------------------------------------------------- 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-size:1.45rem;font-weight:400;letter-spacing:-.02em;
  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 .weit{gap:.7rem;flex-direction:column;align-items:stretch;
    text-align:center}
  .mitlauf b{font-size:.95rem}
  .mitlauf .knopf{width:100%;justify-content:center}}

/* 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:#ffffff}
.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,#0b0b0b 0%,#060606 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}

/* ==========================================================================
   Bildsprache: Bild fuellt den Rahmen, Schrift liegt darin, dazwischen Luft
   ========================================================================== */

/* ---------------------------------------------------- Kopf als Pille */
header.kopf{position:fixed;top:0;left:0;right:0;z-index:40;background:none;
  border:0;padding:.9rem 0;pointer-events:none}
header.kopf .weit{display:flex;align-items:flex-start;gap:.7rem;padding:0;
  flex-wrap:nowrap}
.pille{background:var(--karte);border-radius:var(--radius-gross);
  box-shadow:0 1px 2px rgba(17,17,17,.06), 0 10px 30px -18px rgba(17,17,17,.3);
  padding:.7rem 1.1rem;display:flex;align-items:center;gap:1.35rem;
  pointer-events:auto;min-width:0}
.pille.rechts{margin-left:auto;padding:.55rem .6rem;gap:.45rem}
.marke{font-weight:600;letter-spacing:-.025em;color:var(--tinte);
  text-decoration:none;font-size:1.05rem;white-space:nowrap}
.marke span{color:var(--tinte);font-weight:400}
nav.haupt{display:flex;gap:1.15rem;flex-wrap:nowrap;margin-left:0}
nav.haupt a{color:var(--leise);text-decoration:none;font-size:.8rem;
  font-weight:450;letter-spacing:0;padding-bottom:1px;white-space:nowrap;
  border-bottom:1px solid transparent}
nav.haupt a:hover,nav.haupt a[aria-current]{color:var(--tinte);
  border-bottom-color:var(--tinte)}
@media(max-width:980px){nav.haupt{display:none}}
.thema{margin-left:0;border:0;background:var(--papier-warm);width:2.1rem;height:2.1rem}
.thema:hover{background:var(--linie);color:var(--tinte)}
main{padding-top:0}

/* ---------------------------------------------------------- Die Buehne */
.buehne{position:relative;min-height:100svh;display:grid;
  grid-template-rows:1fr auto;background:var(--papier-warm);overflow:hidden}
/* Der Schleier ist kein Verlauf ueber die halbe Breite mehr, sondern ein
   ruhiger Abdunkler von unten: Die Schrift steht im Bild, nicht daneben. */
.buehne-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 22%,
             rgba(0,0,0,.14) 38%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.72) 78%,
             rgba(0,0,0,.78) 100%)}
.buehne-text{position:relative;z-index:2;align-self:end;padding:0 0 1.4rem;
  color:#fff}
.buehne-text .mitte{width:var(--breit);margin-inline:auto;max-width:none}
.buehne .vor{color:rgba(255,255,255,.72)}
/* Die Ueberschrift traegt vier Angaben - QNG, Effizienzstufe, Flaeche und
   Heizlast. Als Plakatschrift waere sie unlesbar, deshalb die Haelfte der
   frueheren Groesse. */
/* Die Groesse steht weiter oben und in der schmalen Fassung - hier nur,
   was die Buehne davon abweichend braucht. */
.buehne h1{line-height:1.04;margin:0 0 .5rem;font-weight:400;
  letter-spacing:-.03em;color:#fff}
/* Die kursive Zeile bleibt deutlich unter der Ueberschrift, sonst
   streiten sich zwei Zeilen um denselben Rang. */
.buehne .edel{color:#fff;margin:.4rem 0 0;
  font-size:clamp(1.18rem,.95rem + .75vw,1.9rem)}
.buehne .fuehrt{color:rgba(255,255,255,.88);max-width:38rem;font-size:1rem}
.buehne-preis{color:#fff;margin:.9rem 0 .2rem}
.buehne-text p[style]{color:rgba(255,255,255,.7) !important}
.buehne .knopf{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.buehne .knopf:hover{background:#fff;color:var(--tinte);border-color:#fff}
.buehne .knopf.voll{background:#fff;color:var(--tinte);border-color:#fff}
.buehne .knopf.voll:hover{background:rgba(255,255,255,.85)}
.buehne ul.technik{display:none}

/* Kartenreihe am unteren Rand der Buehne */
.reihe{position:relative;z-index:2;width:var(--breit);margin:0 auto 1.1rem;
  display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:900px){.reihe{grid-template-columns:1fr 1fr 1.15fr}}
.reihe-karte{background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  border-radius:var(--radius-gross);padding:.85rem;display:flex;gap:.9rem;
  text-decoration:none;color:var(--tinte);align-items:stretch;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s}
.reihe-karte:hover{transform:translateY(-3px);background:#fff}
.reihe-bild{flex:0 0 7.5rem;border-radius:9px;overflow:hidden;
  background:var(--papier-warm);display:flex;align-items:center;
  justify-content:center;padding:.3rem}
.reihe-bild svg,.reihe-bild img{width:100%;height:100%;object-fit:contain;display:block}
.reihe-text{min-width:0;display:flex;flex-direction:column;justify-content:center}
.reihe-text b{display:block;font-weight:500;font-size:.98rem;letter-spacing:-.012em}
.reihe-text span{display:block;font-size:.8rem;color:var(--leise);
  line-height:1.4;margin:.2rem 0 .45rem}
.reihe-text em{font-style:normal;font-size:.78rem;border-bottom:1px solid currentColor;
  align-self:flex-start;padding-bottom:1px}
.reihe-karte.dunkel{background:var(--tinte);color:#fff;flex-direction:column;
  justify-content:space-between;padding:1.2rem 1.3rem}
.reihe-karte.dunkel:hover{background:#000}
.reihe-karte.dunkel b{font-size:1.15rem;font-weight:400;letter-spacing:-.02em}
.reihe-karte.dunkel span{color:rgba(255,255,255,.65);margin:.35rem 0 0}
.reihe-karte.dunkel .start{display:inline-flex;align-items:center;gap:.6rem;
  font-size:.82rem;margin-top:1.1rem}
.reihe-karte.dunkel .start i{width:1.6rem;height:1.6rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);display:inline-flex;
  align-items:center;justify-content:center;font-style:normal;font-size:.9rem}
html[data-thema="dunkel"] .reihe-karte{background:rgba(26,26,26,.93)}
html[data-thema="dunkel"] .reihe-karte.dunkel{background:#f2f1ef;color:#111}
html[data-thema="dunkel"] .reihe-karte.dunkel span{color:rgba(17,17,17,.6)}
html[data-thema="dunkel"] .reihe-karte.dunkel .start i{border-color:rgba(17,17,17,.4)}

/* -------------------------------------------------- Abschnitte mit Luft */
.bahn{padding:clamp(4.5rem,9vw,10rem) 0}
.bahn + .bahn{border-top:0}
.bahn-warm{background:var(--papier-warm)}
.bahn-tief{background:var(--tinte);color:#f2f1ef}
.bahn-tief h2,.bahn-tief h3{color:#fff}
.bahn-tief .vor{color:rgba(255,255,255,.55)}
.bahn-tief p{color:rgba(255,255,255,.72)}
.bahn-tief .karte{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.zaehler{display:none}
.karte{background:transparent;border:0;box-shadow:none;padding:0}
.bahn .gitter{gap:2.6rem}
.karte h3{margin-bottom:.5rem}
.karte p{color:var(--leise);font-size:.95rem}

/* Drei Spalten mit duenner Linie darueber, wie ein Register */
.register{display:grid;gap:2.4rem;margin-top:3rem}
@media(min-width:840px){.register{grid-template-columns:repeat(3,1fr);gap:3rem}}
.register > div{border-top:1px solid var(--linie);padding-top:1.1rem}
.register h3{font-size:.95rem;font-weight:500;margin-bottom:.7rem}
.register p{color:var(--leise);font-size:.92rem;margin:0}

/* ------------------------------------------- Bildfuellendes Band mit Text */
.band{position:relative;min-height:min(78svh,720px);display:flex;
  align-items:flex-end;overflow:hidden;background:var(--papier-warm)}
.band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.62) 100%)}
.band-text{position:relative;z-index:2;width:var(--breit);margin:0 auto;
  padding:0 0 2.6rem;color:#fff}
.band-text .vor{color:rgba(255,255,255,.7)}
.band-text h2{color:#fff;max-width:20em}
.band-text p{color:rgba(255,255,255,.85);max-width:38rem}
.band-text .knopf{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.band-text .knopf:hover{background:#fff;color:var(--tinte)}

/* ------------------------------------------------------------- Knoepfe */
.knopf{border-radius:999px;font-size:.85rem;font-weight:450;
  padding:.72rem 1.35rem;letter-spacing:0}
.knopf.gross{padding:.9rem 1.7rem;font-size:.92rem}
.knopf.voll{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.knopf.voll:hover{background:#000;color:#fff;border-color:#000}
html[data-thema="dunkel"] .knopf.voll,
html[data-thema="dunkel"] .knopf.voll:hover{background:#f2f1ef;color:#111;border-color:#f2f1ef}
.pfeil{display:inline-flex;align-items:center;gap:.55rem}
.pfeil i{width:1.5rem;height:1.5rem;border-radius:999px;border:1px solid currentColor;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  font-size:.85rem;line-height:1}

/* ---------------------------------------------------- Fuss mit Schriftzug */
.fuss-zug{overflow:hidden;white-space:nowrap;border-top:1px solid var(--linie);
  padding:2.2rem 0 .6rem;user-select:none}
.fuss-zug span{display:inline-block;font-size:clamp(3rem,11vw,9rem);
  font-weight:400;letter-spacing:-.045em;color:var(--linie);line-height:1;
  padding-right:.35em}
footer.fuss{border-top:0}

/* ------------------------------------------------- Mitlaufleiste ruhiger */
.mitlauf{border-top:1px solid var(--linie)}
.fortschritt{background:var(--tinte)}


/* --------------------------------- Zeichnungen als Vorschau in den Karten
   Die Grundrisse kommen fertig aus der Planerdatei und tragen deren
   Farbmarken. Hier stehen sie als kleine Vorschau: ohne Bemassung, ohne
   Beschriftung, nur Raeume und Waende. */
.reihe-bild{--wall:#3a322c; --live:#fbf7f0; --room:#fdfaf5; --hall:#f3ece1;
  --wet:#dcebf5; --tech:#e6e9ee; --core:#8f7434; --furn:#c6bcae;
  --glass:#9fcbe6; --terrace:#e9e1d3; --roof:#b3aaa1; --muted:#9b9490;
  --ink:#3a322c; background:#fdfaf5}
.reihe-bild .room{fill:var(--room)} .reihe-bild .live{fill:var(--live)}
.reihe-bild .hall{fill:var(--hall)} .reihe-bild .wet{fill:var(--wet)}
.reihe-bild .tech{fill:var(--tech)}
.reihe-bild .wall{stroke:var(--wall);stroke-width:.12;stroke-linecap:square}
.reihe-bild .corewall{stroke:var(--core);stroke-width:.2;stroke-linecap:square}
.reihe-bild .outer{fill:none;stroke:var(--wall);stroke-width:.35}
.reihe-bild .gap{stroke-linecap:butt}
.reihe-bild .glass{stroke:var(--glass);stroke-width:.37}
.reihe-bild .glassline{stroke:var(--wall);stroke-width:.02}
.reihe-bild .furn,.reihe-bild .shower{fill:none;stroke:var(--furn);stroke-width:.025}
.reihe-bild .shaft{fill:var(--core)}
.reihe-bild .stair rect{fill:var(--room);stroke:var(--furn);stroke-width:.02}
.reihe-bild .stair line{stroke:var(--furn);stroke-width:.015}
.reihe-bild .terrace{fill:var(--terrace);stroke:none}
.reihe-bild .sec-wall{fill:var(--wall)} .reihe-bild .sec-room{fill:var(--room)}
.reihe-bild .sec-slab{fill:#d9d3c9} .reihe-bild .sec-roof{fill:#6b625a}
.reihe-bild .sec-ground{stroke:var(--furn);stroke-width:.04}
.reihe-bild .sec-dash,.reihe-bild .slopeline,.reihe-bild .void,
.reihe-bild .roofline,.reihe-bild .ridge{stroke:var(--furn);stroke-width:.02;fill:none}
.reihe-bild .slope{fill:none}
/* Text und Bemassung gehoeren in den grossen Plan, nicht in die Vorschau */
.reihe-bild text,.reihe-bild .dimline,.reihe-bild .leaf,.reihe-bild .arc{display:none}

/* Die dunkle Karte traegt den Preis als Zahl, nicht als Fliesstext */
.reihe-karte.dunkel b{font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);
  letter-spacing:-.03em;line-height:1.05;display:block}
.reihe-karte.dunkel > span:first-child{display:block}


/* Die Kopfpille schwebt ueber dem Inhalt. Auf der Startseite ist das
   gewollt - dort liegt das Haus darunter. Jede andere Seite faengt mit
   Text an und braucht deshalb Luft unter dem Kopf. */
main > .held:first-child{padding-top:clamp(7rem,10vw,9.5rem)}
main > .bahn:first-child,main > section:first-child:not(.buehne):not(.held):not(.band){
  padding-top:clamp(7rem,10vw,9.5rem)}
/* Ueberschriften, die per Sprungmarke angefahren werden, nicht unter die
   Pille laufen lassen */
[id]{scroll-margin-top:6.5rem}


/* ------------------------------------------------- Buehne auf dem Telefon
   Drei gestapelte Karten fressen den ganzen Schirm. Auf schmalen Geraeten
   laufen sie deshalb als Reihe seitwaerts, und die Schrift behaelt ihren
   Platz im Bild. */
@media(max-width:899px){
  .buehne{min-height:100svh}
  .buehne h1{font-size:clamp(1.55rem,8vw,2.7rem)}
  .buehne .fuehrt{font-size:.95rem}
  .buehne-text{padding-bottom:1rem}
  .reihe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:.6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reihe::-webkit-scrollbar{display:none}
  .reihe > *{flex:0 0 min(80%,20rem);scroll-snap-align:start}
  .reihe-karte.dunkel{padding:1rem 1.1rem}
  .reihe-karte.dunkel .start{margin-top:.8rem}
}
@media(max-width:620px){
  .pille{padding:.6rem .85rem}
  .pille.rechts .knopf{display:none}
  .marke{font-size:.98rem}
  .reihe-bild{flex-basis:5.5rem}
}


/* ------------------------------------------------- Bild und Film im Hintergrund
   Das Standbild ist das erste Bild des Films. Es steht sofort; der Film
   legt sich darueber, sobald er laeuft - deshalb kein Sprung und kein
   schwarzer Rahmen, wenn er gar nicht geladen wird. */
.buehne-bild,.band-bild{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block}
/* Der Film steht von Anfang an sichtbar da - er zeigt sein Standbild,
   solange keine Quelle gesetzt ist, und das ist genau dasselbe Bild wie
   darunter. Eine Ueberblendung ueber die Deckkraft waere schoener, aber
   Browser starten kein Video, das auf opacity:0 steht. */
.buehne-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block;pointer-events:none;
  background:var(--papier-warm)}
@media(prefers-reduced-motion:reduce){.buehne-video{display:none}}


/* --------------------------------------------------------------- Zeichen */
.marke{display:inline-flex;align-items:center;gap:.52rem;font-size:1.06rem}
.marke .zeichen{display:block;flex:0 0 auto;color:var(--tinte)}
.marke b{font-weight:600;letter-spacing:-.03em}
.marke span{font-weight:400;letter-spacing:-.025em;color:var(--leise)}
.buehne .marke span,.band .marke span{color:inherit}
.fuss-gitter strong .zeichen{vertical-align:-.35em;margin-right:.3rem}