/* ============================================================
   panel2.css — die Seite /panel (das Kundencenter) im Stil der
   Startseite v15. Angelegt 2026-09-28 (MacBook Air von Fabio).
   Auftrag Fabio: «Bei Seite panel nun das selbe. Wir haben Für
   Fortgeschrittene nicht mehr deswegen das streichen aber einige
   screenshots aus dem kundencenter reinfitzen und das kundencenter
   zeigen und vorstellen».

   AUFBAU
   panel.html laedt start2.css (Marken --s15-* hell/dunkel, Grund,
   Knoepfe, Abschnitte, Schluss, Fusszeile) und start2.js (Hell/Dunkel-
   Schalter, Einblenden). Diese Datei bringt nur, was /panel allein hat:
   Aufmacher, Browserfenster mit Bildpaar, Rundgang-Reiter, Zeilen.

   BILDER
   Jedes Fenster enthaelt zwei Bilder desselben Motivs: hell und dunkel.
   Sichtbar ist das, das zum Seitenthema passt; das andere steht auf
   display:none und wird wegen loading="lazy" gar nicht erst geladen.

   KASTENMODELL: start2.css setzt in .s15 content-box. Wo hier Breite
   100 % UND ein Rand zusammenkommen, steht border-box am Element.
   ============================================================ */

:root{
  --p15-leiste:#ececef;
  --p15-fensterrand:#d2d2d7;
  --p15-schatten:0 40px 100px rgba(0,0,0,.16),0 8px 24px rgba(0,0,0,.06);
}
:root[data-theme="dark"]{
  --p15-leiste:#2c2c2e;
  --p15-fensterrand:#3a3a3c;
  --p15-schatten:0 40px 100px rgba(0,0,0,.6);
}

/* ── Grund ──────────────────────────────────────────────────── */
body.p15-seite{
  background:var(--s15-bg);
  color:var(--s15-text);
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  font-synthesis:none;
  overflow-x:clip;
  transition:background .5s,color .5s;
}

/* ── Aufmacher ──────────────────────────────────────────────── */
.p15-held{
  position:relative;overflow:hidden;
  padding:clamp(56px,9vh,110px) 22px clamp(88px,10vw,150px);
  text-align:center;
}
.p15-held__schein{
  position:absolute;left:50%;top:72%;
  width:min(1200px,120vw);height:56%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--s15-glow),transparent);
  filter:blur(30px);pointer-events:none;
}
.p15-held__innen{
  position:relative;max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}
.p15-held__titel{
  margin:12px 0 0;
  font-size:clamp(44px,6.4vw,88px);line-height:1.02;
  font-weight:600;letter-spacing:-0.034em;text-wrap:balance;
}
.p15-held__text{
  margin:22px auto 0;max-width:680px;
  font-size:clamp(17px,1.5vw,21px);line-height:1.45;
  color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;
}
.p15-held__knoepfe{
  margin-top:32px;display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.p15-held__bild{
  position:relative;max-width:1180px;margin:clamp(48px,6vw,80px) auto 0;
  text-align:left;
}

/* ── Browserfenster ─────────────────────────────────────────── */
.s15 figure.p15-fenster{
  box-sizing:border-box;margin:0;width:100%;
  border:1px solid var(--p15-fensterrand);border-radius:16px;overflow:hidden;
  background:var(--s15-card);box-shadow:var(--p15-schatten);
}
.s15 .p15-fenster__leiste{
  box-sizing:border-box;position:relative;height:40px;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;background:var(--p15-leiste);
  border-bottom:1px solid var(--p15-fensterrand);
}
.p15-fenster__ampel{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;gap:7px;}
.p15-fenster__ampel i{display:block;width:11px;height:11px;border-radius:50%;}
.p15-fenster__ampel i:nth-child(1){background:#ff5f57;}
.p15-fenster__ampel i:nth-child(2){background:#febc2e;}
.p15-fenster__ampel i:nth-child(3){background:#28c840;}
.p15-fenster__adresse{
  font-size:12px;line-height:1;color:var(--s15-text2);letter-spacing:0;
  background:var(--s15-tile);padding:6px 16px;border-radius:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;
}
.s15 img.p15-bild{display:block;width:100%;height:auto;}
.s15 img.p15-bild--dunkel{display:none;}
:root[data-theme="dark"] .s15 img.p15-bild--hell{display:none;}
:root[data-theme="dark"] .s15 img.p15-bild--dunkel{display:block;}

/* ── Rundgang ───────────────────────────────────────────────── */
.p15-rundgang{margin-top:clamp(40px,5vw,64px);}
.p15-reiter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px);}
.p15-reiter[hidden]{display:none;}
.p15-reiter__knopf{
  height:40px;padding:0 20px;border:0;border-radius:980px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--s15-feld-rand);
  color:var(--s15-text);font:inherit;font-size:15px;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.p15-reiter__knopf:hover{box-shadow:inset 0 0 0 1px var(--s15-text);}
.p15-reiter__knopf[aria-selected="true"]{background:var(--s15-inv);color:var(--s15-invtext);box-shadow:none;}

/* Ohne Skript stehen die Tafeln untereinander; mit Skript ist genau eine sichtbar. */
.p15-tafel + .p15-tafel{margin-top:clamp(64px,8vw,110px);}
.p15-js .p15-tafel + .p15-tafel{margin-top:0;}
.p15-tafel[hidden]{display:none;}
.p15-tafel__text{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:10px 40px;align-items:baseline;margin-bottom:clamp(24px,3vw,36px);
}
.p15-tafel__titel{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.1;font-weight:600;letter-spacing:-0.024em;}
.p15-tafel__beschrieb{margin:0;font-size:19px;line-height:1.45;color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;}

/* Wechsel: die neue Tafel kommt kurz von unten — nur, wenn Bewegung erlaubt ist
   (start2-thema.js setzt s15-bewegt, bei «Bewegung reduzieren» nicht). */
.s15-bewegt .p15-tafel.p15-neu{animation:p15-ein .45s cubic-bezier(.2,.7,.2,1);}
@keyframes p15-ein{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ── Enthalten ──────────────────────────────────────────────── */
.p15-zeilen{margin-top:clamp(40px,5vw,64px);}
.p15-zeile{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:10px 40px;align-items:baseline;padding:28px 0;border-top:1px solid var(--s15-line);
}
.p15-zeile__name{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.1;font-weight:600;letter-spacing:-0.024em;}
.p15-zeile__text{margin:0;font-size:19px;line-height:1.45;color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;}

/* ── Telefon ────────────────────────────────────────────────── */
@media (max-width:640px){
  .s15 figure.p15-fenster{border-radius:10px;}
  .s15 .p15-fenster__leiste{height:28px;padding:0 10px;}
  .p15-fenster__ampel{left:10px;gap:5px;}
  .p15-fenster__ampel i{width:8px;height:8px;}
  .p15-fenster__adresse{font-size:10px;padding:4px 10px;border-radius:5px;}
  .p15-tafel__beschrieb,.p15-zeile__text{font-size:17px;}
  .p15-zeile{padding:22px 0;}
}

/* SHOP-47, Entscheid Fabrizio 04.10.2026: die Reiter am Telefon 44 px hoch (vorher 40 px,
   gemessen mit tools/mobil_pruefstand.mjs). */
@media (max-width:700px){
  .p15-reiter__knopf{min-height:44px;}
}