/* ============================================================
   FLEISCHMANNGASSE — VIRES Real Solutions
   Warm-neutrale, editoriale Bildsprache.
   Display: Cormorant Garamond · UI/Sans: Archivo · Mono: System
   ============================================================ */

:root{
  /* Warme, entsättigte Papiertöne */
  --paper:      #f2eee6;
  --paper-2:    #eae3d8;
  --paper-3:    #e3dbcc;
  --paper-warm: #f7f4ee;

  /* Warmes Beinahe-Schwarz */
  --ink:    #1a1916;
  --ink-2:  #3b3933;
  --ink-3:  #6a665b;
  --ink-4:  #97927f;

  /* Markenfarbe: tiefes Navy */
  --brand:     #010230;
  --brand-2:   #14163f;   /* leicht aufgehellt, für Linien auf Navy */
  --brand-rgb: 1,2,48;

  /* Akzente: warmer Bronze-Ton als Komplement zum Navy */
  --accent:   oklch(0.62 0.07 62);     /* gebrannter Ton / Bronze-Clay */
  --accent-d: oklch(0.55 0.07 58);
  --olive:    oklch(0.62 0.12 150);    /* sehr sparsam: Verfügbar-Status */
  --hl:       var(--accent);            /* Keyword-/Kennzahl-Highlight */
  --hl:       var(--accent);            /* Keyword-/Kennzahl-Highlight */

  --line:      rgba(26,25,22,.14);
  --line-soft: rgba(26,25,22,.08);
  --paper-rgb: 242,238,230;
  --ink-rgb:   26,25,22;

  --shadow-soft: 0 1px 2px rgba(26,25,22,.04), 0 8px 30px rgba(26,25,22,.06);
  --shadow-lift: 0 2px 6px rgba(26,25,22,.06), 0 24px 60px rgba(26,25,22,.12);

  --serif: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 96px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.16,1,.3,1);
}

*{ 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(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  font-size:19px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Typographische Helfer ---------- */
.kicker{
  font-family:var(--sans);
  font-size:18px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent-d);
}
.kicker--muted{ color:var(--ink-3); }

.mono{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.04em;
  color:var(--ink-3);
}

.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.01em;
}

h2.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px, 5.4vw, 76px);
  line-height:1.0;
  letter-spacing:-.012em;
  margin:0;
}
.section-lead{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(22px, 2.6vw, 34px);
  line-height:1.32;
  color:var(--ink-2);
  letter-spacing:-.005em;
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }

.eyebrow-row{
  display:flex; align-items:center; gap:16px;
  margin-bottom:28px;
}
.eyebrow-row .rule{ flex:1; height:1px; background:var(--line); }

/* ============================================================
   PROGRESS + NAV
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--accent);
  z-index:120;
}

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  color:var(--paper);
  transition:background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(var(--paper-rgb),.86);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  color:var(--ink);
  border-bottom-color:var(--line-soft);
  padding-top:16px; padding-bottom:16px;
}
.brand{ display:flex; align-items:baseline; gap:12px; line-height:1; }
.brand .mark{
  font-family:var(--sans); font-weight:700; font-size:20px;
  letter-spacing:.22em; text-transform:uppercase;
}
.brand .sub{
  font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; opacity:.62;
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:15px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; opacity:.82; position:relative; padding:12px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:currentColor; transition:width .35s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; letter-spacing:.06em;
  padding:12px 22px; border-radius:999px;
  border:1px solid currentColor; background:transparent; color:inherit;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.btn .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.btn:hover{ transform:translateY(-1px); }
.btn--solid{
  background:var(--brand); color:var(--paper-warm); border-color:var(--brand);
}
.btn--solid:hover{ background:var(--accent-d); border-color:var(--accent-d); }
.btn--accent{ background:var(--accent); color:var(--paper-warm); border-color:var(--accent); }
.btn--accent:hover{ background:var(--accent-d); border-color:var(--accent-d); }
.btn--lg{ padding:16px 30px; font-size:15px; }

.nav-toggle{ display:none; }

/* ============================================================
   GES-HERO · Google-Earth-Anflug -> Crossfade -> Editorial-Hero
   Ein gepinnter Spacer (.ges-hero), eine sticky Bühne (.ges-stage),
   darin gestapelte Layer: Canvas (Anflug) + Editorial (Foto-Hero).
   EINE Quelle der Wahrheit (hp) -> alle Werte idempotent via JS in
   Custom-Properties geschrieben. KEIN zweiter Listener, KEIN Latch.
   ============================================================ */

/* ---- Pin-Spacer: gibt die Scrollstrecke vor ---- */
.ges-hero{
  position:relative;
  height:300svh;            /* ~2 zusätzliche Viewporthöhen Anflug + Crossfade */
  min-height:1800px;        /* iOS-svh-Sicherung */
  background:var(--brand);
  --canvas-o:1;             /* Sichtbarkeit Anflug-Canvas */
  --ed-o:0;                 /* Sichtbarkeit Editorial-Hero */
  --ed-scale:1.04;          /* Editorial fährt von 1.04 -> 1.0 */
  --ed-y:2%;                /* Editorial fährt von 2% -> 0 */
  --beat-o:1;               /* Scrim + Beats */
  --cue-o:1;                /* Scroll-Cue */
}

/* ---- Gepinnte Bühne ---- */
.ges-stage{
  position:sticky; top:0;
  height:100svh; min-height:600px;
  overflow:hidden;
  background:var(--brand);
}

/* ---- z1: Anflug-Canvas ---- */
.ges-slides{
  position:absolute; inset:0; z-index:1;
  transform:scale(var(--kb,1));
  transform-origin:center 45%;
  will-change:transform;
}
.ges-slide{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  opacity:0; will-change:opacity;
}
.ges-slide:first-child{ opacity:1; }

/* ---- z2: Text-Schutz-Scrim über dem Canvas ----
   Oben max .22 -> Google-Earth-Wasserzeichen (oben mittig) NICHT verdecken. */
.ges-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--brand-rgb),.42) 0%, rgba(var(--brand-rgb),0) 30%),
    linear-gradient(0deg,
      rgba(var(--brand-rgb),.78) 0%,
      rgba(var(--brand-rgb),.30) 42%,
      rgba(var(--brand-rgb),0) 70%);
}

/* ---- z3: Text-Beats (während Anflug) ---- */
.ges-beats{
  position:absolute; left:var(--gut);
  bottom:clamp(96px,16vh,180px); z-index:3;
  color:var(--paper-warm);
  opacity:var(--beat-o,1);
  pointer-events:none;
  max-width:min(560px, 80vw);
}
.ges-beats .ges-kicker{
  color:var(--paper-warm); opacity:.92; margin:0 0 16px;
}
.ges-beats .ges-line{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(26px,4vw,52px); line-height:1.12;
  letter-spacing:-.01em; margin:0; color:var(--paper-warm); opacity:.97;
}

/* ---- z3: Scroll-Cue (gemeinsame Optik) ---- */
.scroll-cue, .ges-cue{
  position:absolute; left:var(--gut); bottom:26px; z-index:3;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(247,244,238,.7);
  opacity:var(--cue-o,1);
  will-change:opacity; pointer-events:none;
}
.scroll-cue .bar, .ges-cue .bar{
  position:relative; width:1px; height:42px; background:rgba(247,244,238,.3); overflow:hidden;
}
.scroll-cue .bar::after, .ges-cue .bar::after{
  content:""; position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:var(--paper-warm); animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%{top:-50%} 60%,100%{top:100%} }

/* ---- z3: Preloader (Glas-Spinner + Fortschrittsbalken) ---- */
.ges-preloader{
  position:absolute; left:50%; top:50%; z-index:5;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:26px 30px; border-radius:18px;
  background:rgba(var(--brand-rgb),.28);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(247,244,238,.12);
  --pre:0;
}
.ges-preloader .spin{
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(247,244,238,.18);
  border-top-color:var(--accent);
  animation:ges-spin .9s linear infinite;
}
@keyframes ges-spin{ to{ transform:rotate(360deg); } }
.ges-preloader .track{
  width:128px; height:1px; background:rgba(247,244,238,.18); overflow:hidden;
}
.ges-preloader .track .fill{
  display:block; width:100%; height:100%;
  background:var(--accent);
  transform:scaleX(var(--pre,0)); transform-origin:left;
  transition:transform .25s linear;
}
.ges-preloader .lab{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(247,244,238,.62);
}
.ges-preloader.done{ opacity:0; transition:opacity .5s var(--ease-io); pointer-events:none; }

/* ---- z4: Editorial-Hero (Foto + Titel), per Crossfade enthüllt ---- */
.ges-editorial{
  position:absolute; inset:0; z-index:4;
  pointer-events:none;
}
.ges-editorial.is-live{ pointer-events:auto; }

/* Foto (LCP im Sequenz-Pfad nur sekundär; im Static-Pfad primär) */
.ges-media{ position:absolute; inset:0; z-index:1; }
.ges-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:center 45%;     /* angeglichen an drawCover-dy-Bias 0.35 */
  filter:brightness(.56) saturate(1.07);  /* gleichmäßig abdunkeln -> weißer Titel überall lesbar */
}

/* Editorial-Scrim */
.ges-editorial .ges-ed-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:var(--ed-o,0);
  background:
    linear-gradient(180deg, rgba(var(--brand-rgb),.34) 0%, rgba(var(--brand-rgb),0) 26%),
    linear-gradient(90deg, rgba(var(--brand-rgb),.40) 0%, rgba(var(--brand-rgb),.12) 40%, rgba(var(--brand-rgb),0) 68%),
    linear-gradient(0deg,
      rgba(var(--brand-rgb),.80) 0%,
      rgba(var(--brand-rgb),.42) 40%,
      rgba(var(--brand-rgb),.10) 68%,
      rgba(var(--brand-rgb),0) 86%);
}

/* Editorial-Inhalt */
.ges-editorial .hero-inner{
  position:absolute; inset:auto 0 0 0; z-index:3; width:100%;
  color:var(--paper-warm);
  padding-bottom:clamp(40px, 7vh, 88px);
}
.ges-editorial .kicker{ color:var(--paper-warm); opacity:.92; }

/* Titel: zwei Zeilen, Zeichen-für-Zeichen-Reveal */
.ges-editorial .hero-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(56px, 13.5vw, 232px);
  line-height:.9; letter-spacing:-.02em; margin:.16em 0 .12em;
  text-shadow:0 1px 2px rgba(var(--brand-rgb),.45), 0 10px 60px rgba(var(--brand-rgb),.60);
}
.ges-editorial .h1-line{ display:block; }
.ges-editorial .h1-line.soft{ font-style:italic; font-weight:300; }
.ges-editorial .ch{
  display:inline-block; opacity:0;
  transform:translateY(.5em) translateX(-.04em);
  transition:opacity .5s var(--ease-io), transform .55s var(--ease-io);
}
.ges-editorial.is-revealed .ch{ opacity:1; transform:none; }

/* Sub */
.ges-editorial .hero-sub{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(20px,2.5vw,32px); line-height:1.3;
  max-width:34ch; color:var(--paper-warm);
  text-shadow:0 1px 16px rgba(var(--brand-rgb),.72);
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease-io) .25s, transform .7s var(--ease-io) .25s;
}
.ges-editorial.is-revealed .hero-sub{ opacity:.96; transform:none; }

/* CTAs */
.ges-editorial .hero-cta{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease-io) .38s, transform .7s var(--ease-io) .38s;
}
.ges-editorial.is-revealed .hero-cta{ opacity:1; transform:none; }

/* Liquid-Glass-Kennzahlen-Karte rechts unten */
.ges-stats{
  position:absolute; right:var(--gut); bottom:clamp(40px,7vh,88px); z-index:3;
  max-width:300px; padding:20px 22px; border-radius:16px;
  background:rgba(var(--brand-rgb),.30);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(247,244,238,.16);
  color:var(--paper-warm);
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease-io) .5s, transform .8s var(--ease-io) .5s;
}
.ges-editorial.is-revealed .ges-stats{ opacity:1; transform:none; }
.ges-stats .ges-stats-lab{
  font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(247,244,238,.66); margin:0 0 12px;
}
.ges-stats ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px; }
.ges-stats li{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--sans); font-size:16px; letter-spacing:.02em;
  color:rgba(247,244,238,.9);
}
.ges-stats li b{ font-weight:600; color:var(--paper-warm); min-width:auto; }
.ges-stats li .sep{ width:4px;height:4px;border-radius:50%;background:var(--accent);
  flex:0 0 auto; align-self:center; }

/* Vertikales Side-Label rechts */
.ges-editorial .hero-side{
  position:absolute; right:calc(var(--gut) - 6px); top:42%; z-index:3;
  transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-family:var(--mono); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(247,244,238,.62);
  display:flex; align-items:center; gap:14px;
  opacity:0;
  transition:opacity .8s var(--ease-io) .6s;
}
.ges-editorial.is-revealed .hero-side{ opacity:1; }
.ges-editorial .hero-side .ln{ width:42px; height:1px; background:rgba(247,244,238,.4); }

/* ---- will-change nur während Pin sichtbar (per JS-Klasse) ---- */
.ges-hero:not(.is-pinned) .ges-canvas,
.ges-hero:not(.is-pinned) .ges-editorial{ will-change:auto; }

/* ---- MOBILE-BREAKPOINTS (Side-Label aus) ---- */
@media (max-width:980px){
  .ges-stats{ max-width:260px; padding:16px 18px; }
}
@media (max-width:860px){
  .ges-editorial .hero-side{ display:none; }
}

/* ============================================================
   GES-HERO · FALLBACK 1: Mobile (<=760px) -> nur Editorial-Foto
   5,8MB/63 WebP über Funk + Touch-Momentum + ~130MB Bitmap-RAM =
   auf Mid-Range kritisch. Daher: Sequenz aus, Foto-Hero statisch.
   (JS lädt im Mobile-/saveData-Pfad GAR KEINE Frames.)
   ============================================================ */
@media (max-width:760px){
  .ges-hero{ height:auto; min-height:100svh; }
  /* Stage waechst mit Inhalt: Titel/CTAs und Stats-Karte stapeln statt ueberlappen */
  .ges-stage{ position:relative; height:auto; min-height:100svh; display:flex; flex-direction:column; }
  .ges-canvas, .ges-scrim, .ges-beats, .ges-cue, .ges-preloader{ display:none; }
  /* Statisches Schlussbild + Scrim rein per CSS, unabhaengig vom JS-Pfad */
  .ges-slide{ opacity:0 !important; }
  .ges-slide:last-child{ opacity:1 !important; }
  /* padding-top haelt Kicker/Titel unter der fixen Nav (~101px), wenn der Inhalt hoeher als 100svh ist */
  .ges-editorial{ opacity:1; transform:none; pointer-events:auto; position:relative; inset:auto; flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-top:112px; }
  .ges-editorial .ges-ed-scrim{ opacity:1; }
  .ges-editorial .hero-inner{ position:static; padding-bottom:0; }
  .ges-stats{ position:static; margin:22px var(--gut) clamp(24px,5vh,48px); max-width:none; }
}

/* ---- is-static: setzt denselben Zustand per JS (z.B. saveData auf Desktop, kein Canvas, <8 Frames) ---- */
.ges-hero.is-static{ height:auto; min-height:100svh; }
.ges-hero.is-static .ges-stage{ position:relative; height:100svh; min-height:600px; }
.ges-hero.is-static .ges-canvas,
.ges-hero.is-static .ges-scrim,
.ges-hero.is-static .ges-beats,
.ges-hero.is-static .ges-cue,
.ges-hero.is-static .ges-preloader{ display:none; }
.ges-hero.is-static .ges-editorial{ opacity:1; transform:none; pointer-events:auto; }

/* ---- PREFERS-REDUCED-MOTION: statischer Editorial-Hero, keine Bewegung ---- */
@media (prefers-reduced-motion: reduce){
  .ges-hero{ height:auto; min-height:100svh; }
  .ges-stage{ position:relative; height:100svh; min-height:600px; }
  .ges-canvas, .ges-scrim, .ges-beats, .ges-cue, .ges-preloader{ display:none; }
  .ges-editorial{ opacity:1 !important; transform:none !important; pointer-events:auto; }
  .ges-editorial .ch{ opacity:1 !important; transform:none !important; transition:none; }
  .ges-editorial .hero-sub,
  .ges-editorial .hero-cta,
  .ges-stats,
  .ges-editorial .hero-side{ opacity:1 !important; transform:none !important; transition:none; }
  .scroll-cue, .ges-cue{ opacity:1 !important; }
  .scroll-cue .bar::after, .ges-cue .bar::after{ animation:none; top:0; height:100%; opacity:.5; }
}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{ padding:clamp(64px,10vh,120px) 0 clamp(48px,6vh,84px); }
.statement .big{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(30px,5.4vw,68px); line-height:1.16; letter-spacing:-.01em;
  max-width:20ch; text-wrap:balance;
}
.statement .big em{ font-style:italic; color:var(--accent-d); }
.reveal-line{ display:block; overflow:hidden; }
.reveal-line > span{
  display:block; transform:translateY(110%);
  transition:transform .9s var(--ease-io);
}
.in .reveal-line > span{ transform:translateY(0); }
.in .reveal-line:nth-child(2) > span{ transition-delay:.08s; }
.in .reveal-line:nth-child(3) > span{ transition-delay:.16s; }
.in .reveal-line:nth-child(4) > span{ transition-delay:.24s; }
.in .reveal-line:nth-child(5) > span{ transition-delay:.32s; }

/* ============================================================
   KENNZAHLEN
   ============================================================ */
.stats{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(40px,6vh,72px) 0;
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.stat .num{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(46px,6vw,92px); line-height:1; letter-spacing:-.02em;
}
.stat .num .u{ font-size:.42em; color:var(--accent-d); vertical-align:.5em; margin-left:.1em; }
.stat .lab{
  margin-top:14px; font-family:var(--sans); font-size:16px;
  letter-spacing:.04em; color:var(--ink-3); max-width:22ch;
}

/* ============================================================
   ABSCHNITTS-GERÜST
   ============================================================ */
.block{ padding:clamp(54px,8vh,100px) 0; }
.block--alt{ background:var(--paper-warm); }
.block--ink{ background:var(--brand); color:var(--paper-warm); }
.block--ink .kicker{ color:#d8b58f; }
.block--ink .section-lead{ color:#e7ddcd; }
.block--ink .mono{ color:rgba(247,244,238,.72); }

.split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,96px);
  align-items:center;
}
.split--text-right{ grid-template-columns:.95fr 1.05fr; }

/* ---------- LAGE ---------- */
.grätzl-list{ margin:30px 0 0; padding:0; list-style:none; }
.grätzl-list li{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:14px;
  padding:19px 0; border-top:1px solid var(--line);
  font-size:17px;
}
.grätzl-list li:last-child{ border-bottom:1px solid var(--line); }
.grätzl-list .place{ font-weight:500; letter-spacing:.01em; }
.grätzl-list .place small{ display:block; font-weight:400; color:var(--ink-3); font-size:14.5px; letter-spacing:.02em; margin-top:3px; }
.grätzl-list .time{ font-family:var(--mono); font-size:15px; color:var(--accent-d); white-space:nowrap; }
.grätzl-list .time::before{ content:"↗ "; color:var(--ink-4); }

.media-frame{
  position:relative; border-radius:4px; overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.media-frame image-slot{ width:100%; height:100%; will-change:transform; }
.media-tag{
  position:absolute; left:14px; bottom:14px; z-index:4;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--paper-warm); background:rgba(var(--brand-rgb),.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:6px 11px; border-radius:3px;
}

/* ============================================================
   WOHNUNGEN
   ============================================================ */
.units-head{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end;
  margin-bottom:36px;
}
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:.03em;
  padding:9px 17px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink-2);
  transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--ink-3); }
.chip.active{ background:var(--brand); color:var(--paper-warm); border-color:var(--brand); }

.units-meta{ font-family:var(--mono); font-size:15px; color:var(--ink-3); }
.units-meta b{ color:var(--ink); font-weight:600; }

.unit-table{ border-top:1px solid var(--brand); }
.unit-row{
  display:grid;
  grid-template-columns:0.7fr 1fr 0.8fr 1fr 1.2fr 1fr 0.5fr;
  gap:18px; align-items:center;
  padding:22px 8px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .3s var(--ease), padding .35s var(--ease);
  position:relative;
}
.unit-row:hover{ background:var(--paper-warm); padding-left:16px; }
.unit-row .col-head{ }
.col-l{ font-family:var(--mono); font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px; }
.col-v{ font-size:17px; font-weight:500; letter-spacing:.01em; }
.col-v small{ color:var(--ink-3); font-weight:400; }
.unit-top{ font-family:var(--serif); font-size:30px; font-weight:400; line-height:1; }
.unit-price{ font-family:var(--serif); font-size:25px; font-weight:500; letter-spacing:-.01em; }
.unit-row.head{
  cursor:default; padding-top:0; padding-bottom:12px; border-bottom-color:transparent;
}
.unit-row.head:hover{ background:none; padding-left:8px; }
.unit-row.head .col-l{ margin-bottom:0; }

.status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.04em;
}
.status .led{ width:7px;height:7px;border-radius:50%; background:var(--olive); box-shadow:0 0 0 3px color-mix(in oklch, var(--olive) 22%, transparent); }
.status.reserved{ color:var(--accent-d); }
.status.reserved .led{ background:var(--accent); box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }
.tag-maison{
  display:inline-block; margin-left:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-d);
  border:1px solid color-mix(in oklch, var(--accent) 40%, var(--line));
  padding:2px 7px; border-radius:3px; vertical-align:middle;
}
.chev{ justify-self:end; color:var(--ink-4); transition:transform .35s var(--ease); }
.unit-row.open .chev{ transform:rotate(90deg); color:var(--accent-d); }

.unit-detail{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px);
  align-items:start;
  max-height:0; overflow:hidden;
  border-bottom:1px solid var(--line);
  transition:max-height .55s var(--ease), opacity .4s var(--ease), padding .4s var(--ease);
  opacity:0; padding:0 8px;
}
.unit-detail.open{ max-height:1100px; opacity:1; padding:34px 8px 44px; }
.unit-detail .plan{ height:300px; }
.detail-specs{ list-style:none; margin:0; padding:0; }
.detail-specs li{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:16.5px; }
.detail-specs .k{ color:var(--ink-3); }
.detail-specs .v{ font-weight:500; }
.detail-cta{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.sold-note{ margin-top:26px; font-family:var(--mono); font-size:13px; color:var(--ink-3); }

/* ============================================================
   AUSSTATTUNG (sticky)
   ============================================================ */
.spec-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,90px); align-items:center; }
.spec-sticky{ position:static; }
.spec-list{ display:grid; gap:2px; }
.spec-item{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
  padding:30px 0; border-top:1px solid rgba(247,244,238,.16);
}
.block--ink .spec-item{ border-top-color:rgba(247,244,238,.16); }
.spec-num{ font-family:var(--mono); font-size:14px; color:#caa97f; padding-top:6px; }
.spec-item h3{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,38px); margin:0 0 8px; line-height:1.05; }
.spec-item p{ margin:0; color:#d8cfbf; max-width:48ch; font-size:17.5px; line-height:1.5; }
.swatches{ display:flex; flex-wrap:wrap; gap:24px; margin-top:22px; margin-bottom:32px; }
.swatch{ width:52px; height:52px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(247,244,238,.18); position:relative; }
.swatch span{ position:absolute; inset:auto -8px -30px -8px; font-family:var(--mono); font-size:10.5px; line-height:1.2; white-space:normal; text-align:center; color:rgba(247,244,238,.62); letter-spacing:.02em; }

/* ============================================================
   GALERIE (pinned horizontal)
   ============================================================ */
.gallery-pin{ position:relative; height:300vh; }
.gallery-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.gallery-rail{
  display:flex; gap:26px; padding-inline:var(--gut);
  will-change:transform;
}
.gallery-card{ position:relative; flex:0 0 auto; width:min(72vw,860px); height:64svh; overflow:hidden; border-radius:4px; }
.gallery-card image-slot{ will-change:transform; }
.gallery-card.tall{ width:min(40vw,460px); }
.gallery-card image-slot{ width:100%; height:100%; }
.gallery-cap{
  position:absolute; left:0; bottom:-30px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink-3);
}
.gallery-cap b{ color:var(--ink); font-weight:600; }
.gallery-intro{ padding:0 var(--gut) 36px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }

/* ============================================================
   PLANUNG / ARCHITEKTUR
   ============================================================ */
.maker-quote{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(26px,3.6vw,46px); line-height:1.24; letter-spacing:-.005em;
  max-width:24ch; text-wrap:balance;
}
.maker-quote em{ font-style:italic; color:var(--accent-d); }
.maker-by{ margin-top:26px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--ink-3); }
.maker-by b{ color:var(--ink); }

/* ============================================================
   WEITERE PROJEKTE
   ============================================================ */
.future-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.future-card{
  position:relative; border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:var(--paper-warm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.future-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.future-media{ position:relative; height:260px; filter:saturate(.7); }
.future-media image-slot{ width:100%; height:100%; }
.future-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--brand-rgb),.6), transparent 60%); }
.future-soon{
  position:absolute; top:14px; left:14px; z-index:4;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(247,244,238,.92); color:var(--ink); padding:6px 11px; border-radius:3px;
}
.future-body{ padding:22px 22px 26px; }
.future-body .dist{ font-family:var(--mono); font-size:13px; color:var(--accent-d); letter-spacing:.04em; }
.future-body h3{ font-family:var(--serif); font-weight:400; font-size:30px; margin:8px 0 6px; line-height:1; }
.future-body p{ margin:0; font-size:16.5px; color:var(--ink-3); }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--mono); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:10px 0; transition:border-color .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.field textarea{ resize:vertical; min-height:64px; }
.field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-foot{ display:flex; align-items:center; gap:18px; margin-top:14px; flex-wrap:wrap; }
.form-note{ font-size:15px; color:var(--ink-4); max-width:34ch; }
.form-success{ display:none; align-items:center; gap:10px; font-size:14px; color:var(--olive); font-weight:600; }
.form-success.show{ display:flex; }

/* Kontaktformular auf dunklem Grund: helle, klar lesbare Felder */
.block--ink .field label{ color:rgba(247,244,238,.9); }
.block--ink .field input, .block--ink .field select, .block--ink .field textarea{ color:var(--paper-warm); border-bottom-color:rgba(247,244,238,.30); }
.block--ink .field input::placeholder, .block--ink .field textarea::placeholder{ color:rgba(247,244,238,.42); }
.block--ink .field select option{ color:var(--ink); }
.block--ink .field input:focus, .block--ink .field select:focus, .block--ink .field textarea:focus{ border-bottom-color:var(--accent); }
.block--ink .form-note{ color:rgba(247,244,238,.7); }

.agent-card{ background:var(--paper-warm); border:1px solid var(--line); border-radius:6px; padding:30px; color:var(--ink); }
.agent-top{ display:flex; gap:18px; align-items:center; }
.agent-top image-slot{ width:74px; height:74px; flex:0 0 auto; }
.agent-name{ font-family:var(--serif); font-size:26px; font-weight:500; line-height:1; }
.agent-role{ font-size:16px; color:var(--ink-3); margin-top:6px; }
.agent-lines{ list-style:none; margin:24px 0 0; padding:0; }
.agent-lines li{ display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-top:1px solid var(--line); font-size:16.5px; }
.agent-lines .k{ font-family:var(--mono); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }
.agent-lines a:hover{ color:var(--accent-d); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--brand); color:var(--paper-warm); padding:clamp(60px,9vh,110px) 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:54px; border-bottom:1px solid rgba(247,244,238,.14); }
.footer .brand .mark{ font-size:26px; }
.footer .brand .sub{ opacity:.6; }
.footer-claim{ font-family:var(--serif); font-weight:300; font-size:clamp(24px,3vw,40px); line-height:1.15; max-width:18ch; margin:26px 0 0; color:#f0e7d8; }
.footer-col h3{ font-family:var(--mono); font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; color:#caa97f; margin:0 0 18px; font-weight:400; }
.footer-col a{ display:block; padding:9px 0; font-size:16.5px; color:#d8cfbf; transition:color .3s var(--ease); }
.footer-col a:hover{ color:#fff; }
.footer-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:30px; font-family:var(--mono); font-size:13.5px; letter-spacing:.04em; color:rgba(247,244,238,.5); }

/* ============================================================
   REVEAL UTILITIES
   ============================================================ */
.fx{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-io), transform .7s var(--ease-io); }
.fx.in{ opacity:1; transform:none; }
.fx-d1{ transition-delay:.1s; } .fx-d2{ transition-delay:.2s; }
.fx-d3{ transition-delay:.3s; } .fx-d4{ transition-delay:.4s; }

/* ---- Keyword underline-sweep (Hook-Reel-Stil) ---- */
.kw{
  background-image:linear-gradient(var(--hl), var(--hl));
  background-repeat:no-repeat;
  background-position:0 94%;
  background-size:0% .12em;
  transition:background-size .45s var(--ease);
  padding-bottom:.02em;
}
.in .kw, .statement.in .kw{ background-size:100% .12em; transition-delay:.55s; }

/* ---- Zeilenweiser Stagger für längere Textblöcke ---- */
.lines .ln-mask{ display:block; overflow:hidden; }
.lines .ln-inner{ display:block; transform:translateY(108%); transition:transform .72s var(--ease-io); will-change:transform; }
.lines.in .ln-inner{ transform:none; }

/* ---- Kennzahl-Aufleuchten nach Count-up ---- */
.lit{ animation:numFlash .6s var(--ease) both; }
@keyframes numFlash{ 0%{ color:inherit; } 42%{ color:var(--hl); } 100%{ color:inherit; } }
@media (prefers-reduced-motion: reduce){
  .fx,.reveal-line>span{ opacity:1 !important; transform:none !important; }
  [data-parallax]{ transform:none !important; }
  .kw{ background-size:100% .12em !important; transition:none !important; }
  .lines .ln-inner{ transform:none !important; }
  .lit{ animation:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:40px 28px; }
  .unit-row .hide-md{ display:none; }
}
@media (max-width:860px){
  body{ font-size:18px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .split, .split--text-right, .spec-wrap, .contact-grid, .unit-detail.open{ grid-template-columns:1fr; }
  .spec-sticky{ position:static; }
  .future-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:34px; }
  .hero-side{ display:none; }
  .unit-row .hide-sm{ display:none; }
  .unit-detail .plan{ height:230px; }
  .field.row2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .stats-grid{ grid-template-columns:1fr; }
  .unit-row{ gap:14px; padding:20px 6px; }
  .unit-row .hide-xs{ display:none; }
  .unit-price{ font-size:20px; }
  .gallery-card{ width:84vw; }
  /* Select mit langen Options sprengt sonst das Grid (min-content 407px) */
  .contact-grid > *{ min-width:0; }
  .field select{ width:100%; min-width:0; max-width:100%; }
  .agent-card{ min-width:0; }
  .filter-label{ font-size:13px; }
  .tag-maison{ font-size:12.5px; }
  .swatch span{ font-size:12px; }
}

/* ============================================================
   PRODUKTION — <img> ersetzt <image-slot>, echte Renderings
   ============================================================ */
.media-frame img,
.gallery-card img,
.future-media img,
.agent-foto img{ width:100%; height:100%; object-fit:cover; }
.media-frame img,
.gallery-card img{ will-change:auto; }
.media-frame.plan img{ object-fit:cover; }

/* Agent-Logo statt Foto */
.agent-foto{
  width:74px; height:74px; flex:0 0 auto; border-radius:50%;
  background:var(--brand); display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.agent-foto img{ width:54%; height:54%; object-fit:contain; }

/* Tabelle: Top · Zimmer · Wohnfläche · HWB · Kaufpreis · Chevron */
.unit-row{ grid-template-columns:0.55fr 0.8fr 0.85fr 0.9fr 0.9fr 1fr 0.45fr; }
@media (max-width:1080px){ .unit-row{ grid-template-columns:0.6fr 0.85fr 0.9fr 0.9fr 1fr 0.45fr; } }
@media (max-width:860px){ .unit-row{ grid-template-columns:0.7fr 0.9fr 1fr 0.45fr; } }
@media (max-width:560px){ .unit-row{ grid-template-columns:0.7fr 0.9fr 1fr; } }

/* Symbolbild-Tag im Detail */
.media-frame.plan{ position:relative; }
.media-frame.plan .media-tag{ left:12px; bottom:12px; }

/* Echte Grundrisse: vollständig zeigen statt beschneiden */
.unit-detail .plan{ height:auto; aspect-ratio:auto; }
.media-frame.plan{ background:#fbfaf7; border:1px solid rgba(var(--brand-rgb),.08); }
.media-frame.plan img{ object-fit:contain !important; width:100%; height:auto; display:block; }
.media-frame.plan.plan--wide img{ aspect-ratio:auto; }

/* Pläne: Container auf Mobile genug Höhe (single-column) */
@media (max-width:860px){ .unit-detail.open{ max-height:1800px; } }
.agent-card .agent-name, .agent-card .agent-lines a{ color:var(--ink); }

/* Scarcity: verkaufte/nicht verfügbare Einheiten */
.unit-soldhead{ margin:36px 0 12px; padding-top:28px; border-top:2px solid var(--line); font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.unit-row--sold{ opacity:.55; cursor:default; }
.unit-row--sold:hover{ background:transparent; }
.unit-row--sold .chev{ display:none; }
.status--sold .led{ background:#c0392b !important; box-shadow:none !important; animation:none !important; }
.unit-price--sold{ color:var(--ink-3); font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }

/* Chrome-Autofill auf dunklem Kontaktformular: weissen Hintergrund verhindern */
#anfrage-form input:-webkit-autofill,
#anfrage-form input:-webkit-autofill:hover,
#anfrage-form input:-webkit-autofill:focus,
#anfrage-form select:-webkit-autofill,
#anfrage-form textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--paper-warm);
  -webkit-box-shadow: 0 0 0 1000px #010230 inset;
  box-shadow: 0 0 0 1000px #010230 inset;
  caret-color: var(--paper-warm);
  transition: background-color 9999s ease-in-out 0s;
}

/* Footer-Logo (Emblem ueber Wortmarke) */
.footer-logo{ width:clamp(112px,26vw,168px); height:clamp(112px,26vw,168px); object-fit:contain; display:block; margin:0 auto 18px; }
.footer-top > div:first-child{ width:fit-content; max-width:100%; }


/* === LP-Audit Cluster 1/2 (2026-06-08) === */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:10000; background:var(--brand); color:var(--paper-warm); padding:12px 20px; border-radius:0 0 8px 0; font-family:var(--sans); font-size:14px; text-decoration:none; }
.skip-link:focus{ left:0; }
:where(a,button,.btn,.unit-row,input,select,textarea,.chip):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.stat .num,.unit-price,.unit-cell--price,.spec .v{ font-feature-settings:"lnum" 1,"tnum" 1; font-variant-numeric:lining-nums tabular-nums; }
.unit-detail{ contain:layout; }
.agent-foto--photo img{ width:100%; height:100%; object-fit:cover; }

/* DSGVO-Consent im Formular */
.form-consent{ display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; font-family:var(--sans); font-size:13.5px; line-height:1.5; color:rgba(247,244,238,.82); cursor:pointer; }
.form-consent input{ width:18px; height:18px; margin-top:1px; accent-color:var(--accent); flex:0 0 auto; }
.form-consent a{ color:var(--accent); text-decoration:underline; }

/* Sticky-CTA */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:900; display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; padding:12px 20px; background:rgba(1,2,48,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid rgba(199,168,107,.35); transform:translateY(110%); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.sticky-cta.is-visible{ transform:none; }
.sticky-cta__txt{ font-family:var(--sans); font-size:14px; color:var(--paper-warm); letter-spacing:.01em; }
.sticky-cta__txt b{ color:var(--accent); }
.sticky-cta .btn{ padding:10px 22px; }
@media (max-width:600px){ .sticky-cta{ gap:10px; padding:10px 14px; } .sticky-cta__txt{ font-size:13px; } }

/* Cookie-Consent-Banner (vires.at-Mechanik, LP-Design) */
.cc-banner{ position:fixed; left:0; right:0; bottom:0; z-index:9999; background:var(--brand); color:var(--paper-warm); transform:translateY(110%); transition:transform .4s ease; box-shadow:0 -10px 50px rgba(0,0,0,.35); font-family:var(--sans); }
.cc-banner.is-visible{ transform:none; }
.cc-banner__inner{ max-width:1180px; margin:0 auto; padding:22px clamp(18px,4vw,56px); display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cc-banner__text{ font-size:13.5px; line-height:1.55; max-width:64ch; color:rgba(247,244,238,.82); }
.cc-banner__text strong{ display:block; color:var(--paper-warm); font-size:15px; margin-bottom:4px; }
.cc-banner__text a{ color:var(--accent); text-decoration:underline; }
.cc-banner__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cc-btn{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.02em; padding:11px 20px; border-radius:40px; border:1px solid rgba(247,244,238,.32); background:transparent; color:var(--paper-warm); cursor:pointer; transition:all .25s ease; }
.cc-btn:hover{ border-color:var(--paper-warm); }
.cc-btn--accept{ background:var(--accent); border-color:var(--accent); color:var(--brand); font-weight:600; }
.cc-btn--accept:hover{ filter:brightness(1.07); }
.cc-btn--small{ padding:8px 15px; font-size:12.5px; }
.cc-settings[hidden]{ display:none; }
.cc-settings{ flex-basis:100%; margin-top:14px; border-top:1px solid rgba(247,244,238,.16); padding-top:16px; display:grid; gap:14px; }
.cc-category__label{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--paper-warm); cursor:pointer; }
.cc-category p{ font-size:12.5px; color:rgba(247,244,238,.58); margin:4px 0 0 26px; }
.cc-category__badge{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(247,244,238,.5); }
.cc-settings__actions{ margin-top:2px; }
.cc-blocked-overlay{ position:absolute; inset:0; background:var(--brand); display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--paper-warm); z-index:5; }
.cc-blocked-content{ max-width:42ch; font-size:13.5px; line-height:1.6; }
[data-cc-reopen]{ color:inherit; text-decoration:underline; cursor:pointer; }
@media (max-width:680px){ .cc-banner__actions{ width:100%; } .cc-btn{ flex:1; text-align:center; } }


/* === LP-Audit Cluster 3 (2026-06-08) === */
@media (max-width:860px){ .spec-item h3{ font-size:22px; } }
.form-msg{ color:#ff8a80; }


/* === LP-Audit Cluster 4 (2026-06-08) === */
html{ scroll-padding-top:76px; }
.nav-overlay{ position:fixed; inset:0; z-index:950; background:rgba(1,2,48,.985); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; }
.nav-overlay[hidden]{ display:none; }
.nav-overlay__links{ display:flex; flex-direction:column; gap:24px; text-align:center; padding:24px; }
.nav-overlay__links a{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,7vw,34px); line-height:1.1; color:var(--paper-warm); text-decoration:none; }
.nav-overlay__links a.btn{ font-family:var(--sans); font-size:15px; margin-top:16px; align-self:center; }
.nav-overlay__close{ position:absolute; top:20px; right:22px; font-size:26px; line-height:1; background:none; border:0; color:var(--paper-warm); cursor:pointer; padding:8px; }
.nav-toggle{ position:relative; z-index:960; }


/* === Finanzierungsrechner (Profin/Infina) 2026-06-08 === */
#finanzierung .fin-lead{ max-width:62ch; margin:20px 0 34px; font-family:var(--sans); font-size:18px; line-height:1.6; color:#4a4a55; }
.fin-widget{ position:relative; max-width:880px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 20px 60px rgba(1,2,48,.08); }
.fin-widget iframe{ display:block; width:100%; min-height:180px; border:0; border-radius:11px; }
.fin-widget .cc-blocked-overlay{ border-radius:11px; }
.fin-cta{ text-align:center; margin:30px 0 8px; }
.fin-disclaimer{ text-align:center; font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--ink-3); margin:14px auto 0; max-width:60ch; }
@media (max-width:600px){ #finanzierung .fin-lead{ font-size:16.5px; } .fin-widget{ padding:6px; } }


/* === #07 WhatsApp/Call · #05 Filter · #12 FAQ/Lightbox (2026-06-08) === */
.sticky-cta__actions{ display:flex; gap:8px; align-items:center; }
.btn--wa{ background:transparent; border:1px solid rgba(247,244,238,.45); color:var(--paper-warm); display:inline-flex; align-items:center; gap:7px; font-weight:500; }
.btn--wa:hover{ border-color:var(--accent); color:var(--accent); }
.btn--call{ background:transparent; border:1px solid rgba(247,244,238,.45); color:var(--paper-warm); }
.btn--call:hover{ border-color:var(--paper-warm); }
.agent-contact{ margin-top:8px; font-family:var(--sans); font-size:14px; }
.agent-contact a{ color:var(--accent); text-decoration:none; }
.agent-contact a:hover{ text-decoration:underline; }
@media (max-width:600px){ .sticky-cta__actions .btn--call{ display:none; } }

.filters{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.filter-group{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; }
.filter-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:6px; }
@media (max-width:860px){ .filters{ align-items:flex-start; } .filter-group{ justify-content:flex-start; } }

.faq-list{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; padding:20px 38px 20px 0; position:relative; font-family:var(--serif); font-size:clamp(19px,2.4vw,24px); line-height:1.3; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--accent); transition:transform .2s ease; }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-a{ padding:0 0 22px; font-family:var(--sans); font-size:16.5px; line-height:1.6; color:#4a4a55; max-width:68ch; }
.faq-a a{ color:var(--accent); }

.lightbox{ position:fixed; inset:0; z-index:10000; background:rgba(3,4,20,.93); display:flex; align-items:center; justify-content:center; padding:4vw; }
.lightbox[hidden]{ display:none; }
.lightbox__img{ max-width:94vw; max-height:90vh; border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.lightbox__close{ position:absolute; top:18px; right:22px; background:none; border:0; color:#fff; font-size:30px; line-height:1; cursor:pointer; padding:8px; }
.gallery-card img, .media-frame.plan img{ cursor:zoom-in; }


/* === Kreditrechner-Höhe + Detail-Accordion + Dropdown-Fix + Nav-Logo (2026-06-08) === */
.brand-logo{ display:block; width:56px; height:56px; transition:filter .3s ease; }
.nav.solid .brand-logo{ filter:brightness(0); }
.full-calc-wrap{ max-width:880px; margin:14px auto 0; }
.full-calc-wrap[hidden]{ display:none; }
.full-calc-wrap iframe{ display:block; width:100%; min-height:200px; border:0; border-radius:11px; background:#fff; box-shadow:0 14px 44px rgba(1,2,48,.07); }
#full-calc-toggle[aria-expanded="true"]{ opacity:.92; }
.block--ink select{ color-scheme:light; }
.block--ink select option{ background:#ffffff; color:#1a1916; }


/* WebP <picture>-Wrapper layout-neutral (2026-06-08) */
picture{ display:contents; }


/* === Lage-Karte + Erstinformation + Galerie-WC-Scope (2026-06-08) === */
.lage-map-wrap{ margin-top:clamp(36px,5vh,64px); }
.lage-map{ width:100%; height:clamp(320px,44vh,440px); border-radius:6px; overflow:hidden; border:1px solid var(--line); background:#e8e9ec; }
.lage-map__attr{ margin-top:8px; font-family:var(--sans); font-size:11.5px; color:var(--ink-3); }
.lage-map__attr a{ color:var(--ink-3); text-decoration:underline; }
.leaflet-container{ font-family:var(--sans); }
.gallery-pin.in-view .gallery-card img{ will-change:transform; }

.erstinfo{ margin-top:20px; max-width:920px; }
.erstinfo summary{ cursor:pointer; font-family:var(--sans); font-size:14px; letter-spacing:.02em; color:rgba(247,244,238,.78); list-style:none; padding:12px 0; text-decoration:underline; text-underline-offset:3px; }
.erstinfo summary::-webkit-details-marker{ display:none; }
.erstinfo summary::before{ content:"+ "; color:var(--accent); }
.erstinfo[open] summary::before{ content:"\2013 "; }
.erstinfo__body{ margin-top:14px; }
.erstinfo__body p{ font-family:var(--sans); font-size:12.5px; line-height:1.65; color:rgba(247,244,238,.6); margin:0 0 10px; max-width:84ch; }
.erstinfo__body b{ color:rgba(247,244,238,.82); }
.erstinfo__body a{ color:var(--accent); }
.erstinfo__stand{ opacity:.72; }


/* === Badge + globale h3-Basis (2026-06-08) === */
.badge-pf{ display:inline-block; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--brand); background:var(--accent); padding:7px 14px; border-radius:40px; margin-top:16px; }
h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.6vw,30px); line-height:1.15; margin:0 0 12px; }


/* === MS-Bookings CTA (2026-06-08) === */
.booking-cta{ margin-top:22px; padding:20px; border:1px solid rgba(247,244,238,.18); border-radius:10px; }
.booking-cta p{ font-family:var(--sans); font-size:14px; line-height:1.55; color:rgba(247,244,238,.72); margin:0 0 14px; }


/* === Mobile-Galerie: 300vh-Scroll-Pin aus, nativer horizontaler Swipe (2026-06-11)
   Muss NACH den Basis-Gallery-Regeln stehen (gleiche Spezifität, Quelltext-Reihenfolge entscheidet). === */
@media (max-width:760px){
  .gallery-pin{ height:auto; }
  .gallery-sticky{ position:static; height:auto; overflow:visible; }
  .gallery-rail{ transform:none !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:44px; }
  .gallery-card{ scroll-snap-align:center; }
}

/* === Statement-Einzug: .statement-Padding-Shorthand (Z.~489) setzt links/rechts 0 und
   ueberschreibt .wrap's padding-inline. Ab 1512px traegt das Auto-Margin (>=96px) des
   zentrierten .wrap — darunter fehlt der Einzug komplett (mobil klebte der Text am Rand). === */
@media (max-width:1512px){
  .statement{ padding-inline:var(--gut); }
}