@charset "UTF-8";
/* =========================================================================
   Appler + Wöhry Immobilien — statisches Design-System
   Weiß · Tinte · Gold. Inter, leicht gesetzt, viel Luft.
   ========================================================================= */

/* ---------------------------------------------------------------- Schrift */
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;
  src:url(/assets/schrift/inter-300.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/schrift/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/schrift/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/schrift/inter-600.woff2) format("woff2")}

/* ----------------------------------------------------------------- Token */
:root{
  --grund:#fff;
  --grund-warm:#faf9f7;
  --grund-tief:#f2f0ec;
  --tinte:#12110f;
  --tinte-weich:#3d3a36;
  --stumm:#6e6a64;
  --linie:#e6e2da;
  --gold:#c9a227;          /* dekorativ: Haarlinien, Marken, Flächen */
  --gold-tief:#8a6d1a;     /* Text/Links auf Weiß — trägt Kontrast */
  --gold-hell:#f0e7cd;
  --dunkel:#12110f;

  --mass:68ch;             /* Lesebreite */
  --breit:1240px;
  --schmal:860px;

  --luft-xs:.5rem; --luft-s:1rem; --luft-m:2rem;
  --luft-l:4rem;  --luft-xl:7rem; --luft-xxl:11rem;

  --takt:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:820px){
  :root{--luft-l:2.5rem;--luft-xl:4rem;--luft-xxl:5.5rem}
}

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

body{
  margin:0;
  background:var(--grund);
  color:var(--tinte-weich);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  color:var(--tinte);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 var(--luft-s);
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem)}
h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.5rem)}
h3{font-size:clamp(1.22rem,1.1rem + .55vw,1.55rem);font-weight:400}
h4{font-size:1.1rem;font-weight:500;letter-spacing:0}
h5{font-size:1rem;font-weight:500;letter-spacing:0}

p{margin:0 0 1.25em}
p:last-child{margin-bottom:0}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold-tief);outline-offset:3px;border-radius:2px}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
hr{border:0;border-top:1px solid var(--linie);margin:var(--luft-l) 0}

::selection{background:var(--gold-hell);color:var(--tinte)}

.nur-fuer-screenreader{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sprungmarke{
  position:absolute;left:var(--luft-s);top:-100px;z-index:2000;
  background:var(--tinte);color:#fff;padding:.7rem 1.2rem;
  font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  transition:top .2s var(--takt)}
.sprungmarke:focus{top:var(--luft-s)}

/* ------------------------------------------------------------------ Raster */
.bahn{width:min(100% - 2.5rem,var(--breit));margin-inline:auto}
.bahn-schmal{width:min(100% - 2.5rem,var(--schmal));margin-inline:auto}
@media (max-width:600px){
  .bahn,.bahn-schmal{width:min(100% - 2rem,var(--breit))}
}

.abschnitt{padding-block:var(--luft-xl)}
.abschnitt-eng{padding-block:var(--luft-l)}
.abschnitt-warm{background:var(--grund-warm)}
.abschnitt-tief{background:var(--grund-tief)}

/* -------------------------------------------------------- Auszeichnungen */
.marke{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-tief);margin-bottom:var(--luft-s)}
.marke::before{
  content:"";width:2.2rem;height:1px;background:var(--gold);flex:none}

.zeile{
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  font-weight:300;line-height:1.55;color:var(--tinte);
  max-width:52ch}

.lauftext{max-width:var(--mass)}
.lauftext h2{margin-top:var(--luft-l)}
.lauftext h3{margin-top:var(--luft-m)}
.lauftext h2:first-child,.lauftext h3:first-child{margin-top:0}
.lauftext a{
  color:var(--gold-tief);
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
  transition:color .2s var(--takt),text-decoration-color .2s var(--takt)}
.lauftext a:hover{color:var(--tinte);text-decoration-color:var(--tinte)}
.lauftext ul{margin:0 0 1.5em;padding:0;list-style:none}
.lauftext ul li{position:relative;padding-left:1.6rem;margin-bottom:.6em}
.lauftext ul li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.5rem;height:1px;background:var(--gold)}
.lauftext ol{margin:0 0 1.5em;padding-left:1.3rem}
.lauftext ol li{margin-bottom:.6em}

/* Die Haken aus dem Bestand: als Liste ein Haken je Punkt, als einzelne
   Zeile eine Zwischenueberschrift mit demselben Zeichen. */
.lauftext ul.haken li::before,
.lauftext h2.haken::before,.lauftext h3.haken::before,
.lauftext h4.haken::before,.lauftext h5.haken::before{
  content:"";position:absolute;left:0;top:.52em;
  width:.62rem;height:.34rem;background:none;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg)}
.lauftext ul.haken li{padding-left:1.7rem}
.lauftext :is(h2,h3,h4,h5).haken{
  position:relative;padding-left:1.7rem;
  font-size:1.12rem;font-weight:500;letter-spacing:0;
  margin-top:var(--luft-m);margin-bottom:.35rem;color:var(--tinte)}
.lauftext :is(h2,h3,h4,h5).haken + p{margin-left:1.7rem;color:var(--stumm)}

blockquote{
  margin:var(--luft-m) 0;padding:0 0 0 var(--luft-m);
  border-left:1px solid var(--gold);
  font-weight:300;font-size:1.08em;line-height:1.65;color:var(--tinte)}

/* -------------------------------------------------------------- Schalter */
.schalter{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:1rem 2rem;border:1px solid var(--tinte);
  color:var(--tinte);background:none;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s var(--takt),color .3s var(--takt),border-color .3s var(--takt)}
.schalter:hover{background:var(--tinte);color:#fff}
.schalter-gold{border-color:var(--gold-tief);color:var(--gold-tief)}
.schalter-gold:hover{background:var(--gold-tief);border-color:var(--gold-tief);color:#fff}
.schalter-hell{border-color:rgba(255,255,255,.7);color:#fff}
.schalter-hell:hover{background:#fff;border-color:#fff;color:var(--tinte)}
.schalter .pfeil{transition:transform .3s var(--takt)}
.schalter:hover .pfeil{transform:translateX(4px)}

.textlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.82rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-tief);
  border-bottom:1px solid var(--gold);padding-bottom:.3rem;
  transition:color .25s var(--takt),border-color .25s var(--takt)}
.textlink:hover{color:var(--tinte);border-color:var(--tinte)}

/* ----------------------------------------------------------------- Kopf */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(1.5rem,3.2vw,4rem);
  padding:1.6rem clamp(1.25rem,4vw,3.5rem);
  transition:background .4s var(--takt),box-shadow .4s var(--takt),padding .4s var(--takt)}
.kopf.fest{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--linie);
  padding-block:1rem}

.kopf-marke{display:flex;align-items:center;gap:.9rem;flex:none;
  opacity:1;transition:opacity .4s var(--takt),transform .4s var(--takt)}
.kopf-marke .wortmarke{
  font-size:.95rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte);line-height:1.2}
.kopf-marke .wortmarke span{
  display:block;font-size:.6rem;font-weight:400;letter-spacing:.34em;
  color:var(--gold-tief);margin-top:.22rem}
/* Auf der Startseite übernimmt die Reise-Wortmarke, bis gescrollt wird. */
.startseite .kopf:not(.fest) .kopf-marke{opacity:0;transform:translateY(-6px);pointer-events:none}

.navi ul{display:flex;align-items:center;gap:clamp(1.05rem,1.8vw,2.4rem);
  list-style:none;margin:0;padding:0}
.navi a{
  position:relative;display:block;padding:.35rem 0;
  font-size:clamp(.7375rem,.136vw + .6525rem,.78rem);font-weight:500;
  letter-spacing:clamp(.08em,.132vw - .0225rem,.13em);text-transform:uppercase;
  color:var(--tinte);white-space:nowrap}
.navi a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .3s var(--takt)}
.navi a:hover::after,.navi a[aria-current]::after{right:0}
.navi a[aria-current]{color:var(--gold-tief)}

.navi .hat-unter{position:relative}
.navi .unter{
  position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(6px);
  display:block;min-width:14rem;padding:.7rem 0;margin-top:.9rem;
  background:#fff;border:1px solid var(--linie);
  box-shadow:0 18px 45px -22px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .25s var(--takt),transform .25s var(--takt),visibility .25s}
.navi .hat-unter:hover .unter,.navi .hat-unter:focus-within .unter{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.navi .unter ul{flex-direction:column;align-items:stretch;gap:0}
.navi .unter a{padding:.55rem 1.4rem;letter-spacing:.08em;text-transform:none;
  font-size:.85rem;font-weight:400}
.navi .unter a::after{display:none}
.navi .unter a:hover{background:var(--grund-warm);color:var(--gold-tief)}

/* Auf Seiten mit Bild-Kopf steht die Navigation vor dem Scrollen ueber dem
   Foto — dort muss sie hell sein, sonst ist sie nicht zu lesen. */
body.kopf-hell .kopf:not(.fest) .navi > ul > li > a,
body.kopf-hell .kopf:not(.fest) .wortmarke{color:#fff}
body.kopf-hell .kopf:not(.fest) .wortmarke span{color:var(--gold-hell)}
body.kopf-hell .kopf:not(.fest) .navi > ul > li > a[aria-current]{color:var(--gold-hell)}
body.kopf-hell .kopf:not(.fest) .menue-knopf{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}
body.kopf-hell .kopf:not(.fest) .menue-knopf span,
body.kopf-hell .kopf:not(.fest) .menue-knopf span::before,
body.kopf-hell .kopf:not(.fest) .menue-knopf span::after{background:#fff}

.kopf-ruf{display:flex;align-items:center;gap:1.25rem;flex:none;margin-left:auto}

/* Menüknopf (mobil) */
.menue-knopf{
  display:none;width:2.75rem;height:2.75rem;padding:0;
  border:1px solid var(--linie);background:rgba(255,255,255,.85);cursor:pointer;
  align-items:center;justify-content:center}
.menue-knopf span{position:relative;display:block;width:1.05rem;height:1px;background:var(--tinte);
  transition:background .2s var(--takt)}
.menue-knopf span::before,.menue-knopf span::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:var(--tinte);
  transition:transform .3s var(--takt)}
.menue-knopf span::before{top:-6px}
.menue-knopf span::after{top:6px}
.menue-offen .menue-knopf span{background:transparent}
.menue-offen .menue-knopf span::before{transform:translateY(6px) rotate(45deg)}
.menue-offen .menue-knopf span::after{transform:translateY(-6px) rotate(-45deg)}

/* Gemessen: sieben Punkte brauchen luftig gesetzt rund 720 px, und genau so
   viel bleibt bei 1000 px neben Rand und Wortmarke uebrig -- 1 px Reserve.
   Der Umschaltpunkt liegt deshalb bei 1080 px (dort rund 50 px Luft), damit
   auch der kurze Moment mit der Systemschrift nicht ueberlaeuft. */
@media (max-width:1080px){
  .menue-knopf{display:flex}

  /* ACHTUNG: backdrop-filter auf .kopf macht die Kopfzeile zum Bezugsrahmen
     fuer position:fixed — das Overlay bliebe darin gefangen. Solange das Menue
     offen ist, faellt der Filter deshalb weg. */
  .menue-offen .kopf{
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 1px 0 var(--linie)}
  .kopf-marke,.kopf-ruf{position:relative;z-index:95}

  .navi{
    position:fixed;inset:0;background:#fff;
    display:flex;align-items:flex-start;justify-content:center;
    padding:5.5rem 1.5rem 3rem;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .3s var(--takt),visibility .3s;
    z-index:-1}
  .menue-offen .navi{opacity:1;visibility:visible;z-index:90}
  .navi ul{flex-direction:column;gap:.15rem;text-align:center;width:100%}
  .navi > ul > li > a{font-size:1.15rem;letter-spacing:.1em;padding:.65rem 0}
  .navi > ul > li{border-bottom:1px solid var(--linie);padding-bottom:.15rem}
  .navi > ul > li:last-child{border-bottom:0}
  .navi .unter{
    position:static;transform:none;opacity:1;visibility:visible;
    border:0;box-shadow:none;margin:0 0 .5rem;padding:0;min-width:0;background:none}
  .navi .unter a{font-size:.92rem;color:var(--stumm);padding:.35rem 0}
  .startseite .kopf:not(.fest) .kopf-marke{opacity:1;transform:none;pointer-events:auto}
  /* Auf Seiten mit Bild-Kopf setzt die Navigation weiss, damit sie ueber dem
     Foto lesbar ist. Im geoeffneten Overlay ist der Grund aber weiss -- ohne
     diese Ruecknahme steht das ganze Menue weiss auf weiss und nur der aktive
     Punkt (Gold) ist zu sehen. Beide Formen, damit die Regel auch gegen den
     :not(.fest)-Selektor der hellen Variante gewinnt. */
  body.kopf-hell.menue-offen .kopf .navi > ul > li > a,
  body.kopf-hell.menue-offen .kopf:not(.fest) .navi > ul > li > a{color:var(--tinte)}
  body.kopf-hell.menue-offen .kopf .navi > ul > li > a[aria-current],
  body.kopf-hell.menue-offen .kopf:not(.fest) .navi > ul > li > a[aria-current]{color:var(--gold-tief)}
  body.kopf-hell.menue-offen .kopf .wortmarke{color:var(--tinte)}
  body.kopf-hell.menue-offen .kopf .wortmarke span{color:var(--gold-tief)}
  body.kopf-hell.menue-offen .menue-knopf span,
  body.kopf-hell.menue-offen .menue-knopf span::before,
  body.kopf-hell.menue-offen .menue-knopf span::after{background:var(--tinte)}
}

/* ------------------------------------------------- Kopf als linke Spalte
   Ab 1081 px steht die Navigation nicht mehr waagerecht ueber dem Inhalt,
   sondern untereinander in einer festen Spalte links (31.08.2026). Sie hat
   immer einen eigenen hellen Grund -- anders als die frueherer Kopfzeile
   laeuft sie ueber die ganze Hoehe und damit auch neben weissem Inhalt, wo
   die "weiss ueber Foto"-Regeln unlesbar waeren. Beim Scrollen rueckt ihr
   Inhalt nach oben zusammen (padding + gap), das ist das Pendant zur
   frueheren schrumpfenden Kopfzeile. */
@media (min-width:1081px){
  /* Untergrenze gemessen: "APPLER + WÖHRY" braucht in einer Zeile rund 166 px,
     "ERBEN & NACHLASS" rund 150 px — dazu der Innenabstand. Darunter bricht
     die Wortmarke um und die Spalte sieht auf schmalen Schirmen anders aus
     als auf breiten. */
  :root{--leiste:clamp(232px,16.5vw,268px)}

  body{padding-left:var(--leiste)}

  .kopf{
    inset:0 auto 0 0;width:var(--leiste);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:clamp(2rem,6vh,4rem);
    padding:clamp(3rem,9vh,7rem) clamp(1.4rem,1.9vw,2.4rem);
    background:var(--grund-warm);
    border-right:1px solid var(--linie);
    overflow-y:auto;overscroll-behavior:contain;
    transition:padding .45s var(--takt),gap .45s var(--takt)}
  .kopf.fest{
    background:var(--grund-warm);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none;
    padding-block:clamp(1.6rem,3.6vh,2.6rem);
    gap:clamp(1.2rem,3vh,2rem)}

  .navi{width:100%}
  .navi ul{flex-direction:column;align-items:flex-start;
    gap:clamp(.5rem,1.15vh,1.05rem)}
  /* inline-block, damit die Goldlinie unter dem Wort endet und nicht unter
     der ganzen Spaltenbreite */
  .navi > ul > li > a{display:inline-block}

  .kopf-ruf{display:none}

  /* Die Spalte traegt ihren eigenen Grund -- die hellen Varianten fuer die
     Kopfzeile ueber einem Foto gelten nur noch unterhalb dieser Breite. */
  body.kopf-hell .kopf:not(.fest) .navi > ul > li > a,
  body.kopf-hell .kopf:not(.fest) .wortmarke{color:var(--tinte)}
  body.kopf-hell .kopf:not(.fest) .wortmarke span,
  body.kopf-hell .kopf:not(.fest) .navi > ul > li > a[aria-current]{color:var(--gold-tief)}

  /* Auf der Startseite bleibt es bei der Uebergabe: die grosse Reise-Wortmarke
     in der Mitte, die kleine in der Spalte erscheint erst beim Scrollen. Sie
     behaelt ihren Platz (nur opacity), damit das Menue nicht springt, wenn man
     von einer Unterseite zurueckkommt. */
}

/* ================================================== Startseite — die Reise */
.reise{position:relative}
.reise-buehne{
  position:sticky;top:0;height:100svh;overflow:hidden;background:#fff}

.szene{
  position:absolute;inset:0;
  opacity:0;
  will-change:opacity,transform}
.szene picture,.szene img{
  width:100%;height:100%;object-fit:cover;display:block}
/* Der Schleier muss auch ueber einem hellen Innenraumfoto tragen: eine
   gerichtete Bahn nach links, wo die Tafel steht, plus etwas Dunkel oben fuer
   die Kopfzeile. Ohne das ist weisse Schrift auf Kueche oder Diele nicht
   lesbar — auf dem ersten Entwurf war sie es nicht. */
.szene::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(8,7,6,.78) 0%,rgba(8,7,6,.58) 26%,
                    rgba(8,7,6,.22) 50%,rgba(8,7,6,0) 72%),
    linear-gradient(180deg,rgba(8,7,6,.30) 0%,rgba(8,7,6,0) 24%,
                    rgba(8,7,6,.06) 52%,rgba(8,7,6,.58) 100%)}
@media (max-width:700px){
  .szene::after{
    background:linear-gradient(180deg,rgba(8,7,6,.34) 0%,rgba(8,7,6,.10) 26%,
                               rgba(8,7,6,.52) 62%,rgba(8,7,6,.86) 100%)}
}
.szene-1{opacity:1}

/* Weiße Blende, die den ersten Moment trägt */
.blende{position:absolute;inset:0;background:#fff;z-index:6;pointer-events:none}

/* Die große Wortmarke, die zur Kopfmarke schrumpft */
.reise-marke{
  position:absolute;left:50%;top:50%;z-index:8;
  transform:translate(-50%,-50%);
  text-align:center;color:var(--tinte);
  will-change:transform,opacity;
  pointer-events:none;width:min(90vw,54rem)}
.reise-marke .name{
  display:block;
  font-size:clamp(1.9rem,1rem + 5.4vw,5rem);
  font-weight:300;letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
.reise-marke .fach{
  display:block;margin-top:1.1rem;
  font-size:clamp(.62rem,.5rem + .5vw,.9rem);
  font-weight:400;letter-spacing:.62em;text-transform:uppercase;
  color:var(--gold-tief);text-indent:.62em}
.reise-marke .strich{
  display:block;width:3.5rem;height:1px;background:var(--gold);
  margin:1.6rem auto 0}

.reise-hinweis{
  position:absolute;left:50%;bottom:2.2rem;z-index:9;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.62rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;
  will-change:opacity}
.reise-hinweis .stab{
  width:1px;height:2.6rem;background:currentColor;transform-origin:top;
  animation:stab 2.4s var(--takt) infinite}
@keyframes stab{
  0%{transform:scaleY(0);opacity:0}
  35%{transform:scaleY(1);opacity:1}
  75%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(0) translateY(2.6rem);opacity:0}}
@media (prefers-reduced-motion:reduce){.reise-hinweis .stab{animation:none}}

/* Texttafeln über den Szenen */
.tafel{
  position:absolute;inset:0;z-index:7;
  display:flex;align-items:flex-end;
  padding:clamp(2rem,7vh,6rem) clamp(1.5rem,6vw,6rem);
  opacity:0;visibility:hidden;
  will-change:opacity;
  pointer-events:none}
.tafel-inhalt{
  max-width:34rem;color:#fff;
  transform:translateY(28px);
  will-change:transform;
  pointer-events:auto}
.tafel-inhalt .marke{color:#fff;opacity:.85}
.tafel-inhalt .marke::before{background:var(--gold)}
.tafel-inhalt h2{color:#fff;font-size:clamp(1.8rem,1.2rem + 2.4vw,3.1rem);margin-bottom:.9rem;
  text-shadow:0 2px 30px rgba(8,7,6,.5)}
.tafel-inhalt p{color:rgba(255,255,255,.93);font-weight:300;font-size:1.05rem;
  text-shadow:0 1px 18px rgba(8,7,6,.55);
  line-height:1.65;margin-bottom:1.9rem;max-width:30rem}
.tafel-zahl{
  position:absolute;right:clamp(1.5rem,6vw,6rem);top:50%;transform:translateY(-50%);
  font-size:.68rem;color:rgba(255,255,255,.75);
  writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.16em;
  text-shadow:0 1px 12px rgba(8,7,6,.8)}

@media (max-width:700px){
  .tafel{align-items:flex-end;padding-bottom:5rem}
  .tafel-zahl{display:none}
  .tafel-inhalt p{font-size:.98rem}
}

/* Ohne JS und bei reduzierter Bewegung wird die Reise zur Bilderstrecke.
   html.js setzt ein Inline-Skript im <head>, damit es kein Umspringen gibt. */
html:not(.js) .reise-buehne,.reise-statisch .reise-buehne{position:relative;height:auto}
html:not(.js) .szene,.reise-statisch .szene{position:relative;opacity:1;height:min(70svh,32rem)}
html:not(.js) .szene::after,.reise-statisch .szene::after{
  background:linear-gradient(180deg,rgba(10,9,8,.15) 0%,rgba(10,9,8,.62) 100%)}
html:not(.js) .blende,html:not(.js) .reise-hinweis,
.reise-statisch .blende,.reise-statisch .reise-hinweis{display:none}
html:not(.js) .reise-marke,.reise-statisch .reise-marke{
  position:relative;left:auto;top:auto;transform:none;
  width:auto;padding:calc(var(--luft-xxl) + 2rem) 1.5rem var(--luft-xl);margin-inline:auto}
html:not(.js) .tafel,.reise-statisch .tafel{opacity:1;visibility:visible}
html:not(.js) .tafel-inhalt,.reise-statisch .tafel-inhalt{opacity:1;transform:none}
html:not(.js) .startseite .kopf .kopf-marke{opacity:1;transform:none;pointer-events:auto}

/* --------------------------------------------------------- Zahlenspiegel */
.spiegel{
  display:grid;gap:1px;background:var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  border:1px solid var(--linie)}
.spiegel > div{background:var(--grund);padding:var(--luft-m) 1.6rem;text-align:center}
.spiegel .wert{
  display:block;font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:300;
  color:var(--tinte);line-height:1;letter-spacing:-.02em}
.spiegel .wert .zeichen{color:var(--gold);font-size:.62em;vertical-align:.28em;margin-left:.1em}
.spiegel .schild{
  display:block;margin-top:.9rem;
  font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stumm)}

/* -------------------------------------------------------------- Leistungen */
.karten{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.karten > .taucht{display:flex}
.karten > .taucht > .karte{flex:1}
.karte{
  position:relative;display:flex;flex-direction:column;
  padding:var(--luft-m) 1.75rem calc(var(--luft-m) - .4rem);
  background:var(--grund);border:1px solid var(--linie);
  transition:border-color .35s var(--takt),transform .35s var(--takt),box-shadow .35s var(--takt)}
.karte::after{
  content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;
  background:var(--gold);transition:right .45s var(--takt)}
.karte:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(18,17,15,.45)}
.karte:hover::after{right:0}
.karte .nr{
  font-size:.68rem;letter-spacing:.24em;color:var(--gold-tief);
  margin-bottom:1.1rem;display:block}
.karte h3{margin-bottom:.6rem}
.karte p{color:var(--stumm);font-size:.95rem;margin-bottom:1.5rem}
.karte .textlink{margin-top:auto;align-self:flex-start}

/* ------------------------------------------------------------------- Team */
.team{
  display:grid;gap:2rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.kopfbild{
  position:relative;overflow:hidden;background:var(--grund-tief);
  aspect-ratio:3/4;margin-bottom:1.1rem}
.kopfbild img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:filter .55s var(--takt),transform .7s var(--takt)}
.person:hover .kopfbild img{filter:grayscale(0);transform:scale(1.03)}
.person h3{font-size:1.08rem;font-weight:500;margin-bottom:.15rem}
.person .rolle{
  display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-tief);margin-bottom:.8rem}
.person .draht{font-size:.88rem;color:var(--stumm);line-height:1.7}
.person .draht a:hover{color:var(--gold-tief)}

/* ------------------------------------------------------------- Stimmen */
.stimmen{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.stimme{
  display:flex;flex-direction:column;
  padding:var(--luft-m) 1.75rem;background:var(--grund);
  border:1px solid var(--linie)}
.stimme .anlass{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-tief);margin-bottom:1.1rem}
.stimme blockquote{
  margin:0 0 1.4rem;padding:0;border:0;
  font-size:.98rem;font-weight:400;line-height:1.72;color:var(--tinte-weich)}
.stimme .wer{
  margin-top:auto;font-size:.82rem;font-weight:500;color:var(--tinte);
  padding-top:1.1rem;border-top:1px solid var(--linie)}
.stimme details summary{
  cursor:pointer;font-size:.78rem;letter-spacing:.08em;color:var(--gold-tief);
  margin-bottom:1rem;list-style:none}
.stimme details summary::-webkit-details-marker{display:none}
.stimme details summary::after{content:" ↓"}
.stimme details[open] summary::after{content:" ↑"}

/* ---------------------------------------------------------- Auszeichnungen */
.siegel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(2rem,5vw,4.5rem)}
.siegel img{
  height:clamp(4.5rem,9vw,7rem);width:auto;
  filter:grayscale(1);opacity:.72;
  transition:filter .4s var(--takt),opacity .4s var(--takt)}
.siegel a:hover img,.siegel img:hover{filter:grayscale(0);opacity:1}

/* ------------------------------------------------------------ Seitenkopf */
.seitenkopf{
  position:relative;
  padding:calc(var(--luft-xxl) + 1rem) 0 var(--luft-xl);
  background:var(--grund-warm);
  border-bottom:1px solid var(--linie);
  overflow:hidden}
.seitenkopf.mit-bild{background:var(--dunkel)}
.seitenkopf .kopfgrund{
  position:absolute;inset:0;z-index:0}
.seitenkopf .kopfgrund img{width:100%;height:100%;object-fit:cover;opacity:.5}
.seitenkopf .kopfgrund::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.55),rgba(10,9,8,.35))}
.seitenkopf > .bahn{position:relative;z-index:1}
.seitenkopf.mit-bild h1,.seitenkopf.mit-bild .zeile{color:#fff}
.seitenkopf.mit-bild .marke{color:var(--gold-hell)}
.seitenkopf.mit-bild .krume,.seitenkopf.mit-bild .krume a{color:rgba(255,255,255,.72)}
.seitenkopf h1{margin-bottom:var(--luft-s)}

.krume{
  font-size:.72rem;letter-spacing:.1em;color:var(--stumm);
  margin-bottom:1.4rem}
.krume ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.krume li+li::before{content:"·";margin-right:.5rem;opacity:.6}
.krume a:hover{color:var(--gold-tief)}

/* -------------------------------------------------------------- Inhalte */
.gespann{
  display:grid;gap:var(--luft-l);
  grid-template-columns:minmax(0,1fr)}
.gespann.zweispaltig{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:900px){.gespann.zweispaltig{grid-template-columns:minmax(0,1fr)}}

.seitenklotz{
  position:sticky;top:7rem;align-self:start;
  padding:var(--luft-m) 1.6rem;
  background:var(--grund-warm);border:1px solid var(--linie)}
.seitenklotz img{margin-bottom:1.2rem}
.seitenklotz h3{font-size:1.1rem;font-weight:500;margin-bottom:.2rem}
.seitenklotz .rolle{
  display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-tief);margin-bottom:1rem}
.seitenklotz .draht{font-size:.9rem;line-height:1.9;color:var(--stumm)}
.seitenklotz .draht a{color:var(--tinte)}
.seitenklotz .draht a:hover{color:var(--gold-tief)}
.seitenklotz .schalter{margin-top:1.4rem;width:100%;justify-content:center;padding:.85rem 1rem}
@media (max-width:900px){.seitenklotz{position:static}}

.inhaltsbild{margin:var(--luft-m) 0}
.inhaltsbild img{width:100%}
.inhaltsbild figcaption{
  margin-top:.7rem;font-size:.78rem;color:var(--stumm)}

/* ------------------------------------------------------------- Angebote */
.objekte{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
/* Die Karten liegen in einem Einblend-Wrapper; ohne diese beiden Zeilen
   bleibt die Karte auf ihrer Inhaltshoehe stehen statt die Zeile zu fuellen. */
.objekte > *{display:flex}
.objekte > * > .objekt,.objekte > .objekt{flex:1;min-width:0}
.objekt{
  display:flex;flex-direction:column;background:var(--grund);
  border:1px solid var(--linie);overflow:hidden;
  transition:transform .35s var(--takt),box-shadow .35s var(--takt),border-color .35s var(--takt)}
.objekt:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 28px 55px -36px rgba(18,17,15,.5)}
.objekt-bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--grund-tief)}
.objekt-bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--takt)}
.objekt:hover .objekt-bild img{transform:scale(1.04)}
.objekt-fahne{
  position:absolute;left:0;top:1rem;
  background:rgba(255,255,255,.94);color:var(--tinte);
  padding:.4rem .9rem;font-size:.64rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase}
.objekt > a{display:flex;flex-direction:column;flex:1;min-height:0}
.objekt-text{display:flex;flex-direction:column;flex:1;padding:1.5rem}
.objekt-art{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-tief);margin-bottom:.7rem}
/* Der Kartentitel ist auf der Uebersicht ein h2 und auf der Startseite ein h3 —
   die Groesse haengt an der Karte, nicht an der Ebene. */
.objekt-text :is(h2,h3,h4){
  font-size:1.05rem;font-weight:400;line-height:1.45;margin-bottom:.6rem;
  letter-spacing:0;
  overflow-wrap:anywhere;hyphens:auto}
.objekt-ort{font-size:.86rem;color:var(--stumm);margin-bottom:1.2rem}
.objekt-preis{
  margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
/* Ein Objekt kann zwei Preise tragen (Miete zzgl. NK + Warmmiete) — jeder
   bekommt seine eigene Spalte, sonst laufen Betrag und Bezeichnung ineinander. */
.objekt-preis .posten{display:flex;flex-direction:column;gap:.15rem}
.objekt-preis .betrag{font-size:1.1rem;font-weight:500;color:var(--tinte);line-height:1.2}
.objekt-preis .art{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stumm)}
.objekt-eck{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.9rem;
  font-size:.78rem;color:var(--stumm)}
.objekt-eck span{white-space:nowrap}
.objekt-eck span+span::before{content:"·";margin-right:.9rem;opacity:.5}

/* Objektdetail */
.galerie{display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr)}
.galerie a,.galerie .feld{display:block;overflow:hidden;background:var(--grund-tief);aspect-ratio:4/3}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--takt)}
.galerie a:hover img{transform:scale(1.04)}
.galerie > :first-child{grid-column:span 4;aspect-ratio:16/9}
@media (min-width:900px){.galerie > :first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
@media (max-width:640px){.galerie{grid-template-columns:repeat(2,1fr)}
  .galerie > :first-child{grid-column:span 2}}

.fakten{
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  border-top:1px solid var(--linie)}
.fakten div{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.9rem .2rem;border-bottom:1px solid var(--linie)}
.fakten dt,.fakten .schild{color:var(--stumm);font-size:.85rem}
.fakten dd,.fakten .wert{margin:0;color:var(--tinte);font-weight:500;font-size:.9rem;text-align:right}

/* ------------------------------------------------------- Vorstellung */
.vorstellung{
  display:grid;gap:var(--luft-m);align-items:start;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  margin:var(--luft-m) 0;padding:var(--luft-m);
  background:var(--grund-warm);border:1px solid var(--linie)}
.vorstellung-bild{overflow:hidden;background:var(--grund-tief);aspect-ratio:3/4}
.vorstellung-bild img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04)}
.vorstellung h3{margin-bottom:.2rem;margin-top:0}
.vorstellung .rolle{
  display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-tief);margin-bottom:1rem}
.vorstellung .draht{margin-top:1rem;font-size:.92rem;color:var(--stumm)}
.vorstellung .draht a{color:var(--tinte)}
.vorstellung .draht a:hover{color:var(--gold-tief)}
@media (max-width:640px){
  .vorstellung{grid-template-columns:minmax(0,1fr)}
  .vorstellung-bild{max-width:11rem;aspect-ratio:1/1}
}

/* --------------------------------------------------------- Ortsverweise */
.ortsnetz{
  display:grid;gap:.4rem 1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}
.ortsnetz a{
  display:block;padding:.4rem 0;font-size:.87rem;color:var(--stumm);
  border-bottom:1px solid transparent;
  transition:color .2s var(--takt),border-color .2s var(--takt)}
.ortsnetz a:hover{color:var(--tinte);border-color:var(--gold)}

.wolke{display:flex;flex-wrap:wrap;gap:.5rem}
.wolke a{
  display:inline-block;padding:.45rem .95rem;
  border:1px solid var(--linie);
  font-size:.78rem;color:var(--stumm);
  transition:border-color .25s var(--takt),color .25s var(--takt),background .25s var(--takt)}
.wolke a:hover{border-color:var(--gold);color:var(--tinte);background:var(--grund-warm)}

/* -------------------------------------------------------------- Kontakt */
.kontaktband{
  position:relative;background:var(--dunkel);color:#fff;overflow:hidden}
.kontaktband .kopfgrund{position:absolute;inset:0}
.kontaktband .kopfgrund img{width:100%;height:100%;object-fit:cover;opacity:.32}
.kontaktband > .bahn{position:relative;z-index:1;
  padding-block:var(--luft-xl);text-align:center}
.kontaktband h2{color:#fff;margin-bottom:1rem}
.kontaktband p{color:rgba(255,255,255,.75);max-width:40rem;margin-inline:auto;margin-bottom:2.2rem}
.kontaktband .marke{color:var(--gold-hell);justify-content:center}
.kontaktband .knopfreihe{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

.formular{display:grid;gap:1.4rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.formular .voll{grid-column:1/-1}
@media (max-width:700px){.formular{grid-template-columns:minmax(0,1fr)}}
.feld label{
  display:block;margin-bottom:.45rem;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stumm)}
.feld input,.feld textarea,.feld select{
  width:100%;padding:.85rem 1rem;
  font-family:inherit;font-size:.95rem;color:var(--tinte);
  background:var(--grund);border:1px solid var(--linie);border-radius:0;
  transition:border-color .25s var(--takt)}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--gold)}
.feld textarea{min-height:9rem;resize:vertical}
.feld .hinweis{display:block;margin-top:.4rem;font-size:.75rem;color:var(--stumm)}
.zustimmung{display:flex;gap:.8rem;align-items:flex-start;font-size:.85rem;color:var(--stumm)}
.zustimmung input{width:1.05rem;height:1.05rem;flex:none;margin-top:.25rem;accent-color:var(--gold-tief)}
.zustimmung label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
  color:var(--stumm);margin:0}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- Fuss */
.fuss{background:var(--dunkel);color:rgba(255,255,255,.66);
  padding-block:var(--luft-xl) var(--luft-m);font-size:.9rem}
.fuss-raster{
  display:grid;gap:var(--luft-m);
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)) minmax(0,1.1fr)}
@media (max-width:900px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fuss-raster{grid-template-columns:minmax(0,1fr)}}
.fuss h2,.fuss h3{
  color:#fff;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:1.3rem}
.fuss .wortmarke{
  font-size:1rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;line-height:1.3;margin-bottom:1rem;display:block}
.fuss .wortmarke span{
  display:block;font-size:.58rem;font-weight:400;letter-spacing:.34em;
  color:var(--gold);margin-top:.3rem}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.6rem}
.fuss a{color:rgba(255,255,255,.66);transition:color .2s var(--takt)}
.fuss a:hover{color:var(--gold)}
.fuss address{font-style:normal;line-height:1.9}
.fuss-schluss{
  margin-top:var(--luft-l);padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.78rem;color:rgba(255,255,255,.45)}
.fuss-schluss nav{display:flex;flex-wrap:wrap;gap:1.2rem}

/* ------------------------------------------------------- Einblenden */
.taucht{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--takt),transform .75s var(--takt)}
.taucht.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .taucht{opacity:1;transform:none;transition:none}
  .szene,.tafel-inhalt{transition:none}
}

/* --------------------------------------------------------------- Druck */
@media print{
  .kopf,.reise-hinweis,.kontaktband,.fuss nav,.menue-knopf{display:none}
  body{color:#000;font-size:11pt;padding-left:0}
  .reise-buehne{position:static;height:auto}
  .szene{position:static;opacity:1}
}

/* ------------------------------------------------------------ Bildschau */
.bildschau{
  position:fixed;inset:0;z-index:500;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,9,8,.94);padding:clamp(1rem,4vw,3rem)}
.bildschau.offen{display:flex}
.bildschau img{
  max-width:min(100%,1400px);max-height:86vh;width:auto;height:auto;
  object-fit:contain;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.bildschau button{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-family:inherit;line-height:1;padding:.6rem 1rem;
  opacity:.7;transition:opacity .2s var(--takt)}
.bildschau button:hover{opacity:1}
.bildschau-zu{top:1rem;right:1.2rem;font-size:2.2rem}
.bildschau-links,.bildschau-rechts{top:50%;transform:translateY(-50%);font-size:3rem}
.bildschau-links{left:.4rem}
.bildschau-rechts{right:.4rem}
.bildschau-zaehler{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  margin:0;font-size:.72rem;letter-spacing:.2em;color:rgba(255,255,255,.6)}

/* ----------------------------------------------------------- Meldungen */
.meldung{
  padding:1.1rem 1.4rem;border-left:2px solid var(--gold);
  background:var(--grund-warm);font-size:.92rem;color:var(--tinte-weich);
  margin-bottom:var(--luft-m)}
.meldung.gut{border-color:#4a7c59}
.meldung.schlecht{border-color:#a4442f}