/* ============================================================================
   Intelligenz pro Watt
   ----------------------------------------------------------------------------
   Formsprache von qds.ch: eine Schrift (Instrument Sans), schwarz, weiss, grau
   und ein einziger Akzent in Rot. Kontrast und Groesse tragen die Bedeutung,
   nicht Farbe.

   Der einzige Zusatz gegenueber qds.ch sind vier Reihenfarben fuer die
   Diagramme. Ein Datenteil braucht unterscheidbare Reihen, sonst waere die
   Farbe nicht lesbar. Die vier sind gegen die Kartenflaeche geprueft:
   Helligkeitsband, Buntheit, Unterscheidbarkeit bei Rot-Gruen-Schwaeche und
   Kontrast. Rot fuehrt, weil es der Akzent der Marke ist.

   Lesbarkeit: Fliesstext 17px, Nebentext nie unter 13px, Beschriftung nie
   unter 11.5px, kein Text unter 4.5:1 Kontrast.
   Kein Build, keine Fremdbibliothek.
   ========================================================================== */

:root{
  --bg:#0A0A0C;
  --bg-2:#0F0F12;
  --flaeche:#141418;
  --flaeche-2:#1C1C21;
  --raster:#2A2A31;
  --raster-2:#1E1E24;
  --kante:inset 0 1px 0 rgba(255,255,255,.055);
  --linie:rgba(255,255,255,.2);
  --linie-2:rgba(255,255,255,.34);

  --txt:#F7F7F8;
  --txt-2:#BCBDC2;
  --txt-3:#8B8C93;

  --mw:1480px;
  /* Zwei Abstaende, mehr nicht: --lueck zwischen Karten und Bloecken
     innerhalb eines Kapitels, --sek zwischen den Abschnitten. Vorher
     standen dafuer drei verschiedene clamp-Werte im Stylesheet und die
     Karten hatten auf dem Telefon 12, 14, 20 und 39 Pixel Abstand. */
  --lueck:clamp(16px,1.8vw,24px);
  --sek:clamp(64px,7vw,120px);
  --gutter:clamp(20px,4vw,64px);
  --nav-h:76px;
  --r:14px;
  --r-gross:20px;
  --ease:cubic-bezier(.22,.7,.18,1);

  --t-seite:clamp(40px,6.4vw,104px);
  --t-kapitel:clamp(27px,3.2vw,50px);
  --t-tafel:clamp(19px,1.9vw,26px);
  --t-karte:clamp(17px,1.5vw,21px);

  /* Instrument Sans traegt weder chinesische noch japanische noch
     Devanagari-Zeichen; Kyrillisch bringt es mit. Die Rueckfallkette nennt
     darum die Systemschriften, die sie haben. Sie greift nur dort, wo ein
     Zeichen fehlt, und laesst den Rest der Seite unberuehrt. */
  --sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,
         'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',
         'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',
         'Devanagari Sangam MN','Nirmala UI','Noto Sans Devanagari',sans-serif;

  /* Akzent der Marke */
/* === Akzentfarbe: eine Zahl aendert die ganze Seite =====================
     `--akz-ton` ist der Farbton in Grad. 355 ist das Rot, mit dem die Seite
     gebaut wurde; 150 ergibt Gruen, 210 Blau, 30 Orange. Saettigung und
     Helligkeit jeder Stufe bleiben, wo sie sind: sie waren gegen die
     Kartenflaeche auf Kontrast geprueft, und genau diese Abstufung traegt
     die Diagramme. Sonst steht auf der ganzen Seite keine Akzentfarbe mehr,
     weder im Stylesheet noch im Globus noch im Symbol im Browsertab. */
  --akz-ton:150;

  --akz:hsl(var(--akz-ton) 100% 37%);
  --akz-tief:hsl(var(--akz-ton) 100% 28%);
  --akz-hell:hsl(var(--akz-ton) 91% 54%);
  --akz-fuss:#FFFFFF;
  --akz-06:hsl(var(--akz-ton) 100% 37% / .10);
  --akz-12:hsl(var(--akz-ton) 100% 37% / .18);
  /* Halbdurchsichtige Stufen, die vorher als feste rgba-Werte dastanden */
  --akz-hell-32:hsl(var(--akz-ton) 91% 54% / .32);
  --akz-hell-42:hsl(var(--akz-ton) 91% 54% / .42);
  --akz-hell-45:hsl(var(--akz-ton) 91% 54% / .45);
  --akz-null:hsl(var(--akz-ton) 100% 37% / 0);

  /* Reihenfarben der Diagramme. --s1 traegt das Thema, der Rest ist Grau:
     unterschieden wird ueber Helligkeit, nicht ueber Farbton. */
  --s1:hsl(var(--akz-ton) 71% 49%);
  --s2:#F2F3F6;   /* Grau 1, hell */
  --s2b:#C2C4CC;  /* Grau 2 */
  --s3:#A9ABB4;   /* Grau 3 */
  --s4:#63656F;   /* Grau 4, dunkel */
  --s1-tief:hsl(var(--akz-ton) 67% 33%);
  --s1-hell:hsl(var(--akz-ton) 84% 76%);
  --s1-32:hsl(var(--akz-ton) 71% 49% / .32);

  /* Fuenfstufige Rampe fuer die Laenderflaechen auf dem Globus und ihre
     Legende. Der Globus liest sie von hier, er kennt keine eigene Farbe. */
  --rampe-1:hsl(var(--akz-ton) 67% 33%);
  --rampe-2:hsl(var(--akz-ton) 65% 42%);
  --rampe-3:hsl(var(--akz-ton) 62% 53%);
  --rampe-4:hsl(var(--akz-ton) 74% 65%);
  --rampe-5:hsl(var(--akz-ton) 84% 76%);

  color-scheme: dark;
}

*{box-sizing:border-box}
/* Steht vor allen Bausteinen: sonst setzt eine spaetere display-Regel
   (etwa .globusLegende{display:flex}) das hidden-Merkmal ausser Kraft. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.menuOffen{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,svg,canvas{display:block;max-width:100%}
::selection{background:rgba(255,255,255,.22);color:#fff}
:focus-visible{outline:2px solid var(--akz-hell);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--mw);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;padding:14px 18px;background:#fff;color:#0A0A0B;
  font-weight:600;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ===== Schrift ============================================================= */
h1,h2,h3{margin:0;font-weight:600;line-height:1.08;overflow-wrap:break-word}
h1{font-size:var(--t-seite);letter-spacing:-.042em;line-height:.98;font-weight:700}
h2{font-size:var(--t-kapitel);letter-spacing:-.032em;line-height:1.07}
h3{font-size:var(--t-tafel);letter-spacing:-.022em;line-height:1.24}
p{margin:0}
.lead{font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--txt-2)}
.copy{font-size:16px;line-height:1.66;color:var(--txt-2)}
.copy+.copy{margin-top:14px}
.marke{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--akz-hell);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.marke.matt{color:var(--txt-3)}
.zahl{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.matt{color:var(--txt-3)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;background:rgba(255,255,255,.07);
  padding:1px 6px;border-radius:5px}

/* ===== Kopfzeile =========================================================== */
.kopf{position:fixed;inset:0 0 auto;z-index:900;height:var(--nav-h);
  background:rgba(10,10,12,.78);backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.kopf.tief{border-bottom-color:var(--linie);background:rgba(10,10,12,.94)}
.kopfInner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.wortmarke{display:flex;align-items:center;gap:10px;flex:none}
/* Umkehrung des Symbols im Browsertab: dort dunkle Flaeche und heller Blitz,
   hier helle Flaeche und dunkler Blitz. Beide nehmen --akz-hell, nicht --akz:
   auf der dunkleren Stufe kaeme der Blitz nur auf 2.9:1 und wuerde bei 26
   Pixeln zulaufen. */
.wortmarke svg{width:26px;height:26px}
.wortmarke .flaeche{fill:var(--akz-hell)}
.wortmarke .blitz{fill:var(--bg)}
.wortmarke b{font-size:16px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}

/* Gruppen statt zehn Einzellinks. Aufbau, Masse und Umschaltverhalten
   uebernommen aus .navGroup in ilearnweb, nur die Farben kommen aus dem
   dunklen Satz. Zehn Punkte brauchten 720px in einer Zeile, vier Gruppen
   brauchen 330px. */
.navi{display:flex;align-items:center;min-width:0}
.naviGruppen{display:flex;align-items:center;gap:2px}
.naviGruppe{position:relative}
.naviKnopf{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:9px;
  font-size:14px;font-weight:500;color:var(--txt-2);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.naviKnopf:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.naviGruppe.offen .naviKnopf,.naviGruppe.hier .naviKnopf{background:rgba(255,255,255,.08);color:var(--txt)}
.naviPfeil{width:14px;height:14px;flex:none;transition:transform .25s var(--ease)}
.naviGruppe.offen .naviPfeil{transform:rotate(180deg)}
.naviMenu{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;z-index:20;
  display:grid;gap:2px;width:max-content;min-width:262px;max-width:340px;padding:8px;
  border-radius:18px;background:var(--flaeche);border:1px solid var(--linie);
  box-shadow:0 30px 60px -30px #000,var(--kante);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease)}
.naviGruppe.offen .naviMenu{opacity:1;visibility:visible;transform:none}
/* Die letzte Gruppe wuerde mittig zentriert rechts aus der Leiste laufen. */
.naviGruppe:last-of-type .naviMenu{left:auto;right:0;translate:none}
.naviMenu a{display:block;padding:10px 12px;border-radius:12px;color:var(--txt-2);
  transition:background .2s var(--ease)}
.naviMenu a b{display:block;font-size:14px;font-weight:600;color:var(--txt);line-height:1.3}
.naviMenu a span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--txt-3)}
.naviMenu a:hover{background:rgba(255,255,255,.06)}
.naviMenu a.hier{background:var(--akz-06)}
.naviMenu a.hier b{color:var(--akz-hell)}
.naviLabel,.naviFuss{display:none}

.kopfAktion{display:flex;align-items:center;gap:10px;flex:none}
.sprachen{display:flex;gap:2px;border:1px solid var(--linie);border-radius:9px;padding:2px}
/* Sprachauswahl. Traegt sieben Sprachen, wo eine Knopfreihe nur zwei trug. */
/* Live-Anzeige und Sprachwahl stehen in der Kopfzeile nebeneinander und muessen
   gleich hoch sein und auf derselben Linie sitzen. Ohne feste Hoehe ergibt sie
   sich aus Schriftgroesse und Polster, und die sind verschieden (13 gegen
   12.5px, 7 gegen 8px Polster): gemessen 36.8 gegen 38px, Oberkanten 0.6px
   versetzt. Darum eine gemeinsame Hoehe, das Polster wirkt nur noch seitlich. */
.standKnopf,.sprachWahl{height:38px}
.sprachWahl{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238B8C93' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid var(--linie);border-radius:9px;padding:0 30px 0 11px;
  font:inherit;font-size:13px;font-weight:500;color:var(--txt-2);cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.sprachWahl:hover{border-color:var(--linie-2);color:var(--txt)}
.sprachWahl option{background:var(--flaeche);color:var(--txt)}
.naviFuss .sprachWahl{width:100%;margin-top:10px}
.sprachen button{padding:5px 9px;border-radius:7px;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--txt-3);transition:background .2s var(--ease),color .2s var(--ease)}
.sprachen button[aria-pressed=true]{background:var(--txt);color:var(--bg)}
.sprachen button:hover{color:var(--txt)}

.standKnopf{display:flex;align-items:center;gap:8px;padding:0 13px;border-radius:9px;
  border:1px solid var(--linie);font-size:12.5px;font-weight:500;color:var(--txt-2);white-space:nowrap}
.standKnopf i{width:7px;height:7px;border-radius:50%;background:var(--txt-3);flex:none}
.standKnopf.live i{background:#2FBF71;box-shadow:0 0 0 0 rgba(47,191,113,.6);animation:puls 2.4s infinite}
.standKnopf.speicher i{background:var(--s3)}
.standKnopf.fehler i{background:var(--akz-hell)}
.standKnopf:hover{border-color:var(--linie-2);color:var(--txt)}
@keyframes puls{70%{box-shadow:0 0 0 7px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}

.menuTaste{display:none;flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--linie);
  background:rgba(255,255,255,.06);flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.menuTaste:hover{border-color:var(--linie-2);background:rgba(255,255,255,.1)}
.menuTaste span{display:block;width:17px;height:2px;background:var(--txt);border-radius:2px;
  transition:transform .28s var(--ease),opacity .18s var(--ease)}
.menuTaste.offen span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuTaste.offen span:nth-child(2){opacity:0}
.menuTaste.offen span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.balken{position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--akz)}

/* ===== Schaltflaechen ====================================================== */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:10px;
  font-size:15px;font-weight:600;border:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.knopf.klein{padding:9px 15px;font-size:13.5px}
.knopf.rand{border-color:var(--linie-2);color:var(--txt)}
.knopf.rand:hover{border-color:var(--akz-hell);color:var(--akz-hell);background:var(--akz-06)}
.knopf[disabled]{opacity:.5;pointer-events:none}

.spielKnopf{width:40px;height:40px;flex:none;border-radius:999px;border:1px solid var(--linie-2);
  display:grid;place-items:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.spielKnopf svg{width:15px;height:15px;fill:var(--txt)}
.spielKnopf .pause{display:none}
.spielKnopf.an .play{display:none}
.spielKnopf.an .pause{display:block}
.spielKnopf:hover{border-color:var(--akz-hell);background:var(--akz-06)}
.spielKnopf.gross{width:46px;height:46px}

/* ===== Kapitel ============================================================= */
/* Die Luft über einem Kapitel steht als Aussenabstand und nicht als
   Innenabstand. Das ist der Unterschied zwischen einem Anker, der überall
   gleich sitzt, und einem, der mal stimmt und mal 120px zu tief landet:
   ein Sprungziel richtet sich am Rahmen des Abschnitts aus, und der
   Innenabstand läge innerhalb davon. Die frühere Regel `.kap + .kap` hat
   ausserdem nur gegriffen, solange zwei Kapitel direkt aufeinander folgten,
   und genau das tun sie seit den Anschauungs-Bändern nicht mehr. */
main section[id]{scroll-margin-top:calc(var(--nav-h) + 40px)}
.kap{padding:0;margin-top:var(--sek)}
main>section:last-of-type{margin-bottom:clamp(64px,7vw,120px)}
.kapRegel{display:flex;align-items:center;gap:16px;padding-bottom:clamp(12px,1.4vw,18px)}
.kapRegel .nr{font-size:11.5px;font-weight:600;letter-spacing:.13em;color:var(--akz-hell);
  font-variant-numeric:tabular-nums}
.kapRegel .name{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.kapKopf{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;padding-bottom:clamp(24px,3vw,44px)}
.kapKopf h2{max-width:22ch}
.kapKopf .lead{max-width:62ch}

.auf{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body.bereit .auf{opacity:1;transform:none}

/* ===== Einstieg ============================================================ */
/* Einstieg auf eine Bildschirmhoehe, Aufbau wie der Hero auf qds.ch:
   min-height 100svh, gleiche Polster. Der Text steht oben buendig, nicht
   mittig: so wandert der kleine Titel nicht, wenn Livedaten die Textlaenge
   aendern, und er beginnt auf derselben Hoehe wie «Qualität. Daten.
   Standards.» auf qds.ch. */
.held{min-height:100svh;display:flex;align-items:flex-start;position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(20px,2vw,28px)}
.held::before{content:"";position:absolute;inset:-20% -10% auto auto;width:min(900px,80vw);height:min(900px,80vw);
  background:radial-gradient(circle,var(--akz-12),transparent 62%);pointer-events:none}
.heldInner{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3vw,52px);align-items:start}
.heldText{min-width:0;padding-top:28px}
.held h1{margin:12px 0 16px;display:flex;flex-wrap:wrap;gap:0 .26em;align-items:baseline;font-size:clamp(40px,6vw,96px)}
.held h1 .h1b{color:var(--txt-3);font-weight:400;font-size:.52em;letter-spacing:-.02em}
.held h1 .h1c{color:var(--akz-hell)}
.heldText .lead{max-width:56ch;margin-bottom:20px}

/* Flache Bildschirme (Laptops mit 720 bis 800 Pixel Hoehe): Titel, Lead und
   Hauptwert eine Stufe kleiner, damit der Einstieg auch dort auf eine
   Bildschirmhoehe passt. Nur auf dem Rechner, wo die Kugel neben dem Text steht. */
@media(min-width:1241px) and (max-height:820px){
  .held h1{font-size:clamp(40px,5vw,80px)}
  .heldText .lead{font-size:16px;margin-bottom:16px}
  .hzWert.gross{font-size:clamp(32px,3.6vw,48px)}
  .hzNote{font-size:11px}
}

/* Ein Hauptwert, darunter eine schmale Reihe. Kein Kasten mit Kleintext:
   der Einstieg soll auf einen Blick lesbar sein und ins Bild passen. */
.heldZahlen{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.hzTitel{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-3);line-height:1.35}
.hzWert{font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  color:var(--txt)}
.hzWert.gross{display:block;font-size:clamp(36px,4.2vw,56px);letter-spacing:-.045em;
  color:var(--txt);margin-top:6px}
.hzBalkenZeile{display:flex;align-items:center;gap:14px;margin-top:10px;max-width:520px}
.hzBalkenZeile span{font-size:11.5px;color:var(--txt-3);white-space:nowrap}
.hzBalken{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.hzBalken i{display:block;height:100%;width:0;background:var(--akz-hell);border-radius:2px}
.hzReihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  padding-top:14px;border-top:1px solid var(--linie)}
.hzReihe div{min-width:0}
.hzReihe b{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.025em;
  color:var(--txt);line-height:1.15}
.hzReihe span{display:block;font-size:12px;line-height:1.4;color:var(--txt-3);margin-top:4px}
.hzNote{font-size:11.5px;line-height:1.45;color:var(--txt-3);max-width:none}

/* Globus. Die Kugel steht allein auf ihrer Buehne; Ansichten, Lesezeile und
   Legende folgen darunter, damit nichts die Kugel verdeckt. Die Leinwand ist
   in der Hoehe an die Bildschirmhoehe gebunden: Einstieg minus Kopfzeile,
   Polster und die drei Zeilen darunter. Sie bleibt in der Breite voll, die
   Kugel nutzt die Hoehe, seitlich bleibt Platz fuer Fahnen. */
.heldGlobus{position:relative;width:100%;max-width:660px;justify-self:center;display:flex;flex-direction:column;gap:10px}
.globusBuehne{position:relative}
#globus{display:block;width:100%;height:auto;aspect-ratio:1/1;touch-action:none;cursor:grab;
  max-height:calc(100svh - var(--nav-h) - clamp(28px,4vw,56px) - clamp(28px,3vw,44px) - 150px)}
#globus:active{cursor:grabbing}
.globusLese{margin:0;font-size:13px;line-height:1.5;color:var(--txt-2);text-align:center;min-height:1.5em}
.globusLese b{font-weight:600;color:var(--txt)}
/* Zwei Zeilen reserviert: die Legende der Infrastrukturansicht braucht sie,
   die Werteansichten eine. Ohne Reserve spraenge die Spalte beim Umschalten. */
.globusLegende{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:5px 16px;
  font-size:11.5px;line-height:1.35;color:var(--txt-3);min-height:36px}
.globusLegende span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.globusLegende .pkt{width:8px;height:8px;border-radius:50%;flex:none}
.globusLegende .pkt.akz{background:var(--akz-hell);box-shadow:0 0 8px var(--akz)}
.globusLegende .pkt.hell{background:var(--txt-2)}
.globusLegende .pkt.strich{width:14px;height:0;border-radius:0;border-top:1px dashed rgba(255,255,255,.55);background:transparent}
.globusLegende .pkt.halb{background:linear-gradient(90deg,var(--txt-2) 50%,var(--raster) 50%)}
.globusLegende .pkt.grau{background:#4A4A52}
.globusLegende .rampe{width:96px;height:6px;border-radius:3px;flex:none;
  background:linear-gradient(90deg,var(--rampe-1),var(--rampe-2),var(--rampe-3),var(--rampe-4),var(--rampe-5))}
.globusModi{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.globusModi button{font-size:12px;font-weight:500;color:var(--txt-2);border:1px solid var(--linie);
  border-radius:999px;padding:7px 13px;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.globusModi button:hover{border-color:var(--linie-2);color:var(--txt)}
.globusModi button[aria-pressed=true]{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.globusKarte{position:absolute;pointer-events:none;z-index:5;background:rgba(10,10,12,.95);
  border:1px solid var(--linie-2);border-radius:12px;padding:10px 13px 11px;width:252px;font-size:13px;
  box-shadow:0 22px 50px -22px #000}
.globusKarte b{display:block;font-size:14.5px;font-weight:600;color:var(--txt);margin-bottom:3px;line-height:1.25}
.globusKarte b.akz{color:var(--akz-hell)}
.globusKarte span{display:block;color:var(--txt-2);font-size:12.5px;line-height:1.45}
.globusKarte em{display:block;font-style:normal;font-size:11.5px;color:var(--txt-3);margin-top:4px;line-height:1.4}
.globusKarte .zeile{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;line-height:1.5;color:var(--txt-2)}
.globusKarte .zeile i{font-style:normal;color:var(--txt-3);min-width:0}
.globusKarte .zeile b{display:inline;font-size:12.5px;margin:0;white-space:nowrap}
.globusKarte .zeile.matt b{color:var(--txt-3);font-weight:500}
.globusKarte hr{border:0;border-top:1px solid var(--linie);margin:7px 0 6px}
.globusKarte .klein{display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-3);margin-top:2px;line-height:1.4}
.globusKarte .wert{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--txt);line-height:1.35}
.globusKarte .wert i{font-style:normal;font-size:12px;font-weight:500;color:var(--txt-3)}

/* Regler, einheitlich */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:22px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.14)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--akz-hell);border:3px solid var(--bg);margin-top:-7px;box-shadow:0 0 0 1px var(--linie-2)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--akz-hell);
  border:3px solid var(--bg);box-shadow:0 0 0 1px var(--linie-2)}

/* ===== Anschauung =========================================================
   Baender zwischen den Kapiteln. Kein Kasten, sondern ein Flaechenwechsel
   ueber die ganze Breite: sie sollen als Pause gelesen werden, nicht als
   weitere Karte. */
/* Der Abstand ueber dem Bandinhalt ist --sek plus Polster, der darunter
   Polster plus --sek des naechsten Kapitels. Nur wenn beide Seiten
   dieselbe Skala benutzen, ist das Band mittig im Raum. */
.anschauung{background:var(--bg-2);padding:clamp(44px,5vw,76px) 0;
  margin-top:var(--sek)}
.anInner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(26px,3.4vw,58px);align-items:center}
.anInner.anBreit{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.anText h3{margin:14px 0 12px;max-width:20ch}
.anText .copy{max-width:52ch}
.anText .quelle{margin-top:14px}
.anBild{min-width:0}
.anKopf{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}

/* Menschenraster: ein Punkt sind so viele Menschen, wie daneben steht. */
/* Ein geordneter Block mit fester Spaltenzahl statt einem Umbruch nach
   Breite: so liest sich das Raster als Menge, nicht als Zufall. Jeder
   zehnte Punkt ist heller, das gibt dem Auge einen Zaehltakt. */
.menschRaster{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:7px}
.menschRaster i{display:block;aspect-ratio:1/1;border-radius:50%;background:var(--akz)}
.menschRaster i:nth-child(10n){background:var(--akz-hell)}
/* Die grosse Zahl im Band: Wert und ein Satz, der sagt, was sie ist. */
.anZahl{margin:6px 0 16px}
.anZahl b{display:block;font-size:clamp(40px,4.6vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--txt)}
.anZahl span{display:block;margin-top:10px;font-size:15px;line-height:1.5;color:var(--txt-2);max-width:40ch}

/* Der Weg einer Anfrage: vier Glieder, das dritte traegt alles.
   Die Glieder haengen an einer durchgehenden Linie auf Hoehe der Ziffern.
   Die Linie liegt hinter den Karten und ist nur in den Luecken sichtbar,
   das ergibt eine saubere Kette ohne gebastelte Pfeile. */
.wegKette{position:relative;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wegKette::before{content:"";position:absolute;z-index:0;left:0;right:0;top:32px;height:1px;
  background:var(--linie-2)}
.wegGlied{position:relative;z-index:1;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r);padding:18px 16px 19px;box-shadow:var(--kante)}
/* 18px Innenabstand plus halbe Kreishoehe (14px) ergibt die 32px der Linie. */
.wegGlied .wegNr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--linie-2);background:var(--flaeche);
  font-size:13px;font-weight:600;line-height:1;color:var(--txt-2);margin-bottom:14px}
.wegGlied b{display:block;font-size:15px;font-weight:600;line-height:1.3;margin-bottom:6px}
.wegGlied span{display:block;font-size:12.5px;line-height:1.55;color:var(--txt-3)}
.wegGlied.stark{border-color:var(--akz-hell-42);background:
  radial-gradient(420px 170px at 50% 0%,var(--akz-12),transparent),var(--flaeche)}
.wegGlied.stark .wegNr{background:var(--akz);border-color:var(--akz);color:#fff}
.wegGlied.stark b{color:var(--txt)}
.wegGlied.stark span{color:var(--txt-2)}

/* Gigawatt: ein Block je angekuendigtem Gigawatt. */
.gwStapel{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end}
.gwStapel i{display:block;width:22px;height:54px;border-radius:5px;transform-origin:50% 100%;
  background:linear-gradient(180deg,var(--akz-hell),var(--akz));
  opacity:calc(.55 + .45 * var(--v))}

@media(max-width:900px){
  .anInner,.anInner.anBreit{grid-template-columns:1fr;gap:24px}
  .wegKette{grid-template-columns:1fr 1fr}
  /* Ueber zwei Zeilen hinweg verbindet eine waagrechte Linie nichts mehr. */
  .wegKette::before{display:none}
}
@media(max-width:520px){
  .wegKette{grid-template-columns:1fr}
  .menschRaster{gap:5px;grid-template-columns:repeat(20,minmax(0,1fr))}
  .gwStapel i{width:18px;height:44px}
}

/* ===== Karten und Raster =================================================== */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:clamp(18px,2vw,26px);margin:0;min-width:0;box-shadow:var(--kante)}
.karte.klein{padding:16px}
figcaption{display:block;font-size:var(--t-karte);font-weight:600;letter-spacing:-.02em;color:var(--txt);
  margin-bottom:5px;line-height:1.25}
.cap{font-size:13.5px;line-height:1.55;color:var(--txt-2);margin-bottom:16px;max-width:76ch}
.quelle{font-size:12px;line-height:1.55;color:var(--txt-3);margin-top:14px}
.quelle a{color:var(--txt-2);border-bottom:1px solid var(--linie)}
.quelle a:hover{color:var(--akz-hell);border-color:var(--akz-hell)}
.leerNote{font-size:13.5px;color:var(--txt-3);padding:26px 0;max-width:52ch}
/* align-items:start, damit eine kurze Karte neben einer langen nicht auf
   deren Hoehe gestreckt wird und unten eine grosse Leerflaeche entsteht. */
.raster2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lueck);align-items:start}
.raster3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lueck);align-items:start}

.legende{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:12.5px;color:var(--txt-2)}
.legende.hoch{flex-direction:column;gap:7px}
.legende span{display:flex;align-items:center;gap:8px}
.legende i{width:11px;height:11px;border-radius:3px;flex:none}

/* Kennzahlen */
/* Kennzahlenkacheln. Jede Kachel ist ein Raster aus vier Zeilen:
   Beschriftung, Wert, Text, Stand. Die dritte Zeile dehnt sich, damit der
   Stand in allen Kacheln einer Reihe auf derselben Hoehe steht, auch wenn
   die Texte unterschiedlich lang sind. */
.kpiReihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:2px;
  border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden;background:var(--linie)}
.kpi{background:var(--flaeche);padding:18px;display:grid;grid-auto-rows:auto;
  grid-template-columns:minmax(0,1fr);
  gap:5px;min-width:0;align-content:start}
/* Die dehnbare Zeile nur dort, wo es einen Beschreibungstext gibt. Sonst
   haengt unter der Zahl eine leere Flaeche. */
.kpi:has(.kpiNote){grid-template-rows:auto auto 1fr auto}
.kpi .marke{line-height:1.4}
/* Traegt eine Reihe erklaerende Texte, brauchen die Kacheln deutlich mehr
   Breite: bei 200px brachen die Titel dreizeilig um und die Werte standen
   auf verschiedenen Hoehen. */
.kpiReihe.rand,.kpiReihe.text{border:0;border-radius:0;background:none;
  gap:var(--lueck)}
/* Sechs Kacheln: 340px ergeben drei Spalten und damit zwei volle Zeilen. */
.kpiReihe.rand{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
/* Vier Kacheln: 300px ergeben eine einzige volle Zeile. */
.kpiReihe.text{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.kpiReihe.rand .kpi,.kpiReihe.text .kpi{border:1px solid var(--linie);border-radius:var(--r);
  padding:20px 20px 18px;box-shadow:var(--kante);background:var(--flaeche)}
.kpi.gross{padding:22px}
.kpiWert{font-size:clamp(25px,2.4vw,32px);font-weight:700;letter-spacing:-.035em;line-height:1.05;
  color:var(--txt);margin-top:4px}
.kpiWert small{font-size:.46em;font-weight:500;color:var(--txt-2);margin-left:6px;letter-spacing:0}
.kpiNote{font-size:13px;line-height:1.55;color:var(--txt-2)}
.kpiStand{font-size:11.5px;line-height:1.6;color:var(--txt-3);padding-top:12px;
  margin-top:6px;border-top:1px solid var(--linie)}
.kpiStand a{color:var(--txt-3);border-bottom:1px solid var(--linie)}
.kpiStand a:hover{color:var(--akz-hell);border-color:var(--akz-hell)}

/* ===== Buehne fuer das Punktraster ========================================= */
.buehne{display:grid;grid-template-columns:330px minmax(0,1fr);gap:clamp(20px,2.4vw,36px);
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:clamp(18px,2.2vw,28px);box-shadow:var(--kante)}
.buehneSeite{display:flex;flex-direction:column;min-width:0}
.reiter{display:flex;flex-direction:column;gap:6px}
.reiter button{display:flex;align-items:center;gap:12px;text-align:left;font-size:14px;font-weight:500;
  color:var(--txt-2);border:1px solid var(--linie);border-radius:11px;padding:11px 14px;
  transition:all .2s var(--ease)}
.reiter button em{font-style:normal;font-size:11.5px;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--linie-2);flex:none;font-variant-numeric:tabular-nums}
.reiter button:hover{color:var(--txt);border-color:var(--linie-2)}
.reiter button[aria-selected=true]{color:var(--txt);background:var(--akz-06);border-color:var(--akz-hell-45)}
.reiter button[aria-selected=true] em{background:var(--akz);color:#fff;border-color:var(--akz)}
.buehneText{margin:22px 0 16px;min-height:150px}
.dGross{font-size:clamp(30px,3.4vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.dGross.akzent{color:var(--akz-hell)}
.buehneText p{font-size:14.5px;line-height:1.6;color:var(--txt-2);margin-top:12px}
.buehneLegende{font-size:12px;line-height:1.7;color:var(--txt-3);margin-top:auto;padding-top:20px}
.buehneLegende a{color:var(--txt-2);border-bottom:1px solid var(--linie)}
.buehneLegende a:hover{color:var(--akz-hell);border-color:var(--akz-hell)}
.buehneLegende span{display:flex;align-items:center;gap:9px}
.buehneLegende i{width:11px;height:11px;border-radius:50%;flex:none}
.buehneLegende b{margin-left:auto;font-size:12.5px;color:var(--txt);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.buehneKopf{display:flex;justify-content:space-between;margin-bottom:14px}

/* Anteilsleiste. Ersetzt ein Feld aus dreitausend Punkten, das den halben
   Abschnitt fuellte und beim Hineinschauen blendete. */
.band{display:flex;height:64px;border-radius:10px;overflow:hidden;gap:2px;
  background:var(--raster-2)}
.band .bandTeil{display:block;height:100%;min-width:2px;cursor:help}
.band .bandTeil.betont{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bandMarken{position:relative;margin-top:12px;min-height:52px}
/* Liste statt Beschriftung unter den Segmenten, auf schmalen Geraeten. */
.bandListe{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.bandListe span{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:baseline}
.bandListe i{width:11px;height:11px;border-radius:3px}
.bandListe b{font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.3}
.bandListe em{font-style:normal;font-size:12px;color:var(--txt-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* Die Kurve sitzt direkt unter der Leiste, im selben Kasten. Als eigene
   Karte daneben blieb rechts eine leere Flaeche stehen. */
.buehneKurve{margin:clamp(18px,2vw,28px) 0 0;padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--linie)}
.buehneKurve figcaption{font-size:var(--t-karte)}
.bandMarke{position:absolute;top:0;display:block}
.bandMarke b{display:block;font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.3;
  overflow-wrap:break-word}
.bandMarke em{display:block;font-style:normal;font-size:12px;color:var(--txt-3);
  font-variant-numeric:tabular-nums;margin-top:1px}
.bandMarke.innen{padding-right:14px}
/* Schmale Segmente: Beschriftung an einem Strich, sonst ueberlagern sie sich. */
.bandMarke.aussen{transform:translateX(-50%);white-space:nowrap;padding-top:16px}
.bandMarke.aussen::before{content:"";position:absolute;left:50%;top:0;width:1px;height:12px;
  background:var(--linie-2)}
.bandMarke.aussen[style*="right"]::before{left:auto;right:8px}
.bandMarke.aussen i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.bandMarke.aussen b{display:inline}
.bandMarke.aussen em{display:block;margin-left:15px}
@media(max-width:700px){
  .band{height:52px}
  .bandMarken{min-height:74px}
  .bandMarke b{font-size:12.5px}
}

/* ===== Tafel mit Zellen ===================================================
   Das Muster der Leistungen auf qds.ch: eine Tafel mit Rand und Rundung,
   innen durch Linien in Zellen geteilt, keine Karte in der Karte. Die Linien
   sind der Hintergrund, der durch die 1px-Luecken scheint. */
.tafelRaster{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);
  border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--kante)}
.tafelZeile{display:grid;gap:1px;background:var(--linie);min-width:0}
.tafelZeile.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.tafelZeile.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.tafelZeile.sechs{grid-template-columns:repeat(6,minmax(0,1fr))}
.tafelZelle{background:var(--flaeche);padding:clamp(18px,2vw,26px);min-width:0;margin:0}
.tafelZelle > .quelle:last-child{margin-top:12px}
.tafelRaster .kpi{padding:18px 18px 16px}
.tafelRaster .kpi .marke{min-height:2.8em;line-height:1.4}
.tafelRaster .landSatz{margin:0}
/* Umbruch der Zellen. Steht hier, nach den Grundregeln: eine Regel im
   Media-Query weiter oben in der Datei verloere gegen die Grundregel. */
@media(max-width:900px){
  .tafelZeile.zwei,.tafelZeile.drei{grid-template-columns:1fr}
  .tafelZeile.sechs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:520px){
  .tafelZeile.sechs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* In schmalen Spalten frisst die Sperrschrift den Platz: lange Woerter wie
   «KI-Veroeffentlichungen» ragten sonst aus der Kachel. */
@media(max-width:760px){
  .tafelRaster .kpi .marke{letter-spacing:.07em}
}

/* Drei Sichten auf dieselbe Leiste: Nummer, Titel, Kennzahl, Satz. Die
   gewaehlte hat einen etwas helleren Grund, roten Kreis und weissen Titel;
   keine Kante, keine Linie. */
.sicht{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;
  background:var(--flaeche);padding:clamp(18px,2vw,24px);min-width:0;cursor:pointer;
  transition:background .2s var(--ease)}
.sicht:hover,.sicht[aria-selected=true]{background:var(--flaeche-2)}
.sichtNr{font-size:11.5px;font-weight:600;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linie-2);color:var(--akz-hell);font-variant-numeric:tabular-nums}
.sicht[aria-selected=true] .sichtNr{background:var(--akz);border-color:var(--akz);color:#fff}
.sichtTitel{font-size:14px;font-weight:600;color:var(--txt-2);line-height:1.3}
.sicht[aria-selected=true] .sichtTitel{color:var(--txt)}
.sichtWert{font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--txt)}
.sichtWert.akzent{color:var(--akz-hell)}
.sichtText{font-size:13.5px;line-height:1.55;color:var(--txt-3)}
.sicht[aria-selected=true] .sichtText{color:var(--txt-2)}

/* Laenderfeld: alle Laender auf einer logarithmischen Achse */
.feldSvg{display:block;width:100%;height:auto;overflow:visible}
.feldSvg text{font-family:var(--sans)}
.feldSvg .strich{stroke:var(--txt-3);stroke-width:1.2;opacity:.55}
.feldSvg .wahl{stroke:var(--akz-hell);stroke-width:3}
.feldSvg .welt{stroke:var(--txt);stroke-width:1;stroke-dasharray:3 3}
.feldSvg .achse{stroke:var(--linie)}
.feldSvg .tick{fill:var(--txt-3);font-size:11px}
.feldSvg .name{fill:var(--txt);font-size:12.5px;font-weight:600}
.feldSvg .name.matt{fill:var(--txt-2);font-weight:500}

/* ===== Land =============================================================== */
.landZeile{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;
  scroll-margin-top:calc(var(--nav-h) + 28px)}
.feld{display:flex;flex-direction:column;gap:7px;min-width:min(380px,100%)}
.feld select{appearance:none;background:var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23BCBDC2' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid var(--linie);border-radius:11px;padding:13px 42px 13px 15px;font-size:15.5px;
  color:var(--txt);cursor:pointer;width:100%}
.feld select:hover{border-color:var(--linie-2)}
.rangMarke{font-size:13px;color:var(--txt-3);padding-bottom:14px;white-space:nowrap}
.landSatz{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--txt);font-weight:500;
  border-left:2px solid var(--akz);padding-left:18px;max-width:78ch}

/* ===== Leiter ============================================================= */
.leiter{display:flex;flex-direction:column;gap:6px}
.leiZeile{display:grid;grid-template-columns:238px minmax(0,1fr);gap:16px;align-items:center;padding:3px 0}
.leiName b{display:block;font-weight:500;font-size:14px;line-height:1.3}
.leiName span{font-size:11.5px;color:var(--txt-3)}
.leiSpur{position:relative;height:24px;display:flex;align-items:center}
.leiSpur i{display:block;height:100%;border-radius:0 5px 5px 0;min-width:3px}
.leiZeile.ki .leiSpur i{background:linear-gradient(90deg,var(--s1-32),var(--s1))}
.leiZeile.ref .leiSpur i{background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.3))}
.leiSpur em{font-style:normal;font-size:12.5px;font-weight:600;margin-left:10px;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--txt-2)}
.leiZeile:hover .leiName b{color:var(--akz-hell)}
.leiAchse{position:relative;height:22px;margin-left:254px;border-top:1px solid var(--linie);margin-top:8px}
.leiAchse span{position:absolute;transform:translateX(-50%);top:6px;font-size:11.5px;color:var(--txt-3);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* ===== Rechner ============================================================ */
.rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden}
.rechnerEin{background:var(--flaeche);padding:clamp(20px,2.2vw,28px)}
.rechnerEin h3{margin:8px 0 22px}
.regler{display:block;margin-bottom:18px}
.regler span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;
  color:var(--txt-2);margin-bottom:6px}
.regler i{font-style:normal}
.regler b{color:var(--txt);font-weight:600}
.regler input{width:100%;margin:0;display:block}
.rechnerAus{background:linear-gradient(150deg,var(--akz-12),rgba(255,255,255,.02) 62%),var(--flaeche-2);
  padding:clamp(20px,2.2vw,28px);border-left:1px solid var(--linie)}
.rechnerGross b{font-size:clamp(42px,5.4vw,66px);font-weight:700;letter-spacing:-.045em;line-height:1;
  color:var(--akz-hell);display:block}
.rechnerGross span{display:block;font-size:14px;color:var(--txt-2);margin-top:6px}
.rechnerRaster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:24px 0 18px}
.rechnerRaster b{display:block;font-size:21px;font-weight:600;letter-spacing:-.025em}
.rechnerRaster span{font-size:12.5px;color:var(--txt-3);line-height:1.4}
.rechnerMix{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px;background:rgba(255,255,255,.07)}
.rechnerMix i{display:block;height:100%;transition:flex-grow .4s var(--ease)}

/* ===== Einsicht =========================================================== */
.einsicht{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;
  border:1px solid var(--akz-hell-32);border-radius:var(--r-gross);padding:clamp(20px,2.4vw,30px);
  background:radial-gradient(640px 220px at 0% 50%,var(--akz-12),transparent),var(--flaeche)}
.einsichtZahl{font-size:clamp(38px,5.2vw,68px);font-weight:700;letter-spacing:-.045em;color:var(--akz-hell);
  line-height:1;white-space:nowrap}
.einsicht h3{margin-bottom:10px}
/* Steht die Einsicht neben einem Diagramm statt ueber die ganze Breite,
   stapelt sie sich, sonst wird die Zahl zur Saeule gequetscht. */
.einsicht.hoch{grid-template-columns:1fr;align-items:start;gap:14px}

/* ===== Querbalken ========================================================= */
.bal{display:flex;flex-direction:column;gap:11px}
/* Alle Zeilen gleich hoch, auch wenn ein Name doch zweizeilig wird: sonst
   sitzen die Balken in unterschiedlichem Abstand und die Reihe wirkt schief. */
.balZeile{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) minmax(64px,auto);gap:14px;
  align-items:center;min-height:30px}
.balName{min-width:0}
.balName b{font-size:14px;font-weight:600;display:block;line-height:1.3;overflow-wrap:break-word;
  hyphens:auto}
.balName small{display:block;font-size:11.5px;color:var(--txt-3);line-height:1.3}
.balSpur{min-width:0}
.balStab{display:block;height:16px;border-radius:0 5px 5px 0;min-width:2px}
.balSpur.split{display:flex;height:20px;border-radius:5px;overflow:hidden;background:var(--raster-2);gap:2px}
.balSpur.split .seg{display:block;height:100%}
.balSpur.split .seg.rest{background:var(--raster)}
/* Breitere Namensspalte fuer Taetigkeits- und Berufsbezeichnungen, die
   laenger sind als ein Laendername. 250px statt 230px: bei 230px brach
   «Vorhersehbare koerperliche Arbeit» um und riss die Zeile auseinander. */
.balZeile.breit{grid-template-columns:minmax(150px,250px) minmax(0,1fr) minmax(52px,auto);min-height:34px}
.balLeer{font-size:11.5px;color:var(--txt-3)}
.balWert{font-size:12.5px;color:var(--txt-2);text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.balSumme{border-top:1px solid var(--linie);padding-top:11px}
.balSumme .balWert{color:var(--txt);font-weight:600}

/* ===== Waffel ============================================================= */
.waffel{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;max-width:360px}
.waffel i{aspect-ratio:1;border-radius:4px;display:block}
.echtZeile{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--linie)}
.echtZeile:last-child{border-bottom:0;padding-bottom:0}
.echtZeile b{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.04em;color:var(--akz-hell);
  line-height:1;flex:none;min-width:3.4em}
.echtZeile span{font-size:14px;color:var(--txt-2);line-height:1.5}

/* ===== Tafel und Tabelle =================================================== */
.tafel{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:clamp(18px,2vw,26px);box-shadow:var(--kante)}
.tafelKopf{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:16px}
.tafelKopf h3{margin-bottom:5px}
.tafelKopf .cap{margin-bottom:0}
.suche{background:var(--bg-2);border:1px solid var(--linie);border-radius:10px;padding:11px 15px;
  font-size:14.5px;min-width:min(260px,100%);color:var(--txt)}
.suche:hover{border-color:var(--linie-2)}
.suche::placeholder{color:var(--txt-3)}

.pillen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pillen button{font-size:12.5px;font-weight:500;color:var(--txt-2);border:1px solid var(--linie);
  border-radius:999px;padding:6px 13px;transition:all .2s var(--ease)}
.pillen button:hover{border-color:var(--linie-2);color:var(--txt)}
.pillen button[aria-pressed=true]{background:var(--txt);color:var(--bg);border-color:var(--txt)}

.tMeta{font-size:12px;color:var(--txt-3);margin-bottom:10px}
.tRoll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th{text-align:left;padding:0;border-bottom:1px solid var(--linie-2)}
.tab th button{display:flex;align-items:center;gap:5px;width:100%;padding:9px 12px 9px 0;font-size:11.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.tab th.num button{justify-content:flex-end;padding-right:0;padding-left:12px}
.tab th button:hover{color:var(--txt)}
.tab th .pf{color:var(--akz-hell);width:.9em;display:inline-block}
.tab td{padding:11px 12px 11px 0;border-bottom:1px solid rgba(255,255,255,.07);color:var(--txt-2);
  vertical-align:top}
.tab td.num{text-align:right;padding-right:0;padding-left:12px;white-space:nowrap}
.tab td b{color:var(--txt);font-weight:600}
.tab td small{font-size:11.5px}
.tab tbody tr:hover td{background:rgba(255,255,255,.03)}
.tab .zahl{font-variant-numeric:tabular-nums}
.tLeer{color:var(--txt-3);padding:26px 0;text-align:center}
.tMehr{margin-top:16px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
/* Der Rueckweg steht neben dem Nachladen, aber leiser: er ist die
   Ausnahme, nicht der erwartete naechste Schritt. */
.tMehr .knopf.matt{color:var(--txt-3);border-color:var(--linie)}
.tMehr .knopf.matt:hover{color:var(--txt);border-color:var(--linie-2);background:transparent}
.tLink{color:var(--txt);font-weight:600;border-bottom:1px solid var(--linie-2);padding:0;text-align:left}
.tLink:hover{color:var(--akz-hell);border-color:var(--akz-hell)}
/* Name und Merkmal in einer Flexzeile statt nebeneinander auf der
   Grundlinie: nur so sitzt das Merkmal mittig zum Namen und nicht
   irgendwo daneben. */
.mName{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pille{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  line-height:1;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--linie);
  border-radius:999px;padding:4px 8px 3px;flex:none}
.ampel{display:inline-flex;align-items:center;gap:7px;font-size:12.5px}
.ampel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--txt-3)}
.ampel.live{color:var(--txt)}
.ampel.live::before{background:#2FBF71}
.ampel.speicher::before{background:var(--s3)}
.ampel.rueckfall::before{background:var(--s2)}
.ampel.fehler::before{background:var(--akz-hell)}

/* ===== Zeitreise ========================================================== */
.reise{border:1px solid var(--linie);border-radius:var(--r-gross);padding:clamp(18px,2.2vw,28px);
  background:var(--bg-2)}
.reiseSteuer{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.reiseSteuer input[type=range]{flex:1;min-width:150px}
.reiseJahr{font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1}
.reiseTag{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:5px 11px;
  border-radius:999px;border:1px solid var(--linie);color:var(--txt-3);white-space:nowrap}
.reiseTag.kuenftig{color:var(--akz-hell);border-color:var(--akz-hell-45)}
.reiseWert{display:flex;align-items:baseline;gap:8px;margin:8px 0 4px}
.reiseWert b{font-size:26px;font-weight:700;letter-spacing:-.03em}
.reiseWert span{font-size:13px;color:var(--txt-3)}

/* ===== Quellen ============================================================
   Eine Zeile je Quelle statt eines Fliesstextes: Name, Adresse und die
   Angabe, ob sie laufend abgerufen wird. */
.quellenRaster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);
  border-top:1px solid var(--linie);margin-bottom:var(--lueck)}
.quellenZeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;
  padding:14px 4px 14px 0;border-bottom:1px solid var(--linie);
  transition:background .2s var(--ease)}
.quellenZeile:hover{background:rgba(255,255,255,.03)}
.quellenZeile b{font-size:14.5px;font-weight:600;color:var(--txt);line-height:1.35;min-width:0}
.quellenZeile:hover b{color:var(--akz-hell)}
.quellenWirt{grid-column:1;font-size:12px;color:var(--txt-3);overflow-wrap:anywhere}
.quellenArt{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);
  white-space:nowrap}
.quellenArt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--txt-3);flex:none}
.quellenZeile.live .quellenArt{color:var(--txt-2)}
.quellenZeile.live .quellenArt::before{background:#2FBF71}
@media(max-width:760px){
  .quellenRaster{grid-template-columns:1fr}
  .quellenArt{font-size:10.5px}
}

/* ===== Fusszeile ==========================================================
   Aufbau und Masse 1:1 aus qds.ch: Flaechenwechsel statt Trennlinie,
   Markenspalte links, Sprungziele rechts, Rechtezeile unten. */
.fuss{margin-top:clamp(28px,2.8vw,44px);background:var(--bg-2);
  padding:clamp(52px,5vw,80px) 0 30px}
.fussOben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,4vw,64px)}
.fussSignet{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.fussSignet svg{width:26px;height:26px}
.fussSignet .flaeche{fill:var(--akz-hell)}
.fussSignet .blitz{fill:var(--bg-2)}
.fussSignet b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.fussMarke p{max-width:44ch;font-size:14.5px;line-height:1.68;color:var(--txt-3)}
.fussSignet{border:0;color:var(--txt)}
.fussSignet b{color:var(--txt)}
.fussNav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr));gap:24px}
.fussSpalte b{display:block;margin-bottom:15px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3)}
.fussSpalte a{display:block;padding:6px 0;font-size:14.5px;color:var(--txt-2);
  transition:color .2s var(--ease)}
.fussSpalte a:hover{color:var(--akz-hell)}
.fussUnten{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;
  margin-top:clamp(38px,4vw,60px);padding-top:24px;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--txt-3)}
/* In der Rechtezeile steht ein einziger Link, das Haus hinter der Seite. */
.fussUnten a{color:var(--txt-2);border-bottom:1px solid var(--akz-hell-45);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.fussUnten a:hover{color:var(--akz-hell);border-bottom-color:var(--akz-hell)}
@media(max-width:900px){.fussOben{grid-template-columns:1fr}}
@media(max-width:560px){.fussNav{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}

/* ===== Diagramme, gemeinsame Teile ========================================= */
svg{display:block;width:100%;height:auto;overflow:visible}
.gl{stroke:rgba(255,255,255,.07);stroke-width:1}
.ax{stroke:rgba(255,255,255,.22);stroke-width:1}
.tk{font-family:var(--sans);font-size:11.5px;fill:var(--txt-3);font-variant-numeric:tabular-nums}
.dl{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--txt-2);font-variant-numeric:tabular-nums}
.nt{font-family:var(--sans);font-size:12.5px;fill:var(--txt-2)}
.kreuz{stroke:var(--linie-2);stroke-width:1;pointer-events:none}
.trenn{stroke:var(--linie);stroke-width:1;stroke-dasharray:3 4}

.tip{position:fixed;z-index:1000;pointer-events:none;background:rgba(10,10,12,.96);border:1px solid var(--linie-2);
  border-radius:12px;padding:10px 13px;font-size:12.5px;min-width:160px;color:var(--txt);
  box-shadow:0 22px 50px -22px #000}
.tip[hidden]{display:none}
.tip .th{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);margin-bottom:6px}
.tip .tr{display:flex;gap:9px;align-items:center;white-space:nowrap;line-height:1.7;color:var(--txt-2)}
.tip .tr i{width:9px;height:9px;border-radius:2px;flex:none}
.tip .tr b{margin-left:auto;padding-left:16px;color:var(--txt);font-variant-numeric:tabular-nums}
.tip .tsum{border-top:1px solid var(--linie);margin-top:6px;padding-top:6px;color:var(--txt-3)}

/* ===== Abstand ============================================================
   Steht bewusst als letzte Baustein-Regel. `.karte` setzt `margin:0` und hat
   dieselbe Spezifitaet: stuende `.abstand` weiter oben, waere der
   Aussenabstand bei jeder Karte wirkungslos und die Karten klebten
   aufeinander. Bei gleicher Spezifitaet entscheidet die Reihenfolge. */
.abstand{margin-top:var(--lueck)}

/* ==========================================================================
   Anpassung an schmalere Geraete. Reihenfolge von breit nach schmal.
   ========================================================================== */

@media(max-width:1240px){
  .held{min-height:0}
  .heldInner{grid-template-columns:1fr;gap:34px}
  .heldGlobus{max-width:540px;order:2}
  .heldText{order:1;padding-top:0}
  #globus{max-height:none}
  .held h1{margin-top:10px}
}

@media(max-width:1080px){
  .navi a{padding:8px 9px;font-size:13.5px}
  .buehne{grid-template-columns:290px minmax(0,1fr)}
}

@media(max-width:980px){
  .menuTaste{display:flex}
  .kopfSprachen{display:none}
  /* absolut statt fest: .kopf hat backdrop-filter und waere sonst selbst der
     Bezugsrahmen fuer feste Kinder. */
  .naviGruppen{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:0;
    padding:22px var(--gutter) 30px;background:var(--bg);
    height:calc(100dvh - var(--nav-h));overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s var(--ease)}
  .naviGruppen:not(.offen){pointer-events:none}
  .naviGruppen.offen{opacity:1;visibility:visible;transform:none}
  /* Im Ausklappmenue wird nicht geklappt: die Gruppe ist nur noch eine
     Zwischenueberschrift, ihre Punkte stehen offen darunter. Spart je Sprung
     einen Tipp. */
  .naviGruppe{position:static;display:block}
  .naviGruppe+.naviGruppe{margin-top:18px}
  .naviKnopf{display:none}
  .naviLabel{display:block;padding:0 14px 4px;font-size:11px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--txt-3)}
  /* visibility:inherit, nicht visible: mit "visible" waere das Kind auch dann
     anklickbar, wenn das Menue geschlossen ist. */
  .naviMenu{position:static;translate:none;width:auto;min-width:0;max-width:none;padding:0;
    border:0;border-radius:0;background:none;box-shadow:none;opacity:1;visibility:inherit;
    transform:none;transition:none}
  .naviMenu a{padding:12px 14px;border-radius:12px}
  .naviMenu a b{font-size:16px}
  /* Beschreibungen bleiben dem Rechner vorbehalten, sonst wird das Menue
     hoeher als der Bildschirm. */
  .naviMenu a span{display:none}
  .naviFuss{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;
    padding-top:20px;border-top:1px solid var(--linie)}
  .buehne{grid-template-columns:1fr}
  .buehneText{min-height:0;margin:16px 0 14px}
}

@media(max-width:900px){
  .raster2,.raster3{grid-template-columns:1fr}
  .rechner{grid-template-columns:1fr}
  .rechnerAus{border-left:0;border-top:1px solid var(--linie)}
  .kpiReihe{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
}

@media(max-width:860px){
  /* Tabellen brechen in Bloecke um. Jede Zelle traegt ihre Spaltenbeschriftung
     als data-label, deshalb bleibt die Zuordnung ohne Kopfzeile lesbar.
     `display:block` auch auf table und tbody: sonst rechnet der Browser
     weiter mit dem Tabellenalgorithmus und die Zeile wird breiter als der
     Kasten. */
  .tRoll{overflow:visible}
  .tab,.tab tbody{display:block;width:100%}
  .tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Jede Zeile eine Karte: die erste Spalte ist der Kopf, die uebrigen stehen
     zu zweit nebeneinander, Beschriftung ueber dem Wert. */
  .tab tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;width:100%;
    border:1px solid var(--linie);border-radius:14px;padding:14px 16px 12px;margin-bottom:10px;background:var(--bg-2)}
  .tab td{display:flex;flex-direction:column;gap:3px;padding:0;border:0;text-align:left;min-width:0}
  .tab td:first-child{grid-column:1/-1;font-size:15.5px;padding-bottom:10px;margin-bottom:2px;
    border-bottom:1px solid var(--linie)}
  .tab td:first-child .tLink{font-size:15.5px;border-bottom:0}
  .tab td.num{text-align:left;padding:0}
  .tab td::before{content:attr(data-label);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--txt-3);line-height:1.3}
  .tab td:first-child::before{content:none}
  .tab td.tLeer{grid-column:1/-1;display:block;text-align:center;border:0}
  .tab td.tLeer::before{content:none}
  .tab tbody tr:hover td{background:transparent}
}

@media(max-width:760px){
  .einsicht{grid-template-columns:1fr;gap:12px}
  .leiZeile{grid-template-columns:1fr;gap:3px}
  .leiSpur{height:22px}
  .leiAchse{margin-left:0}
  .heldGlobus{gap:12px}
  /* Auch .breit zuruecksetzen: zwei Klassen schlagen sonst die Regel hier
     und die Namensspalte bliebe auf dem Telefon 250px breit. */
  .balZeile,.balZeile.breit{grid-template-columns:minmax(84px,1fr) minmax(0,1.4fr) auto;gap:10px}
}

@media(max-width:640px){
  :root{--nav-h:64px}
  .kopfInner{gap:12px}
  .wortmarke b{font-size:15px}
  /* Auf dem Telefon bleibt vom Zustandsknopf nur der Punkt: der Rahmen
     drumherum nahm Platz und sagte nichts. */
  .standKnopf span{display:none}
  .standKnopf{padding:6px;border:0;background:none}
  .standKnopf i{width:9px;height:9px}
  .menuTaste{width:40px;height:40px;gap:4.5px}
  .menuTaste span{width:16px}
  .menuTaste.offen span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menuTaste.offen span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .held h1{gap:0 .2em}
  .hzReihe{grid-template-columns:1fr 1fr;gap:14px}
  .globusModi button{font-size:11.5px;padding:6px 11px}
  .rechnerRaster{grid-template-columns:1fr;gap:14px}
  .landSatz{padding-left:14px;font-size:16.5px}
  .echtZeile{flex-direction:column;gap:6px}
  .echtZeile b{min-width:0}
  .reiseSteuer{gap:12px}
  .reiseSteuer input[type=range]{order:3;flex-basis:100%}
  .waffel{max-width:none}
  .tafelKopf{align-items:stretch}
  .suche{min-width:0;width:100%}
}

@media(max-width:400px){
  .globusModi{gap:3px}
  .globusModi button{padding:6px 9px;font-size:11px}
  .kpiWert{font-size:24px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}