:root{
  --papier:#fdfbf6; --karte:#ffffff; --tinte:#2b2620; --leise:#6e675b;
  --linie:#e9e3d6; --akzent:#2f7a58; --akzent-hell:#e7f3ec; --akzent-tief:#215a40;
  --warm:#c2703a; --warm-hell:#fdf1e6; --himmel:#eef4f6;
  --radius:14px; --schmal:min(100% - 2rem, 62rem); --breit:min(100% - 2rem, 78rem);
  --schatten:0 1px 2px rgba(43,38,32,.05), 0 8px 24px -12px rgba(43,38,32,.12);
  color-scheme:light;
}
/* Die Seite ist bewusst durchgehend hell. Grundrisse und Ansichten tragen
   feste Zeichenfarben auf hellem Grund - ein dunkler Modus wuerde die
   Bemassung neben dem Gebaeude unlesbar machen. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"kern","liga";}
.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{line-height:1.2;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.35rem,1.05rem + 1.2vw,1.9rem);font-weight:650;margin-top:2.6rem}
h3{font-size:1.08rem;font-weight:650;margin-top:1.8rem}
p{margin:0 0 1rem}
.vor{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);
  font-weight:600;margin:0 0 .6rem}
.fuehrt{font-size:clamp(1.02rem,.96rem + .4vw,1.2rem);color:var(--leise);max-width:46rem}

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:1.1rem;padding:.8rem 0;flex-wrap:wrap}
.marke{font-weight:750;letter-spacing:-.02em;color:var(--tinte);text-decoration:none;font-size:1.08rem}
.marke span{color:var(--akzent)}
nav.haupt{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto}
nav.haupt a{color:var(--leise);text-decoration:none;font-size:.93rem;font-weight:550}
nav.haupt a:hover,nav.haupt a[aria-current]{color:var(--tinte)}

.held{padding:3.6rem 0 2.2rem}
.held-farbig{background:linear-gradient(170deg,var(--akzent-hell) 0%,var(--papier) 72%);
  border-bottom:1px solid var(--linie);margin-bottom:2.2rem}
.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 var(--linie);border-radius:var(--radius);
  padding:1.25rem 1.35rem;box-shadow:var(--schatten)}
.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{border-color:var(--akzent);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(43,38,32,.06), 0 14px 30px -14px rgba(43,38,32,.2)}

.zahl{font-variant-numeric:tabular-nums}
.gross{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.marke-preis{font-size:1.35rem;font-weight:700;color:var(--akzent);letter-spacing:-.02em}

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:650;color:var(--leise);font-size:.82rem;letter-spacing:.03em;
  text-transform:uppercase}
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:650;background:var(--akzent-hell);color:var(--akzent-tief)}
.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:.25rem;top:.62em;width:.42rem;
  height:.42rem;border-radius:50%;background:var(--akzent)}
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-block;padding:.5rem .9rem;border-radius:7px;font-size:.9rem;
  font-weight:600;text-decoration:none;border:1px solid var(--linie);color:var(--tinte);
  background:var(--karte)}
.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}
.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);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(--akzent);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}}