/* ==========================================================================
   scheibenweise. — start.css
   Startseite „Zwei Scheiben“. Baut auf core.css auf (Tokens, Themen, Bausteine).
   Reihenfolge: Kopfzeile und Tippflächen · Kopf · Fenster (zwei Scheiben) ·
   Fläche dahinter · Sequenz · Einsatzgebiet · Abschluss · Footer
   Grundzustand ist immer die fertige Seite; Startzustände setzt start.js.
   ========================================================================== */

/* Stellung des Pfostens als animierbare Zahl: 0 = Mitte, 8 = Privat breiter, -8 = Gewerbe breiter.
   Ohne @property (ältere Browser) springt der Pfosten, statt zu gleiten. */
@property --m{syntax:"<number>";inherits:true;initial-value:0}

/* ---------- Kopfzeile auf schmalen Handys ----------
   Logo, Umschalter und Menüknopf passen sonst nicht nebeneinander und der Knopf wird gequetscht
   (in core.css nicht vorgesehen, deshalb hier). */
.site-header__burger{flex:none}
/* Umschalter: Tippfläche auf 48 px Höhe erweitern, ohne das Aussehen zu ändern */
.welt-switch a{position:relative}
.welt-switch a::after{content:"";position:absolute;inset:-6px 0}
@media (max-width:420px){
  .site-header__inner{gap:10px}
  .site-header__logo{width:clamp(112px,34vw,136px)}
  .welt-switch a{padding:0 8px}
}
/* Logo und Footer-Links sind in core.css niedriger als ein Tippziel; die Fläche wächst hier unsichtbar mit.
   Die Listen im Footer füllen damit ihre Zeilenabstände, Impressum und Datenschutz kommen auf 44 px. */
.site-header__logo,.site-footer a{position:relative}
.site-header__logo::after,.site-footer a::after{content:"";position:absolute;inset:-14px 0}
.site-footer__top a::after{inset:-5px 0}
.site-footer__bottom a::after{inset:-14px -10px}

.einstieg{
  --schild-w:clamp(300px,33vw,400px);   /* Breite der Schilder und des Satzes neben der Überschrift */
}

/* ---------- Kopf: Etikett, Überschrift, Satz ---------- */
.kopf{padding-top:calc(var(--header-h) + 28px);padding-bottom:32px}
.kopf__etikett{display:flex;margin-bottom:20px}
.kopf__satz{margin-top:20px;font-size:var(--fs-lead);line-height:1.45;max-width:30em}

/* Ab Tablet-Breite steht die Überschrift in zwei Zeilen: „Scheibe für Scheibe.“ (8,4 em breit) bleibt zusammen */
@media (min-width:600px){
  .kopf__titel{font-size:min(var(--fs-mega),calc((100vw - 2*var(--gutter))/8.6))}
}

@media (min-width:860px){
  .kopf{
    /* Schriftgröße: so groß wie .mega, aber „Scheibe für Scheibe.“ bleibt in einer Zeile
       (8,4 em breit) und niedrige Bildschirme behalten Platz für die Scheiben. */
    --f:min(var(--fs-mega),calc((100vw - 2*var(--gutter))/8.6),max(16svh,4.75rem));
    padding-top:calc(var(--header-h) + clamp(18px,3.4svh,36px));
    padding-bottom:clamp(22px,4.4svh,46px);
  }
  .kopf__etikett{margin-bottom:clamp(14px,2.4svh,24px)}
  .kopf__zeile{position:relative}
  .kopf__titel{font-size:var(--f)}
  /* Der Satz sitzt rechts neben der ersten Zeile und steht auf deren Grundlinie
     (Grundlinie = 0,84 em unter der Oberkante; 0,4 em liegt die Grundlinie des Satzes über seiner Unterkante). */
  .kopf__satz{position:absolute;right:0;bottom:calc(100% - var(--f)*.84 - .4em);margin:0;width:var(--schild-w);max-width:none;font-size:clamp(1rem,.4rem + 1vw,1.3125rem)}
}

/* ---------- Fenster: zwei Scheiben ---------- */
.fenster{position:relative}
.fenster__fluegel{position:relative}

/* Vor dem Einstieg unsichtbar, damit nichts aufblitzt, bevor start.js den Startzustand setzt */
.js:not(.is-ready):not(.ruhe) .fenster__fluegel{visibility:hidden}
.js.anim-failsafe:not(.anim) .fenster__fluegel{visibility:visible}

.scheibe{
  --auf:1;                               /* 0 = zugewischt, 1 = offen (Einstieg) */
  position:relative;display:block;background:var(--sw-black-04);color:var(--sw-black);
  clip-path:inset(0 calc((1 - var(--auf))*100%) 0 0);
}
.scheibe--gewerbe{clip-path:inset(0 0 0 calc((1 - var(--auf))*100%));border-top:10px solid var(--sw-black)}
.scheibe:focus-visible{outline:none}
/* Fokusrahmen liegt innen, weil clip-path einen äußeren Rahmen abschneiden würde */
.scheibe::after{content:"";position:absolute;inset:8px;z-index:4;border:3px solid var(--sw-blue);outline:3px solid var(--sw-white);opacity:0;pointer-events:none}
.scheibe:focus-visible::after{opacity:1}

.scheibe__bild{position:relative;aspect-ratio:4/3}
@media (min-width:600px){.scheibe__bild{aspect-ratio:16/9}}
.scheibe__medien{position:absolute;inset:0}
.scheibe__medien img,.scheibe__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scheibe--privat .scheibe__medien img,.scheibe--privat .scheibe__video{object-position:56% 50%}
/* Video liegt über dem Bild und blendet erst ein, wenn es läuft (start.js) */
.scheibe__video{opacity:0;transition:opacity .9s var(--ease-out)}
.scheibe__video.is-an{opacity:1}

/* Schild: Etikett, große Zeile, Satz, Button */
.schild{position:relative;display:flex;flex-direction:column;gap:22px;padding:28px var(--gutter) 32px}
.schild__text{display:flex;flex-direction:column;gap:14px}
.schild__titel{font-size:clamp(2.75rem,3.7vw,3.5rem);line-height:1;letter-spacing:var(--ls-display)}
.schild__satz{font-size:var(--fs-small);line-height:1.45;color:var(--muted);max-width:34em}
.schild__knopf{display:flex;justify-content:space-between;width:100%;min-height:54px;padding:10px 20px;white-space:normal;text-align:left;line-height:1.2}
/* Die ganze Scheibe ist der Link: Button reagiert mit */
.scheibe:hover .schild__knopf,.scheibe:focus-visible .schild__knopf{color:var(--btn-hfg);border-color:var(--btn-hbg)}
.scheibe:hover .schild__knopf::before,.scheibe:focus-visible .schild__knopf::before{transform:scaleX(1)}
.scheibe:hover .schild__knopf .icon--arrow,.scheibe:focus-visible .schild__knopf .icon--arrow{transform:translateX(4px)}

@media (min-width:860px){
  /* Zweiflügeliges Fenster über die volle Breite. Jede Scheibe ist 58 % breit angelegt und wird
     per clip-path auf ihren sichtbaren Teil beschnitten: So gleitet der Pfosten über stehende
     Bilder, ohne dass sich Layout oder Bildausschnitt ändern. */
  .fenster__fluegel{
    --fh:clamp(560px,100svh,1200px);
    --m:0;
    height:var(--fh);
    transition:--m .7s var(--ease-wipe);
  }
  .scheibe{position:absolute;top:0;bottom:0;width:58%;display:flex;flex-direction:column;justify-content:flex-end;border:0}
  .scheibe--privat{
    left:0;align-items:flex-start;
    --sicht:calc(var(--auf)*(50 + var(--m))/58);          /* sichtbarer Anteil der eigenen Breite */
    clip-path:inset(0 calc((1 - var(--sicht))*100% - var(--auf)*.5px) 0 0);
  }
  .scheibe--gewerbe{
    right:0;align-items:flex-end;
    --sicht:calc(var(--auf)*(50 - var(--m))/58);
    clip-path:inset(0 0 0 calc((1 - var(--sicht))*100% - var(--auf)*.5px));
  }
  /* Pfosten: je eine Hälfte an der Innenkante jeder Scheibe, fährt mit der Kante mit.
     Beide Hälften sind der rechte Rand einer nach links verschobenen Fläche (kein Überstand nach rechts)
     und greifen 1 px über die Naht, damit dort nie ein Bildstreifen durchscheint. Zusammen 10 px. */
  .scheibe::before{content:"";position:absolute;inset:0;z-index:3;border-right:6px solid var(--sw-black);pointer-events:none}
  .scheibe--privat::before{transform:translateX(calc((var(--sicht) - 1)*100% + 1px))}
  .scheibe--gewerbe::before{transform:translateX(calc(5px - var(--sicht)*100%))}
  .scheibe--privat::after{right:calc((1 - var(--sicht))*100% + 16px)}
  .scheibe--gewerbe::after{left:calc((1 - var(--sicht))*100% + 16px)}

  /* Das Bild steht zum Bildschirm still (sticky am unteren Rand), die Scheibe schiebt sich
     beim Scrollen darüber. Der Rahmen reicht dafür eine Bildschirmhöhe über die Scheibe hinaus. */
  .scheibe__bild{position:absolute;inset:-100svh 0 0;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:auto;pointer-events:none}
  .scheibe__medien{position:sticky;inset:auto auto 0;flex:none;height:var(--fh)}

  /* Schilder an den Außenkanten, bündig mit Überschrift und Satz; bleiben am unteren Bildschirmrand,
     solange die Scheibe noch nicht ganz im Bild ist. 86.207% - 720px = (Fensterbreite - 1440px) / 2 */
  .schild{
    --unten:min(var(--gutter),4.2svh);
    position:sticky;bottom:var(--unten);z-index:2;gap:clamp(14px,2.4svh,20px);width:var(--schild-w);
    margin:0 max(var(--gutter),calc(86.207% - 720px)) var(--unten);padding:clamp(18px,min(2vw,3.2svh),28px);
  }
  .schild__text{gap:clamp(10px,1.7svh,14px)}
  .schild__titel{font-size:clamp(2.25rem,min(3.6vw,6.2svh),3.5rem)}
  .schild__knopf{font-size:clamp(.9375rem,.6rem + .5vw,1rem)}

  /* Schiebefenster: die überfahrene (oder fokussierte) Scheibe wird breiter, 58 : 42 */
  .fenster__fluegel:has(.scheibe--privat:focus-visible){--m:8}
  .fenster__fluegel:has(.scheibe--gewerbe:focus-visible){--m:-8}
}
@media (min-width:860px) and (hover:hover) and (pointer:fine){
  .fenster__fluegel:has(.scheibe--privat:hover){--m:8}
  .fenster__fluegel:has(.scheibe--gewerbe:hover){--m:-8}
}
/* Schmaler Zweispalter: Im Gewerbe-Schild bricht der Button auf zwei Zeilen und der Satz auf drei.
   Beide Schilder reservieren denselben Platz (Button zweizeilig, Satz 3 × 1,45 em), damit ihre Oberkanten
   auf einer Linie bleiben. Die Grenzen liegen mit Reserve über den Umbruchstellen. */
@media (min-width:860px) and (max-width:1099px){
  .schild__knopf{min-height:60px}
}
@media (min-width:860px) and (max-width:999px){
  .schild__satz{min-height:4.35em}
}
.ruhe .fenster__fluegel{transition:none}

/* ---------- Fläche hinter den Scheiben: der Absatz ---------- */
.fenster__dahinter{padding-block:var(--section-y)}
.aussage{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.aussage__text{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,.9rem + 3.9vw,5rem);line-height:1.06;letter-spacing:-.035em}
.aussage__satz{display:block;text-wrap:balance}

/* ---------- Sequenz (nur Desktop, start.js setzt .is-seq): Absatz liegt hinter den Scheiben ---------- */
.fenster.is-seq{height:100svh}
.fenster.is-seq .fenster__fluegel{--fh:100svh;position:absolute;inset:0;z-index:2;height:auto;pointer-events:none}
.fenster.is-seq .scheibe{pointer-events:auto}
.fenster.is-seq .fenster__dahinter{position:absolute;inset:0;z-index:1;display:flex;align-items:center;padding-block:0}
/* Während die Scheiben zum Einstieg aufwischen, bleibt die Fläche dahinter leer */
.fenster.is-seq.is-einstieg .fenster__dahinter{visibility:hidden}
/* Sobald die Scheiben fahren, steht der Pfosten wieder in der Mitte */
.fenster.is-offen .fenster__fluegel.fenster__fluegel{--m:0}

/* ---------- Einsatzgebiet: Sprungziel ----------
   Mit Lenis wird der Abstand zur Kopfzeile doppelt gerechnet (scroll-padding-top aus core.css plus der
   Versatz aus core.js), der Abschnitt landete 180 px unter dem oberen Rand. Die Kopfzeile fährt beim
   Herunterscrollen ohnehin weg: Der Abschnitt beginnt deshalb bündig am oberen Rand. */
.lenis #einsatzgebiet{scroll-margin-top:calc(-2*var(--header-h) - 28px)}

/* ---------- Abschluss: Privat oder Gewerbe ---------- */
.wahl{position:relative;background:var(--sw-white);color:var(--sw-black)}
.wahl__flaeche{display:none}
.wahl__titel{padding:var(--section-y) var(--gutter) 0}
.wahl__wort{display:inline-block}
.wahl__seite{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding:32px var(--gutter) 64px}
.wahl__seite--gewerbe{padding-top:64px}
.wahl__seite .lead{max-width:26em}

@media (min-width:860px){
  .wahl{display:grid;grid-template-columns:1fr 1fr;--wahl-aussen:max(var(--gutter),calc(100% - 720px));--wahl-innen:clamp(40px,5vw,72px)}
  /* rechte Hälfte: blaue Scheibe, wird freigewischt; dazwischen der Pfosten */
  .wahl__flaeche{display:block;position:absolute;inset:0 0 0 50%;background:var(--sw-blue)}
  .wahl::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 5px);z-index:2;width:10px;background:var(--sw-black)}
  .wahl__titel{grid-column:1 / -1;position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;padding:var(--section-y) 0 0}
  .wahl__wort{display:block}
  .wahl__wort--privat,.wahl__seite--privat{padding-left:var(--wahl-aussen);padding-right:var(--wahl-innen)}
  .wahl__wort--gewerbe,.wahl__seite--gewerbe{padding-left:var(--wahl-innen);padding-right:var(--wahl-aussen)}
  .wahl__wort--gewerbe{color:var(--sw-white);--accent-text:var(--sw-white)}
  /* Flächen kommen hier von .wahl (weiß) und .wahl__flaeche (blau), die Hälften selbst bleiben durchsichtig */
  .wahl__seite{position:relative;z-index:1;gap:32px;padding-top:clamp(24px,3vw,40px);padding-bottom:var(--section-y);background:transparent}
  /* Beide Buttons stehen auf einer Linie, auch wenn die Sätze unterschiedlich viele Zeilen brauchen */
  .wahl__seite .btn{margin-top:auto}
}

/* ---------- Footer: gleiche Außenkanten wie der Rest der Startseite ---------- */
.site-footer .container{max-width:calc(var(--container-wide) + 2*var(--gutter))}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .js .fenster__fluegel{visibility:visible!important}
}