/* Lumen für Inhaltsseiten (www, home, cloud0, cloud1): gemeinsames Muster der Varianten, aufbauend auf
   tokens.css und base.css. Kopf ohne Scheibe, Abschnitte als Glasscheiben (Ebene 1), Elemente darin als
   Plättchen (Ebene 2), Menü auf schmalen Bildschirmen Ebene 3. Kandidat für einen späteren Baustein.

   <div class="seite">
     <header class="topbar"> .wortmarke · .menu-btn · <nav> · .theme-schalter </header>
     <main> .hero (› .glas.tor + .glas.intro) · section.glas.block (› .block-head) </main>
     <footer class="site-footer"> … .signatur </footer>
   </div> */

html { background: var(--basis); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-3); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--r-innen); background: var(--glas-3); color: var(--text-1); }
.skip:focus { top: 8px; }
.seite { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 var(--abstand-aussen) var(--abstand-aussen); }

/* Kopf: schwebt ohne Scheibe über dem Lichtfeld. Wortmarke, Navigation als Lichtpunkt-Pillen, Theme-Schalter */
.topbar { display: flex; align-items: center; gap: 24px; min-height: 80px; }
.topbar .wortmarke { flex: none; display: flex; align-items: baseline; gap: 12px; }
.wortmarke .zusatz { font: 500 11px/1 var(--schrift-marke); letter-spacing: 0.14em; color: var(--text-3); }
.topbar nav { flex: 1; min-width: 0; }
.topbar nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0; padding: 0; list-style: none; }
.topbar nav a, .topbar nav button {
  position: relative; display: block; padding: 8px 14px 8px 22px; border: 0; border-radius: 999px; background: none;
  font: 450 14px/20px var(--schrift-text); color: var(--text-2); text-decoration: none;
  transition: color var(--dauer-licht) var(--kurve-licht), background-color var(--dauer-licht) var(--kurve-licht);
}
.topbar nav a::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 8px var(--akzent); opacity: 0; scale: 0.6;
  transition: opacity var(--dauer-licht) var(--kurve-licht), scale var(--dauer-licht) var(--kurve-licht);
}
@media (hover: hover) and (pointer: fine) { .topbar nav :is(a, button):hover { color: var(--text-1); background: var(--glas-1); } }
.topbar nav a[aria-current] { color: var(--text-1); background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie); }
.topbar nav a[aria-current]::before { opacity: 1; scale: 1; }
.menu-btn { display: none; align-items: center; gap: 10px; margin-left: auto; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie); font: 450 14px/20px var(--schrift-text); color: var(--text-1); }
.menu-btn .lines { display: grid; gap: 3px; width: 14px; }
.menu-btn .lines i { display: block; height: 1.25px; border-radius: 1px; background: currentColor; }

/* Brotkrümel */
.crumbs { margin: 4px 0 16px; font: 450 13px/20px var(--schrift-text); color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--akzent); }
.crumbs [aria-current] { color: var(--text-1); }

/* Kopfbereich: links der Hauptwert als Lichtlinse auf Glas („Tor“), rechts Titel und Messwerte */
.hero { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--abstand-modul); margin: 8px 0 var(--abstand-modul); }
.tor { display: grid; align-content: center; justify-items: center; gap: 6px; min-height: 440px; padding: 32px 24px; text-align: center; overflow: hidden; }
.tor > * { position: relative; z-index: 2; }
.tor::after {
  /* Lichtlinse hinter der Zahl statt Glanzstreifen: die Scheibe leuchtet von innen */
  inset: 12% 8% auto; height: 62%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--akzent) 26%, transparent), transparent);
  filter: blur(6px);
}
.tor .cond { font: 500 11px/16px var(--schrift-marke); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.tor b { display: block; margin: 4px 0 10px; font: 200 112px/1 var(--schrift-text); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text-1); }
.tor b small { margin-left: 4px; font: 300 32px/1 var(--schrift-text); letter-spacing: 0; color: var(--text-2); }
.tor .hl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; padding: 12px 22px; border-radius: var(--r-innen); background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie); font-size: 14px; line-height: 22px; }
.tor .hl span { color: var(--text-2); text-align: right; }
.tor .hl em { font-style: normal; text-align: left; font-variant-numeric: tabular-nums; }
.tor i, .now i, .big i { font-style: normal; }
.tor .feel { margin-top: 10px; font-size: 12.5px; line-height: 18px; color: var(--text-3); }

.intro { min-width: 0; }
.hero .intro { padding: 36px 40px 28px; }
h1 { margin: 0; font: 200 clamp(34px, 4vw, 52px)/1.08 var(--schrift-text); letter-spacing: -0.025em; }
.stamp { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Messwerte als Zeilen: dünne Kennzahlen wie auf einem Messinstrument, Lichtlinien statt Rahmen */
.now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 28px 0 0; }
.now > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; padding: 16px 0 18px; }
.now > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--linie-hell), var(--linie-hell) 70%, transparent); }
.now dt { grid-column: 1 / -1; font: 500 11px/16px var(--schrift-marke); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.now dd { margin: 0; }
.now dd:not(.sub):not(.dir):not(.detail) { grid-column: 1; margin-top: 6px; font: 200 34px/38px var(--schrift-text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.now small { margin-left: 4px; font: 400 13px/1 var(--schrift-text); letter-spacing: 0; color: var(--text-3); }
.now small.to { margin: 0 8px; }
.now .sub { grid-column: 1 / -1; margin-top: 4px; font-size: 12.5px; line-height: 18px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.now .detail { grid-column: 1 / -1; }
.now .detail .sub { display: block; }
.range dd:not(.sub) { font-size: 26px; }

/* Abschnitte: Glasscheiben mit Kopfzeile und auslaufender Lichtlinie */
.block { margin: 0 0 var(--abstand-modul); padding: 8px 40px 36px; }
.block-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0 18px; margin-bottom: 24px; }
.block-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--linie-hell) 12%, var(--linie-hell) 88%, transparent); }
.block-head h2 { margin: 0; font: 300 24px/1.25 var(--schrift-text); letter-spacing: -0.01em; }
.block-head p { margin: 0; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Tabellen: Versalien-Kopf, Lichtlinien zwischen den Zeilen, Tabellenziffern */
table { border-collapse: collapse; font: 400 13px/20px var(--schrift-text); font-variant-numeric: tabular-nums; }
caption { padding-bottom: 6px; text-align: left; color: var(--text-3); font-size: 12px; }
th, td { padding: 6px 18px 6px 0; border-bottom: 1px solid var(--linie); text-align: left; }
thead th { font: 500 10.5px/16px var(--schrift-marke); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }

/* Fließtext: höchstens 72 Zeichen je Zeile; .prose ist zweispaltig wie bisher auf www */
.prose { column-count: 2; column-gap: 56px; color: var(--text-1); }
.prose-single { column-count: 1; max-width: 72ch; }
.prose p { margin: 0 0 16px; }
.prose h2 { margin: 0 0 12px; font: 300 22px/1.3 var(--schrift-text); }
.prose h3 { break-after: avoid; margin: 24px 0 6px; font: 500 11px/16px var(--schrift-marke); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.prose > h3:first-child, .prose > h2:first-child { margin-top: 0; }
.prose a, .site-footer p a { color: var(--akzent); text-decoration: none; background: linear-gradient(var(--akzent-glow), var(--akzent-glow)) 0 100% / 100% 1px no-repeat; transition: background-size var(--dauer-licht) var(--kurve-licht); }
.prose a:hover { background-size: 100% 100%; }

/* Hinweise (Erfolg, Fehler): Plättchen mit Lichtpunkt, Zustand auch als Text */
.notice { display: flex; gap: 12px; align-items: baseline; margin: 0 0 20px; padding: 12px 16px; border-radius: var(--r-innen); background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie); font-size: 14px; line-height: 22px; }
.notice::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; translate: 0 -2px; background: var(--akzent); box-shadow: 0 0 8px var(--akzent); }
.notice.ok::before { background: var(--erfolg); box-shadow: 0 0 6px var(--erfolg); }
.notice.err::before { width: 7px; height: 7px; border-radius: 1px; rotate: 45deg; background: transparent; box-shadow: inset 0 0 0 1.5px var(--fehler); }

/* Formulare: Felder auf dichterem Glas, Lichthof bei Fokus; Hauptknopf mit Akzentlicht */
.feld { display: grid; gap: 6px; margin: 0 0 16px; }
.feld label, .feld .label-text { font: 450 13px/18px var(--schrift-text); color: var(--text-2); }
.feld small { font-size: 12px; color: var(--text-3); }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; max-width: 100%; padding: 10px 14px; border: 0; border-radius: 12px;
  font: 400 15px/22px var(--schrift-text); color: var(--text-1);
  background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie);
  transition: box-shadow 300ms var(--kurve-licht);
}
:is(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus-visible { outline: 0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--akzent) 50%, transparent), 0 0 18px 2px var(--akzent-glow); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.check input { width: 18px; height: 18px; accent-color: var(--akzent); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 500 14px/20px var(--schrift-text); color: var(--auf-akzent);
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.45), transparent 55%), var(--akzent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 16px var(--akzent-glow);
  transition: transform var(--dauer-druck) ease-out, box-shadow var(--dauer-licht) var(--kurve-licht);
}
.knopf:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 24px 2px var(--akzent-glow); }
.knopf:active { transform: scale(0.97); }
.knopf.leise { color: var(--text-1); background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie); }
.knopf.gefahr { color: var(--fehler); background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px color-mix(in oklab, var(--fehler) 35%, transparent); }

/* Fuß: ohne Scheibe, ruhig, geätzte Signatur */
.site-footer { margin-top: 40px; padding: 0 8px; text-align: center; font-size: 13px; line-height: 20px; color: var(--text-3); }
.site-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0 0 14px; padding: 0; list-style: none; }
.site-footer ul a { color: var(--text-2); text-decoration: none; transition: color var(--dauer-licht) var(--kurve-licht); }
.site-footer ul a:hover { color: var(--akzent); }
.site-footer ul a[aria-current] { color: var(--text-1); }
.site-footer ul a[aria-current]::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; vertical-align: middle; background: var(--akzent); box-shadow: 0 0 8px var(--akzent); }
.site-footer p { margin: 0 0 4px; }
.site-footer .signatur { margin-top: 18px; }

/* Responsiv */
@media (max-width: 1099px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .tor { min-height: 0; grid-template-columns: auto auto; grid-template-areas: "cond cond" "zahl hl" "feel feel"; column-gap: 32px; }
  .tor .cond { grid-area: cond; } .tor b { grid-area: zahl; margin: 0; } .tor .hl { grid-area: hl; align-self: center; } .tor .feel { grid-area: feel; }
}
@media (max-width: 959px) {
  .topbar { flex-wrap: wrap; gap: 12px; padding: 12px 0; }
  .topbar:has(.menu-btn) nav { flex-basis: 100%; order: 3; }
  .menu-btn { display: inline-flex; }
  .js .topbar:has(.menu-btn) nav:not(.offen) { display: none; }
  .topbar:has(.menu-btn) nav ul { flex-direction: column; padding: 8px; border-radius: var(--r-aussen); background: var(--glas-3); -webkit-backdrop-filter: blur(var(--blur-3)); backdrop-filter: blur(var(--blur-3)); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie), 0 32px 90px var(--hochschatten); }
  .now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose { column-count: 1; max-width: 72ch; }
}
@media (max-width: 599px) {
  .topbar .wortmarke .zusatz { display: none; }
  .block { padding: 4px 20px 24px; }
  .hero .intro { padding: 24px 20px 12px; }
  .tor { grid-template-columns: 1fr; grid-template-areas: "cond" "zahl" "hl" "feel"; padding: 28px 20px; }
  .tor b { font-size: 88px; }
  .now { grid-template-columns: minmax(0, 1fr); }
  .block-head { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-transparency: reduce) { :root:not([data-transparenz="voll"]) .topbar nav ul { -webkit-backdrop-filter: none; backdrop-filter: none; } }
[data-transparenz="reduziert"] .topbar nav ul { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 599px) {
  .topbar .theme-schalter .icon { display: none; }
  .topbar .wortmarke { letter-spacing: 0.18em; }
}