/* Zickzackweg 35–39 · gemeinsame Basis für Objektseite und digitales Exposé
   Farben aus dem Exposé (Warm-Schwarz + Greige); Schrift seit 03.10.2026 Newsreader + Source Sans 3. */

/* Schriften seit 03.10.2026 (Block 4, Carstens Wahl „entscheide du“): Newsreader (leicht, editorial) + Source Sans 3; beide OFL, selbst gehostet */
@font-face{font-family:'Newsreader';src:url('../fonts/Newsreader-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/Newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/Newsreader-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/SourceSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/SourceSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --schwarz:#141312;
  --nacht:#1a1919;
  --panel:#24221f;
  --panel-2:#2c2a26;
  --greige:#a49e8c;
  --greige-hell:#cbc5b3;
  --greige-tief:#6e6857;
  --papier:#f2f0ea;
  --blatt:#fbfaf7;
  --tinte:#26251f;
  --tinte-2:#575349;
  --hell:#f4f2ec;
  --hell-2:#b9b4a6;
  --kante:rgba(38,37,31,.17);
  --kante-zart:rgba(38,37,31,.09);
  --kante-dunkel:rgba(244,242,236,.17);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-reveal:cubic-bezier(0.16,1,0.3,1);
  --ease-sheet:cubic-bezier(0.32,0.72,0,1);
  --r-klein:4px;
  --r:8px;
  --r-gross:14px;
  --z-kopf:20;
  --z-dialog:40;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-synthesis:none;-webkit-text-size-adjust:100%;scrollbar-color:var(--greige) var(--papier)}
/* Weiches Rollen erst nach dem Laden (expose.js setzt .sanft): Der erste Sprung zu einem Anker flog sonst über die ganze Seite und lud dabei fast alle Bilder */
html.sanft{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html.sanft{scroll-behavior:auto}}
/* Solange ein Dialog offen ist, steht die Seite dahinter. Den Platz des Rollbalkens hält expose.js (oeffne), damit nichts springt */
html:has(dialog[open]){overflow:hidden}
body{margin:0;font-family:var(--sans);font-size:1.09rem;line-height:1.6;color:var(--tinte);background:var(--papier);caret-color:var(--greige-tief);font-optical-sizing:auto}
img,svg,picture{display:block;max-width:100%}
figure{margin:0}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0;line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
h3,h4{font-weight:400}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}
::selection{background:var(--greige);color:var(--schwarz)}
/* Fokusrahmen: auf hellen Flächen das tiefe Greige (5,3 zu 1 gegen Blatt; das mittlere hatte 2,6 zu 1), auf dunklen das helle */
:focus-visible{outline:2px solid var(--greige-tief);outline-offset:3px;border-radius:2px}
.dunkel :focus-visible,.kopfleiste :focus-visible,.titel :focus-visible,.fuss :focus-visible,.inhalt-dialog :focus-visible,.recht-kopf :focus-visible{outline-color:var(--greige-hell)}

/* Seitenränder samt Kerbe und Home-Balken im Querformat (viewport-fit=cover) */
.wrap{width:min(1200px,100% - 48px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));margin-inline:auto}
.wrap-schmal{width:min(880px,100% - 48px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));margin-inline:auto}
@media (max-width:640px){.wrap,.wrap-schmal{width:calc(100% - 40px)}}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--greige);color:var(--schwarz);padding:12px 18px;border-radius:var(--r);font-weight:700;text-decoration:none;transition:transform .2s var(--ease-out)}
.skip:focus{transform:translateY(96px)}
.nowrap{white-space:nowrap}
.zahl{font-variant-numeric:tabular-nums}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:1rem;letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .14s var(--ease-out),background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-greige{background:var(--greige);color:var(--schwarz)}
.btn-dunkel{background:var(--tinte);color:var(--hell)}
.btn-geist-hell{border-color:rgba(244,242,236,.42);color:var(--hell)}
.btn-geist-dunkel{border-color:rgba(38,37,31,.32);color:var(--tinte)}
@media (hover:hover) and (pointer:fine){
  .btn-greige:hover{background:var(--greige-hell)}
  .btn-dunkel:hover{background:#3a3833}
  .btn-geist-hell:hover{border-color:var(--hell)}
  .btn-geist-dunkel:hover{border-color:var(--tinte)}
}

/* Bild-Kennzeichnung (Foto/Visualisierung) */
.kennung{position:absolute;z-index:2;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(20,19,18,.66);color:var(--hell);pointer-events:none}
.kennung.ol{left:14px;top:14px}.kennung.or{right:14px;top:14px}.kennung.ul{left:14px;bottom:14px}.kennung.ur{right:14px;bottom:14px}
.ki-hinweis{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--greige-hell);border:1px solid var(--kante-dunkel);border-radius:999px;padding:7px 14px}

/* Status-Chips */
.status{display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.status.frei{background:#e6e1d4;color:var(--tinte);border-color:rgba(38,37,31,.14)}
.status.reserviert{border:1px dashed var(--tinte);color:var(--tinte)}
.status.verkauft{border-color:var(--kante);color:var(--tinte-2)}

/* Vorher/Nachher-Regler */
.vergleich{position:relative;overflow:hidden;border-radius:var(--r);background:var(--panel);aspect-ratio:3/2;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;--pos:50%}
.vergleich .lage{position:absolute;inset:0}
.vergleich .lage img{width:100%;height:100%;object-fit:cover}
.vergleich .links{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vergleich .rechts{clip-path:inset(0 0 0 var(--pos))}
.vergleich .kennung{transition:transform .2s var(--ease-out)}
.vergleich.links-schmal .links .kennung,.vergleich.rechts-schmal .rechts .kennung{transform:scale(.9)}
.vergleich .griff{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--hell);pointer-events:none}
.vergleich .griff span{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--hell);color:var(--tinte);display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(20,19,18,.5)}
.vergleich .griff svg{width:22px;height:22px}
.vergleich input{position:absolute;inset:auto 0 0 0;width:100%;opacity:0;height:1px;pointer-events:none}
.vergleich:has(input:focus-visible){outline:2px solid var(--greige);outline-offset:3px}

/* Bauchronik */
.chronik{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:max(260px,calc((100% - 44px) / 3.3));gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--greige) transparent}
.chronik .schritt{scroll-snap-align:start;position:relative;padding-top:34px;margin:0}
.chronik .schritt::before{content:"";position:absolute;top:9px;left:0;right:-22px;height:2px;background:var(--kante)}
.chronik .schritt:last-child::before{right:0}
.chronik .schritt::after{content:"";position:absolute;top:4px;left:0;width:12px;height:12px;border-radius:50%;background:var(--papier);border:2px solid var(--greige-tief)}
.blatt .chronik .schritt::after{background:var(--blatt)}
.chronik .schritt.jetzt::after{background:var(--greige);border-color:var(--tinte)}
.chronik time{display:block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--greige-tief);font-variant-numeric:tabular-nums;margin-bottom:10px}
.chronik img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-klein)}
.chronik figcaption{margin-top:12px}
.chronik figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem}
.chronik figcaption span{display:block;font-size:.95rem;color:var(--tinte-2);margin-top:2px}
@media (max-width:760px){.chronik{grid-auto-columns:76%}}
/* Bauchronik: eigene Fortschrittsleiste statt Scrollbalken, Daumen als Wisch-Hinweis (Carsten 03.10.26) */
.chronik{scrollbar-width:none}
.chronik::-webkit-scrollbar{display:none}
.chronik-rahmen{position:relative}
.chronik-daumen{display:none;position:absolute;z-index:3;right:clamp(10px,3vw,22px);top:var(--daumen-y,45%);width:58px;height:58px;margin-top:-29px;border-radius:50%;background:rgba(20,19,18,.74);color:var(--hell);place-items:center;pointer-events:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.chronik-daumen svg{width:30px;height:30px}
.chronik-rahmen.erledigt .chronik-daumen{opacity:0;transform:scale(.7)}
.chronik-fuss{display:flex;align-items:center;gap:14px;margin-top:4px}
.chronik-wisch{display:none;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--greige-tief);white-space:nowrap}
.chronik-wisch svg{width:18px;height:18px}
.chronik-spur{position:relative;flex:1;height:3px;border-radius:2px;background:var(--kante);overflow:hidden}
.chronik-spur span{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:2px;background:var(--greige-tief)}
.chronik-zahl{font-size:.85rem;font-weight:700;color:var(--tinte-2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (pointer:coarse){.chronik-daumen{display:grid}.chronik-wisch{display:inline-flex}}
@media (prefers-reduced-motion:no-preference){
  .chronik-rahmen.zeigt .chronik-daumen svg{animation:daumen-wisch 1.3s var(--ease-out) 2}
  @keyframes daumen-wisch{0%,100%{transform:translateX(0) rotate(0)}45%,65%{transform:translateX(-18px) rotate(-10deg)}}
}
@media (forced-colors:active){.chronik-spur span{background:CanvasText}.chronik-daumen{border:1px solid CanvasText}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (prefers-contrast:more){:root{--kante:rgba(38,37,31,.4);--tinte-2:#3b3933;--hell-2:#dcd7ca}}