/* methodik_3d.css  3D Methodik unter /modell/methodik (WEB1 25.09.2026, vorher s3.css der Skizze): dunkler Raum, Leinwand als erster Abschnitt (100vh), darunter die Auswertung; P4 Rahmen, Blatt, Tour (Regeln aus methodik_entwurf/ent.css und ent_blatt.css, Knoepfe aus /css/glas.css). Nur Schibsted Grotesk, keine Schrift unter 11 px */
@font-face{font-family:'Schibsted Grotesk';src:url('/fonts/SchibstedGrotesk-var.woff2') format('woff2');font-weight:400 900;font-display:swap}
:root{--s3-raum:#06070B;--s3-text:#ECE8E1;--s3-dim:#A39E94;
  --bg:#FAFAF8;--white:#FFFFFF;--dark:#1A1A1A;--text:#2D2D2D;--text-muted:#6B7280;--text-dim:#9CA3AF;--border:#E8E5E0;--border-light:#F0EDE8;
  --uv-tinte:#0A0A0A;--uv-nebel:#C4BEB3;--uv-neu:#C8351A;--uv-aus:#9B9589;--uv-ndx:#A56466;--uv-spx:#A2694B;--uv-dji:#92743A;--uv-r1000:#708146;
  --uv-mid:#498865;--uv-nbi:#2C8986;--uv-nxtq:#35849D;--uv-spdaudp:#567BAA;--uv-spesg:#9F6480;--px:60px;--rand:28px;--max:1100px}
html,body{margin:0;background:var(--s3-raum);color:var(--s3-text);font-family:'Schibsted Grotesk',sans-serif;-webkit-font-smoothing:antialiased;height:100%;overflow:hidden;overscroll-behavior:none}   /* S2: keine Seite unter dem Universum */
.s3-rahmen{position:fixed;left:0;right:0;top:0;bottom:0;overflow:hidden;touch-action:none;background:var(--s3-raum);color:var(--s3-text)}   /* S2: Vollbild, ein Finger dreht, zwei zoomen; WEB1: zwischen Kopf und Fuss, s3_start.js misst beide */
/* WEB1 Huelle des Schaufensters: Kopf fest oben (css/schaufenster.css), Fuss fest unten, die Szene dazwischen, die Seite rollt nicht.
   Grund und Schrift der Huelle wie auf den anderen Seiten (Kopf, Fuss, Buchungsdialog erben sie), der Raum traegt seine eigenen.
   Die Einfuehrung der Website (#rgstart, js/schaufenster.js) zielt auf Abschnitte der alten Seite, die Szene hat ihre eigene (s3_tour.js) */
body.uv-methodik{background:var(--grund,#FFFFFF);color:var(--ink,#0A0A0A)}
body.uv-methodik .rg-start{color:rgba(236,232,225,.7);border-left-color:rgba(236,232,225,.18)}
body.uv-methodik .rg-start:hover{color:var(--s3-text)}
body.uv-methodik .rg-start::after{background:var(--s3-text)}
#uv-einfuehrung{display:none}   /* 26.09.: die Einfuehrung startet aus der Reiterzeile (#rgstart, s3_start.js), der Szenenknopf entfaellt */
body.uv-methodik .fuss{display:none}   /* WEB2 (26.09.2026, Nutzer): kein Fuss auf dieser Seite, das Bild ist geschlossen; Impressum ueber die Marke in zwei Klicks */
/* WEB2: Kopf durchsichtig ueber der Szene, dunkler Schleier nach unten auslaufend, helle Schrift; s3_start.js gibt dem Kopf glas-invers */
body.uv-methodik .kopf{background:linear-gradient(rgba(6,7,11,.94),rgba(6,7,11,.6) 55%,rgba(6,7,11,0));-webkit-backdrop-filter:none;backdrop-filter:none}
body.uv-methodik .kopf .lp-marke,body.uv-methodik .kopf .lp-wu{color:var(--s3-text)}
body.uv-methodik .rt{color:rgba(236,232,225,.55)}
body.uv-methodik .rt:hover{color:rgba(236,232,225,.85)}
body.uv-methodik .rt:focus-visible{outline-color:rgba(236,232,225,.6)}
body.uv-methodik .rt[aria-current="page"]{color:var(--s3-text)}
body.uv-methodik .rt[aria-current="page"]::after{background:var(--s3-text)}
@media (max-width:700px){body.uv-methodik .reiter{background-image:linear-gradient(to left,rgba(6,7,11,.9),rgba(6,7,11,0)),linear-gradient(to left,rgba(255,255,255,.14),rgba(255,255,255,0))}}
#universum{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#universum:active{cursor:grabbing}
/* ---------- P4 Rahmen ueber der Szene. Regeln aus methodik_entwurf/ent.css, fuer den dunklen Raum angepasst: die Schichten tragen
   glas-invers aus css/glas.css (Hauptaktion hell, Nebenaktion Schleier, nie dunkel auf dunkel) ---------- */
*{box-sizing:border-box}
button,input{font:inherit;color:inherit}
.glas.klein{padding:0 12px;min-height:var(--glas-wahl);font-size:12px}
.glas.wahl{padding:0 14px;min-height:var(--glas-wahl);font-size:13px}
.uv-paar{display:inline-flex;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.35);border:1px solid rgba(26,26,26,.08)}
.glas-invers .uv-paar{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.glas-invers .glas.wahl{background:var(--glas-schleier);color:var(--glas-papier);border-color:var(--glas-rand-tief);box-shadow:var(--glas-kante-tief)}
.glas-invers .glas.wahl[aria-pressed="true"]{background:var(--glas-hell);color:var(--glas-ink);border-color:var(--glas-rand-hell);box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf)}
/* Schichten ueber der Leinwand: nur Knoepfe, Chips und Regler nehmen Zeiger an, alles dazwischen gehoert der Leinwand */
.uv-schicht{position:absolute;z-index:2;pointer-events:none}
.uv-schicht [data-schutz]{pointer-events:auto}
.uv-oben{left:var(--px);right:var(--px);top:calc(var(--s3-oben,0px) + var(--rand));display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.uv-titel h1{margin:0;width:max-content;max-width:100%;font-size:56px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--s3-text)}
.uv-zahlen{margin:12px 0 0;width:max-content;max-width:100%;font-size:14px;line-height:18px;color:var(--s3-dim);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px}
.uv-zahlen:empty{display:none}
.uv-angabe{white-space:nowrap}
.uv-angabe+.uv-angabe{margin-left:14px;padding-left:14px;border-left:1px solid rgba(236,232,225,.24)}   /* S2: zwei Angaben, kein Satz */
.uv-zahlen b{font-weight:700;color:var(--s3-text)}
.uv-wahlzone{display:flex;align-items:center;gap:10px;flex:none;margin-top:6px}
#uv-einfuehrung{font-size:13px;padding:8px 14px}
.uv-unten{left:var(--px);right:var(--px);bottom:var(--rand);display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.uv-schluessel{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.uv-legende{display:grid;grid-template-columns:repeat(5,max-content);gap:6px}
html:not(.uv-tour-an) .uv-legende[hidden]{display:none!important}   /* S2: Chips nur bei Individuell, in der Tour sichtbar */
.uv-schicht .uv-legende{pointer-events:auto}   /* S2: Ecken und Luecken der Pillen fallen nicht mehr auf die Leinwand */
.glas.sek.uv-chip{justify-content:flex-start;gap:7px;font-size:12px;padding:6px 11px 6px 9px}
.uv-farbpunkt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 0 .5px rgba(255,255,255,.35)}
/* Aus: leerer Punkt, gestrichelter Rand wie die gestrichelte Bahn des grauen Planeten, Schrift gedaempft */
.glas-invers .glas.sek.uv-chip[aria-pressed="false"]{color:rgba(236,232,225,.52);background:rgba(255,255,255,.03);border:1px dashed rgba(155,149,137,.8);box-shadow:none}
.uv-chip[aria-pressed="false"] .uv-farbpunkt,.uv-uk[aria-pressed="false"] .uv-farbpunkt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--uv-aus)}
.uv-chip .uv-kurz{display:none}
.uv-fuss{display:flex;align-items:center;gap:16px}
.uv-nebelwort{margin:0;padding-left:1px;font-size:12px;line-height:16px;color:var(--s3-dim);white-space:nowrap}
.uv-nebelwort::before{content:"";display:inline-block;width:17px;height:9px;margin-right:7px;vertical-align:0;
  background:radial-gradient(circle at 2.8px 5.6px,var(--uv-nebel) 0,var(--uv-aus) 2.3px,transparent 2.8px),
    radial-gradient(circle at 8.6px 2.9px,var(--uv-nebel) 0,var(--uv-aus) 1.9px,transparent 2.4px),
    radial-gradient(circle at 14px 6px,var(--uv-nebel) 0,var(--uv-aus) 2.1px,transparent 2.6px)}
/* P5: dunkle Unterlage unter dem Schleier, damit Jahr und Knopf auch vor der Sonne im Nahbild lesbar bleiben */
.uv-regler{flex:none;display:flex;align-items:center;gap:14px;padding:5px 5px 5px 18px;border-radius:999px;background:linear-gradient(rgba(6,7,11,.46),rgba(6,7,11,.46)),var(--glas-schleier);
  border:1px solid var(--glas-rand-tief);box-shadow:var(--glas-kante-tief);-webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe)}
.uv-jahr{min-width:56px;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--s3-text);font-variant-numeric:tabular-nums}
.uv-ende{font-size:12px;color:var(--s3-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
#uv-play{min-width:92px}
.uv-regler input[type=range]{-webkit-appearance:none;appearance:none;width:180px;height:26px;margin:0;background:transparent;cursor:pointer}
.uv-regler input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--s3-text) 0,var(--s3-text) var(--p,100%),rgba(255,255,255,.2) var(--p,100%),rgba(255,255,255,.2) 100%)}
.uv-regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;background:var(--s3-text);border:2px solid var(--s3-raum);box-shadow:0 0 0 .5px rgba(255,255,255,.4)}
.uv-regler input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:rgba(255,255,255,.2)}
.uv-regler input[type=range]::-moz-range-progress{height:2px;border-radius:2px;background:var(--s3-text)}
.uv-regler input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--s3-text);border:2px solid var(--s3-raum)}
.uv-regler input[type=range]:focus{outline:none}
.uv-regler input[type=range]:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px;border-radius:999px}

/* Glashinweis: ein Satz, kurz sichtbar (Zoom beim Rad, Universum aus), ohne Schutzzone */
.uv-hinweis{position:absolute;left:50%;bottom:calc(var(--rand) + 70px);z-index:5;max-width:min(560px,calc(100% - 32px));
  padding:10px 16px;border-radius:999px;background:var(--glas-hell);border:1px solid var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf);-webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe);
  font-size:13px;font-weight:600;line-height:1.35;color:var(--glas-ink);text-align:center;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.uv-hinweis.uv-an{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s ease,transform .22s ease}

/* Etikett an jedem Planeten wie die 2D Vorlage (P5): Name, darunter die Zahl im Portfolio oder "nicht im Portfolio"; folgt dem Planeten je Bild */
.s3-etiketten{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;clip-path:inset(var(--s3-oben,0px) 0 0 0)}   /* WEB2: Etiketten enden am Kopf */
.s3-etikett{position:absolute;left:0;top:0;text-align:center;white-space:nowrap;font-size:12px;line-height:1.35;color:var(--s3-dim);
  text-shadow:0 1px 3px rgba(0,0,0,.85);opacity:0;transition:opacity .3s ease}
.s3-etikett b{display:block;font-weight:700;color:var(--s3-text)}
.s3-etikett.an{opacity:1}
.s3-etikett span{display:block}
.s3-etikett.aus b{color:var(--s3-dim)}
/* R5 Blatt gross: Ebene rechts, 520 px breit, volle Hoehe, innen scrollbar. Stil des Kurzprofils aus P4 (helles Glas, schliessbar).
   Offen rueckt der Rahmen oben und unten nach links (ab 1200 px), damit Wahl, Einfuehrung, Chips und Regler frei bleiben */
:root{--blatt-b:520px;--blatt-rand:14px}
.s3-blatt{position:absolute;z-index:6;top:calc(var(--s3-oben,0px) + var(--blatt-rand));right:var(--blatt-rand);bottom:var(--blatt-rand);width:min(var(--blatt-b),calc(100% - 2 * var(--blatt-rand)));
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--glas-ecke-karte);background:var(--glas-hell);
  border:1px solid var(--glas-rand-hell);box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf-karte);
  -webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe);color:var(--glas-ink);
  opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s}
.s3-blatt.offen{opacity:1;visibility:visible;transform:none;transition:opacity .26s ease,transform .26s ease}
.s3-blatt [hidden]{display:none!important}
.s3-blatt-griff{display:none}
.s3-blatt-x{position:absolute;top:14px;right:14px;z-index:2;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;
  color:var(--text-muted);font:400 22px/32px 'Schibsted Grotesk',sans-serif;cursor:pointer}
.s3-blatt-x:hover{background:rgba(10,10,10,.06);color:var(--glas-ink)}
.s3-blatt-x:focus-visible{outline:2px solid rgba(10,10,10,.55);outline-offset:2px}
.s3-blatt-rolle{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px 24px;scrollbar-width:thin;scrollbar-color:rgba(10,10,10,.22) transparent}
.s3-blatt-kopf{padding-right:40px}
.s3-blatt-art{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--text-muted)}
.s3-blatt-titel{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--dark);outline:none}
.s3-blatt-unter{margin:5px 0 0;font-size:13px;line-height:1.4;color:var(--text-muted)}
.s3-blatt-unter:empty{display:none}
.s3-abschnitt{margin-top:14px;padding-top:12px;border-top:1px solid rgba(10,10,10,.08)}
.s3-abschnitt h3{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--text-muted)}
.s3-abschnitt p{margin:0;font-size:14px;line-height:1.55;color:var(--text);text-wrap:pretty}
.s3-abschnitt[data-teil=grund] p{font-size:15.5px;color:var(--dark)}
.s3-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid rgba(10,10,10,.08);border-radius:14px;background:rgba(10,10,10,.07)}
.s3-kacheln.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.s3-k{min-width:0;padding:10px 12px 11px;background:rgba(255,255,255,.74)}
.s3-k.breit{grid-column:span 2}
.s3-k small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--text-muted)}
.s3-k b{display:block;margin-top:3px;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--dark);font-variant-numeric:tabular-nums}
.s3-liste{display:grid;margin:0}
.s3-liste>div{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:14px;padding:7px 0;border-top:1px solid rgba(10,10,10,.06)}
.s3-liste>div:first-child{border-top:0;padding-top:0}
.s3-liste dt{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:13px;font-weight:600;line-height:1.45;color:var(--dark)}
.s3-liste dd{margin:0;font-size:13px;line-height:1.45;color:var(--text)}
.s3-farbe{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);transform:translateY(-1px)}
.s3-leer{font-size:13px!important;color:var(--text-muted)!important}
.s3-chart{position:relative;width:100%}
.s3-chart-e{height:168px}
.s3-chart-d{height:180px}
.s3-abschnitt h3.s3-h-dd{margin-top:6px}
.s3-folgt{padding:22px 0 18px;text-align:center;font-size:14px!important;font-weight:600;color:var(--text-muted)!important}
.s3-stand,.s3-fenster{margin:8px 0 0!important;font-size:12px!important;line-height:1.4!important;color:var(--text-muted)!important}
.s3-marken{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.s3-marke{padding:4px 10px;border-radius:999px;border:1px solid rgba(10,10,10,.08);background:rgba(10,10,10,.05);font-size:12.5px;font-weight:500;color:var(--dark)}
.s3-sinn{display:grid;gap:3px;margin:14px 0 0;padding:0;list-style:none}
.s3-sinn li{font-size:15.5px;font-weight:650;line-height:1.35;color:var(--dark)}
.s3-lede{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--text);text-wrap:pretty}
@media (min-width:1200px){
  .s3-rahmen .uv-oben,.s3-rahmen .uv-unten{transition:right .26s ease}
  .s3-rahmen.s3-blatt-auf .uv-oben,.s3-rahmen.s3-blatt-auf .uv-unten{right:calc(var(--blatt-b) + var(--blatt-rand) + 24px)}
  .s3-rahmen.s3-blatt-auf .uv-legende{grid-template-columns:repeat(3,max-content)}
  .s3-rahmen.s3-blatt-auf .uv-ende{display:none}
  .s3-rahmen.s3-blatt-auf .uv-regler input[type=range]{width:140px}
}

/* Tour: Optik des Rundgangs der Website (css/schaufenster.css .rg-*, Karte wie .rg-karte in css/glas.css) */
.uv-tour{position:fixed;inset:0;z-index:150;display:none}
.uv-tour.an{display:block}
.uv-tour.frei{pointer-events:none}   /* S4: Sonnenblatt in der Tour offen, Blatt, Kreuz und Szene nehmen den Zeiger */
.uv-tour.frei .uv-tour-karte{pointer-events:auto}
.uv-tour-loch,.uv-tour-puls{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:16px;pointer-events:none;
  transition:left .34s cubic-bezier(.22,.61,.36,1),top .34s cubic-bezier(.22,.61,.36,1),width .34s cubic-bezier(.22,.61,.36,1),
    height .34s cubic-bezier(.22,.61,.36,1),border-radius .34s ease}
.uv-tour-loch{box-shadow:0 0 0 3px rgba(255,255,255,.45),0 0 0 9999px rgba(10,10,10,.52)}
.uv-tour-puls{border:1px solid transparent}
.uv-tour-puls.schlag{border-color:rgba(255,255,255,.8);animation:uv-tour-puls 1s ease-out both}
@keyframes uv-tour-puls{from{transform:scale(1);opacity:.85}to{transform:scale(1.035);opacity:0}}
.uv-tour-karte{position:fixed;top:0;left:0;width:min(340px,calc(100vw - 32px));padding:16px 18px 14px;
  border-radius:var(--glas-ecke-karte);background:var(--glas-hell);border:1px solid var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf-karte);-webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe);
  opacity:0;transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease,left .34s cubic-bezier(.22,.61,.36,1),top .34s cubic-bezier(.22,.61,.36,1)}
.uv-tour-karte.da{opacity:1;transform:none}
.uv-tour-t{padding-right:26px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--dark)}
.uv-tour-b{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:rgba(10,10,10,.62)}
.uv-tour-fuss{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 14px;margin-top:16px}
.uv-tour-punkte{display:flex;align-items:center;gap:5px}
.uv-tour-p{width:6px;height:6px;border-radius:999px;background:rgba(10,10,10,.16);transition:width .26s ease,background .26s ease}
.uv-tour-p.ab{background:rgba(10,10,10,.34)}
.uv-tour-p.an{width:18px;background:var(--glas-ink)}
.uv-tour-knoepfe{display:flex;align-items:center;gap:8px}
.glas.uv-tour-weiter{padding:8px 18px;font-size:13.5px}
.glas.uv-tour-aus{padding:7px 13px;font-size:13px}
.uv-tour-x{position:absolute;top:8px;right:9px;width:26px;height:26px;padding:0;border:0;border-radius:999px;background:transparent;
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;color:rgba(10,10,10,.38);cursor:pointer;transition:background .18s,color .18s}
.uv-tour-x:hover{background:rgba(10,10,10,.06);color:var(--glas-ink)}
.uv-tour-x:focus-visible{outline:2px solid var(--glas-fokus);outline-offset:2px}





/* Auswertungsblatt: ent_blatt.css unveraendert */
.uv-blatt{max-width:var(--max);margin:0 auto;padding:40px var(--px) 28px}
/* hidden wirkt immer, auch gegen .glas und die Raster dieses Blatts */
.uv-blatt [hidden]{display:none!important}

.uv-blatt-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:16px}
.uv-was{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--dark);outline:none}
.uv-was small{display:block;margin-top:4px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--text-muted)}
.uv-blatt-knoepfe{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.uv-bench{display:flex;align-items:center;gap:10px}
.uv-bench-wort{font-size:13px;color:var(--text-muted)}
.uv-kasse{margin:2px 0 0;font-size:15px;line-height:1.55;color:var(--text)}

.uv-blatt-leib{transition:opacity .2s ease}
.uv-blatt-leib.uv-wartet{opacity:.45}

/* Bilder: Equity oben, Drawdown unten, eine Karte, eine Zeitachse */
.uv-bilder{border:1px solid var(--border);border-radius:16px;background:var(--white);overflow:hidden;touch-action:pan-y pinch-zoom}
.uv-feld{padding:14px 16px 4px}
.uv-feld+.uv-feld{border-top:1px solid var(--border-light);padding-top:12px}
.uv-chart-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;margin-bottom:4px;
  font-size:12px;font-weight:600;color:var(--text-muted)}
.uv-legende-chart{display:flex;gap:16px;font-weight:500}
.uv-legende-chart i{display:inline-block;width:16px;height:2px;border-radius:1px;margin-right:7px;vertical-align:middle;background:var(--c)}
.uv-flaeche{position:relative}
.uv-flaeche canvas{display:block;width:100%}
#uv-equity{height:360px}
#uv-drawdown{height:170px}

/* Fadenkreuz: Faden und Punkte je Bild, Marke in dunklem Glas wie das Schwebeetikett des Universums */
.uv-faden,.uv-punkt,.uv-lupe{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .12s ease}
.uv-faden{width:1px;margin-left:-.5px;background:rgba(26,26,26,.26)}
.uv-punkt{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--uv-tinte);box-shadow:0 0 0 2px var(--white)}
.uv-punkt-b{background:var(--text-dim)}
.uv-lupe{display:grid;grid-template-columns:auto auto;column-gap:18px;row-gap:1px;padding:8px 11px 9px;border-radius:10px;
  background:rgba(26,26,26,.92);color:var(--white);font-size:12px;line-height:1.45;white-space:nowrap;
  box-shadow:0 8px 24px rgba(26,26,26,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.uv-lupe b{grid-column:1/-1;margin-bottom:3px;font-weight:700}
.uv-lupe span{color:#cfcac2}
.uv-lupe .uv-w{color:var(--white);font-weight:600;text-align:right}
.uv-lupe.uv-band{grid-template-columns:auto auto minmax(8px,1fr) auto auto;column-gap:8px;padding:6px 11px 7px;line-height:1.4;
  grid-template-areas:"d d . n3 v3" "n1 v1 . n2 v2"}
.uv-lupe.uv-band b{grid-area:d;margin:0}
.uv-band span:nth-of-type(1){grid-area:n1}.uv-band span:nth-of-type(2){grid-area:v1}
.uv-band span:nth-of-type(3){grid-area:n2}.uv-band span:nth-of-type(4){grid-area:v2}
.uv-band span:nth-of-type(5){grid-area:n3}.uv-band span:nth-of-type(6){grid-area:v3}
.uv-kreuz .uv-faden,.uv-kreuz .uv-punkt,.uv-kreuz .uv-lupe{opacity:1}

/* Kacheln: sechs Felder in einer Karte, die Haarlinien kommen aus dem Rasterabstand */
.uv-kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:14px;background:var(--border-light);
  border:1px solid var(--border);border-radius:16px;overflow:hidden}
.uv-k{min-width:0;padding:16px 18px 17px;background:var(--white)}
.uv-k small{display:block;font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.uv-k b{display:block;margin-top:8px;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--dark);white-space:nowrap}

/* Profil nur bei Strategie: Grundgedanke als Vorspann ueber die volle Breite, darunter Datenbasis und Mechanik */
.uv-profil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px;margin-top:14px;padding:22px 24px 24px;
  background:var(--white);border:1px solid var(--border);border-radius:16px}
.uv-p-grund{grid-column:1/-1;margin-bottom:18px;padding-bottom:20px;border-bottom:1px solid var(--border-light)}
.uv-p small{display:block;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--text-muted)}
.uv-p p{max-width:64ch;margin:0;font-size:14.5px;line-height:1.6;color:var(--text);text-wrap:pretty}
.uv-p-grund p{max-width:70ch;font-size:17px;line-height:1.6;color:var(--dark)}

.uv-stand{margin:14px 2px 0;font-size:13px;line-height:1.5;color:var(--text-muted)}

@media (max-width:999px){.uv-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .uv-blatt{padding:30px var(--px) 22px}
  .uv-blatt-kopf{align-items:flex-start;margin-bottom:14px}
  .uv-was{font-size:20px}
  .uv-feld{padding:12px 12px 2px}
  .uv-legende-chart{gap:12px}
  #uv-equity{height:250px}
  #uv-drawdown{height:160px}
  .uv-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uv-k{padding:14px 14px 15px}
  .uv-k b{font-size:23px}
  .uv-profil{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:18px 16px 20px}
  .uv-p-grund{margin-bottom:0;padding-bottom:18px}
  .uv-p-grund p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.uv-blatt-leib,.uv-faden,.uv-punkt,.uv-lupe{transition:none}}

/* Schmale Fenster (ent.css): Knopf Auswertung unter 1340 px in der Zeile, Legende drei Spalten; Telefon gestapelt, Blatt als Bogen von unten */
@media (max-width:1180px){.uv-legende{grid-template-columns:repeat(3,max-content)}}
@media (max-width:1000px){:root{--px:32px}.uv-titel{flex:1 1 auto;min-width:0}.uv-zahlen{width:auto}.uv-ende{display:none}.uv-regler input[type=range]{width:140px}}
@media (max-width:900px){.uv-legende{display:flex;flex-wrap:wrap;gap:5px}.glas.sek.uv-chip{padding:6px 10px 6px 9px;gap:5px}.uv-regler input[type=range]{width:120px}}
@media (max-width:760px){
  :root{--px:16px;--rand:16px}
  .glas.sek.uv-chip{padding:6px 9px 6px 8px;font-size:13px}
  .uv-legende{gap:4px}
  .uv-oben{flex-direction:column;align-items:stretch;gap:12px}
  .uv-titel h1{font-size:32px}
  .uv-zahlen{width:max-content;margin-top:8px;font-size:12px;line-height:16px}
  .uv-wahlzone{justify-content:space-between;gap:8px;margin-top:0}
  .uv-paar{gap:3px;padding:3px}
  .uv-paar .glas.wahl{font-size:12px;padding:0 11px}
  #uv-einfuehrung{font-size:12px;padding:6px 12px}
  .uv-hinweis{border-radius:16px}
  .uv-fuss{align-self:stretch;flex-wrap:wrap;justify-content:flex-start;row-gap:8px}
  .uv-tour-karte{width:calc(100vw - 28px);padding:12px 14px 11px}
  .uv-tour-t{font-size:14.5px}
  .uv-tour-b{margin-top:4px;font-size:13px}
  .uv-tour-knoepfe{flex-wrap:wrap;row-gap:8px}
  .uv-tour-fuss{margin-top:12px}
  .glas.uv-tour-weiter{padding:7px 16px;font-size:13px}
  .uv-unten{flex-direction:column;align-items:stretch;gap:12px}
  .uv-schluessel{gap:8px}
  .uv-regler{padding:3px 3px 3px 16px;gap:12px}
  .uv-regler input[type=range]{flex:1;width:auto;min-width:0;height:44px}
  .uv-jahr{font-size:22px;min-width:50px}
  .s3-blatt{left:0;right:0;top:auto;bottom:0;width:auto;height:50%;border-radius:22px 22px 0 0;border-bottom:0;
    transform:translateY(105%);transition:transform .32s cubic-bezier(.22,.61,.36,1),height .3s cubic-bezier(.22,.61,.36,1),opacity .2s ease,visibility 0s linear .32s}
  .s3-blatt.offen{transform:none;transition:transform .32s cubic-bezier(.22,.61,.36,1),height .3s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
  .s3-blatt.hoch{height:calc(100% - var(--s3-oben,0px) - 10px)}
  .s3-blatt.zieht{transition:none}
  .s3-blatt-griff{display:block;flex:none;position:relative;height:24px;touch-action:none;cursor:grab}
  .s3-blatt-griff::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(10,10,10,.22)}
  .s3-blatt-x{top:12px;right:10px}
  .s3-blatt-rolle{padding:2px 16px 26px}
  .s3-blatt-titel{font-size:19px}
  .s3-k{padding:9px 10px 10px}
  .s3-k b{font-size:17px}
  .s3-chart-e{height:160px}
  .s3-chart-d{height:176px}
}
@media (prefers-reduced-motion:reduce){.uv-hinweis,.uv-tour-loch,.uv-tour-puls,.uv-tour-karte,.s3-blatt,.s3-etikett,.glas.uv-zumblatt{transition:none}.uv-tour-puls.schlag{animation:none}}

/* R6 Tour: Etikett am herangezoomten Objekt, Linie vom Rand des Objekts zur Karte, Punkt am Objekt */
.uv-tour-linie{position:fixed;left:0;top:0;width:0;height:1.5px;display:none;pointer-events:none;transform-origin:0 50%;
  background:rgba(255,255,255,.82);box-shadow:0 0 6px rgba(0,0,0,.4)}
.uv-tour-linie::before{content:"";position:absolute;left:-3px;top:-2.25px;width:6px;height:6px;border-radius:999px;background:#fff}
/* S3 Sonnenblatt Portfolio (s3_auswertung.js im Blatt): Abschnitte wie die anderen Blaetter, Jahresraster, Tafel, Indizes, Rechtshinweis */
.s3-aw [hidden]{display:none!important}
.s3-aw-satz{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--text)}
.s3-aw .s3-chart-e{height:220px}
.s3-aw .s3-chart-d{height:204px}
.s3-chart-r{height:160px}
.s3-abschnitt p.s3-aw-hin{margin:-4px 0 10px;font-size:12px;line-height:1.45;color:var(--text-muted)}
.s3-aw-jahre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid rgba(10,10,10,.08);border-radius:14px;background:rgba(10,10,10,.08)}
.s3-aw-j{min-width:0;padding:7px 10px 8px;background:rgba(255,255,255,.74)}
.s3-aw-j small{display:block;font-size:11.5px;font-weight:600;color:var(--text-muted)}
.s3-aw-j b{display:block;margin-top:1px;font-size:14px;font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums}
.s3-aw-tafel{overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.s3-aw-tafel table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.35;color:var(--text);font-variant-numeric:tabular-nums}
.s3-aw-tafel th,.s3-aw-tafel td{padding:6px 0 6px 10px;text-align:right;white-space:nowrap}
.s3-aw-tafel th:first-child,.s3-aw-tafel td:first-child{padding-left:0;text-align:left}
.s3-aw-tafel thead th{padding-top:0;font-size:11px;font-weight:600;white-space:normal;vertical-align:bottom;color:var(--text-muted)}
.s3-aw-tafel tbody td{border-top:1px solid rgba(10,10,10,.06)}
.s3-aw-tafel td.s3-aw-tiefe{font-weight:700;color:var(--dark)}
.s3-aw-indizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin:0;padding:0;list-style:none}
.s3-aw-indizes li{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;line-height:1.4;color:var(--dark)}
.s3-aw-recht{margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(10,10,10,.08);font-size:12px;line-height:1.45;color:var(--text-muted)}
@media (max-width:760px){.s3-aw .s3-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}.s3-aw-jahre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s3-aw .s3-chart-e{height:160px}.s3-aw .s3-chart-d{height:176px}.s3-chart-r{height:150px}.s3-aw-tafel th,.s3-aw-tafel td{padding-left:7px}}
/* Telefon schmal: die Spalte Erholt am entfaellt (Datum folgt aus Hoechststand plus Dauer bis zur Erholung), sonst ragt die Tafel ueber den Bogen */
@media (max-width:420px){.s3-aw-tafel th:nth-child(6),.s3-aw-tafel td:nth-child(6){display:none}}

/* S5: FAQ auf der Aktienindex Karte, Frage ueber Antwort */
.s3-faq>div{grid-template-columns:minmax(0,1fr);gap:4px}
.s3-faq dt{font-size:13px}
.s3-faq dd{color:var(--text-muted)}

/* Letzter Schritt aus der Kette der Website (28.09.2026, Nutzerbefund): "Weiter zur Performance" ist allein rund 220 px breit, mit
   Zurueck und Schliessen lief die Knopfgruppe rund 100 px aus der Karte. Dann steht Weiter ueber die volle Breite, darunter die Punkte
   links, Zurueck und Schliessen rechts, wie der Rundgang der Website am Telefon. Die Karte wird nicht breiter. s3_tour.js zeigen() */
.uv-tour-karte.lang .uv-tour-fuss{justify-content:flex-end;gap:10px 8px}
.uv-tour-karte.lang .uv-tour-knoepfe{display:contents}
.uv-tour-karte.lang .glas.uv-tour-weiter{order:-1;flex:1 1 100%;justify-content:center;text-align:center}
.uv-tour-karte.lang .uv-tour-punkte{margin-right:auto}

/* Sonnenblatt: der erste Satz sagt, wie das Portfolio entsteht (28.09.2026, Nutzer). s3_auswertung.js GERUEST */
.s3-aw-wf{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--text)}