/* ==============================================================
   umschalter.css  ·  Besitzer: P2 Hero & Umschalter  ·  K21
   Markup: includes/umschalter.php (kh_umschalter), bis zur Montage (P12)
   auch noch das gleichlautende Markup in index.php - beide nutzen dieselben
   Klassen (.bereich-flaeche .bereich-hero .switcher .seg .panel .facts .auch).

   v4 (25.09.2026) ersetzt den v3-Altbestand dieser Datei vollstaendig:
   - Flaeche Leuchtkasten-Weiss (.f-licht; im alten index.php die
     Fallback-Regel unten), keine Haarlinie, keine Graukaesten.
   - Pillen-Segment mit gleitendem Daumen: die EINZIGE Pille der Seite
     (--r-pille). Daumen gleitet ueber translate (reduziert: springt,
     globaler Stopp in basis.css).
   - Panel-Wechsel nur nach einem Umschalten (html.bereich-gewechselt aus
     hero.js): Einblenden 300 ms per Transition + @starting-style statt der
     v3-Wischblende. Transitions enden von selbst - keine Animation bleibt
     haengen (getAnimations() = 0, Plan 9.1).
   - Einzige Quelle des Zustands: body:has(#zg-gewerbe:checked).
   ============================================================== */

/* ---- Flaeche und Kopf ---- */
.bereich-flaeche{
  background-color:var(--flaeche-licht);color:var(--text);
  padding-block:var(--abstand-klein);
}
.bereich-kopf{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:1rem clamp(1.5rem, 4vw, 3.5rem);
}
.bereich-kopf > *{min-width:0}

.switcher{border:0;padding:0;margin:0;min-width:0;max-width:100%}
.switcher legend{
  padding:0;margin:0 0 .7rem;
  font-family:var(--schrift-titel);font-weight:700;font-stretch:92%;
  font-size:clamp(1.125rem, 1.05rem + .3vw, 1.3rem);line-height:1.2;color:var(--text);
}
.bereich-sub{
  flex:1 1 22rem;max-width:46ch;margin:0;
  font-size:1rem;line-height:1.55;color:var(--muted);text-wrap:pretty;
}

/* ---- Segment (Pille) ---- */
.seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:min(100%, 34rem);padding:4px;
  border:2px solid var(--border-feld);border-radius:var(--r-pille);
  background:var(--flaeche-papier);
}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg label{
  position:relative;z-index:2;cursor:pointer;
  display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:.55rem clamp(.7rem, .4rem + 1.4vw, 1.4rem);border-radius:var(--r-pille);
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;line-height:1.2;
  text-align:center;text-wrap:balance;color:var(--text);
  transition:color var(--t-kurz) var(--ease);
}
.seg .thumb{
  position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:var(--knopf-fill);border-radius:var(--r-pille);
  /* nur translate: eine Ueberblendung der Farbe friert bei Variablen-
     Wechsel die alte Farbe ein (v3-Befund) */
  transition:translate var(--t-mittel) var(--ease);
}
.seg:has(#zg-gewerbe:checked) .thumb{translate:100% 0}
.seg:has(#zg-privat:checked)  label[for="zg-privat"],
.seg:has(#zg-gewerbe:checked) label[for="zg-gewerbe"]{color:var(--on-knopf)}
.seg input:focus-visible + label{outline:3px solid var(--fokus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .seg input:not(:checked) + label:hover{background:var(--wash)}
}

/* ---- Panels: beide im HTML (crawlbar), sichtbar nur das gewaehlte ---- */
.panel{display:none;position:relative;margin-top:clamp(1.75rem, 1.2rem + 2vw, 2.75rem)}
body:has(#zg-privat:checked)  .panel[data-zg="privat"],
body:has(#zg-gewerbe:checked) .panel[data-zg="gewerbe"]{display:block}

.panel-h{margin:0 0 .7rem;max-width:26ch}
.panel > p{margin:0 0 1.5rem;max-width:62ch;color:var(--text);text-wrap:pretty}

/* Einblenden nach dem Umschalten (nicht beim Laden) */
@media (prefers-reduced-motion:no-preference){
  .bereich-gewechselt body:has(#zg-privat:checked)  .panel[data-zg="privat"],
  .bereich-gewechselt body:has(#zg-gewerbe:checked) .panel[data-zg="gewerbe"]{
    transition:opacity 300ms var(--ease),translate 300ms var(--ease);
  }
  @starting-style{
    .bereich-gewechselt body:has(#zg-privat:checked)  .panel[data-zg="privat"] {opacity:0;translate:-18px 0}
    .bereich-gewechselt body:has(#zg-gewerbe:checked) .panel[data-zg="gewerbe"]{opacity:0;translate:18px 0}
  }
}

/* ---- Fakten: Datenzeilen auf Haarlinie, keine Kaesten ---- */
.facts{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.1rem clamp(1rem, 3vw, 2rem);margin:1.75rem 0 0;
}
.fact{min-width:0;padding-top:.7rem;border-top:2px solid var(--line)}
.fact dt{
  margin:0 0 .25rem;
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;color:var(--accent-text);
}
.fact dd{
  margin:0;font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:clamp(1.0625rem, 1rem + .25vw, 1.2rem);line-height:1.3;
}
@media (max-width:39.99rem){.fact dd{hyphens:auto}}

/* ---- „Außerdem für Sie“ ---- */
.auch{margin-top:clamp(1.75rem, 1.2rem + 2vw, 2.5rem)}
.auch-kopf{
  margin:0 0 .7rem;
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.auch-liste{
  list-style:none;margin:0;padding:0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.auch-liste li{min-width:0}
.auch-liste a{
  display:grid;gap:.3rem;height:100%;padding:1rem 1.2rem 1.1rem;text-decoration:none;
  background:var(--flaeche-papier);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-karte);
  transition:translate var(--t-kurz) var(--ease),border-color var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease);
}
.auch-titel{
  font-family:var(--schrift-titel);font-weight:660;font-stretch:96%;
  font-size:1.125rem;line-height:1.25;color:var(--accent-text);
}
.auch-text{font-size:.95rem;line-height:1.5;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .auch-liste a:hover{translate:0 -4px;border-color:var(--accent-text);box-shadow:var(--sh-1)}
}
/* fix2 (Jury, niedrig): keine umgekehrten Rahmenboxen - Leuchtkasten-Karte
   wie das Bento (weiss mit Schatten, ohne Rand). */
.auch-liste a{background:var(--flaeche-licht);border-color:transparent;box-shadow:var(--sh-1)}
@media (hover:hover) and (pointer:fine){
  .auch-liste a:hover{border-color:transparent;box-shadow:var(--sh-2)}
}

/* ---- Ab 60rem: Text + Knoepfe links, Fakten rechts, Teaser darunter ---- */
@media (min-width:60rem){
  body:has(#zg-privat:checked)  .bereich-hero .panel[data-zg="privat"],
  body:has(#zg-gewerbe:checked) .bereich-hero .panel[data-zg="gewerbe"]{
    display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    column-gap:clamp(2rem, 5vw, 4.5rem);align-items:start;
  }
  .bereich-hero .panel > *{grid-column:1}
  .bereich-hero .panel > .facts{grid-column:2;grid-row:1 / span 3;margin-top:.4rem;align-self:center}
  .bereich-hero .panel > .auch{grid-column:1 / -1}
}

/* ---- Ohne :has(): beide Bereiche stehen untereinander ---- */
@supports not selector(:has(*)){
  .panel{display:block}
  .panel + .panel{padding-top:1.6rem;border-top:1px solid var(--line)}
  .seg .thumb{display:none}
  .seg label{border:1px solid var(--border-feld)}
}

/* ---- Uebergang: altes index.php (bis P12) traegt die Flaeche noch im
        Hero und ohne .bereich-kopf. Nur Abstaende angleichen. ---- */