/* wincierz.eu - alle Styles (aus index.html extrahiert) */
  :root { --wald:#2f5d50; --wald-dunkel:#244a40; --salbei:#7fa596; --sand:#f6f4ee;
          --text:#31403a; --text-leise:#5c6b62; --linie:#e3ded2; }
  * { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin:0; background:var(--sand); color:var(--text);
         min-height:100vh; display:flex; flex-direction:column; }
  header { background:var(--wald); color:#fff; padding:16px 24px; display:flex; align-items:center; gap:16px; }
  header h1 { font-size:1.1rem; margin:0; letter-spacing:.03em; }
  a { text-decoration:none; }  /* NO-UNDERLINE-2709: Unterstreichungen komplett raus */
  header a { color:#cfe2e8; text-decoration:none; font-weight:600; margin-left:auto; }
  main { max-width:1000px; margin:0 auto; padding:34px 20px 50px; width:100%; }
  .hero { text-align:center; padding:26px 10px 10px; }
  .hero h2 { color:var(--wald-dunkel); font-size:clamp(1.6rem, 4vw, 2.4rem); margin:.2em 0; }
  .hero p { font-size:1.12rem; line-height:1.7; color:var(--text-leise); max-width:640px; margin:0 auto; }
  .hero .frage { font-weight:800; color:var(--wald); }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:22px; margin:0 0 22px; max-width:1100px; margin-left:auto; margin-right:auto; }
  .karte { background:#fff; border:1px solid var(--linie); border-radius:16px; padding:22px 24px;
           box-shadow:0 1px 5px rgba(49,64,58,.07); transition:transform .18s ease; }
  .karte:hover { transform:translateY(-4px); }
  .karte h3 { margin:0 0 8px; color:var(--wald-dunkel); font-size:1.12rem; }
  .karte p { margin:0; font-size:.95rem; line-height:1.6; }
  .status { display:inline-block; margin-top:10px; padding:2px 12px; border-radius:20px; font-size:.75rem; font-weight:700; }
  .live { background:#eaf6ea; color:var(--wald); }
  .kommt { background:#fdf1dc; color:var(--warn, #b26a00); color:#b26a00; }
  .cta { text-align:center; background:#fff; border:1px solid var(--linie); border-radius:18px;
         padding:30px 24px; margin-top:36px; }
  .cta h3 { color:var(--wald-dunkel); font-size:1.4rem; margin:.2em 0; }
  .cta p { color:var(--text-leise); line-height:1.6; }
  .knopf { display:inline-block; margin-top:14px; background:var(--wald); color:#fff !important;
           padding:13px 30px; border-radius:10px; text-decoration:none; font-weight:800; font-size:1.05rem; }
  .knopf:hover { background:var(--wald-dunkel); }
  footer { text-align:center; color:var(--text-leise); font-size:.82rem; padding:22px; margin-top:auto; }
  footer a { color:var(--wald-dunkel); }

  .nl-leiste { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end;
               max-width:560px; margin:34px 0 2px; padding:6px 10px;
               background:var(--sand); border:1px solid var(--linie); border-radius:12px; }
  #nl-send { padding:.25em .8em; font-size:.78rem; }
  .nl-leiste .nl-titel { font-weight:700; font-size:.92rem; color:var(--wald-dunkel); }
  body.ger3 .nl-leiste { background:#243040; border-color:#334152; }
  body.ger3 .nl-leiste .nl-titel { color:#c9e5d7; }
  .nl-rad { display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
  .nl-rad input { position:absolute; opacity:0; width:0; height:0; }
  .nl-punkt { width:11px; height:11px; border-radius:50%; border:1.5px solid var(--wald);
              display:inline-block; position:relative; flex:none; }
  .nl-rad input:checked + .nl-punkt { background:var(--wald); box-shadow:inset 0 0 0 2px var(--sand); }
  body.ger3 .nl-rad input:checked + .nl-punkt { box-shadow:inset 0 0 0 2px #243040; }
  .nl-txt { font-size:.85rem; color:var(--text-leise); }

@media (max-width: 640px) {
  header { padding: 10px 14px; }
  header h1 { font-size: .92rem; letter-spacing: .01em; }
  main { padding: 22px 14px 40px; }
  .hero { padding: 18px 0 6px; }
  .hero p { font-size: 1rem; line-height: 1.65; }
  .nl-leiste { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
  .nl-leiste input[type="email"] { max-width: none !important; flex: 1 1 100% !important; }
  .nl-leiste .knopf { flex: 1 1 100%; padding: 12px; font-size: 1rem; }
  .grid { gap: 14px; }
  .karte { padding: 18px 16px; }
  .karte h3 { font-size: 1.05rem; }
  footer { font-size: .85rem; line-height: 1.7; }
  footer a { display: inline-block; padding: 4px 2px; }
  #gg-schalter { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); right: 10px; }
  #ticketdlg { padding: 20px 16px; }
}

/* ===== LEBEN-Effekte (15.10., Frank-go) ===== */
#leben-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#0d1420;display:none}
body.ger5 #leben-bg{display:block}
#leben-bg .bg1{position:absolute;inset:0;background:url('/design-test/leben-bilder/rhein-bienen.png') right -420px center/115% auto;background-repeat:no-repeat;opacity:.55;filter:saturate(1)}
#leben-bg .bg2{position:absolute;inset:0;background:linear-gradient(rgba(13,20,32,.06),rgba(13,20,32,.14))}
body.ger5 .status.live{animation:ledpuls 2.4s ease-in-out infinite}
@keyframes ledpuls{0%,100%{text-shadow:0 0 0 rgba(63,208,143,0)}50%{text-shadow:0 0 10px rgba(63,208,143,.7)}}
body.ger5 .status.angebot{animation:ledpuls2 2.4s ease-in-out infinite}
@keyframes ledpuls2{0%,100%{text-shadow:0 0 0 rgba(232,150,60,0)}50%{text-shadow:0 0 10px rgba(232,150,60,.6)}}
body.ger5 .karte{transition:transform .3s ease,box-shadow .3s ease;transform-style:preserve-3d;will-change:transform}

    #ticketdlg label{display:block;margin:10px 0 4px;font-weight:600}
    #ticketdlg input,#ticketdlg select,#ticketdlg textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e3ded2;border-radius:8px;font-size:1.05rem;font-family:inherit}
    #ticketdlg textarea{min-height:110px;resize:vertical}
    #ticketdlg button[type=submit]{background:#2f5d50;color:#fff;border:0;padding:10px 22px;border-radius:8px;font-weight:700;font-size:1.05rem;cursor:pointer;margin-top:12px}
    #ticketdlg .hinweis{font-size:.9rem;color:#5c6b62}
    #ticketdlg .ok-box{background:#eaf6ea;border-radius:10px;padding:14px}
  
/* ===== GRUNDGERUEST-SYSTEM (27.09.) — Farben x Design, umschaltbar ===== */
/* Paletten (ueberschreiben die Basis-Variablen) */
body.pal1{--wald:#2f5d50;--wald-dunkel:#244a40;--salbei:#7fa596;--sand:#f6f4ee;--text:#31403a;--text-leise:#5c6b62;--linie:#e3ded2}
body.pal2{--wald:#1f4e79;--wald-dunkel:#16395a;--salbei:#8aa9c4;--sand:#f2f5f9;--text:#26384c;--text-leise:#5a6a7c;--linie:#dbe3ec}
body.pal3{--wald:#b4633a;--wald-dunkel:#8f4c2b;--salbei:#d9a184;--sand:#faf4ec;--text:#4a3a2e;--text-leise:#8a7a6c;--linie:#ece2d4}
/* Header als runde Pille (keine geraden Kanten) */
header{margin:12px 12px 0;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.14);padding:13px 26px}
main{margin-top:10px}
/* Karten: Gradlinien raus, weiche Rundung + Schatten */
.karte{border:none;border-radius:26px;box-shadow:0 12px 30px rgba(0,0,0,.09)}
.cta{border:none;border-radius:30px;box-shadow:0 14px 34px rgba(0,0,0,.09)}
/* Hover-Knoepfe im Design-Stil (rund, animiert) */
.knopf{border-radius:999px;padding:14px 30px;transition:transform .25s,box-shadow .25s;box-shadow:0 10px 24px rgba(47,93,80,.35)}
.knopf:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 36px rgba(47,93,80,.5)}
.knopf-ghost{display:inline-block;margin-top:14px;margin-left:10px;padding:13px 28px;border-radius:999px;
  font-weight:800;font-size:1.05rem;color:var(--wald);background:color-mix(in srgb, var(--wald) 10%, transparent);
  transition:transform .25s,background .25s}
.knopf-ghost:hover{transform:translateY(-4px) scale(1.03);background:color-mix(in srgb, var(--wald) 20%, transparent)}

/* ===== G2: Kreis & Welle ===== */
body.ger2 .hero{position:relative;overflow:hidden;background:var(--wald);color:#fff;border-radius:34px 34px 50% 42% / 34px 34px 90px 120px;
  padding:44px 30px 60px;margin:0 -10px 10px}
body.ger2 .hero::before{content:'';position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.16)}
body.ger2 .hero::after{content:'';position:absolute;left:6%;bottom:-30px;width:100px;height:100px;border-radius:50%;background:var(--salbei);opacity:.65}
body.ger2 .hero h2{color:#fff}
body.ger2 .hero p{color:rgba(255,255,255,.92)}
body.ger2 .hero .frage{color:#fff}
body.ger2 .grid{margin-top:48px}
body.ger2 .karte{border-radius:50% 50% 26px 26px / 34% 34% 22px 22px;text-align:center;padding:30px 22px;animation:schweb 5.5s ease-in-out infinite}
body.ger2 .karte:nth-child(2n){animation-delay:1.4s}body.ger2 .karte:nth-child(3n){animation-delay:2.6s}
@keyframes schweb{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ===== G3: Soft Dark ===== */
body.ger3{--sand:#1b2430;--text:#e8edf4;--text-leise:#aebac6;--linie:#334152}
body.ger3 .karte,body.ger3 .cta{background:#243040;color:#e8edf4;box-shadow:0 12px 30px rgba(0,0,0,.4)}
body.ger3 .karte h3,body.ger3 .cta h3{color:#9ed0bd}
body.ger3 .hero .frage{color:var(--salbei)}
body.ger3 .status.live{background:#1f3a33;color:#9ed0bd}
body.ger3 .status.kommt{background:#3a3222;color:#e5c07b}
body.ger3 .knopf-ghost{color:#e8edf4;background:rgba(255,255,255,.1)}
body.ger3 footer{color:#aebac6}
body.ger3 footer a{color:#9ed0bd}
body.ger3 section h2{color:#e8edf4}

/* ===== Umschalter-Pille (Farbwelt / Grundgeruest) ===== */
#gg-schalter{position:fixed;right:14px;bottom:14px;z-index:999;display:flex;gap:4px;align-items:center;
  background:rgba(255,255,255,.82);border-radius:999px;padding:5px 10px;box-shadow:0 6px 18px rgba(0,0,0,.14);backdrop-filter:blur(6px)}
body.ger3 #gg-schalter{background:rgba(36,48,64,.85)}
.ggbtn{border:0;background:transparent;cursor:pointer;font-weight:600;font-size:.72rem;font-family:inherit;
  color:var(--text);display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;opacity:.85}
.ggbtn:hover{opacity:1;background:rgba(0,0,0,.05)}
body.ger3 .ggbtn{color:#c3ced9}
.ggbtn .dots{display:inline-flex;gap:3px}
.ggbtn .dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;opacity:.4;transition:.25s}
.ggbtn .dots i.an{background:currentColor;opacity:1}
body.ger3 .hero h2,body.ger3 section h2{color:#e8edf4}
/* Franks Einheitlichkeits-Wunsch (28.09.): Boxen-Typografie vereinheitlicht */
.karte h3,.cta h3{font-size:1.25rem;line-height:1.35}
.karte p{font-size:.98rem;line-height:1.65}
.nl-freq.an{background:var(--wald);color:#fff;border-color:var(--wald)}
/* ===== G5: Leben (dunkel, mit Wellen-Navigation) ===== */
body.ger5{--sand:#0b1220;--text:#cbd5e1;--text-leise:#8fa0b3;--linie:#ffffff14;
  background:radial-gradient(700px 500px at 50% 24%,#16233d 0,#0b1220 62%)}
body.ger5 header{position:sticky;top:12px;z-index:50;margin:12px auto 0;width:fit-content;
  border-radius:999px;padding:10px 22px;background:#0e1626cc;backdrop-filter:blur(10px);
  border:1px solid var(--linie);color:#f1f5f9;box-shadow:0 10px 30px rgba(0,0,0,.45)}
body.ger5 header h1{font-size:1rem}
body.ger5 .hero h2{color:#f1f5f9;margin:0}
body.ger5 .hero p{color:#cbd5e1;position:relative}
body.ger5 .hero .frage{color:#9ed0bd}
body.ger5 .karte,body.ger5 .cta{background:#111a2ce6;border:1px solid var(--linie);color:#cbd5e1;
  border-radius:999px;padding:22px 44px;box-shadow:0 10px 30px rgba(0,0,0,.45);
  animation:zw-atmen 4s ease-in-out infinite}
body.ger5 .karte:nth-child(2n){animation-delay:1.3s}
body.ger5 .karte:nth-child(3n){animation-delay:2.5s}
body.ger5 .karte h3{color:#f1f5f9;font-size:1.05rem;margin:0 0 4px}
body.ger5 .karte h3::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;
  background:#4ade80;margin-right:9px;box-shadow:0 0 10px #4ade8088}
body.ger5 .karte p{font-size:.9rem;line-height:1.55;color:#9db0c3;margin:2px 0 0}
body.ger5 .status.live{background:#12291f;color:#7fe0a4}
body.ger5 .status.kommt{background:#2c2718;color:#e5c07b}
body.ger5 .cta h3{color:#f1f5f9}
body.ger5 .knopf{background:linear-gradient(120deg,var(--wald),color-mix(in srgb,var(--wald) 55%,#3b82f6));
  box-shadow:0 10px 24px color-mix(in srgb,var(--wald) 40%,transparent)}
body.ger5 .knopf-ghost{color:#e8edf4;background:rgba(255,255,255,.09)}
body.ger5 .nl-leiste{background:#111a2c;border-color:var(--linie)}
body.ger5 .nl-leiste{border-radius:999px;padding:14px 26px}
body.ger5 .nl-leiste .nl-titel{color:#9ed0bd}
body.ger5 .nl-leiste input[type=email]{background:#0e1626;color:#e8edf4;border-color:#334152}
body.ger5 .nl-rad input:checked + .nl-punkt{box-shadow:inset 0 0 0 2px #111a2c}
body.ger5 .nl-txt{color:#8fa0b3}
body.ger5 section h2{color:#e8edf4}
body.ger5 section .karte{background:#111a2c;color:#cbd5e1}
body.ger5 section .karte a{color:#9ed0bd}
body.ger5 footer{color:#8fa0b3}
body.ger5 footer a{color:#9ed0bd}
body.ger5 #gg-schalter{background:rgba(14,22,38,.85)}
body.ger5 .ggbtn{color:#c3ced9}
body.ger5 #ticketdlg{background:#111a2c;color:#cbd5e1;border-color:#334152}
body.ger5 .hero-standard{display:none}
body:not(.ger5) .streifen-copy{display:none}

/* Hero-Bereich (nur G5): Ueberschrift + Nutzen + Knopf, im normalen Fluss */
body.ger5 .hero-bereich{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:min(70vh,640px);padding:40px 10px 20px;position:relative;z-index:2}
body.ger5 .streifen-copy{max-width:640px;margin:0 auto}
body.ger5 .zweitel{color:#f1f5f9;font-size:clamp(1.9rem,5vw,3.2rem);line-height:1.2;margin:0 0 .5em;text-shadow:0 2px 10px #000}
body.ger5 .nutzen{color:#cbd5e1;font-size:clamp(1rem,2vw,1.2rem);max-width:600px;margin:0 auto;line-height:1.7}
body.ger5 .hero-knopf{display:inline-block;margin-top:1.4em}
body.ger5.pal2{--sand:#1b1410;--text:#e8ded0;--text-leise:#a89a88;
  background:radial-gradient(700px 500px at 50% 24%,#2a2016 0,#1b1410 62%)}
body.ger5.pal2 .karte,body.ger5.pal2 .cta,body.ger5.pal2 .nl-leiste{background:#241c14;color:#e8ded0}
body.ger5.pal2 .karte h3,body.ger5.pal2 .cta h3,body.ger5.pal2 section h2,body.ger5.pal2 .zweitel{color:#f1e8dc}
body.ger5.pal2 .karte p{color:#b3a493}
body.ger5.pal3{--sand:#f4f7f5;--text:#31403a;--text-leise:#5a6b62;
  background:radial-gradient(700px 500px at 50% 24%,#ffffff 0,#eef3f0 62%)}
body.ger5.pal3 .karte,body.ger5.pal3 .cta,body.ger5.pal3 .nl-leiste{background:#ffffff;color:#31403a;
  box-shadow:0 10px 30px rgba(47,125,95,.12)}
body.ger5.pal3 .karte h3,body.ger5.pal3 .cta h3,body.ger5.pal3 section h2,body.ger5.pal3 .zweitel{color:#1f2d26}
body.ger5.pal3 .zweitel{text-shadow:none}
body.ger5.pal3 .karte p{color:#5a6b62}
body.ger5.pal3 .nl-leiste .nl-titel{color:#31403a}
body.ger5.pal3 .nl-leiste input[type=email]{background:#f4f7f5;color:#31403a;border-color:#d8e2dc}
body.ger5.pal3 .zweitel{text-shadow:none}
body.ger5.pal3 .nutzen{color:#5a6b62}

/* Konfetti beim Klick auf eine Karte (Franks Idee: platzen -> Feuerwerk) */
.konfetto{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:9999;
  animation:konfetti-flug .9s ease-out forwards}
@keyframes konfetti-flug{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3);opacity:0}}
.karte.geplatzt{transform:scale(.9);opacity:.25}

/* Stufe 3: eine Inhaltsbreite, Statusfarben, Groessen */
body.ger5 .grid,body.ger5 .cta,body.ger5 .nl-leiste,body.ger5 section{max-width:800px;margin-left:auto;margin-right:auto}
body.ger5 section{text-align:center}
body.ger5 .nl-leiste{justify-content:center}
body.ger5 .status{font-size:.85rem;padding:3px 14px}
body.ger5 .status.angebot{background:#12233a;color:#93c5fd}
#nl-send{min-height:44px;padding:.7em 1.4em}
.nl-rad{padding:8px 4px}
body.ger5 footer{font-size:.9rem}

.li{width:20px;height:20px;vertical-align:-4px;fill:none;stroke:var(--wald);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:8px}
body.ger5 .li{stroke:#9ed0bd}

/* =====================================================================
   WELLEN-NAVIGATION (Streifen) – gilt fuer ALLE Grundgerueste
   Desktop: feste Seitenleiste links mit Welle + 5 Punkten
   Mobil/Touch (html.ist-mobil, automatisch erkannt): Hamburger-Menue,
   Punkte auf einer GERADEN Linie
   ===================================================================== */

/* --- Farben je Gerüst (hell = Standard) --- */
.streifen-hero{
  --s-band:color-mix(in srgb,var(--wald) 9%,transparent);
  --s-band-rand:color-mix(in srgb,var(--wald) 22%,transparent);
  --s-kante:var(--wald); --s-titel:var(--wald-dunkel); --s-nr:var(--wald);
  --s-panel:#fff; --s-panel-text:var(--text); --s-panel-titel:var(--wald-dunkel);
  --s-panel-link:var(--wald); --s-panel-rand:var(--linie); --s-drawer:var(--sand)}
body.ger3 .streifen-hero,body.ger5 .streifen-hero{
  --s-band:rgba(148,190,175,.13); --s-band-rand:rgba(255,255,255,.16);
  --s-kante:#9ed0bd; --s-titel:#e8edf4; --s-nr:#9ed0bd;
  --s-panel:rgba(13,20,35,.94); --s-panel-text:#9db0c3; --s-panel-titel:#f1f5f9;
  --s-panel-link:#9ed0bd; --s-panel-rand:#ffffff22; --s-drawer:#0e1626}
body.ger3 .streifen-hero{--s-panel:#243040;--s-drawer:#1b2430}
body.ger5.pal2 .streifen-hero{--s-panel:#241c14;--s-drawer:#1b1410}
body.ger5.pal3 .streifen-hero{
  --s-band:rgba(47,125,95,.08); --s-band-rand:rgba(47,125,95,.2);
  --s-kante:#2f7d5f; --s-titel:#2f5d50; --s-nr:#2f7d5f;
  --s-panel:#fff; --s-panel-text:#5a6b62; --s-panel-titel:#1f2d26;
  --s-panel-link:#2f7d5f; --s-panel-rand:#d8e2dc; --s-drawer:#f4f7f5}

/* --- Grundaufbau --- */
.streifen-hero{position:fixed;top:0;left:0;height:100vh;width:clamp(230px,24vw,330px);z-index:5}
html:not(.ist-mobil) body{padding-left:clamp(230px,24vw,330px)}
html:not(.ist-mobil) body.ger5 .streifen-hero{animation:sschweb 9s ease-in-out infinite}
@keyframes sschweb{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.streifen-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.band{fill:var(--s-band);stroke:var(--s-band-rand);stroke-width:1}
.band-kante{fill:none;stroke:var(--s-kante);stroke-width:1.5;opacity:.65}

/* --- Punkte --- */
.spunkt{position:absolute;transform:translate(-50%,-50%);z-index:6;text-align:left;cursor:pointer;
  white-space:nowrap;transition:transform .25s ease;outline:none}
.spunkt:hover,.spunkt:focus-visible{transform:translate(-50%,-50%) scale(1.06)}
.spunkt .snr{font-size:.7rem;color:var(--s-nr);letter-spacing:.25em}
.spunkt .stitel{font-size:clamp(.95rem,1.5vw,1.2rem);font-weight:700;color:var(--s-titel);letter-spacing:.04em;transition:text-shadow .3s}
body.ger5 .spunkt:hover .stitel{text-shadow:0 0 12px rgba(158,208,189,.55)}
.spunkt .slinie{width:2px;height:0;background:var(--s-kante);margin-top:6px;transition:height .3s ease;border-radius:2px}
.spunkt:hover .slinie,.spunkt:focus-visible .slinie,.spunkt.saktiv .slinie{height:26px}

/* --- Info-Fenster neben der Welle --- */
.sfenster{position:absolute;left:calc(100% + 20px);top:50%;transform:translateY(-50%) translateX(-14px);z-index:7;
  width:min(560px,52vw);background:var(--s-panel);color:var(--s-panel-text);border:1px solid var(--s-panel-rand);
  border-radius:18px;padding:22px 26px;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.sfenster.szeig{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.sfenster h3{color:var(--s-panel-titel);margin:0 0 8px;font-size:1.1rem}
.sfenster p{font-size:.92rem;line-height:1.6;margin:.4em 0}
.sfenster a{color:var(--s-panel-link);font-weight:600}
.sfenster .szu{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--s-panel-text);
  cursor:pointer;font-size:1rem;width:36px;height:36px;border-radius:50%}
.sfenster .szu:hover{background:rgba(127,127,127,.15)}

/* --- Beispiele-Spalte (Demos) --- */
#s-demo-spalte{position:absolute;left:calc(100% + 30px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:8}
#s-demo-spalte.szeig{opacity:1;pointer-events:auto}
.sthumb{display:flex;align-items:center;gap:10px;background:var(--s-panel);border:1px solid var(--s-panel-rand);
  border-radius:12px;padding:6px 14px 6px 6px;transition:transform .25s ease,border-color .25s ease;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.sthumb:hover{transform:scale(1.04);border-color:var(--s-kante)}
.sthumb img{width:96px;height:58px;object-fit:cover;border-radius:8px;display:block;background:color-mix(in srgb,var(--s-kante) 15%,transparent)}
.sthumb span{font-size:.85rem;color:var(--s-panel-titel);white-space:nowrap}

/* --- Demo-Vorschau (Vollbild) --- */
#s-vorschau{position:fixed;inset:0;z-index:400;background:rgba(4,8,16,.86);display:none;align-items:center;
  justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#s-vorschau.szeig{display:flex}
#s-vorschau .svo-box{width:92vw;height:88vh;background:#0b1220;border:1px solid #ffffff22;border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 60px #000c}
#s-vorschau .svo-kopf{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-bottom:1px solid #ffffff18}
#s-vorschau .svo-titel{color:#f1f5f9;font-weight:700;flex:1}
#s-vorschau .svo-kopf a{color:#9ed0bd;font-size:.9rem}
#s-vorschau .svo-kopf button{background:none;border:none;color:#cbd5e1;font-size:1.1rem;cursor:pointer;width:44px;height:44px}
#s-vorschau iframe{flex:1;width:100%;border:none;background:#fff}

/* --- Hamburger-Knopf --- */
#mobil-menu{display:none;position:fixed;top:12px;left:12px;z-index:70;width:44px;height:44px;border-radius:12px;
  background:rgba(13,20,32,.88);color:#e8edf4;border:1px solid rgba(255,255,255,.15);font-size:1.35rem;
  align-items:center;justify-content:center;cursor:pointer}

/* =====================  MOBIL / TOUCH  ===================== */
html.ist-mobil,html.ist-mobil body{overflow-x:hidden}
html.ist-mobil #mobil-menu{display:flex}
html.ist-mobil body header{margin:12px 12px 0 66px}
html.ist-mobil body.ger5 .hero-bereich{min-height:0;padding:34px 4px 18px}
html.ist-mobil body.ger5 .zweitel{font-size:clamp(1.7rem,8vw,2.4rem)}
/* Schublade */
html.ist-mobil .streifen-hero{display:none;height:auto;bottom:0;width:min(84vw,340px);z-index:60;overflow-y:auto;
  background:var(--s-drawer);padding:78px 20px 28px 26px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45),12px 0 40px rgba(0,0,0,.35);
  animation:schublade .25s ease-out}
html.ist-mobil .streifen-hero.mobil-offen{display:block}
@keyframes schublade{from{transform:translateX(-100%)}to{transform:translateX(0)}}
html.ist-mobil .streifen-svg{display:none}
/* gerade Linie mit Punkten statt Welle */
html.ist-mobil .spunkt{position:relative;left:auto !important;top:auto !important;transform:none !important;display:block;
  white-space:normal;padding:12px 0 12px 24px;border-left:2px solid color-mix(in srgb,var(--s-kante) 45%,transparent)}
html.ist-mobil .spunkt::before{content:'';position:absolute;left:-8px;top:50%;width:14px;height:14px;margin-top:-7px;
  border-radius:50%;background:var(--s-drawer);border:2px solid var(--s-kante);transition:background .2s}
html.ist-mobil .spunkt.saktiv::before{background:var(--s-kante)}
html.ist-mobil .spunkt .stitel{font-size:1.15rem}
html.ist-mobil .spunkt .slinie{display:none}
/* Info + Beispiele klappen direkt unter dem Punkt auf */
html.ist-mobil .sfenster{position:relative;left:auto;top:auto;transform:none;width:auto;margin:2px 0 10px 0;
  padding:16px 44px 14px 18px;display:none;opacity:1;pointer-events:auto;transition:none}
html.ist-mobil .sfenster.szeig{display:block;transform:none}
html.ist-mobil #s-demo-spalte{position:relative;left:auto;top:auto;transform:none;display:none;opacity:1;
  pointer-events:auto;gap:10px;margin:2px 0 10px 0;transition:none}
html.ist-mobil #s-demo-spalte.szeig{display:flex}
html.ist-mobil .sthumb{padding:5px 12px 5px 5px}
html.ist-mobil .sthumb img{width:72px;height:46px}
html.ist-mobil #s-vorschau .svo-box{width:100vw;height:100%;border-radius:0}
html.ist-mobil #gg-schalter{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 20px);flex-wrap:wrap}
html.ist-mobil body.menu-offen #gg-schalter{display:none}
.nl-hinweis{text-align:left}
body.ger5 .nl-hinweis{text-align:center;max-width:800px;margin-left:auto !important;margin-right:auto !important}

/* Neuigkeiten: Punkte als Bloecke, zentriert (16.10.) */
#neuigkeiten-liste{list-style:none;padding:0;display:grid;gap:10px;justify-items:center;margin:14px 0 0}
#neuigkeiten-liste li{display:block;background:var(--sand);border:1px solid var(--linie);border-radius:14px;
  padding:12px 20px;width:min(560px,100%);text-align:center;font-size:.98rem;box-shadow:0 2px 10px rgba(0,0,0,.06)}

/* Ueberschriften etwas heller (16.10., Franks Wunsch) */
body.pal1 .hero h2,body.pal1 .hero-standard h2,body.pal1 .zweitel{color:#3d6555}
body.pal1 section h2{color:#4a5a50}
body.pal2 .hero h2,body.pal2 .hero-standard h2,body.pal2 .zweitel{color:#2f5a80}
body.pal2 section h2{color:#3d5166}
body.pal3 .hero h2,body.pal3 .hero-standard h2,body.pal3 .zweitel{color:#a85f36}
body.pal3 section h2{color:#5f4e3e}