@import url('schriften.css');

/* ============================================================
   TOKENS. Ein Akzent, ein Radius-System, eine Helligkeit.
   Blau stammt aus dem Logo der Firma: #046BD2 und #57CDFF.
   ============================================================ */
:root{
  --tief:#042C52;
  --tiefer:#02203D;
  --blau:#046BD2;
  --blau-hell:#2b8ae8;
  --licht:#57CDFF;
  --licht-weich:#e4f4fe;

  --ink:#0d1b28;
  --ink-70:#3f5163;
  --ink-50:#6a7c8e;
  --linie:#dfe7ef;
  --weiss:#fff;

  --signal:#a8530a;
  --signal-bg:#fdf5ec;

  --r-gross:20px;
  --r-mittel:14px;
  --r-klein:10px;

  --breite:1220px;
  --display:"Outfit",system-ui,sans-serif;
  --text:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.1;letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,5vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.3vw,2.8rem);font-weight:600}
h3{font-size:1.24rem;font-weight:600;letter-spacing:-.012em}
/* Seiten ohne grossen Aufmacher tragen ihre Hauptueberschrift als h1,
   sollen aber aussehen wie eine Abschnittsueberschrift. */
h1.titel{font-size:clamp(1.8rem,3.3vw,2.8rem);font-weight:600}
p{margin:0 0 1rem}
img{max-width:100%;display:block}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 24px}
.lauf{max-width:60ch}

/* ============================================================
   FLAECHEN. Nie einfarbig. Verlauf, Raster, Licht, Kante.
   ============================================================ */
.tief{
  position:relative;color:#fff;
  background-color:var(--tief);
  background-image:
    radial-gradient(72% 150% at 80% -18%,
      rgba(87,205,255,.34) 0%, rgba(87,205,255,.10) 44%, transparent 74%),
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(168deg,#063B6B 0%,#042C52 52%,#02203D 100%);
  background-size:auto,48px 48px,48px 48px,auto;
}
/* Cursorlicht: ein zusaetzlicher, sehr leiser Schein, der der Maus folgt.
   Nur am Zeigegeraet, nie auf Touch, nie bei reduzierter Bewegung. */
.tief{position:relative}
@media (hover:hover) and (pointer:fine){
  .tief::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(38% 52% at var(--mx,50%) var(--my,34%),
      rgba(87,205,255,.16) 0%, rgba(87,205,255,.05) 46%, transparent 72%);
    opacity:0;transition:opacity .45s ease}
  .tief:hover::before{opacity:1}
}
.tief > *{position:relative;z-index:1}
.tief.kante-unten{border-bottom:3px solid var(--licht)}
.tief.kante-oben{border-top:3px solid var(--licht)}
.tief h2,.tief h3{color:#fff}
.tief p{color:#bfd8ee}

.hell{
  background-color:#fff;
  background-image:
    radial-gradient(60% 120% at 14% 108%,
      rgba(87,205,255,.22) 0%, rgba(87,205,255,.06) 42%, transparent 72%),
    linear-gradient(to right, rgba(4,44,82,.055) 1px, transparent 1px),
    linear-gradient(rgba(4,44,82,.055) 1px, transparent 1px),
    linear-gradient(176deg,#fff 0%,#f4f8fc 72%,#e9f1f8 100%);
  background-size:auto,48px 48px,48px 48px,auto;
}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;gap:26px;height:74px}
.marke{display:flex;align-items:center;text-decoration:none;flex:none}
.marke img{height:34px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a,.nav button{font:inherit;text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-70);
  background:none;border:0;cursor:pointer;padding:9px 11px;border-radius:var(--r-klein);
  transition:color .18s,background .18s;white-space:nowrap}
.nav a:hover,.nav button:hover{color:var(--blau);background:var(--licht-weich)}
.nav a[aria-current="page"],.nav button[aria-current="page"]{color:var(--blau);background:var(--licht-weich);font-weight:600}
.kopf .knopf{margin-left:10px}
.menue-schalter{display:none}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-klein);border:1px solid transparent;
  font:inherit;font-weight:600;font-size:.97rem;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:transform .12s,background .18s,box-shadow .18s,border-color .18s}
.knopf:active{transform:translateY(1px)}
.knopf-voll{background:var(--blau);color:#fff;box-shadow:0 10px 26px rgba(4,107,210,.26)}
.knopf-voll:hover{background:#035bb3}
.knopf-licht{background:var(--licht);color:var(--tiefer);box-shadow:0 10px 26px rgba(87,205,255,.3)}
.knopf-licht:hover{background:#7ad8ff}
.knopf-linie{border-color:var(--linie);color:var(--ink);background:#fff}
.knopf-linie:hover{border-color:var(--blau-hell);color:var(--blau)}
.knopf-klar{border-color:rgba(255,255,255,.34);color:#fff;background:var(--tief)}
.knopf-klar:hover{border-color:#fff;background:#063B6B}
.knopf-signal{background:var(--signal);color:#fff}
.knopf-signal:hover{background:#8a4208}

/* ---------- Abschnitte ---------- */
section{padding:88px 0}
.eyebrow{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blau);margin-bottom:16px}
.tief .eyebrow{color:var(--licht)}

/* ---------- Hero ---------- */
.hero{padding:0;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch;min-height:clamp(480px,64vh,640px)}
.hero-text{padding:76px 56px 76px 0;display:flex;flex-direction:column;justify-content:center}
.hero h1{margin-bottom:20px}
.hero .lauf{font-size:1.12rem;margin-bottom:28px}
.hero-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.hero-foto{position:relative;margin-right:calc((100vw - var(--breite))/-2 - 24px)}
.hero-foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--tief) 0%,rgba(4,44,82,.35) 26%,transparent 60%)}

/* ---------- Faktenband ---------- */
.band{border-bottom:1px solid var(--linie);background:#fff;padding:26px 0}
.band-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.band-punkt b{display:block;font-family:var(--display);font-size:2rem;font-weight:700;
  line-height:1;letter-spacing:-.03em}
.band-punkt b sup{color:var(--blau);font-size:.52em;vertical-align:super;margin-left:1px}
.band-punkt span{font-size:.93rem;color:var(--ink-50);display:block;margin-top:7px}

/* ---------- Leistungen: eine grosse, drei schmale ---------- */
.leist{display:grid;grid-template-columns:1.32fr 1fr 1fr;grid-auto-rows:minmax(0,auto);gap:18px;margin-top:36px}
.leist .gross{grid-row:span 2;grid-column:1;padding:0;overflow:hidden;display:flex;flex-direction:column}
.leist .gross .bild{aspect-ratio:16/11;overflow:hidden}
.leist .gross .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.leist .gross:hover .bild img{transform:scale(1.03)}
.leist .gross .inhalt{padding:26px 28px 28px}
.karte{border:1px solid var(--linie);border-radius:var(--r-gross);background:#fff;
  padding:26px 28px;text-align:left;font:inherit;cursor:pointer;color:inherit;
  display:flex;flex-direction:column;gap:9px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.karte:hover{border-color:var(--blau-hell);transform:translateY(-2px);box-shadow:0 18px 40px rgba(13,27,40,.09)}
@media (hover:hover) and (pointer:fine){
  .karte,.ref-karte{transform-style:preserve-3d;will-change:transform}
  .karte.kippt,.ref-karte.kippt{transition:transform .06s linear,box-shadow .18s,border-color .18s}
  .karte:not(.kippt),.ref-karte:not(.kippt){transition:transform .2s ease-out,box-shadow .2s,border-color .18s}
}
.karte p{color:var(--ink-70);font-size:.96rem;margin:0}
.karte .mehr{margin-top:auto;padding-top:14px;color:var(--blau);font-weight:600;font-size:.92rem}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px}
.schritt{padding:24px 26px 6px 0;border-top:2px solid rgba(255,255,255,.16)}
.schritt:first-child{border-color:var(--licht)}
.schritt .nr{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--licht);margin-bottom:12px}
.schritt h3{margin-bottom:8px}
.schritt p{font-size:.95rem;margin:0}
.hell .schritt{border-top-color:var(--linie)}
.hell .schritt:first-child{border-color:var(--blau)}
.hell .schritt .nr{color:var(--blau)}
.hell .schritt p{color:var(--ink-70)}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px}
.zahl b{display:block;font-family:var(--display);font-size:clamp(2.8rem,6vw,4.2rem);
  font-weight:700;color:#fff;line-height:.95;letter-spacing:-.04em}
.zahl b sup{color:var(--licht);font-size:.42em;vertical-align:super;margin-left:2px}
.zahl p{margin:12px 0 0;font-size:.98rem}

/* ---------- Referenzen ---------- */
.ref{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
.ref-karte{border-radius:var(--r-gross);overflow:hidden;border:1px solid var(--linie);
  background:#fff;transition:box-shadow .2s,transform .2s}
.ref-karte:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(13,27,40,.1)}
.ref-karte .bild{aspect-ratio:16/10;overflow:hidden}
.ref-karte img{width:100%;height:100%;object-fit:cover}
.ref-text{padding:22px 26px 24px}
.ref-text h3{margin-bottom:6px}
.ref-text p{color:var(--ink-70);font-size:.95rem;margin:0}
.ref-daten{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.plakette{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--licht-weich);color:var(--blau);padding:5px 10px;border-radius:6px}

/* ---------- Mieterband ---------- */
.mieter{background:var(--signal-bg);border-top:1px solid #f1ddc4;border-bottom:1px solid #f1ddc4}
.mieter-in{display:flex;gap:40px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:38px 24px}
.mieter h2{font-size:1.65rem}
.mieter p{color:#77480f;margin:8px 0 0;max-width:52ch}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px}
.stimme{border-left:3px solid var(--licht);padding:2px 0 2px 24px}
.stimme p{font-family:var(--display);font-size:1.22rem;font-weight:500;line-height:1.4;
  letter-spacing:-.015em;margin-bottom:14px}
.stimme cite{font-style:normal;font-size:.9rem;color:var(--ink-50)}
.stimme cite b{display:block;color:var(--ink);font-weight:600}
.tief .stimme cite{color:#9dbcda}
.tief .stimme cite b{color:#fff}

/* ---------- FAQ ---------- */
.faq{margin-top:30px;max-width:840px}
.faq details{border-bottom:1px solid var(--linie);padding:20px 0}
.faq summary{font-family:var(--display);font-weight:600;font-size:1.08rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blau);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:14px 0 0;color:var(--ink-70);max-width:62ch}

/* ---------- Formular ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld.weit{grid-column:1/-1}
.feld label{font-size:.9rem;font-weight:600}
.feld input,.feld select,.feld textarea{font:inherit;padding:13px 15px;border:1px solid #c5d3e0;
  border-radius:var(--r-klein);background:#fff;color:var(--ink)}
.feld input::placeholder,.feld textarea::placeholder{color:#7b8b9c}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:3px solid var(--licht);
  outline-offset:1px;border-color:var(--blau)}
.feld small{color:var(--ink-50);font-size:.84rem}
.hinweis{grid-column:1/-1;font-size:.88rem;color:var(--ink-50)}

/* ---------- Seitenspalte ---------- */
.zwei{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;margin-top:32px}
.block{border:1px solid var(--linie);border-radius:var(--r-gross);padding:26px 28px;background:#fff}
.block + .block{margin-top:18px}
.block h3{margin-bottom:12px}
.zeile{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--linie);font-size:.96rem}
.zeile:last-child{border-bottom:0}
.zeile span{color:var(--ink-50)}

/* ---------- News ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.beitrag{border-radius:var(--r-gross);overflow:hidden;border:1px solid var(--linie);
  background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.beitrag:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(13,27,40,.09)}
.beitrag .bild{aspect-ratio:16/10;overflow:hidden}
.beitrag img{width:100%;height:100%;object-fit:cover}
.beitrag-text{padding:20px 24px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.beitrag time{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;color:var(--ink-50)}
.beitrag h3{font-size:1.06rem}
.beitrag .mehr{margin-top:auto;color:var(--blau);font-weight:600;font-size:.92rem}

/* ---------- Rechtstext ---------- */
.rechtstext{max-width:72ch}
.rechtstext h2{margin:36px 0 12px;font-size:1.42rem}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p{color:var(--ink-70)}

/* ---------- Abschlussband ---------- */
.schluss-in{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.schluss-in h2{max-width:19ch}
.schluss-in p{margin:12px 0 0;max-width:44ch}

/* ---------- Fuss ---------- */
.fuss{background:var(--tiefer);color:#a9c2d8;padding:58px 0 26px;font-size:.94rem}
.fuss-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.fuss img{height:30px;margin-bottom:16px}
.fuss h4{font-family:var(--display);color:#fff;font-size:.95rem;margin-bottom:13px}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.fuss a,.fuss button{background:none;border:0;color:#a9c2d8;font:inherit;cursor:pointer;padding:0;text-align:left;text-decoration:none}
.fuss a:hover,.fuss button:hover{color:#fff}
.fuss-unten{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#7793ad;font-size:.87rem}

/* ---------- Randnotiz fuer Unbelegtes ---------- */
.notiz{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:#9a6b1a;
  border-left:2px solid #e0b558;padding-left:10px;margin:14px 0 0;max-width:60ch;line-height:1.5}
.tief .notiz{color:#e0c48a;border-color:#b98f36}


/* ============================================================
   RUNDGANG. Erste Flaeche der Seite. Scroll-gekoppelte Kamerafahrt
   von der Strasse in die Wohnung, vier Standbilder ineinander
   geblendet. Gesteuert ueber eine Scroll-Timeline, ohne Listener.
   Die Ueberblendung nutzt eine kurze Unschaerfe: sie kaschiert den
   Sprung zwischen zwei Standpunkten und laesst die Fahrt fliessen.
   ============================================================ */
.fahrt{position:relative;height:380vh;background:var(--tiefer);
  view-timeline-name:--fahrt;view-timeline-axis:block;padding:0;
  border-bottom:3px solid var(--licht)}
.fahrt-buehne{position:sticky;top:0;height:100dvh;overflow:hidden;display:grid;place-items:center}
.s1{opacity:1}
.szene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  will-change:transform,opacity,filter;transform-origin:50% 48%}
/* Feines Korn ueber der Fahrt. Nimmt den Bildern das Glatte und bindet die
   vier Aufnahmen zu einer Sequenz zusammen. */
.korn{position:absolute;inset:-8%;z-index:1;pointer-events:none;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
.fahrt-buehne::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(2,32,61,.62) 0%,rgba(2,32,61,.42) 34%,
      rgba(2,32,61,.16) 62%,rgba(2,32,61,.10) 80%,rgba(2,32,61,.34) 100%),
    linear-gradient(180deg,rgba(2,32,61,.46) 0%,rgba(2,32,61,0) 24%,
      rgba(2,32,61,0) 64%,rgba(2,32,61,.54) 100%)}
@supports (animation-timeline: view()){
  .fahrt-buehne::after{animation:schleier linear both;animation-timeline:--fahrt;
    animation-range:contain 36% contain 62%}
}
@keyframes schleier{from{opacity:1}to{opacity:.34}}

.fahrt-kopf{position:relative;z-index:2;color:#fff;max-width:var(--breite);
  width:100%;padding:0 24px;margin-top:-6vh;isolation:isolate}
/* Der Text bringt seine eigene Abdunklung mit. So bleibt er auf jedem Bild
   lesbar, und das Bild muss dafuer nicht flaechig abgedunkelt werden. */
.fahrt-kopf::before{content:"";position:absolute;z-index:-1;
  inset:-24vh -24vw -26vh -34vw;
  background:radial-gradient(ellipse 66% 78% at 30% 50%,
    rgba(1,20,39,.95) 0%, rgba(1,20,39,.88) 38%, rgba(1,20,39,.58) 64%, transparent 84%)}
.fahrt-kopf h1{text-shadow:0 2px 26px rgba(1,20,39,.55)}
.fahrt-kopf h1{margin-bottom:20px;max-width:17ch}
.fahrt-kopf .lauf{font-size:1.12rem;margin-bottom:28px;color:#dcebf9;max-width:42ch}
.fahrt-kopf .eyebrow{color:var(--licht)}

.punkte{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
.punkt{position:absolute;
  transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px)));
  display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid rgba(4,44,82,.1);
  color:var(--ink);border-radius:999px;padding:14px 22px 14px 16px;font:inherit;font-weight:600;
  font-size:.95rem;cursor:pointer;box-shadow:0 12px 30px rgba(2,32,61,.28);white-space:nowrap;
  transition:transform .18s,box-shadow .18s}
.punkt:hover,.punkt:focus-visible{
  transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1.04);
  box-shadow:0 16px 38px rgba(2,32,61,.36);z-index:4}
.punkt:active{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.99)}
@media (hover:hover) and (pointer:fine){
  .punkt{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .18s}
  .punkt.zieht{transition:transform .12s ease-out,box-shadow .18s}
}
.punkt i{width:11px;height:11px;border-radius:50%;background:var(--licht);flex:none;
  box-shadow:0 0 0 5px rgba(87,205,255,.28)}

/* Vorschau am Menuepunkt */
.vorschau{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,6px);
  width:260px;background:#fff;border-radius:var(--r-mittel);overflow:hidden;
  box-shadow:0 22px 50px rgba(2,32,61,.34);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;text-align:left;white-space:normal;
  display:block;border:1px solid rgba(4,44,82,.08)}
.vorschau.vorschau-oben{top:auto;bottom:calc(100% + 14px);transform:translate(-50%,-6px)}
.vorschau img{width:100%;height:118px;object-fit:cover;display:block}
.vorschau b{display:block;padding:13px 15px 0;font-family:var(--display);font-size:1rem;
  font-weight:600;color:var(--ink)}
.vorschau em{display:block;padding:5px 15px 15px;font-style:normal;font-size:.86rem;
  font-weight:400;line-height:1.5;color:var(--ink-70)}
.punkt:hover .vorschau,.punkt:focus-visible .vorschau{opacity:1;transform:translate(-50%,0)}

@supports (animation-timeline: view()){
  .szene,.punkte{animation:linear both;animation-timeline:--fahrt}
  .s1{animation-name:szene1;animation-range:contain 0% contain 18%}
  .s2{animation-name:szene2;animation-range:contain 8% contain 38%}
  .s3{animation-name:szene3;animation-range:contain 30% contain 58%}
  /* Ende der Bewegung bei 56 Prozent. Die restlichen 44 Prozent der Strecke
     steht das Wohnzimmer still: genug Weg, um in Ruhe einen Punkt zu treffen. */
  .s4{animation-name:szene4;animation-range:contain 50% contain 70%}
  .fahrt-kopf{animation:kopfweg linear both;animation-timeline:--fahrt;
    animation-range:contain 4% contain 22%}
  .punkte{animation-name:punkteein;animation-range:contain 66% contain 76%}
}

/* Jede Szene: kommt unscharf herein, wird scharf, geht unscharf heraus.
   Dadurch verschmelzen zwei Standpunkte statt hart zu schneiden. */
@keyframes szene1{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
  58%{opacity:1;transform:translate3d(0,1.6%,0) scale(1.2);filter:blur(0)}
  84%{opacity:.6;filter:blur(3px)}
  100%{opacity:0;transform:translate3d(0,3.2%,0) scale(1.46);filter:blur(6px)}}
@keyframes szene2{
  0%{opacity:0;transform:translate3d(0,-1.8%,0) scale(.94);filter:blur(6px)}
  22%{opacity:1;filter:blur(0)}
  62%{opacity:1;transform:translate3d(0,1.2%,0) scale(1.16);filter:blur(0)}
  84%{opacity:.6;filter:blur(3px)}
  100%{opacity:0;transform:translate3d(0,3%,0) scale(1.42);filter:blur(6px)}}
@keyframes szene3{
  0%{opacity:0;transform:translate3d(0,-1.8%,0) scale(.94);filter:blur(6px)}
  22%{opacity:1;filter:blur(0)}
  62%{opacity:1;transform:translate3d(0,1%,0) scale(1.14);filter:blur(0)}
  84%{opacity:.6;filter:blur(3px)}
  100%{opacity:0;transform:translate3d(0,2.6%,0) scale(1.4);filter:blur(6px)}}
@keyframes szene4{
  0%{opacity:0;transform:translate3d(0,-2.2%,0) scale(1.26);filter:blur(6px)}
  26%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes kopfweg{
  0%{opacity:1;transform:translateY(0)}
  72%{opacity:1;transform:translateY(-14px)}
  100%{opacity:0;transform:translateY(-40px)}}
@keyframes punkteein{from{opacity:0;pointer-events:none}
  99%{pointer-events:none}
  to{opacity:1;pointer-events:auto}}

/* ============================================================
   AUFMACHER HANDY. Kein Scroll-Effekt, ein Bild, eine Aussage.
   Wird vom Server ausgeliefert (wp_is_mobile), nicht vom Stylesheet
   versteckt: die drei uebrigen Aufnahmen werden gar nicht geladen.
   ============================================================ */
.hero-handy{position:relative;min-height:88dvh;display:flex;align-items:flex-end;
  background:var(--tiefer);overflow:hidden;border-bottom:3px solid var(--licht)}
.hero-handy-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% 50%}
.hero-handy::after{content:"";position:absolute;inset:0;
  background:linear-gradient(185deg,rgba(2,32,61,.58) 0%,rgba(2,32,61,.20) 34%,
    rgba(2,32,61,.78) 74%,rgba(2,32,61,.94) 100%)}
.hero-handy-text{position:relative;z-index:1;color:#fff;padding:0 20px 42px;width:100%}
.hero-handy-text .eyebrow{color:var(--licht)}
.hero-handy-text h1{font-size:clamp(2.1rem,8.4vw,2.9rem);margin-bottom:14px;
  text-shadow:0 2px 26px rgba(1,20,39,.5)}
.hero-handy-text .lauf{font-size:1.04rem;color:#dcebf9;margin-bottom:24px}
.hero-handy .hero-knoepfe{display:grid;gap:10px}
.hero-handy .knopf{width:100%;justify-content:center}

/* Die vier Ziele, die auf dem Rechner im Bild stehen. */
.ziele{display:grid;gap:10px;padding:22px 20px 4px;max-width:var(--breite);margin:0 auto}
.ziele a{display:flex;align-items:center;gap:14px;min-height:76px;
  padding:10px 16px 10px 10px;text-decoration:none;color:var(--ink);
  border:1px solid var(--linie);border-radius:var(--r-mittel);background:#fff}
.ziele img{width:56px;height:56px;border-radius:var(--r-klein);object-fit:cover;flex:none}
.ziele b{display:block;font-family:var(--display);font-size:1.04rem;font-weight:600;
  letter-spacing:-.012em}
.ziele em{display:block;font-style:normal;font-size:.9rem;line-height:1.45;color:var(--ink-70)}
.ziele a:active{background:var(--licht-weich)}

/* Ohne Scroll-Timeline und bei reduzierter Bewegung: ein Bild, Ziele sichtbar. */
@supports not (animation-timeline: view()){
  .fahrt{height:auto}
  .fahrt-buehne{position:relative;height:84vh}
  .s1,.s2,.s3{display:none}
  .s4{opacity:1}
  .punkte{opacity:1;pointer-events:auto}
  .fahrt-kopf{margin-top:0}
  .punkt{position:static;transform:none;margin:6px}
  .punkte{position:static;display:flex;flex-wrap:wrap;justify-content:center;
    align-items:flex-end;padding-bottom:40px}
}
@media (prefers-reduced-motion:reduce){
  .korn{display:none}
  .tief::before{display:none}
  h1.titel.reveal,h2.reveal{opacity:1;transform:none;filter:none}
  .punkt{--dx:0px;--dy:0px}
  .fahrt{height:auto}
  .fahrt-buehne{position:relative;height:84vh}
  .s1,.s2,.s3{display:none}
  .s4{animation:none;opacity:1;transform:none;filter:none}
  .punkte{animation:none;opacity:1;pointer-events:auto}
}
@media (max-width:1040px){
  .fahrt-kopf h1{max-width:none}
}
@media (max-width:720px){
  .fahrt{height:280vh}
  .punkt{font-size:.86rem;padding:9px 14px 9px 11px;gap:9px}
  .punkt i{width:9px;height:9px;box-shadow:0 0 0 4px rgba(87,205,255,.28)}
  .vorschau{display:none}
}

/* Ueberschriften blenden beim ersten Sichtbarwerden ein. Einmalig, nicht
   bei jedem Scrollen erneut. Rechtstexte und der Rundgang bleiben aussen vor. */
h1.titel.reveal,h2.reveal{opacity:0;transform:translateY(18px);filter:blur(5px)}
h1.titel.reveal.da,h2.reveal.da{opacity:1;transform:none;filter:none;
  transition:opacity .55s ease-out,transform .55s ease-out,filter .55s ease-out}

/* ---------- Seitenumschaltung ---------- */
.seite{display:none}
.seite.aktiv{display:block}

@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;min-height:0}
  .hero-text{padding:56px 0 44px}
  .hero-foto{margin:0;height:340px}
  .hero-foto::after{background:linear-gradient(180deg,rgba(4,44,82,.5),transparent 60%)}
  .leist{grid-template-columns:1fr 1fr}
  .leist .gross{grid-row:auto;grid-column:1/-1}
  .ablauf,.band-in{grid-template-columns:1fr 1fr}
  .news{grid-template-columns:1fr 1fr}
  .zwei{grid-template-columns:1fr;gap:34px}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
/* Leiste am unteren Rand. Wird nur auf dem Telefon ausgegeben, deshalb
   braucht sie keine Breitenabfrage - nur den Platz, den sie einnimmt. */
.handy-leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--linie);box-shadow:0 -8px 24px rgba(2,32,61,.10)}
.handy-leiste .knopf{flex:1;justify-content:center;min-height:50px}
.handy-leiste-klar{display:inline-flex;align-items:center;min-height:50px;padding:0 14px;
  border:1px solid var(--linie);border-radius:999px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap}
.handy-leiste-klar:active{background:var(--licht-weich)}
/* Mit JavaScript faehrt die Leiste erst hoch, wenn der Aufmacher weg ist.
   Ohne JavaScript steht sie von Anfang an da - lieber einmal zu viel
   sichtbar als gar kein Weg zum Angebot. */
.js .handy-leiste{transform:translateY(125%);transition:transform .3s ease-out}
.js .handy-leiste.da{transform:none}
body:has(.handy-leiste){padding-bottom:84px}

/* Die Zustimmung im Kontaktformular. Stand vorher in Inline-Stilen und liess
   sich deshalb auf dem Telefon nicht vergroessern. */
.zustimmung{flex-direction:row;gap:11px;align-items:flex-start}
.zustimmung input[type=checkbox]{width:18px;height:18px;margin-top:4px;flex:none}
.zustimmung label{font-weight:400;font-size:.92rem;color:var(--ink-70)}

@media (max-width:720px){
  body{font-size:16px}
  section{padding:56px 0}
  .huelle{padding:0 16px}
  .nav{display:none}
  .nav.offen{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:#fff;border-bottom:1px solid var(--linie);padding:10px 16px 18px;gap:2px}
  .nav.offen a,.nav.offen button{width:100%;text-align:left;padding:13px}
  .menue-schalter{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--linie);
    border-radius:var(--r-klein);padding:10px 14px;font:inherit;font-weight:600;cursor:pointer}
  .kopf .knopf{display:none}
  .leist,.ref,.stimmen,.form,.news,.zahlen,.ablauf,.band-in,.fuss-raster{grid-template-columns:1fr}
  .schritt{padding-right:0}
  .feld.weit{grid-column:auto}

  /* Tippziele. Ein Daumen braucht 44 Pixel, ein Mauszeiger nicht. */
  .kopf .marke{min-height:44px;display:flex;align-items:center}
  .fuss a{display:inline-flex;align-items:center;min-height:44px}
  .fuss-raster{gap:8px}
  .fuss h4{margin-bottom:2px}
  .zustimmung input[type=checkbox]{width:22px;height:22px;margin-top:2px}

  /* Der Aufmacher traegt seine Schrift ganz unten; der Verlauf muss deshalb
     schon in der Bildmitte greifen, sonst steht Text auf hellem Fenster. */
  .hero-handy::after{
    background:linear-gradient(183deg,rgba(2,32,61,.60) 0%,rgba(2,32,61,.30) 26%,
      rgba(2,32,61,.72) 58%,rgba(2,32,61,.93) 84%,rgba(2,32,61,.97) 100%)}
  .hero-handy-text .eyebrow{color:#cdeaff}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Formularversand ---------- */
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-meldung{grid-column:1/-1;margin:12px 0 0;font-size:.94rem;font-weight:500}
.form-meldung.gut{color:#1d6b3f}
.form-meldung.schlecht{color:#a8324a}
.form[data-sendet] button[type=submit]{opacity:.6;pointer-events:none}
.springen{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);
  padding:12px 18px;border-radius:var(--r-klein);z-index:100}
.springen:focus{left:16px;top:12px}

/* ---------- Hakenliste. Die drei Stichpunkte je Leistung ---------- */
.haken{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:9px}
.haken li{position:relative;padding-left:28px;color:var(--ink-70)}
.haken li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;
  border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);
  transform:rotate(-45deg)}
.tief .haken li,.tief .haken li::before{color:#cfe3f6}
.tief .haken li::before{border-color:var(--licht)}

/* ---------- FAQ. Aufklappbar ohne eine Zeile JavaScript ---------- */
.faq{display:grid;gap:10px;max-width:78ch}
.faq-punkt{border:1px solid var(--linie);border-radius:var(--r-mittel);background:#fff}
.faq-punkt summary{cursor:pointer;list-style:none;padding:17px 20px;
  font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.012em;
  display:flex;align-items:center;gap:12px}
.faq-punkt summary::-webkit-details-marker{display:none}
.faq-punkt summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);
  transform:rotate(45deg);transition:transform .2s}
.faq-punkt[open] summary::after{transform:rotate(-135deg)}
.faq-punkt p{margin:0;padding:0 20px 19px;color:var(--ink-70)}
.faq-punkt:focus-within{border-color:var(--blau)}