/* © 2026 Lumobix. Alle Rechte vorbehalten. Nutzung nur gemäß /nutzungsbedingungen */
/* Website von Lumobix – klar und ruhig: viel Raum, große Schrift, Abstände im 8-Pixel-Raster.
   Das Zimmer aus der App ist der lebende Hintergrund: auf der Startseite klar (Kapitel mit Kamerafahrt), auf den anderen Seiten gedämpft.
   Keine fremden Schriften oder Dienste. */
:root {
  --schwarz: #000; --ink: #f5f5f7; --zweit: #a1a1a6; --leise: #9e9ea3; --linie: rgb(255 255 255 / .1);
  --flaeche: rgb(28 28 30 / .78); --flaeche-2: rgb(44 44 46 / .6); --link: #2997ff; --blau: #0071e3; --blau-hover: #0068d1;
  --cyan: #6cbfe0; --gruen: #30d158; --rot: #ff6961; --gelb: #ffd60a;
  --verlauf: linear-gradient(100deg, #a8d8f2, #8ea4ea 50%, #b3a4e6);   /* Lumobix-Farben (Privat): nur an wenigen Stellen – große Zahlen, Abzeichen, Balken; Überschriften bleiben ruhig */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --rand: clamp(20px, 5vw, 80px); --breite: 1680px; --rund: 28px;
  /* Glas wie in der App (lumobix/static/index.html: --glass-*): Glanz oben links, getönte Fläche, helle Kante, weicher Schatten;
     das Licht hinter dem Glas wird gedämpft (brightness), damit Text auf jedem Hintergrund lesbar bleibt */
  --glas-glanz: linear-gradient(140deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / .05) 45%, rgb(255 255 255 / .025) 100%);
  --glas-tint: rgb(20 20 24 / .5);
  --glas: var(--glas-glanz), linear-gradient(var(--glas-tint), var(--glas-tint));
  --glas-hover: linear-gradient(140deg, rgb(255 255 255 / .17) 0%, rgb(255 255 255 / .07) 45%, rgb(255 255 255 / .035) 100%), linear-gradient(var(--glas-tint), var(--glas-tint));
  --glas-rand: rgb(255 255 255 / .14);
  --glas-kante: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -1px 0 rgb(255 255 255 / .04);
  --glas-schatten: var(--glas-kante), 0 24px 60px -28px rgb(0 0 0 / .7), 0 2px 10px rgb(0 0 0 / .18);
  --glas-blur: blur(26px) saturate(140%) brightness(.62);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
}
* { box-sizing: border-box; }
html { background: var(--schwarz); scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body[data-seite="start"] { scroll-snap-type: none; }
html:has(body[data-seite="start"]) { scroll-snap-type: y proximity; }
body { margin: 0; color: var(--ink); font: 17px/1.47 var(--font); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; background: transparent; overflow-x: hidden; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 700; color: var(--ink); overflow-wrap: break-word; hyphens: auto; }   /* lange deutsche Wörter auf dem Handy */
h1 { font-size: clamp(44px, 6vw, 80px); line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.07; letter-spacing: -.005em; }
h3 { font-size: 21px; line-height: 1.19; letter-spacing: .011em; font-weight: 600; }
p { margin: 0; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--flaeche-2); padding: 2px 6px; border-radius: 6px; }
.verlauf { color: var(--zweit); }   /* zweite Zeile der Überschrift ruhig abgesetzt */

/* Hintergrund: Zimmer, darüber ein Dämpfer (Startseite klar, sonst ruhig) */
#bg { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.zimmer-an #bg { opacity: 1; }
.daempfer { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: rgb(0 0 0 / .8); transition: background .9s ease; }
body[data-seite="start"] .daempfer { background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .18) 48%, rgb(0 0 0 / 0) 70%), linear-gradient(0deg, rgb(0 0 0 / .55), transparent 40%); }
#botzzz { position: fixed; left: 0; top: 0; z-index: -1; opacity: 0; transition: opacity .8s; pointer-events: none; }
body[data-view=start][data-seite=start] #botzzz.on { opacity: 1; }
#botzzz span { position: absolute; font: 700 20px var(--font-display); color: rgb(235 235 245 / .75); opacity: 0; animation: zzz 3.2s ease-in-out infinite; }
#botzzz span:nth-child(2) { animation-delay: 1.05s; font-size: 16px; }
#botzzz span:nth-child(3) { animation-delay: 2.1s; font-size: 24px; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -46px); } }
.springen { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--blau); color: #fff; padding: 8px 14px; border-radius: 980px; }
.springen:focus { left: 12px; }

/* Kopfzeile: schmal, durchscheinend */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 52px; background: rgb(22 22 23 / .72);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linie); }
.kopf-innen { height: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); display: flex; align-items: center; gap: var(--s4); }
.marke { display: flex; align-items: center; gap: 9px; color: var(--ink); font: 600 17px var(--font-display); letter-spacing: -.01em; flex: none; }
.marke:hover { text-decoration: none; }
.marke svg { width: 22px; height: 22px; }
.reiter { display: flex; gap: var(--s4); margin: 0 auto; }
.reiter a { color: #d2d2d7; font-size: 13px; letter-spacing: -.01em; transition: color .2s; }
.reiter a:hover { color: #fff; text-decoration: none; }
.reiter a[aria-current="page"] { color: #fff; }
.kopf-rechts { display: flex; align-items: center; gap: var(--s3); flex: none; }
.konto-link { color: #d2d2d7; font-size: 13px; }
.konto-link:hover { color: #fff; text-decoration: none; }
.reiter .nur-handy { display: none; }   /* Konto und Team im Menü: nur auf dem Handy, sonst stehen sie im Kopf */
.menue { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; margin-right: -8px; }
.menue span { display: block; width: 17px; height: 1.5px; background: var(--ink); margin: 5px auto; border-radius: 1px; transition: transform .25s; }
.menue[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menue[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Knöpfe: Pillen und „Weiter“-Links */
.pille { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: 980px; border: 0;
  background: var(--blau); color: #fff; font: 400 17px/1.18 var(--font); letter-spacing: -.022em; cursor: pointer; transition: background .2s; }
.pille:hover { background: var(--blau-hover); text-decoration: none; }
.pille.klein { min-height: 0; padding: 5px 13px; font-size: 13px; }
.pille.gross { padding: 15px 28px; font-size: 19px; }
.pille.zweit { background: rgb(255 255 255 / .12); color: var(--ink); }
.pille.zweit:hover { background: rgb(255 255 255 / .2); }
.pille.aus, .pille:disabled { background: rgb(118 118 128 / .32); color: var(--leise); pointer-events: none; }
.weiter { font-size: 19px; color: var(--link); display: inline-flex; align-items: center; gap: 4px; }
.weiter::after { content: "›"; font-size: 1.15em; line-height: 1; transition: transform .2s; }
.weiter:hover::after { transform: translateX(3px); }
.aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.aktion.mitte { justify-content: center; }

main { display: block; }

/* ---------- Startseite: Kapitel mit Kamerafahrt ---------- */
.kapitel { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: var(--s8) var(--rand) var(--s7); scroll-snap-align: start; position: relative; }
.kapitel-text { max-width: 620px; text-shadow: 0 2px 30px rgb(0 0 0 / .45); }
.kapitel-text.rechts { margin-left: auto; text-align: right; }
.kapitel-text.rechts .aktion { justify-content: flex-end; }
.kapitel-text.mitte { margin: 0 auto; text-align: center; max-width: 900px; }
.kapitel-text h2 { margin: var(--s1) 0 var(--s3); }
.kapitel-text p { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.38; color: #e8e8ed; letter-spacing: .005em; }
.kapitel-text .weiter { margin-top: var(--s3); }
.kapitel.held { align-items: flex-end; padding-bottom: 14vh; }
.vorzeile { font-size: 17px !important; color: var(--cyan) !important; font-weight: 600; letter-spacing: -.01em !important; }
.riesig { font-size: clamp(64px, 11vw, 168px); line-height: .95; letter-spacing: -.03em; margin: var(--s2) 0 var(--s3);
  background: linear-gradient(180deg, #fff 30%, #c9cfe6); -webkit-background-clip: text; background-clip: text; color: transparent; }   /* der Schriftzug wie gewohnt */
.unterzeile { font-size: clamp(22px, 2.4vw, 34px) !important; line-height: 1.2 !important; font-weight: 600; color: #f5f5f7 !important; letter-spacing: .004em !important; }
.kapitel.schluss { align-items: center; }
h2.gross { font-size: clamp(40px, 6vw, 80px); }
.fein { font-size: 14px !important; color: var(--zweit) !important; margin-top: var(--s3) !important; }
.runter { position: absolute; left: 50%; bottom: calc(64px + var(--s3)); width: 24px; height: 38px; margin-left: -12px; border: 1.5px solid rgb(255 255 255 / .5); border-radius: 12px; }
.runter span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: rollen 1.8s infinite; }
@keyframes rollen { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* Kapitelleiste rechts: wo bin ich, Klick springt */
.kapitelleiste { position: fixed; right: max(16px, calc(var(--rand) / 2)); top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: 14px; }
.kapitelleiste a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: rgb(255 255 255 / 0); font-size: 13px; transition: color .3s; }
.kapitelleiste a::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .35); transition: background .3s, transform .3s; }
.kapitelleiste a:hover { color: rgb(255 255 255 / .85); text-decoration: none; }
.kapitelleiste a.an { color: #fff; }
.kapitelleiste a.an::after { background: #fff; transform: scale(1.35); }
.fortschritt { position: fixed; left: 0; top: 52px; height: 2px; width: 100%; z-index: 31; transform-origin: left; transform: scaleX(0); background: var(--verlauf); pointer-events: none; }

/* Erscheinen beim Scrollen (kurz und dezent) */
.erscheint { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }
.erscheint.da { opacity: 1; transform: none; }

/* ---------- Unterseiten: ruhig, übersichtlich ---------- */
.kopfbereich { max-width: 1100px; margin: 0 auto; padding: calc(52px + var(--s8)) var(--rand) var(--s6); text-align: center; }
.kopfbereich .vorzeile { margin-bottom: var(--s2); }
.kopfbereich .einleitung { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.38; color: var(--zweit); max-width: 820px; margin: var(--s3) auto 0; letter-spacing: .004em; }
.bereich { max-width: var(--breite); margin: 0 auto; padding: var(--s7) var(--rand); }
.bereich > h2, .bereich > .titel { text-align: center; margin-bottom: var(--s2); }
.bereich > .unter { text-align: center; color: var(--zweit); font-size: 19px; max-width: 760px; margin: 0 auto var(--s5); }
.raster { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); }
.raster.zwei { grid-template-columns: repeat(2, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
.kachel { background: var(--flaeche); border-radius: var(--rund); padding: var(--s5) var(--s4); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
.kachel h3 { margin-bottom: var(--s1); }
.kachel p, .kachel li { color: var(--zweit); font-size: 17px; }
.kachel .symbol { width: 40px; height: 40px; margin-bottom: var(--s3); fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kachel.breit { grid-column: 1 / -1; }
.produktbild { max-width: 1200px; margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: 0 50px 100px -40px rgb(0 0 0 / .9), 0 0 0 1px var(--linie); }
.produktbild img { width: 100%; }
.punkte { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.punkte li { padding-left: 28px; position: relative; color: var(--zweit); }
.punkte li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 3px; background: var(--verlauf); }
.tabelle { border-radius: 18px; overflow: hidden; border: 1px solid var(--linie); margin-top: var(--s3); }
.tabelle > div { display: grid; grid-template-columns: 1.2fr 1.6fr .5fr; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--linie); color: var(--zweit); }
.tabelle > div:first-child { border-top: 0; }
.tabelle .kopfzeile { font-size: 13px; font-weight: 600; color: var(--leise); background: rgb(255 255 255 / .04); }
.tabelle span:first-child { color: var(--ink); }
.schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); counter-reset: s; }
.schritte li { counter-increment: s; background: var(--flaeche); border-radius: var(--rund); padding: var(--s4); display: grid; gap: var(--s1); color: var(--zweit); }
.schritte li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blau); color: #fff; font-weight: 600; font-size: 15px; margin-bottom: var(--s1); }
.schritte b { color: var(--ink); font-size: 19px; }
.klein-text { color: var(--leise); font-size: 14px; }
.mitte { text-align: center; }
.text-bereich { max-width: 860px; margin: 0 auto; padding: var(--s5) var(--rand); }
.text-bereich h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: var(--s3); }
.text-bereich h3 { margin: var(--s4) 0 var(--s1); }
.text-bereich p { color: var(--zweit); }

/* Hilfe */
.hilfe-raster { display: grid; grid-template-columns: 240px 1fr; gap: var(--s6); align-items: start; max-width: 1320px; margin: 0 auto; padding: 0 var(--rand) var(--s7); }
.inhalt { position: sticky; top: 84px; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow-y: auto; }
.inhalt b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: var(--s3) 0 6px; }
.inhalt b:first-child { margin-top: 0; }
.inhalt a { color: var(--zweit); font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.inhalt a:hover, .inhalt a.an { background: rgb(255 255 255 / .08); color: var(--ink); text-decoration: none; }
.anleitungen { display: grid; gap: var(--s3); }
.anleitungen article { background: var(--flaeche); border-radius: 22px; padding: var(--s4) var(--s5); scroll-margin-top: 80px; }
.anleitungen h2 { font-size: 28px; margin-bottom: var(--s2); }
.anleitungen p, .anleitungen li { color: var(--zweit); }
.anleitungen p + p, .anleitungen p + ol, .anleitungen ol + p, .anleitungen ul + p { margin-top: var(--s2); }
.anleitungen ol, .anleitungen ul { padding-left: 22px; display: grid; gap: var(--s1); margin: var(--s2) 0 0; }
.anleitungen li::marker { color: var(--cyan); font-weight: 600; }
.anleitungen b { color: var(--ink); font-weight: 600; }
.tipp { margin-top: var(--s2); border-left: 3px solid var(--cyan); padding: 10px 14px; background: rgb(108 191 224 / .08); border-radius: 0 12px 12px 0; }
.anleitungen article:target { box-shadow: 0 0 0 2px rgb(108 191 224 / .55); }
.suche { max-width: 640px; margin: var(--s4) auto 0; }
.suche input { width: 100%; font: 17px var(--font); color: var(--ink); background: rgb(255 255 255 / .08); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 18px; }
.leer { color: var(--leise); }

/* Formulare, Tickets, Konto */
.formular { display: grid; gap: var(--s2); }
.formular.reihe { grid-template-columns: 1fr 1fr auto; align-items: end; }
.zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.formular label { display: grid; gap: 6px; font-size: 14px; color: var(--zweit); }
.formular input, .formular select, .formular textarea { font: 17px/1.35 var(--font); color: var(--ink); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16);
  border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .2s, background .2s; }
.formular input:hover, .formular textarea:hover { border-color: rgb(255 255 255 / .26); }
.formular input:focus, .formular select:focus, .formular textarea:focus, .suche input:focus { outline: 0; border-color: var(--link); background: rgb(255 255 255 / .09); box-shadow: 0 0 0 4px rgb(41 151 255 / .2); }
.formular textarea { resize: vertical; }
.formular .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { font-size: 15px; min-height: 1.4em; }
.meldung.gut { color: var(--gruen); }
.meldung.schlecht { color: var(--rot); }
.meldung code { user-select: all; }
.ticket { margin-top: var(--s4); }
.ticket-kopf { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; font-size: 19px; font-weight: 600; }
.marke-status { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 980px; background: rgb(118 118 128 / .3); white-space: nowrap; }
.marke-status.offen { background: rgb(255 214 10 / .16); color: var(--gelb); }
.marke-status.in_arbeit { background: rgb(108 191 224 / .18); color: var(--cyan); }
.marke-status.beantwortet { background: rgb(48 209 88 / .16); color: var(--gruen); }
.verlauf-liste { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.beitrag { padding: var(--s2) 18px; border-radius: 16px; background: rgb(255 255 255 / .06); white-space: pre-wrap; }
.beitrag.support { background: rgb(0 113 227 / .2); }
.beitrag small { display: block; color: var(--leise); font-size: 12px; margin-bottom: 4px; }
.konto-box { max-width: 460px; margin: 0 auto; }
.umschalter { display: grid; grid-template-columns: 1fr 1fr; background: rgb(118 118 128 / .24); border-radius: 10px; padding: 2px; margin-bottom: var(--s4); }
.umschalter button { border: 0; background: transparent; color: var(--ink); font: 500 14px var(--font); padding: 7px; border-radius: 8px; cursor: pointer; }
.umschalter button[aria-selected="true"], .umschalter button[aria-checked="true"] { background: rgb(99 99 102 / .9); box-shadow: 0 3px 8px rgb(0 0 0 / .25); }

/* Neuigkeiten */
.neues { display: grid; gap: var(--s3); max-width: 900px; margin: 0 auto; }
.nachricht .art { font-size: 12px; color: var(--cyan); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: var(--s1); }
.nachricht p { white-space: pre-wrap; margin-top: var(--s1); }
.notizen { white-space: pre-wrap; font: 17px/1.47 var(--font); color: var(--zweit); margin: var(--s2) 0 var(--s3); }

/* Seitenwechsel ohne Neuladen */
main { transition: opacity .18s ease; }
body.wechsel main { opacity: 0; }

/* Fuß */
.fuss { background: rgb(22 22 23 / .92); border-top: 1px solid var(--linie); }
body[data-seite="start"] .fuss { background: rgb(0 0 0 / .78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: var(--s5) var(--rand) var(--s4); }
.fuss-spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--linie); }
.fuss h4 { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: var(--s1); }
.fuss-spalten a { display: block; color: var(--leise); font-size: 12px; line-height: 2.1; }
.fuss-spalten a:hover { color: var(--ink); }
.fuss-zeile { color: var(--leise); font-size: 12px; padding-top: var(--s3); }

/* Lumo auf der Website */
.lumo { position: fixed; right: var(--s3); bottom: var(--s3); z-index: 40; display: grid; justify-items: end; gap: var(--s2); }
.lumo-bot { width: 60px; height: 70px; border: 0; background: none; cursor: pointer; position: relative; padding: 0; animation: schweben 3.4s ease-in-out infinite; }
.lumo-bot .kopf-bot { position: absolute; left: 5px; top: 0; width: 50px; height: 39px; border-radius: 9px; background: #dfe2ea;
  box-shadow: inset 0 -4px 0 #b9bdc9, 0 10px 24px -8px rgb(0 0 0 / .7); display: flex; gap: 8px; align-items: center; justify-content: center; }
.lumo-bot .kopf-bot::before { content: ""; position: absolute; inset: 6px 6px 9px; border-radius: 5px; background: #1b2140; }
.lumo-bot .kopf-bot i { position: relative; width: 8px; height: 10px; background: #fff; border-radius: 2px; box-shadow: 0 0 8px #9fd3ff; animation: blinzeln 5s infinite; }
.lumo-bot .koerper-bot { position: absolute; left: 16px; top: 41px; width: 28px; height: 26px; border-radius: 7px; background: #dfe2ea; box-shadow: inset 0 -4px 0 #b9bdc9; }
.lumo-bot .koerper-bot::before { content: ""; position: absolute; left: -4px; right: -4px; top: 0; height: 6px; border-radius: 4px; background: #e2a64a; }
.lumo-bot .koerper-bot::after { content: ""; position: absolute; left: 11px; top: 11px; width: 6px; height: 6px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
@keyframes schweben { 50% { transform: translateY(-5px); } }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.lumo-blase { position: absolute; right: 70px; bottom: 30px; white-space: nowrap; background: rgb(44 44 46 / .92); border-radius: 14px 14px 4px 14px;
  padding: 8px 12px; font-size: 14px; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; pointer-events: none; }
.lumo-blase.an { opacity: 1; transform: none; }
.lumo-fenster { width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column;
  background: rgb(28 28 30 / .94); border: 1px solid var(--linie); border-radius: 22px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .85); overflow: hidden; }
.lumo-fenster[hidden] { display: none; }
.lumo-titel { display: flex; align-items: baseline; gap: var(--s1); padding: 14px var(--s2); border-bottom: 1px solid var(--linie); }
.lumo-titel span { color: var(--leise); font-size: 13px; }
.lumo-zu { margin-left: auto; border: 0; background: none; color: var(--zweit); font-size: 22px; cursor: pointer; line-height: 1; }
.lumo-verlauf { padding: 14px var(--s2); overflow-y: auto; display: grid; gap: 10px; flex: 1; }
.lumo-verlauf .von-lumo, .lumo-verlauf .von-dir { padding: 10px 13px; border-radius: 18px; font-size: 15px; max-width: 92%; }
.lumo-verlauf .von-lumo { background: rgb(58 58 60 / .9); border-bottom-left-radius: 6px; }
.lumo-verlauf .von-dir { background: var(--blau); justify-self: end; border-bottom-right-radius: 6px; }
.lumo-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--s2) 10px; }
.lumo-chips button { border: 0; background: rgb(118 118 128 / .24); color: var(--ink); font: 13px var(--font); padding: 6px 12px; border-radius: 980px; cursor: pointer; }
.lumo-chips button:hover { background: rgb(118 118 128 / .36); }
.lumo-eingabe { display: flex; gap: var(--s1); padding: 12px 14px; border-top: 1px solid var(--linie); }
.lumo-eingabe input { flex: 1; min-width: 0; font: 15px var(--font); color: var(--ink); background: rgb(255 255 255 / .08); border: 1px solid var(--linie); border-radius: 980px; padding: 8px 14px; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* Schmale Bildschirme */
@media (max-width: 1068px) {
  .reiter { display: none; position: absolute; top: 52px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: var(--s1) var(--rand) var(--s3);
    background: rgb(22 22 23 / .96); backdrop-filter: blur(20px); border-bottom: 1px solid var(--linie); }
  .reiter.offen { display: flex; }
  .reiter a { font-size: 17px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .kopf-rechts { margin-left: auto; }
  .menue { display: block; }
  .raster, .raster.vier { grid-template-columns: repeat(2, 1fr); }
  .hilfe-raster { grid-template-columns: 1fr; }
  .inhalt { position: static; max-height: none; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .inhalt b { grid-column: 1 / -1; }
  .kapitelleiste { display: none; }
}
@media (max-width: 734px) {
  .kopf-rechts .konto-link { display: none; }
  .reiter .nur-handy { display: block; }
  .bereich { padding-top: var(--s6); padding-bottom: var(--s6); }
  .raster, .raster.zwei, .raster.vier, .schritte, .zwei-felder, .formular.reihe, .fuss-spalten { grid-template-columns: 1fr; }
  .kachel { padding: var(--s4) var(--s3); }
  .kapitel { padding-bottom: var(--s6); }
  .kapitel-text.rechts { text-align: left; margin-left: 0; }
  .kapitel-text.rechts .aktion { justify-content: flex-start; }
  body[data-seite="start"] .daempfer { background: linear-gradient(0deg, rgb(0 0 0 / .75), rgb(0 0 0 / .1) 70%); }
  .tabelle > div { grid-template-columns: 1fr; gap: 2px; }
  .anleitungen article { padding: var(--s3); }
  .lumo { right: var(--s2); bottom: var(--s2); }
  .lumo-blase { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .erscheint { opacity: 1; transform: none; }
}
.schmal { max-width: 980px; margin-left: auto; margin-right: auto; }
.oben1 { margin-top: var(--s1); }
.oben2 { margin-top: var(--s2); }
.umbruch { word-break: break-all; }
[hidden] { display: none !important; }

/* ---------- Konto: Zwei-Faktor ---------- */
.pille.breit { width: 100%; }
.klein-link { color: var(--link); font-size: 14px; justify-self: start; cursor: pointer; }
.konto-box.breiter { max-width: 600px; }
.feldname { font-size: 14px; color: var(--zweit); margin-bottom: -6px; }
.einrichten-schritte { color: var(--zweit); padding-left: 22px; display: grid; gap: var(--s1); margin: var(--s3) 0; }
.einrichten-schritte li::marker { color: var(--cyan); font-weight: 600; }
.qr-feld { display: grid; grid-template-columns: 184px 1fr; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
.qr { width: 184px; height: 184px; padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--linie), 0 20px 50px -20px rgb(0 0 0 / .6);
  animation: qr-rein .7s cubic-bezier(.2,.8,.2,1) both; }
.qr svg { width: 100%; height: 100%; display: block; }
@keyframes qr-rein { from { opacity: 0; transform: scale(.85) rotate(-4deg); } to { opacity: 1; transform: none; } }
.geheimnis { display: block; font-size: 15px; letter-spacing: .12em; word-break: break-all; margin: 6px 0 var(--s2); padding: 10px 12px; user-select: all; }
.schild { width: 64px; height: 64px; margin: 0 auto var(--s2); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgb(41 151 255 / .25), transparent 70%); }
.schild svg { width: 44px; height: 44px; fill: none; stroke: var(--link); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ersatz-liste { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ersatz-liste li { font: 600 18px var(--font-mono); letter-spacing: .08em; text-align: center; padding: 12px; border-radius: 12px; background: rgb(255 255 255 / .06);
  animation: rein .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rein { from { opacity: 0; transform: translateY(10px); } }

/* Code-Eingabe: sechs Felder; Tippen lässt die Ziffer aufspringen, beim Prüfen läuft ein Lichtband,
   richtig: die Felder kippen nacheinander grün und ein Haken zeichnet sich mit Lichtring; falsch: Schütteln, dann leer */
.code-bereich { display: grid; justify-items: center; gap: var(--s2); margin-top: var(--s3); }
.code-eingabe { position: relative; display: flex; gap: 10px; perspective: 600px; }
.code-eingabe .trenner { width: 10px; }
.ziffer { width: 52px; height: 64px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06); color: var(--ink);
  font: 600 28px/1 var(--font-display); text-align: center; caret-color: var(--link); padding: 0;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.ziffer:focus { outline: 0; border-color: var(--link); background: rgb(41 151 255 / .1); box-shadow: 0 0 0 4px rgb(41 151 255 / .22); transform: translateY(-2px); }
.ziffer.voll { animation: aufspringen .28s cubic-bezier(.2,1.6,.4,1); border-color: rgb(255 255 255 / .32); }
@keyframes aufspringen { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.code-eingabe.prueft .ziffer { border-color: transparent; color: #fff;
  background: linear-gradient(110deg, rgb(41 151 255 / .12) 20%, rgb(168 216 242 / .55) 45%, rgb(179 164 230 / .45) 55%, rgb(41 151 255 / .12) 80%);
  background-size: 300% 100%; animation: lichtband 1s linear infinite; animation-delay: calc(var(--i) * 70ms); }
@keyframes lichtband { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.code-eingabe.ok .ziffer { animation: kippen .6s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes kippen { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); background: rgb(48 209 88 / .2); }
  100% { transform: rotateX(0); background: rgb(48 209 88 / .22); border-color: rgb(48 209 88 / .8); color: #fff; box-shadow: 0 0 24px -4px rgb(48 209 88 / .7); } }
.code-eingabe.falsch { animation: schuetteln .5s cubic-bezier(.36,.07,.19,.97); }
.code-eingabe.falsch .ziffer { border-color: var(--rot); background: rgb(255 105 97 / .12); }
@keyframes schuetteln { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }
.code-haken { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; pointer-events: none; opacity: 0; }
.code-haken::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; border: 2px solid rgb(48 209 88 / .8); opacity: 0; }
.code-eingabe.ok .code-haken { animation: haken-da .3s ease .55s forwards; }
.code-eingabe.ok .code-haken::before { animation: ring 1s cubic-bezier(.2,.8,.2,1) .7s; }
.code-haken svg { width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgb(48 209 88 / .8)); }
.code-haken circle { fill: rgb(20 28 22 / .92); stroke: var(--gruen); stroke-width: 3; stroke-dasharray: 280; stroke-dashoffset: 280; }
.code-haken path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.code-eingabe.ok .code-haken circle { animation: zeichnen .6s ease .6s forwards; }
.code-eingabe.ok .code-haken path { animation: zeichnen .4s ease 1s forwards; }
@keyframes haken-da { to { opacity: 1; } }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes ring { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }
.code-umschalten { font-size: 13px; color: var(--link); background: none; border: 0; cursor: pointer; font-family: var(--font); }
.ersatz-eingabe { width: 220px; text-align: center; font: 600 20px var(--font-mono); letter-spacing: .1em; }
@media (max-width: 734px) {
  .qr-feld { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ziffer { width: 42px; height: 54px; font-size: 24px; }
  .code-eingabe { gap: 7px; }
  .ersatz-liste { grid-template-columns: 1fr 1fr; }
}

/* Rundgang: kleine Leiste unten, solange die Seite von selbst scrollt */
.rundgang-leiste { position: fixed; left: 50%; bottom: var(--s4); z-index: 35; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s2);
  padding: 8px 8px 8px 18px; border-radius: 980px; background: rgb(28 28 30 / .86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--linie); font-size: 14px; animation: rein .4s cubic-bezier(.2,.8,.2,1) both; transition: opacity .35s, transform .35s; }
.rundgang-leiste.weg { opacity: 0; transform: translate(-50%, 10px); }
.rundgang-leiste b { width: 90px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .18); overflow: hidden; }
.rundgang-leiste i { display: block; height: 100%; background: var(--verlauf); transform-origin: left; transform: scaleX(0); transition: transform .8s ease; }
.rundgang-leiste button { border: 0; border-radius: 980px; padding: 6px 12px; background: rgb(255 255 255 / .14); color: var(--ink); font: 13px var(--font); cursor: pointer; }

/* Startseite: Stärken-Band unter dem ersten Bild, ruhiger Teil am Ende */
.staerken { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); max-width: var(--breite); margin: -64px auto 0; padding: 0 var(--rand); }
.staerke { display: grid; gap: 6px; padding: var(--s3); border-radius: 22px; background: rgb(28 28 30 / .62); border: 1px solid var(--linie);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); transition: transform .3s, background .3s; }
.staerke:hover { background: rgb(44 44 46 / .7); }
.staerke svg { width: 30px; height: 30px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s1); }
.staerke b { font-size: 17px; }
.staerke span { color: var(--zweit); font-size: 14px; }
.staerke:nth-child(2) { transition-delay: .05s; } .staerke:nth-child(3) { transition-delay: .1s; } .staerke:nth-child(4) { transition-delay: .15s; }
.ruhig-bereich { position: relative; padding-top: var(--s7); background: linear-gradient(180deg, transparent, rgb(0 0 0 / .82) 160px); }
.oben5 { margin-top: var(--s5); }
.schluss-bereich { padding-top: var(--s8); padding-bottom: var(--s8); }
.schluss-bereich .unter { margin-top: var(--s2); }
@media (max-width: 1068px) { .staerken { grid-template-columns: repeat(2, 1fr); margin-top: -32px; } }
@media (max-width: 734px) { .staerken { grid-template-columns: 1fr 1fr; gap: 10px; } .staerke { padding: var(--s2); } }
.haken-feld { display: grid !important; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--zweit); cursor: pointer; }
.haken-feld input { width: 20px; height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--blau); }
.offen-hinweis { border-left: 3px solid var(--gelb); padding: 10px 14px; background: rgb(255 214 10 / .07); border-radius: 0 12px 12px 0; }
.text-bereich .punkte { margin: var(--s2) 0 0; }

/* Wege zum Server */
.oben3 { margin-top: var(--s4); }
.schmal-anleitungen { max-width: 980px; margin: 0 auto; padding: 0 var(--rand) var(--s7); }
.empfehlung { display: inline-block; vertical-align: middle; font: 600 12px var(--font); letter-spacing: .02em; color: #0b2a12; background: var(--gruen);
  padding: 3px 9px; border-radius: 980px; margin-left: 6px; }
.anleitungen article.empfohlen { box-shadow: 0 0 0 1px rgb(48 209 88 / .5), 0 20px 50px -30px rgb(48 209 88 / .6); }
.vergleich > div { grid-template-columns: 1.1fr 2fr .9fr; }

/* ---------- Ausführliche Seiten: Sprungleiste, Themen mit Merkmalen, Fragen, Link-Kacheln ---------- */
.sprungleiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--s4); }
.sprungleiste a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 15px; color: var(--link); }
.sprungleiste svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.thema { max-width: var(--breite); margin: 0 auto; padding: var(--s7) var(--rand); display: grid; grid-template-columns: minmax(280px, 5fr) 8fr; gap: var(--s6);
  align-items: start; scroll-margin-top: 60px; }
.thema + .thema { border-top: 1px solid var(--linie); }
.thema-kopf { position: sticky; top: 100px; }
.thema-kopf h2 { font-size: clamp(30px, 3.4vw, 48px); margin: var(--s1) 0 var(--s2); }
.thema-kopf p { color: var(--zweit); font-size: 19px; line-height: 1.42; }
.thema-kopf .weiter { margin-top: var(--s3); font-size: 17px; }
.thema-symbol { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: var(--s3);
  background: var(--glas); border: 1px solid var(--glas-rand); }
.thema-symbol svg { width: 28px; height: 28px; fill: none; stroke: #bfe6f6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.merkmale { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.merkmal { background: var(--flaeche); border: 1px solid rgb(255 255 255 / .06); border-radius: 22px; padding: var(--s3) var(--s3) 26px;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); display: grid; gap: 6px; align-content: start; }
.merkmal.breit { grid-column: 1 / -1; }
.merkmal svg { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.merkmal b { font-size: 17px; font-weight: 600; }
.merkmal span, .merkmal p { color: var(--zweit); font-size: 15px; line-height: 1.47; }
.merkmal kbd, .text-bereich kbd { font: 600 12px var(--font-mono); padding: 2px 6px; border-radius: 6px; background: rgb(255 255 255 / .1); border: 1px solid var(--linie); color: var(--ink); }
.merkmal .klein-text { margin-top: 4px; }

.fragen { max-width: 900px; margin: 0 auto; display: grid; gap: 10px; }
.fragen details { background: var(--flaeche); border-radius: 18px; border: 1px solid rgb(255 255 255 / .06); overflow: hidden; }
.fragen summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 600; font-size: 17px; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--cyan); transition: transform .25s; }
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen details > p, .fragen details > ul { padding: 0 22px 20px; color: var(--zweit); margin: 0; }
.fragen details > p + p { padding-top: 0; }

.link-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.link-kachel { display: grid; gap: 6px; align-content: start; padding: var(--s3); border-radius: 22px; background: var(--flaeche); border: 1px solid rgb(255 255 255 / .06);
  color: var(--ink); transition: transform .25s, background .25s, border-color .25s; }
.link-kachel:hover { text-decoration: none; background: rgb(44 44 46 / .78); border-color: rgb(41 151 255 / .35); }
.link-kachel svg { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.link-kachel b { font-size: 17px; font-weight: 600; }
.link-kachel span { color: var(--zweit); font-size: 14px; }
.link-kachel i { font-style: normal; color: var(--link); font-size: 14px; margin-top: 4px; }

.schritte.vier { grid-template-columns: repeat(4, 1fr); }
.tabelle.zweispaltig > div { grid-template-columns: 1fr 2fr; }
.tabelle.dreispaltig > div { grid-template-columns: 1.1fr 1.4fr 1.6fr; }
.tabelle .ja { color: var(--gruen); }
.tabelle .frage { color: var(--gelb); }
.hinweis-band { max-width: 980px; margin: 0 auto; display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: 22px;
  background: rgb(41 151 255 / .1); border: 1px solid rgb(41 151 255 / .25); }
.hinweis-band svg { flex: none; width: 36px; height: 36px; fill: none; stroke: #bfe6f6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hinweis-band p { color: var(--zweit); }
.hinweis-band b { color: var(--ink); }
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); max-width: 1200px; margin: 0 auto; }
.zahl { text-align: center; padding: var(--s4) var(--s2); border-radius: 22px; background: var(--flaeche); border: 1px solid rgb(255 255 255 / .06); }
.zahl b { display: block; font: 700 clamp(30px, 3.4vw, 44px)/1.05 var(--font-display); background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zahl span { display: block; margin-top: 6px; color: var(--zweit); font-size: 14px; }

@media (max-width: 1068px) {
  .thema { grid-template-columns: 1fr; gap: var(--s4); }
  .thema-kopf { position: static; }
  .link-kacheln, .zahlen { grid-template-columns: repeat(2, 1fr); }
  .schritte.vier { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 734px) {
  .merkmale, .link-kacheln, .schritte.vier { grid-template-columns: 1fr; }
  .zahlen { grid-template-columns: 1fr 1fr; }
  .thema { padding-top: var(--s5); padding-bottom: var(--s5); }
  .hinweis-band { flex-direction: column; align-items: flex-start; padding: var(--s3); }
  .tabelle.zweispaltig > div, .tabelle.dreispaltig > div { grid-template-columns: 1fr; }
  .fragen summary { padding-left: 18px; }
}
.kachel > h2 { font-size: clamp(28px, 3vw, 40px); }
.karte { background: var(--flaeche); border-radius: var(--rund); padding: var(--s4); border: 1px solid rgb(255 255 255 / .06);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
.karte p { color: var(--zweit); }
.karte a { display: inline-block; margin-top: var(--s2); }
.leer-kachel .symbol { margin: 0 auto var(--s2); display: block; }
.leer-kachel h3 { margin-bottom: var(--s1); }
.kachel > .tabelle:first-child { margin-top: 0; }
.merkmal code { white-space: nowrap; }
@media (max-width: 734px) {
  .tabelle.zweispaltig .kopfzeile, .tabelle.dreispaltig .kopfzeile { display: none; }
  .kachel.schmal:has(> .tabelle) { padding: var(--s2); }
}

/* ---------- Profil (Konto, angemeldet) ---------- */
.profil { max-width: 1100px; margin: 0 auto; display: grid; gap: var(--s3); }
.profil-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4); }
.profilbild { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font: 600 32px var(--font-display); color: #fff;
  letter-spacing: .02em; background: linear-gradient(140deg, #4aa8ff, #0060df); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .18); }
.profilbild[data-farbe="violett"], .farbe[data-farbe="violett"] { background: linear-gradient(140deg, #b48cff, #6e46d8); }
.profilbild[data-farbe="gruen"], .farbe[data-farbe="gruen"] { background: linear-gradient(140deg, #4ee08a, #16a34a); }
.profilbild[data-farbe="orange"], .farbe[data-farbe="orange"] { background: linear-gradient(140deg, #ffb156, #f0750f); }
.profilbild[data-farbe="rosa"], .farbe[data-farbe="rosa"] { background: linear-gradient(140deg, #ff8fc3, #e0457f); }
.profilbild[data-farbe="grau"], .farbe[data-farbe="grau"] { background: linear-gradient(140deg, #a1a1a6, #5a5a60); }
.profil-wer h2 { font-size: clamp(26px, 2.6vw, 34px); }
.profil-wer p { color: var(--zweit); margin-top: 4px; }
.profil-aktion { display: grid; gap: var(--s1); justify-items: end; }
.abzeichen-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.abzeichen { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 980px; background: rgb(118 118 128 / .3); color: var(--ink);
  vertical-align: 2px; letter-spacing: 0; }
.abzeichen.gut { background: rgb(48 209 88 / .16); color: var(--gruen); }
.abzeichen.offen { background: rgb(255 214 10 / .14); color: var(--gelb); }
.abzeichen.plan { background: rgb(108 191 224 / .18); color: var(--cyan); }
.abzeichen.plan[data-plan="pro"] { background: var(--verlauf); color: #0b0b14; }
.abzeichen.admin { background: rgb(179 164 230 / .22); color: #d4c9ff; }
.abzeichen.entwurf { background: rgb(255 214 10 / .14); color: var(--gelb); }
.umschalter.vier { grid-template-columns: repeat(4, 1fr); max-width: 560px; margin: 0 auto; width: 100%; }
.umschalter.fuenf { grid-template-columns: repeat(5, 1fr); max-width: 660px; margin: 0 auto; width: 100%; }
.umschalter button { -webkit-user-select: none; user-select: none; }
.profil-teil .konto-box.breiter, .konto-box.breiter { max-width: 640px; }
.farbwahl { display: flex; gap: 12px; flex-wrap: wrap; }
.farbe { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(140deg, #4aa8ff, #0060df);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); transition: transform .2s, box-shadow .2s; }
.farbe:hover { transform: scale(1.08); }
.farbe[aria-checked="true"] { box-shadow: 0 0 0 3px var(--schwarz), 0 0 0 5px var(--ink); }
.sitzungen { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 8px; }
.sitzungen li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / .05); }
.sitzungen li b { color: var(--ink); font-weight: 600; font-size: 15px; }
.sitzungen li span { color: var(--leise); font-size: 14px; }
.sitzungen li.diese { background: rgb(0 113 227 / .16); }

/* ---------- Preise ---------- */
.entwurf-band { max-width: 760px; margin: var(--s3) auto 0; text-align: center; font-size: 14px; color: var(--gelb); background: rgb(255 214 10 / .08);
  border: 1px solid rgb(255 214 10 / .25); border-radius: 980px; padding: 8px 18px; }
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); max-width: 1200px; margin: 0 auto; align-items: stretch; }
.preis { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s2); padding: var(--s5) var(--s4); border-radius: var(--rund); background: var(--flaeche);
  border: 1px solid rgb(255 255 255 / .06); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); position: relative; }
.preis.hervor { border-color: rgb(41 151 255 / .45); }
.preis .band { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 980px;
  background: var(--verlauf); color: #0b0b14; white-space: nowrap; }
.preis h3 { font-size: 24px; }
.preis .betrag { font: 700 clamp(40px, 4vw, 56px)/1 var(--font-display); }
.preis .betrag small { font: 500 17px var(--font); color: var(--zweit); margin-left: 4px; }
.preis .neben { color: var(--zweit); font-size: 15px; min-height: 2.9em; }
.preis ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: start; }
.preis li { position: relative; padding-left: 26px; color: var(--zweit); font-size: 15px; }
.preis li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.preis li.grenze::before { border-color: var(--gelb); }
.preis .pille { width: 100%; }
.tabelle.preis-tabelle > div { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; align-items: center; }
.preise.vier { grid-template-columns: repeat(4, 1fr); max-width: var(--breite); }
.preis .geplant-titel { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gelb); margin-top: var(--s1); }
.preis ul.geplant li { color: var(--leise); }
.preis ul.geplant li::before { border: 0; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 214 10 / .6); transform: none; top: .5em; left: 3px; }
.tabelle.preis-tabelle span:not(:first-child) { text-align: center; }
.fuss-recht { margin-top: 6px; font-size: 12px; color: var(--leise); }
/* Kostenlose Version: eigene, breite Karte unter den Abo-Plänen – gut sichtbar, aber ruhiger als die Abos */
.gratis-karte { max-width: 1200px; margin: var(--s3) auto 0; display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center;
  padding: var(--s3) var(--s4); border-radius: var(--rund); background: var(--flaeche); border: 1px solid rgb(255 255 255 / .06); }
.gratis-karte[hidden] { display: none; }
.gratis-preis h3 { font-size: 20px; }
.gratis-preis .betrag { font: 700 40px/1 var(--font-display); margin-top: 4px; }
.gratis-preis .betrag small { font: 500 15px var(--font); color: var(--zweit); margin-left: 4px; }
.gratis-text p { color: var(--ink); }
.gratis-text ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.gratis-text li { position: relative; padding-left: 22px; color: var(--zweit); font-size: 15px; }
.gratis-text li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 11px; height: 6px; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.gratis-text li.grenze::before { border-color: var(--gelb); }
@media (max-width: 1068px) { .gratis-karte { grid-template-columns: 1fr; max-width: 560px; gap: var(--s2); } }
/* Support-Vorrang im Portal (Privat Max zuerst) */
.prio-marke { display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 980px; vertical-align: 2px;
  background: rgb(108 191 224 / .16); color: var(--cyan); }
.prio-marke.max { background: var(--verlauf); color: #0b0b14; }
.mp-zeile.prio-zuerst { box-shadow: inset 3px 0 0 #8ea4ea; }
.prio-hinweis { margin-top: 6px; font-size: 14px; color: #b3a4e6; }
/* Kasse und Abo (Plan wählen, Test-Kasse, Konto → Plan) */
.kaufen { display: grid; gap: var(--s1); }
.kaufen .meldung:empty { display: none; }
.abo-box { display: grid; border-radius: 18px; background: rgb(255 255 255 / .04); border: 1px solid var(--linie); padding: 4px var(--s2); }
.abo-box .aktion, .abo-box .meldung, .abo-box .klein-text { padding-bottom: var(--s1); }
.abo-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.abo-zeile:last-of-type { border-bottom: 0; }
.abo-zeile > span { color: var(--zweit); }
.abo-zeile b { display: inline-flex; gap: 8px; align-items: center; text-align: right; }
.abo-zeile.summe b { font: 700 22px/1.2 var(--font-display); }
.kasse-punkte { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.5; }
.test-band { display: grid; gap: 4px; padding: var(--s2) var(--s3); border-radius: 18px; background: rgb(255 214 10 / .08); border: 1px solid rgb(255 214 10 / .25);
  font-size: 14px; color: var(--zweit); }
.test-band b { color: var(--gelb); }
@media (max-width: 1280px) { .preise.vier { grid-template-columns: repeat(2, 1fr); max-width: 1100px; } }
@media (max-width: 1068px) {
  .preise, .preise.vier { grid-template-columns: 1fr; max-width: 560px; }
  .preis .neben { min-height: 0; }
}
@media (max-width: 734px) {
  .profil-kopf { grid-template-columns: auto 1fr; padding: var(--s3); gap: var(--s2); }
  .profilbild { width: 64px; height: 64px; font-size: 24px; }
  .profil-aktion { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
  .umschalter.vier button, .umschalter.fuenf button { font-size: 13px; padding: 7px 2px; }
  .tabelle.preis-tabelle > div { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 4px; padding: 10px 8px; font-size: 12px; }
  .tabelle.preis-tabelle .kopfzeile { display: grid; }
}

/* ---------- Glas (wie in der App): alle Flächen gleich, das Zimmer scheint durch ---------- */
.daempfer { background: rgb(0 0 0 / .52); }
.kopfbereich .einleitung, .thema-kopf p, .bereich > .unter, .kopfbereich h1, .thema-kopf h2 { text-shadow: 0 1px 18px rgb(0 0 0 / .55); }
.kachel, .merkmal, .link-kachel, .zahl, .fragen details, .karte, .preis, .anleitungen article, .schritte li, .lumo-fenster {
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.link-kachel:hover { background: var(--glas-hover); border-color: rgb(108 191 224 / .4); }
.fragen details[open] { background: var(--glas-hover); }
.preis.hervor { border-color: rgb(41 151 255 / .5); box-shadow: var(--glas-schatten); }
.hinweis-band { border-color: rgb(108 191 224 / .3); box-shadow: var(--glas-schatten); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
  background: linear-gradient(rgb(41 151 255 / .12), rgb(41 151 255 / .12)), linear-gradient(var(--glas-tint), var(--glas-tint)); }
.kopf { background: var(--glas-glanz), linear-gradient(rgb(18 18 22 / .55), rgb(18 18 22 / .55)); border-bottom: 1px solid var(--glas-rand);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .03), 0 10px 30px -20px rgb(0 0 0 / .8);
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(.7); backdrop-filter: blur(24px) saturate(160%) brightness(.7); }
.fuss, body[data-seite="start"] .fuss { background: var(--glas-glanz), linear-gradient(rgb(14 14 18 / .62), rgb(14 14 18 / .62)); border-top: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.thema-symbol { box-shadow: var(--glas-kante); }
.tabelle { background: rgb(255 255 255 / .02); }
.kachel .tabelle, .kachel .fragen details, .kachel .sitzungen li { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* Glas im Glas: kein zweites Blur */
.preis .betrag.text { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; }
.preis .betrag { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 4px; }
.preis .betrag small { margin-left: 0; line-height: 1.2; }
@media (max-width: 734px) {
  :root { --glas-blur: blur(16px) saturate(130%) brightness(.6); --glas-tint: rgb(20 20 24 / .6); }   /* Handy: weniger Rechenarbeit, etwas dichter */
  .daempfer { background: rgb(0 0 0 / .58); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glas-tint: rgb(24 24 28 / .94); }
}
.profil-reiter { background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-kante); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }

/* Preise: Umschalter Privat / Für Firmen und Monat / Jahr; drei Karten je Gruppe */
.preis-schalter { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: 0 auto var(--s5); }
.preis-schalter .umschalter { margin: 0; min-width: 300px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-kante);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.preis-schalter .spar { font-size: 11px; color: var(--gruen); margin-left: 4px; }
.preise[hidden], .enterprise-band[hidden], .preis-fuss[hidden], .preis-schalter .umschalter[hidden] { display: none !important; }
.enterprise-band { max-width: 1200px; margin: var(--s3) auto 0; display: flex; gap: var(--s3); align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s4); border-radius: 980px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.enterprise-band p { color: var(--zweit); }
.enterprise-band b { color: var(--ink); }
@media (max-width: 734px) {
  .preis-schalter .umschalter { min-width: 0; width: 100%; }
  .enterprise-band { flex-direction: column; align-items: flex-start; border-radius: 22px; padding: var(--s3); }
}
.tabelle.preis-tabelle.vier-spalten > div { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
.preis .betrag.platzhalter { color: var(--zweit); font-size: 28px; line-height: 1.2; }   /* „Preis folgt“: ruhig, nicht so groß wie ein echter Preis */
.preis .betrag.platzhalter small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gelb); }
@media (max-width: 734px) { .tabelle.preis-tabelle.vier-spalten > div { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 6px; padding: 10px; font-size: 13px; } }

/* Handy: Platz unter dem Inhalt, damit Lumo unten rechts nichts verdeckt */
@media (max-width: 734px) { body { padding-bottom: 84px; } }

/* ---------- Profilbilder (Vorlagen und eigene) ---------- */
button.klein-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--link); cursor: pointer; }
button.klein-link:hover { text-decoration: underline; }
.klein-link.rot { color: var(--rot); }
.profilbild { overflow: hidden; }
.profilbild img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.konto-link { display: inline-flex; align-items: center; gap: 8px; }
.kopf-bild { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .22); }
.team-link { font-size: 12px; font-weight: 600; color: #d4c9ff; padding: 4px 10px; border-radius: 980px; background: rgb(179 164 230 / .18); border: 1px solid rgb(179 164 230 / .3); }
.team-link:hover { text-decoration: none; background: rgb(179 164 230 / .28); }
.team-link[hidden] { display: none; }
.abzeichen.team { background: rgb(179 164 230 / .18); color: #d4c9ff; }
.abzeichen.team:hover { text-decoration: none; background: rgb(179 164 230 / .3); }
.abzeichen[hidden] { display: none; }
.nutzer-id { font-size: 14px; color: var(--leise); margin-top: 6px; }
.nutzer-id code { font-size: 13px; letter-spacing: .04em; }
.bildwahl { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.bild-vorlage { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; aspect-ratio: 1; transition: transform .2s; }
.bild-vorlage img { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 6px 16px -8px rgb(0 0 0 / .6); }
.bild-vorlage:hover { transform: scale(1.07); }
.bild-vorlage[aria-checked="true"] img { box-shadow: 0 0 0 3px var(--schwarz), 0 0 0 5px var(--link); }
.eigenes-bild { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border-radius: 18px; background: rgb(255 255 255 / .04);
  border: 1px solid var(--linie); }
.eigenes-bild .aktion { margin-top: var(--s2); gap: var(--s2); }
.eigenes-vorschau { width: 72px; height: 72px; border-radius: 50%; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); overflow: hidden; }
.eigenes-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.datei-knopf { position: relative; overflow: hidden; cursor: pointer; }
.datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.plan-ablauf { color: var(--cyan); font-weight: 600; margin-bottom: var(--s1); }
.plan-ablauf[hidden] { display: none; }
.reihe-promo { grid-template-columns: 1fr auto; align-items: end; }
.reihe-promo input { text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); }
.versteckt-label { font-size: 0; gap: 0; }
@media (max-width: 734px) {
  .bildwahl { grid-template-columns: repeat(4, 1fr); }
  .eigenes-bild { grid-template-columns: 1fr; justify-items: start; }
  .team-link { display: none; }   /* Handy: im Menü (Rahmen.js) */
}

/* ---------- Mitarbeiter-Portal ---------- */
/* kompakter Kopf: Titel links, Ansicht-Umschalter rechts */
.portal-kopf { max-width: 1440px; padding-top: calc(var(--s7) + 8px); padding-bottom: var(--s3); }
.portal-kopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; justify-content: space-between; }
.portal-kopf h1 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.02em; margin: 2px 0 0; }
.portal-gruss { color: var(--zweit); font-size: 16px; margin-top: 6px; }
.portal-ansicht { display: grid; gap: 6px; justify-items: end; }
.portal-ansicht[hidden], .portal-hinweis[hidden] { display: none; }
.portal-ansicht .umschalter { min-width: 300px; grid-template-columns: repeat(3, 1fr); }
.portal-hinweis { margin-top: var(--s2); padding: 10px 16px; border-radius: 14px; font-size: 14px; color: var(--zweit);
  background: rgb(108 191 224 / .1); border: 1px solid rgb(108 191 224 / .25); }
.portal-gruppe { margin: 14px 12px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.portal-gruppe:first-child { margin-top: 4px; }
.portal-gruppe[hidden] { display: none; }
.zaehler.leise { background: rgb(255 255 255 / .14); color: var(--ink); }
.mp-ueberschrift { font: 600 26px/1.2 var(--font-display); margin: 0; }
.mp-werkzeug .klein-text { margin-top: 4px; }
.mp-flaeche { padding: var(--s3) var(--s4); }
.umschalter.mp-schalter.fuenf { grid-template-columns: repeat(5, auto); }
/* Nutzerseite: Unterreiter und Fakten */
.mp-unterreiter { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--s2) 0; min-width: 0; width: fit-content; max-width: 100%; }
.mp-unterreiter button { flex: none; padding: 8px 16px; }
.mp-fach[hidden] { display: none; }
.mp-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; padding: var(--s3) var(--s4); }
.mp-fakt { display: grid; gap: 6px; align-content: start; justify-items: start; }
.mp-fakt > span:first-child { color: var(--leise); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.mp-fakt b { font-size: 16px; color: var(--ink); }
.mp-fakt .marke-status { white-space: normal; max-width: 100%; }
.mp-teamzeile .mp-zeile-kopf { gap: var(--s2); }
.mp-teamzeile .mp-knoepfe { flex: none; }
.mp-teamzeile .mp-mini { margin-top: 0; }
.mp-teamzeile .klein-text:empty { display: none; }
.passwort-einmal { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 14px;
  background: rgb(255 214 10 / .08); border: 1px solid rgb(255 214 10 / .3); }
.passwort-einmal code { font-size: 16px; letter-spacing: .04em; color: var(--ink); }
.nutzeransicht-band { position: sticky; top: 64px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center;
  margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); padding: 8px 8px 8px 18px; border-radius: 980px; font-size: 14px; color: var(--ink);
  background: var(--glas); border: 1px solid rgb(108 191 224 / .35); box-shadow: var(--glas-schatten); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.portal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--s3); align-items: start; max-width: 1440px; padding-top: var(--s6); padding-bottom: var(--s6); }
.portal[hidden] { display: none; }
.portal-reiter { position: sticky; top: 76px; display: grid; gap: 4px; padding: 10px; border-radius: 22px; background: var(--glas); border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schatten); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.portal-reiter button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  color: var(--zweit); font: 500 15px var(--font); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.portal-reiter button:hover { background: rgb(255 255 255 / .06); color: var(--ink); }
.portal-reiter button[aria-selected="true"] { background: rgb(255 255 255 / .12); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.portal-reiter button[hidden] { display: none; }
.portal-reiter svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zaehler { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 980px; background: var(--blau); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
.zaehler[hidden] { display: none; }
.portal-inhalt { min-width: 0; }
.mp-teil[hidden], #mpnutzer[hidden] { display: none; }
.mp-zahlen { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.mp-zahl { display: grid; gap: 4px; font: inherit; color: inherit; cursor: default; text-align: left; padding: var(--s3); }
button.mp-zahl { cursor: pointer; transition: transform .2s, background .2s; }
button.mp-zahl:hover { background: var(--glas-hover); transform: translateY(-2px); }
.mp-zahl b { font: 700 36px/1 var(--font-display); }
.mp-zahl span { color: var(--zweit); font-size: 14px; }
.mp-titel { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.mp-titel h3 { margin: 0; }
.mp-liste { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 6px; }
.mp-zeile { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .045); border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s; }
.mp-zeile:hover, .mp-zeile:focus-visible { background: rgb(255 255 255 / .08); outline: 0; }
.mp-zeile.statisch { cursor: default; }
.mp-zeile.statisch:hover { background: rgb(255 255 255 / .045); }
.mp-zeile.an { border-color: rgb(41 151 255 / .55); background: rgb(0 113 227 / .14); }
.mp-zeile.neu b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--link); margin-right: 8px; vertical-align: 1px; }
.mp-zeile b { color: var(--ink); font-weight: 600; font-size: 15px; }
.mp-zeile span { color: var(--leise); font-size: 13.5px; overflow-wrap: anywhere; }
.mp-zeile-kopf { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.mp-zeile-kopf b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-zeile code { font-size: 13px; }
.mp-leer { color: var(--leise); font-size: 15px; padding: 12px 4px; list-style: none; }
.mp-werkzeug { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.umschalter.mp-schalter { margin: 0; min-width: 240px; background: var(--glas); border: 1px solid var(--glas-rand); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.umschalter.mp-schalter.drei { grid-template-columns: repeat(3, 1fr); max-width: 520px; margin-bottom: var(--s3); }
.mp-zweigeteilt { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: var(--s2); align-items: start; }
.mp-zweigeteilt > .mp-liste { margin: 0; padding: 10px; }
.mp-scroll { max-height: 70vh; overflow: auto; }
.kachel.mp-detail, .mp-zweigeteilt .kachel { padding: var(--s3); }
.mp-detail .klein-text { margin-top: 6px; }
.mp-verlauf { display: grid; gap: 10px; margin-top: var(--s2); max-height: 50vh; overflow: auto; }
.beitrag.intern { background: rgb(255 214 10 / .08); border: 1px dashed rgb(255 214 10 / .3); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mp-chips:empty { display: none; }
.mp-chip { border: 1px solid rgb(255 105 97 / .35); background: rgb(255 105 97 / .1); color: #ffb4ae; font: 500 12.5px var(--font); padding: 4px 10px; border-radius: 980px; cursor: pointer; }
.mp-chip.id { border-color: rgb(108 191 224 / .4); background: rgb(108 191 224 / .12); color: var(--cyan); }
.mp-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mp-knoepfe.klein { gap: 14px; margin-top: 4px; }
.mp-status { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; margin-left: auto; }
.mp-status select, .mp-mini { font: 14px var(--font); color: var(--ink); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); border-radius: 10px; padding: 6px 10px; }
.mp-mini { justify-self: start; margin-top: 6px; font-size: 13px; padding: 4px 8px; }
.mp-suche { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 980px; }
.mp-suche svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--zweit); stroke-width: 1.8; stroke-linecap: round; }
.mp-suche input { flex: 1; min-width: 0; font: 17px var(--font); color: var(--ink); background: transparent; border: 0; outline: 0; padding: 8px 0; }
.mp-treffer { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 8px; }
.mp-treffer-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: center; padding: 12px 16px; border-radius: 18px; cursor: pointer;
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-kante); transition: background .2s; }
.mp-treffer-zeile:hover, .mp-treffer-zeile:focus-visible { background: var(--glas-hover); outline: 0; }
.mp-treffer-zeile b { display: block; color: var(--ink); }
.mp-treffer-zeile span { color: var(--leise); font-size: 14px; }
.mp-treffer-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.mp-bild { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); }
.mp-bild.gross { width: 96px; height: 96px; }
.mp-nutzer-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s4); margin-top: var(--s2); }
.mp-nutzer-kopf h2 { font-size: clamp(26px, 2.6vw, 34px); }
.mp-id { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 6px; color: var(--leise); font-size: 14px; }
.mp-id code { font-size: 14px; letter-spacing: .04em; color: var(--ink); }
.marke-status.fehlgeschlagen { background: rgb(255 105 97 / .16); color: var(--rot); }
.marke-status.eingegangen { background: rgb(48 209 88 / .16); color: var(--gruen); }
.marke-status.erstattet { background: rgb(118 118 128 / .3); color: var(--zweit); }
.marke-status.plan { background: rgb(108 191 224 / .18); color: var(--cyan); }
.marke-status.rolle { background: rgb(179 164 230 / .22); color: #d4c9ff; }
.mp-promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.mp-promo .kachel { padding: var(--s4); }
.mp-fehlercodes { display: grid; gap: var(--s2); margin-top: var(--s2); }
.mp-fehlercodes .kachel { padding: var(--s3) var(--s4); }
.mp-fc code { color: var(--link); font-weight: 600; }
.mp-fc .mp-zeile-kopf { justify-content: flex-start; }
.mp-protokoll { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 6px; }
.mp-anfragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.mp-anfragen > .mp-leer { grid-column: 1 / -1; }
.mp-anfrage { padding: var(--s3) var(--s4); }
.mp-anfrage.offen { border-color: rgb(255 214 10 / .35); }
.mp-anfrage .klein-text { margin-top: 6px; }
.mp-grund { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / .05); color: var(--zweit); font-size: 15px; }
.mp-nutzer-mini { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; margin-top: var(--s2); padding: 10px 14px;
  border: 1px solid var(--glas-rand); border-radius: 16px; background: rgb(255 255 255 / .05); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mp-nutzer-mini:hover { background: rgb(255 255 255 / .09); }
.mp-nutzer-mini b { display: block; font-size: 15px; }
.mp-nutzer-mini span { color: var(--leise); font-size: 13px; }
.mp-nutzer-mini .mp-bild { width: 40px; height: 40px; }
.mp-regeln { padding-left: 1.2em; display: grid; gap: 6px; color: var(--zweit); }
.mp-admin-karte { padding: var(--s3) var(--s4); }
.mp-admin-karte .formular.reihe { grid-template-columns: minmax(0, 260px) auto auto; justify-content: start; }
.mp-admin-karte .meldung { grid-column: 1 / -1; }
.oben3 { margin-top: var(--s3); }
@media (max-width: 1180px) {
  .mp-zahlen { grid-template-columns: repeat(3, 1fr); }
  .mp-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-zweigeteilt, .mp-promo, .mp-anfragen { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .portal { grid-template-columns: 1fr; }
  .portal-reiter { position: sticky; top: 56px; z-index: 5; display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 16px; padding: 6px; }
  .portal-reiter::-webkit-scrollbar { display: none; }
  .portal-reiter button { width: auto; flex: none; white-space: nowrap; padding: 8px 12px; font-size: 14px; }
  .portal-reiter svg { display: none; }
  .portal-gruppe { display: none; }
  .portal-ansicht { justify-items: start; }
}
@media (max-width: 734px) {
  .mp-zahlen { grid-template-columns: repeat(2, 1fr); }
  .mp-zahl b { font-size: 28px; }
  .mp-nutzer-kopf { grid-template-columns: auto 1fr; padding: var(--s3); }
  .mp-nutzer-kopf > .pille { grid-column: 1 / -1; justify-self: start; }
  .mp-bild.gross { width: 64px; height: 64px; }
  .mp-treffer-zeile { grid-template-columns: auto 1fr; }
  .mp-treffer-info { grid-column: 1 / -1; justify-content: flex-start; }
  .mp-admin-karte .formular.reihe { grid-template-columns: 1fr; }
  .mp-status { margin-left: 0; }
  .portal-ansicht .umschalter { min-width: 0; width: 100%; }
  .umschalter.mp-schalter.fuenf { grid-template-columns: repeat(3, auto); }
  .mp-unterreiter { width: 100%; }
  .mp-unterreiter button { padding: 7px 12px; }
  .mp-fakten { padding: var(--s3); gap: 12px; }
  .mp-teamzeile .mp-zeile-kopf { flex-wrap: wrap; }
  .reihe-promo { grid-template-columns: 1fr; }
}

/* Auswahllisten: die aufgeklappte Liste zeichnet das System – dunkel wie die Seite, nie weiße Schrift auf weißem Grund */
select { color-scheme: dark; }
select option, select optgroup { background: #1c1c22; color: #f5f5f7; }
.mp-suche select { flex: none; width: auto; font: 14px var(--font); color: var(--ink); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1);
  border-radius: 980px; padding: 7px 12px; }
.mp-anzahl { margin: 10px 4px 0; }
@media (max-width: 734px) { .mp-suche { flex-wrap: wrap; border-radius: 22px; } .mp-suche select { flex: 1; } }
.mp-zahlzeile .mp-zeile-kopf { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.mp-zahlwer { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-width: 0; }
.mp-zahlwer .mp-bild { grid-row: span 2; }
.mp-zahlwer span { color: var(--zweit); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 734px) { .mp-zahlzeile .mp-zeile-kopf { grid-template-columns: 1fr auto; } }
.mp-bestaetigung[hidden] { display: none; }
.mp-bestaetigung input { letter-spacing: .25em; font-variant-numeric: tabular-nums; max-width: 200px; }

/* Mitarbeiter-Portal: freundlicher – das Zimmer scheint deutlicher durch (Text bleibt auf Glas lesbar) */
body[data-seite="mitarbeiter"] .daempfer { background: linear-gradient(90deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .3) 45%, rgb(0 0 0 / .18) 100%); }
.portal-ansicht > .klein-text { color: var(--ink); text-shadow: 0 1px 6px rgb(0 0 0 / .8); }

/* Portal → Sicherheit */
.mp-zahlen.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 734px) { .mp-zahlen.drei { grid-template-columns: repeat(2, 1fr); } }
.sicher-stand { border-radius: 16px; padding: 12px var(--s2); font-size: 15px; font-weight: 600; }
.sicher-stand.ruhig { background: rgb(48 209 88 / .1); color: var(--gruen); border: 1px solid rgb(48 209 88 / .25); }
.sicher-stand.warnung { background: rgb(255 105 97 / .1); color: var(--rot); border: 1px solid rgb(255 105 97 / .3); }
.sicher-balken { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 160px; align-items: end; }
.sicher-balken > div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; }
.sicher-balken i { align-self: end; display: block; min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--verlauf); }
.sicher-balken span { font-size: 12px; color: var(--leise); }

/* Lumo → Tokens sparen */
.spar-zahlen { max-width: 1100px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.spar-zahl { display: grid; gap: 8px; padding: var(--s4); border-radius: var(--rund); background: var(--flaeche); border: 1px solid rgb(142 164 234 / .3);
  text-align: center; }
.spar-zahl b { white-space: nowrap; font: 800 clamp(40px, 5vw, 68px)/1 var(--font-display); background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spar-zahl span { color: var(--zweit); font-size: 15px; }
.spar-zahlen.vier { grid-template-columns: repeat(4, 1fr); max-width: 1300px; }
.spar-zahlen.vier .spar-zahl b { font-size: clamp(36px, 3.3vw, 60px); }   /* vier nebeneinander: Zahl bleibt auf einer Zeile */
@media (max-width: 1280px) { .spar-zahlen.vier { grid-template-columns: repeat(2, 1fr); max-width: 900px; } }
@media (max-width: 1068px) { .spar-zahlen, .spar-zahlen.vier { grid-template-columns: 1fr; max-width: 560px; } }
.spar-vergleich { max-width: 1100px; margin-left: auto; margin-right: auto; }
.spar-zeile { display: grid; grid-template-columns: 110px 1fr 150px; gap: var(--s2); align-items: center; padding: 10px 0; font-size: 15px; }
.spar-zeile > span { color: var(--zweit); }
.spar-zeile > b { text-align: right; }
.spar-spur { height: 14px; border-radius: 980px; background: rgb(255 255 255 / .06); overflow: hidden; }
.spar-spur i { display: block; height: 100%; border-radius: 980px; }
.spar-spur i.voll { width: 100%; background: rgb(255 105 97 / .7); }
.spar-spur i.klein { width: 4.8%; min-width: 10px; background: var(--verlauf); }
@media (max-width: 734px) { .spar-zeile { grid-template-columns: 80px 1fr; } .spar-zeile > b { grid-column: 2; text-align: left; } }
.spar-quelle { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; font-size: 14px; color: var(--leise); }
.spar-quelle b { color: var(--zweit); }
.tabelle.vergleich-tabelle > div { grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; }
.tabelle.vergleich-tabelle span:not(:first-child) { text-align: center; font-size: 14px; }
.tabelle.vergleich-tabelle .nein { color: var(--rot); }
.tabelle.vergleich-tabelle .teils { color: var(--gelb); }
.tabelle.vergleich-tabelle .ja { color: var(--gruen); }
.tabelle.vergleich-tabelle .hervor { background: rgb(142 164 234 / .1); border-radius: 14px; }
@media (max-width: 734px) { .tabelle.vergleich-tabelle > div { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 4px; font-size: 12px; } }
.preis .betrag.entwicklung { display: flex; align-items: center; min-height: 56px; }
.entwicklung-marke { display: inline-block; font: 600 17px var(--font); padding: 8px 16px; border-radius: 980px; color: var(--gelb);
  background: rgb(255 214 10 / .1); border: 1px solid rgb(255 214 10 / .3); }

/* Sternenkarte (Bild aus dem Agent OS) */
.sternbild { max-width: 1100px; margin-left: auto; margin-right: auto; }
.sternbild img { display: block; width: 100%; height: auto; border-radius: var(--rund); border: 1px solid var(--glas-rand);
  box-shadow: 0 40px 100px -40px rgb(0 0 0 / .8), 0 2px 10px rgb(0 0 0 / .3); }
.sternbild figcaption { margin-top: var(--s2); text-align: center; font-size: 14px; color: var(--leise); }
.sternbild.breit-bild { margin-top: var(--s4); margin-bottom: var(--s4); }

/* Werbefilm auf der Startseite */
.film-bereich { scroll-snap-align: start; }
.film { max-width: 1200px; margin: var(--s4) auto 0; }
.film video { display: block; width: 100%; height: auto; border-radius: var(--rund); background: #000; border: 1px solid var(--glas-rand);
  box-shadow: 0 40px 100px -40px rgb(0 0 0 / .8), 0 2px 10px rgb(0 0 0 / .3); }
.film-rahmen { position: relative; }
.film-start { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: grid; justify-items: center; gap: 14px;
  border: 0; background: none; color: #fff; cursor: pointer; font: 600 17px var(--font); }
.film-start svg { width: 112px; height: 112px; padding: 26px 22px 26px 30px; border-radius: 50%; fill: #fff; background: rgb(255 255 255 / .16);
  border: 1px solid rgb(255 255 255 / .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px -20px rgb(0 0 0 / .7), 0 0 0 0 rgb(142 164 234 / .5); transition: transform .25s ease, background .25s ease; }
.film-start:hover svg { transform: scale(1.08); background: rgb(255 255 255 / .26); }
.film-start span { padding: 6px 14px; border-radius: 980px; background: rgb(0 0 0 / .45); text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
@media (max-width: 734px) { .film-start svg { width: 76px; height: 76px; padding: 18px 14px 18px 20px; } }
/* Support: Tickets nur mit Konto, Meine Tickets */
.anmelden-noetig { display: grid; gap: 16px; padding: 22px; border-radius: var(--rund); background: rgb(142 164 234 / .08); border: 1px solid rgb(142 164 234 / .25); }
.anmelden-noetig p { margin: 0; color: var(--zweit); }
.meine-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meine-tickets button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; text-align: left;
  border-radius: 14px; border: 1px solid var(--linie, rgb(255 255 255 / .1)); background: rgb(255 255 255 / .03); color: inherit; font: inherit; cursor: pointer; }
.meine-tickets button:hover, .meine-tickets button.aktiv { border-color: rgb(142 164 234 / .55); background: rgb(142 164 234 / .08); }
.meine-tickets b { display: block; }
.meine-tickets small { color: var(--zweit); font-size: 13px; }
button.klein-link.gefahr { color: #ff6b6b; }
.pille.gefahr { color: #ff6b6b; }
/* Preise: Vergleich mit fünf Spalten, Max hervorgehoben */
.tabelle.preis-tabelle.fuenf-spalten > div { grid-template-columns: 2fr repeat(4, 1fr); gap: 0; padding: 0; align-items: stretch; }
.tabelle.preis-tabelle.fuenf-spalten span { padding: 16px 12px; display: grid; align-content: center; }
.tabelle.preis-tabelle.fuenf-spalten span:first-child { padding-left: 20px; }
.tabelle.preis-tabelle.fuenf-spalten .max { background: rgb(142 164 234 / .1); color: var(--ink); font-weight: 600; }
.tabelle.preis-tabelle.fuenf-spalten .kopfzeile span { font-weight: 700; color: var(--ink); }
.tabelle.preis-tabelle.fuenf-spalten .kopfzeile .max { border-radius: 16px 16px 0 0; background: rgb(142 164 234 / .2); }
.tabelle.preis-tabelle.fuenf-spalten .kopfzeile .max small { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--link); }
.tabelle.preis-tabelle.fuenf-spalten > div:last-child .max { border-radius: 0 0 16px 16px; }
.tabelle.preis-tabelle .nein-leise { color: rgb(255 255 255 / .45); }
@media (max-width: 734px) {
  .tabelle.preis-tabelle.fuenf-spalten > div { grid-template-columns: 1.4fr repeat(4, 1fr); font-size: 12px; }
  .tabelle.preis-tabelle.fuenf-spalten span { padding: 10px 4px; }
  .tabelle.preis-tabelle.fuenf-spalten span:first-child { padding-left: 8px; }
}
.tabelle.preis-tabelle.fuenf-spalten span:not(:first-child) { justify-items: center; text-align: center; }
/* Startseite: Anzeige der Scroll-Sperre (füllt sich beim Drehen am Mausrad) */
.scroll-anzeige { position: fixed; left: 50%; bottom: 28px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
  border-radius: 980px; background: rgb(20 20 30 / .6); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #fff; font-size: 14px; font-weight: 600; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s; }
.scroll-anzeige.an { opacity: 1; transform: translate(-50%, 0); }
.scroll-anzeige svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.scroll-anzeige circle { fill: none; stroke: rgb(255 255 255 / .18); stroke-width: 3; }
.scroll-anzeige circle.voll { stroke: #8ea4ea; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .12s; }
.scroll-anzeige path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 20px 20px; }
.scroll-anzeige span:empty { display: none; }
/* Thema mit Bild (Agent OS): Bild und Merkmale rechts untereinander, der Kopf links bleibt stehen – nichts schiebt sich darunter */
@media (min-width: 1069px) {
  .thema:has(> .breit-bild) > .thema-kopf { grid-row: 1 / span 2; }
  .thema > .breit-bild, .thema > .breit-bild ~ .merkmale { grid-column: 2; }
}
/* ---------- Mehr Luft: große Aussagen, Hervorhebungen in einer Reihe, ruhige Listen statt vieler gleicher Karten ---------- */
.unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.oben6 { margin-top: var(--s6); }
.bereich > .unter, .aussage .unter { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.45; max-width: 700px; }
.bereich > h2.klein-titel { font-size: clamp(28px, 3vw, 40px); }
/* Große Aussage: eine Idee, viel Raum */
.aussage { text-align: center; max-width: 1000px; margin-left: auto; margin-right: auto; }
.aussage h2 { font-size: clamp(34px, 5vw, 68px); line-height: 1.06; margin: var(--s1) 0 var(--s3); hyphens: manual; text-wrap: balance; }
.aussage .unter { color: var(--zweit); margin: 0 auto; }
.aussage-symbol { width: 72px; height: 72px; margin: 0 auto var(--s3); border-radius: 22px; display: grid; place-items: center;
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-kante); }
.aussage-symbol svg { width: 34px; height: 34px; fill: none; stroke: #bfe6f6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bereich.aussage { padding-top: var(--s8); padding-bottom: var(--s8); }
/* Das Wichtigste: drei Punkte groß nebeneinander */
.hervor-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); max-width: 1240px; margin: 0 auto; }
.hervor-punkt { display: grid; justify-items: center; align-content: start; gap: var(--s2); text-align: center; }
.hervor-symbol { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; margin-bottom: var(--s2);
  background: var(--glas); border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schatten); }
.hervor-symbol svg { width: 46px; height: 46px; fill: none; stroke: #d6ecfa; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hervor-punkt h3 { font-size: clamp(28px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -.005em; font-weight: 700; hyphens: manual; text-wrap: balance; }
.hervor-punkt p { font-size: 19px; line-height: 1.45; color: var(--ink); max-width: 360px; }
.hervor-punkt small { font-size: 14px; line-height: 1.45; color: var(--leise); max-width: 340px; }
.hervor-punkt:nth-child(2) { transition-delay: .08s; } .hervor-punkt:nth-child(3) { transition-delay: .16s; }
/* Ruhige Liste: kleiner, ohne Glas, nur eine feine Linie oben */
.ruhe-liste { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); row-gap: var(--s5); max-width: 1200px; margin-left: auto; margin-right: auto; }
.ruhe-punkt { display: grid; gap: var(--s1); align-content: start; padding-top: var(--s3); border-top: 1px solid rgb(255 255 255 / .16); }
.ruhe-punkt svg { width: 26px; height: 26px; margin-bottom: 4px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ruhe-punkt b { font: 600 19px/1.25 var(--font-display); color: var(--ink); }
.ruhe-punkt p { color: var(--zweit); font-size: 16px; line-height: 1.5; }
/* Lumo: die wichtigste Zahl leuchtet, der Vergleichsbalken wird größer */
.spar-zahl.hervor { border-color: rgb(41 151 255 / .5); box-shadow: var(--glas-schatten); }
.spar-vergleich h3 { font-size: clamp(24px, 2.2vw, 30px); }
.spar-vergleich .spar-zeile { font-size: 17px; padding: 14px 0; }
.spar-vergleich .spar-spur { height: 18px; }
.spar-vergleich .spar-zeile:last-child > b { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1068px) {
  .hervor-reihe { grid-template-columns: 1fr; gap: var(--s6); max-width: 560px; }
  .ruhe-liste { grid-template-columns: repeat(2, 1fr); column-gap: var(--s5); }
}
@media (max-width: 734px) {
  .bereich.aussage { padding-top: var(--s7); padding-bottom: var(--s7); }
  .ruhe-liste { grid-template-columns: 1fr; row-gap: var(--s4); }
  .hervor-symbol { width: 80px; height: 80px; border-radius: 24px; }
  .hervor-symbol svg { width: 38px; height: 38px; }
  .oben6 { margin-top: var(--s5); }
  .spar-vergleich .spar-zeile { font-size: 15px; padding: 10px 0; }
}
.fragen.oben5 { margin-top: var(--s5); }
.fragen.oben3 { margin-top: var(--s4); }
.hinweis-band.oben5 { margin-top: var(--s5); }
/* 404: Lumo hat sich verlaufen */
.nichtgefunden { text-align: center; }
.nf-buehne { position: relative; height: clamp(190px, 26vw, 300px); display: grid; place-items: center; margin-bottom: var(--s3); }
.nf-zahl { font: 800 clamp(140px, 22vw, 280px)/1 var(--font-display); letter-spacing: -.04em; background: var(--verlauf); -webkit-background-clip: text;
  background-clip: text; color: transparent; opacity: .28; user-select: none; }
.nf-lumo { position: absolute; left: 50%; top: 50%; width: auto; height: clamp(160px, 21vw, 250px); margin: 0;
  transform: translate(-50%, -50%); filter: drop-shadow(0 22px 26px rgb(20 24 60 / .45)); animation: nf-schweben 4s ease-in-out infinite; }
.nf-blase { position: absolute; left: calc(50% + clamp(48px, 6vw, 72px)); top: 12%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 800 24px/1 var(--font-display); color: #fff; background: rgb(142 164 234 / .35); border: 1px solid rgb(255 255 255 / .25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: nf-schweben 4s ease-in-out -1.2s infinite; }
@keyframes nf-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.nf-wege .link-kacheln { grid-template-columns: repeat(4, 1fr); max-width: 1100px; margin: 0 auto; }
@media (max-width: 1068px) { .nf-wege .link-kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) { .nf-wege .link-kacheln { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nf-lumo, .nf-blase { animation: none; } }
/* Große Überschriften: Namen wie „Lumobix“ nie trennen, lange deutsche Wörter weiterhin */
h1, h2, h3, h4 { hyphenate-limit-chars: 10 4 4; }
/* Startseite am PC: die Scroll-Sperre (Kapitel.js) führt nach unten; nach oben frei – ohne Einrasten, das sonst zurückziehen würde */
@media (pointer: fine) { html:has(body[data-seite="start"]) { scroll-snap-type: none; } }
/* Admin: Statistik */
.mp-zahlen.stat-zahlen { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width: 900px) { .mp-zahlen.stat-zahlen { grid-template-columns: repeat(2, 1fr); } }
.stat-balken { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; align-items: end; height: 190px; }
.stat-balken > div { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; gap: 6px; }
.stat-balken i { display: block; min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--verlauf); }
.stat-balken span { font-size: 10px; color: var(--zweit); text-align: center; white-space: nowrap; min-height: 12px; }
.stat-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stat-liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.stat-liste li b { font-variant-numeric: tabular-nums; }
.stat-liste li i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--verlauf); opacity: .85; }
.land-kuerzel { display: inline-block; min-width: 30px; margin-right: 8px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; text-align: center; letter-spacing: .04em; background: rgb(142 164 234 / .18); color: var(--ink); }

/* ---------- Startseite unten: Bento-Raster statt gleicher Kästchen, Wege, Zeitstrahl ---------- */
.bento { max-width: 1240px; margin-left: auto; margin-right: auto; display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr); grid-template-areas: "chat chat server server" "chat chat lumo sterne" "datei pc mit mit"; }
.bento-kachel { position: relative; overflow: hidden; display: grid; align-content: start; gap: 8px; padding: 28px; border-radius: 28px; color: var(--ink);
  background: var(--flaeche); border: 1px solid rgb(255 255 255 / .07); box-shadow: var(--glas-kante); transition: transform .3s ease, border-color .3s ease; }
.bento-kachel:hover { text-decoration: none; border-color: rgb(41 151 255 / .35); }
.bento-kachel h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.12; margin: 0; }
.bento-kachel p { margin: 0; color: var(--zweit); font-size: 15px; line-height: 1.45; }
.bento-kachel .b-marke { font-size: 13px; font-weight: 600; color: var(--cyan); letter-spacing: .01em; }
.bento-kachel svg { width: 28px; height: 28px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.b-chat { grid-area: chat; grid-template-rows: auto 1fr; gap: 24px; background: linear-gradient(160deg, rgb(70 90 180 / .28), rgb(20 20 30 / .6) 60%), var(--flaeche); }
.b-chat h3 { font-size: clamp(30px, 3vw, 44px); }
.b-vorschau { display: grid; gap: 10px; align-content: end; }
.b-blase { max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.35; }
.b-blase.du { justify-self: end; background: var(--blau); color: #fff; border-bottom-right-radius: 6px; }
.b-blase.er { justify-self: start; background: rgb(255 255 255 / .1); border-bottom-left-radius: 6px; }
.b-knoepfe { display: flex; gap: 8px; }
.b-knoepfe span { padding: 6px 16px; border-radius: 980px; font-size: 13px; font-weight: 600; background: rgb(255 255 255 / .12); }
.b-knoepfe span:first-child { background: rgb(108 191 224 / .3); }
.b-terminal { margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: rgb(0 0 0 / .55); font: 13px/1.6 ui-monospace, Consolas, monospace; color: #d8dbe8; white-space: pre-wrap; }
.b-terminal b { color: var(--cyan); }
.b-terminal i { color: var(--gruen); font-style: normal; }
.b-server { grid-area: server; grid-template-columns: 1fr auto; align-items: end; }
.b-balken { display: flex; gap: 5px; align-items: flex-end; height: 92px; }
.b-balken i { display: block; width: 9px; border-radius: 3px; background: var(--verlauf); opacity: .9; }
.b-balken i:nth-child(1) { height: 30%; } .b-balken i:nth-child(2) { height: 46%; } .b-balken i:nth-child(3) { height: 38%; } .b-balken i:nth-child(4) { height: 62%; }
.b-balken i:nth-child(5) { height: 54%; } .b-balken i:nth-child(6) { height: 80%; } .b-balken i:nth-child(7) { height: 66%; } .b-balken i:nth-child(8) { height: 44%; }
.b-balken i:nth-child(9) { height: 58%; } .b-balken i:nth-child(10) { height: 92%; } .b-balken i:nth-child(11) { height: 70%; } .b-balken i:nth-child(12) { height: 50%; }
.b-balken i:nth-child(13) { height: 64%; } .b-balken i:nth-child(14) { height: 100%; }
.b-lumo { grid-area: lumo; background: radial-gradient(circle at 30% 20%, rgb(142 164 234 / .35), transparent 65%), var(--flaeche); }
.b-zahl { font: 800 clamp(44px, 4.4vw, 66px)/1 var(--font-display) !important; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.b-sterne { grid-area: sterne; min-height: 220px; align-content: end; background: linear-gradient(0deg, rgb(5 5 20 / .9), rgb(5 5 20 / .1) 70%), url("/bilder/sternenkarte.webp") center / cover; }
.b-klein:nth-of-type(5) { grid-area: datei; }
.b-klein:nth-of-type(6) { grid-area: pc; }
.b-mitteilung { grid-area: mit; grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
.b-toast { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgb(32 32 40 / .95); border: 1px solid rgb(255 255 255 / .1);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / .8); font-size: 13px; color: var(--zweit); max-width: 300px; }
.b-toast b { display: block; color: var(--ink); font-size: 13px; }
.b-toast-logo { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--verlauf); }
@media (max-width: 1068px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "chat chat" "server server" "lumo sterne" "datei pc" "mit mit"; }
}
@media (max-width: 734px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "chat" "server" "lumo" "sterne" "datei" "pc" "mit"; }
  .b-server, .b-mitteilung { grid-template-columns: 1fr; }
  .bento-kachel { padding: 22px; border-radius: 22px; }
}

/* Für wen: drei Wege, jeder mit eigener Farbe */
.wege { max-width: 1200px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 28px; overflow: hidden;
  border: 1px solid rgb(255 255 255 / .08); }
.weg { padding: 40px 32px; display: grid; gap: 12px; align-content: start; background: var(--flaeche); position: relative; }
.weg + .weg { border-left: 1px solid rgb(255 255 255 / .08); }
.weg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.weg svg { width: 44px; height: 44px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.weg h3 { font-size: 24px; margin: 0; }
.weg p { margin: 0; color: var(--zweit); line-height: 1.5; }
.weg svg { stroke: var(--cyan); }
.wege.zwei { grid-template-columns: repeat(2, 1fr); max-width: 1040px; }   /* Lumobix Server-Dienst: der Dienst und die App */
.weg code { font: 600 13px var(--font-mono); padding: 2px 7px; border-radius: 6px; background: rgb(255 255 255 / .08); color: var(--ink); }
@media (max-width: 900px) { .wege, .wege.zwei { grid-template-columns: 1fr; } .weg + .weg { border-left: 0; border-top: 1px solid rgb(255 255 255 / .08); } }

/* In drei Schritten: Zeitstrahl mit großen Ziffern */
.zeitstrahl { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); position: relative; }
.zeitstrahl::before { content: ""; position: absolute; left: 60px; right: 60px; top: 44px; height: 1px; background: var(--glas-rand); }
.zeitstrahl li { display: grid; gap: 8px; justify-items: center; text-align: center; color: var(--zweit); position: relative; }
.z-nr { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font: 700 34px/1 var(--font-display); color: var(--ink); padding-top: .06em;
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: 0 0 0 8px rgb(5 5 20 / .9); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.zeitstrahl b { color: var(--ink); font-size: 21px; }
.zeitstrahl li > span:last-child { max-width: 300px; line-height: 1.5; }
@media (max-width: 734px) {
  .zeitstrahl { grid-template-columns: 1fr; gap: var(--s4); }
  .zeitstrahl::before { left: 44px; right: auto; top: 44px; bottom: 44px; width: 2px; height: auto; }
  .zeitstrahl li { justify-items: start; text-align: left; padding-left: 110px; min-height: 88px; }
  .z-nr { position: absolute; left: 0; top: 0; }
}

/* ---------- Lumo-Seite: Zahlen mit Gewicht statt gleicher Kästchen ---------- */
body[data-seite="lumo"] .zahlen { gap: 0; max-width: 1100px; }
body[data-seite="lumo"] .zahl { background: none; border: 0; border-radius: 0; padding: var(--s2) var(--s3); }
body[data-seite="lumo"] .zahl + .zahl { border-left: 1px solid rgb(255 255 255 / .12); }
body[data-seite="lumo"] .zahl b { font-size: clamp(34px, 3.6vw, 52px); }
body[data-seite="lumo"] .zahl span { font-size: 15px; max-width: 220px; margin: 10px auto 0; }
@media (max-width: 1068px) { body[data-seite="lumo"] .zahl + .zahl { border-left: 0; } body[data-seite="lumo"] .zahl { border-top: 1px solid rgb(255 255 255 / .1); } }
.spar-zahlen.vier { grid-template-columns: repeat(2, 1fr); max-width: 1200px; }
/* oben groß: −95 % und 2,6 Mio.; darunter kleiner die anderen zwei */
.spar-zahlen.vier .spar-zahl.hervor { order: -2; }
.spar-zahlen.vier .spar-zahl:first-child { order: -1; }
.spar-zahlen.vier .spar-zahl.hervor, .spar-zahlen.vier .spar-zahl:first-child { padding: var(--s5) var(--s4); gap: 14px; align-content: center;
  background: radial-gradient(circle at 20% 30%, rgb(110 130 255 / .3), transparent 65%), var(--flaeche); border-color: rgb(142 164 234 / .5); }
.spar-zahlen.vier .spar-zahl.hervor b, .spar-zahlen.vier .spar-zahl:first-child b { font-size: clamp(48px, 5.2vw, 80px); letter-spacing: -.02em; }
.spar-zahlen.vier .spar-zahl.hervor span, .spar-zahlen.vier .spar-zahl:first-child span { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink); line-height: 1.35; }
.spar-zahlen.vier .spar-zahl:not(.hervor):not(:first-child) { background: none; border-color: rgb(255 255 255 / .1); }
.spar-zahlen.vier .spar-zahl:not(.hervor):not(:first-child) b { font-size: clamp(32px, 3vw, 46px); }
@media (max-width: 900px) { .spar-zahlen.vier { grid-template-columns: 1fr; } }

/* ---------- Schutz: Hinweis beim Kopieren langer Texte, abgeschaltete Kopie auf fremder Adresse ---------- */
.kopier-hinweis { position: fixed; left: 50%; bottom: 28px; z-index: 60; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 16px;
  transform: translateX(-50%); background: rgb(30 30 40 / .92); border: 1px solid rgb(255 255 255 / .14); color: #fff; font-size: 14px; text-align: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .8); transition: opacity .5s; }
.kopier-hinweis.weg { opacity: 0; }
.klon-sperre { min-height: 100vh; display: grid; place-content: center; gap: 14px; padding: 24px; text-align: center; background: #05051a; color: #f5f5f7;
  font: 18px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.klon-sperre h1 { font-size: 44px; margin: 0; }
.klon-sperre a { color: #8ea4ea; font-size: 20px; }

/* ---------- Datenschutz: kurz gesagt, Übersicht als Tabelle, dann Einzelheiten ---------- */
.ds-kurz { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ds-kurz li { display: grid; gap: 8px; align-content: start; padding: 22px 20px; border-radius: 22px; background: var(--flaeche); border: 1px solid rgb(255 255 255 / .07); }
.ds-kurz li::before { content: ""; width: 34px; height: 34px; border-radius: 50%; margin-bottom: 4px;
  background: rgb(52 199 89 / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334c759' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ds-kurz b { font-size: 17px; line-height: 1.25; }
.ds-kurz span { color: var(--zweit); font-size: 14px; line-height: 1.45; }
@media (max-width: 1180px) { .ds-kurz { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 734px) { .ds-kurz { grid-template-columns: 1fr; } }
.ds-tabelle-rahmen { max-width: 1200px; margin-left: auto; margin-right: auto; overflow-x: auto; border-radius: 22px; background: var(--flaeche); border: 1px solid rgb(255 255 255 / .07); }
.ds-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 680px; }
.ds-tabelle caption { text-align: left; padding: 20px 22px 8px; font: 700 20px var(--font-display); color: var(--ink); }
.ds-tabelle th, .ds-tabelle td { text-align: left; padding: 14px 22px; border-top: 1px solid rgb(255 255 255 / .07); vertical-align: top; }
.ds-tabelle thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--zweit); font-weight: 600; }
.ds-tabelle tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ds-tabelle td { color: var(--zweit); }
.ds-tabelle td:last-child { color: var(--ink); white-space: nowrap; }
@media (max-width: 734px) { .ds-tabelle td:last-child, .ds-tabelle tbody th { white-space: normal; } }
.ds-einzelheiten { padding-top: 0 !important; }

/* ---------- Support: Ticket schreiben mit Themen-Knöpfen und Seitenleiste ---------- */
.ticket-buehne { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ticket-karte { padding: 36px; border-radius: 28px; background: var(--flaeche); border: 1px solid rgb(255 255 255 / .07); box-shadow: var(--glas-kante); }
.ticket-karte h2 { font-size: clamp(30px, 3vw, 40px); }
.ticket-formular { gap: 20px; }
.ticket-absender { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 980px; background: rgb(255 255 255 / .06); justify-self: start; }
.ticket-absender img { width: 40px; height: 40px; border-radius: 50%; }
.ticket-absender b { display: block; font-size: 15px; }
.ticket-absender small { color: var(--zweit); font-size: 13px; }
.ticket-arten { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ticket-arten legend { padding: 0; margin-bottom: 10px; font-size: 14px; color: var(--zweit); }
.ticket-art { position: relative; cursor: pointer; }
.ticket-art input { position: absolute; opacity: 0; pointer-events: none; }
.ticket-art span { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: 18px; text-align: center; font-size: 14px; font-weight: 600;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); transition: background .2s, border-color .2s, transform .2s; }
.ticket-art svg { width: 26px; height: 26px; fill: none; stroke: var(--zweit); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ticket-art:hover span { background: rgb(255 255 255 / .09); }
.ticket-art input:checked + span { background: rgb(142 164 234 / .18); border-color: rgb(142 164 234 / .7); transform: translateY(-1px); }
.ticket-art input:checked + span svg { stroke: #fff; }
.ticket-art input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.ticket-zeile { display: flex; justify-content: space-between; gap: 12px; }
.ticket-zeile small { color: var(--zweit); font-variant-numeric: tabular-nums; }
.ticket-mehr summary { cursor: pointer; color: var(--link); font-size: 15px; }
.ticket-senden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.ticket-seite { display: grid; gap: 14px; position: sticky; top: 90px; }
.ticket-vorrang, .ticket-tipps { padding: 24px; border-radius: 24px; background: var(--flaeche); border: 1px solid rgb(255 255 255 / .07); display: grid; gap: 6px; }
.ticket-vorrang b { font: 700 26px/1.15 var(--font-display); }
.ticket-vorrang span { color: var(--zweit); font-size: 14px; line-height: 1.45; }
.ticket-vorrang.max { background: radial-gradient(circle at 20% 0%, rgb(142 164 234 / .35), transparent 70%), var(--flaeche); border-color: rgb(142 164 234 / .5); }
.ticket-vorrang.max b, .ticket-vorrang.pro b, .ticket-vorrang.plus b { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticket-tipps ul { margin: 6px 0 0; padding-left: 18px; color: var(--zweit); font-size: 14px; display: grid; gap: 6px; }
.ticket-seite .b-marke, .ticket-vorrang .b-marke { font-size: 13px; font-weight: 600; color: var(--cyan); margin: 0; }
.ticket-offen-link { padding: 16px 20px; border-radius: 18px; background: rgb(255 255 255 / .05); color: var(--ink); }
.ticket-offen-link b { font-size: 20px; margin-right: 6px; }
@media (max-width: 1000px) { .ticket-buehne { grid-template-columns: 1fr; } .ticket-seite { position: static; } }
@media (max-width: 734px) { .ticket-karte { padding: 22px; } .ticket-arten { grid-template-columns: repeat(3, 1fr); } }
.zeitstrahl.vier { grid-template-columns: repeat(4, 1fr); max-width: 1240px; }
.zeitstrahl.vier .z-nr { width: 72px; height: 72px; font-size: 32px; }
.zeitstrahl.vier::before { top: 36px; }
@media (max-width: 1068px) and (min-width: 735px) { .zeitstrahl.vier { grid-template-columns: repeat(2, 1fr); row-gap: var(--s5); } .zeitstrahl.vier::before { display: none; } }
@media (max-width: 734px) { .zeitstrahl.vier .z-nr { width: 88px; height: 88px; } .zeitstrahl.vier::before { top: 44px; } }
@media (max-width: 734px) {
  .ds-tabelle { min-width: 0; }
  .ds-tabelle thead { display: none; }
  .ds-tabelle tr { display: grid; gap: 2px; padding: 14px 18px; border-top: 1px solid rgb(255 255 255 / .07); }
  .ds-tabelle th, .ds-tabelle td { border: 0; padding: 0; white-space: normal; }
  .ds-tabelle caption { padding: 18px 18px 6px; }
}

/* ======================================================================================================================
   Firmen-Design (html[data-design="firma"], lib/design.js): hell und ruhig, ein klares Blau, keine Leuchteffekte, kein 3D-Zimmer.
   ====================================================================================================================== */
html[data-design="firma"] {
  color-scheme: light;
  --schwarz: #f4f5f7; --ink: #111827; --zweit: #4b5563; --leise: #5f6673; --linie: rgb(17 24 39 / .1);
  --flaeche: #ffffff; --flaeche-2: #f1f3f6; --link: #1d5bd8; --blau: #1d5bd8; --blau-hover: #1849b0;
  --cyan: #1d5bd8; --gruen: #15803d; --rot: #c62828; --gelb: #8a5a00;
  --verlauf: linear-gradient(var(--link), var(--link));
  --fa-glas: rgb(255 255 255 / .6); --fa-rand: rgb(255 255 255 / .8); --fa-blur: blur(22px) saturate(170%);
  --glas-glanz: linear-gradient(#fff, #fff); --glas-tint: #fff; --glas: #fff; --glas-hover: #f9fafb;
  --glas-rand: rgb(17 24 39 / .1); --glas-kante: 0 0 0 0 transparent;
  --glas-schatten: 0 1px 2px rgb(17 24 39 / .05), 0 12px 32px -20px rgb(17 24 39 / .3);
  --glas-blur: none; --rund: 14px;
  background: var(--schwarz);
}
html[data-design="firma"] body { background: transparent; }   /* sonst deckte body die Farbflächen (body::before) zu */
html[data-design="firma"] #bg, html[data-design="firma"] #botzzz, html[data-design="firma"] .daempfer { display: none; }
html[data-design="firma"] * { text-shadow: none !important; }
html[data-design="firma"] .kopf { background: rgb(255 255 255 / .9); border-bottom: 1px solid var(--linie); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-design="firma"] .kopf a, html[data-design="firma"] .kopf button { color: var(--ink); }
html[data-design="firma"] .kopf .pille { color: #fff; }
html[data-design="firma"] .fuss, html[data-design="firma"] body[data-seite="start"] .fuss { background: #fff; border-top: 1px solid var(--linie); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="firma"] .pille { border-radius: 10px; }
html[data-design="firma"] .pille.zweit { background: #eef1f5; color: var(--ink); }
html[data-design="firma"] .pille.zweit:hover { background: #e3e7ee; }
html[data-design="firma"] .umschalter { background: #e8ebf0; }
html[data-design="firma"] .umschalter button[aria-selected="true"], html[data-design="firma"] .umschalter button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(17 24 39 / .15); }
html[data-design="firma"] .formular input, html[data-design="firma"] .formular select, html[data-design="firma"] .formular textarea { background: #fff; border-color: #d1d5db; color: var(--ink); }
html[data-design="firma"] .formular input:focus, html[data-design="firma"] .formular textarea:focus, html[data-design="firma"] .formular select:focus { background: #fff; border-color: var(--blau); }
/* Flächen: weiß, feiner Rand, leichter Schatten, keine Unschärfe und kein Leuchten */
html[data-design="firma"] :is(.kachel, .bento-kachel, .weg, .wege, .zahl, .spar-zahl, .ticket-karte, .ticket-vorrang, .ticket-tipps, .ticket-offen-link,
  .ds-kurz li, .ds-tabelle-rahmen, .fragen details, .link-kachel, .staerke, .preis, .hinweis-band, .anmelden-noetig, .tabelle, .meine-tickets button,
  .hervor-punkt, .gratis-karte, .enterprise-band, .spar-vergleich, .profil-kopf, .mp-flaeche, .ticket-art span, .b-toast, .ticket-absender) {
  background: var(--fa-glas) !important; border-color: var(--fa-rand) !important; box-shadow: var(--glas-schatten) !important;
  -webkit-backdrop-filter: var(--fa-blur) !important; backdrop-filter: var(--fa-blur) !important; color: var(--ink); }
html[data-design="firma"] :is(.kachel, .bento-kachel, .weg, .preis, .ticket-karte, .link-kachel, .fragen details, .ds-tabelle-rahmen) { border-radius: var(--rund); }
html[data-design="firma"] .ticket-art input:checked + span { background: #eaf1ff !important; border-color: var(--blau) !important; }
html[data-design="firma"] .ticket-art input:checked + span svg { stroke: var(--blau); }
html[data-design="firma"] .b-blase.er, html[data-design="firma"] .b-knoepfe span { background: #eef1f5; }
html[data-design="firma"] .b-terminal { background: #111827; }
html[data-design="firma"] .b-chat, html[data-design="firma"] .b-lumo { background: #fff !important; }
html[data-design="firma"] .z-nr { background: var(--blau); box-shadow: 0 0 0 8px var(--schwarz); }
html[data-design="firma"] .zeitstrahl::before { background: #c7d2fe; }
html[data-design="firma"] .tabelle .kopfzeile { background: #f6f7f9; }
html[data-design="firma"] .tabelle.preis-tabelle .nein-leise { color: #6b7280; }
html[data-design="firma"] code { background: #eef1f5; }
html[data-design="firma"] .vorzeile { color: var(--blau) !important; }
html[data-design="firma"] .abzeichen.admin, html[data-design="firma"] .abzeichen.team { color: #5b21b6; }
html[data-design="firma"] .kopier-hinweis { background: #111827; color: #fff; }
html[data-design="firma"] body[data-seite="lumo"] .zahl + .zahl { border-left-color: var(--linie); }

/* Startseite für Firmen */
.fa-held { max-width: 1240px; margin: 0 auto; padding: calc(52px + var(--s7)) var(--rand) var(--s6); display: grid; gap: var(--s6); }
.fa-held-text { max-width: 820px; }
.fa-held h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.06; letter-spacing: -.02em; margin: var(--s2) 0 var(--s3); }
.fa-held .einleitung { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--zweit); margin: 0; }
.fa-held .aktion { margin-top: var(--s4); }
.fa-fakten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); }
.fa-fakten li { padding: var(--s3) var(--s3) 0 0; display: grid; gap: 6px; }
.fa-fakten li + li { padding-left: var(--s3); border-left: 1px solid var(--linie); }
.fa-fakten b { font: 700 clamp(28px, 3vw, 40px)/1 var(--font-display); color: var(--blau); }
.fa-fakten span { color: var(--zweit); font-size: 14px; line-height: 1.4; }
.fa-bereich { max-width: 1240px; margin-left: auto; margin-right: auto; }
.fa-bereich h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; margin-top: var(--s1); }
.fa-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.fa-drei article { padding: var(--s4); border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--glas-schatten); display: grid; gap: 8px; align-content: start; }
.fa-drei svg, .fa-liste svg { width: 28px; height: 28px; fill: none; stroke: var(--blau); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fa-drei h3 { font-size: 20px; margin: 4px 0 0; }
.fa-drei p { margin: 0; color: var(--zweit); line-height: 1.5; }
.fa-zweiteilig { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s6); align-items: center; }
.unter-links { color: var(--zweit); font-size: 18px; line-height: 1.55; margin-top: var(--s2); max-width: 640px; }
.fa-zahlen { display: grid; gap: var(--s2); }
.fa-zahlen div { padding: var(--s4); border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--glas-schatten); display: grid; gap: 6px; }
.fa-zahlen b { font: 700 clamp(36px, 4vw, 56px)/1 var(--font-display); color: var(--blau); }
.fa-zahlen span { color: var(--zweit); }
.fa-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2) var(--s5); }
.fa-liste li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: var(--s2) 0; border-top: 1px solid var(--linie); color: var(--zweit); line-height: 1.5; }
.fa-liste b { color: var(--ink); }
.fa-plaene { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s5); border-radius: 14px;
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--glas-schatten); }
.fa-plaene > div:first-child { max-width: 700px; }
@media (max-width: 1068px) { .fa-fakten { grid-template-columns: repeat(2, 1fr); row-gap: var(--s3); } .fa-fakten li:nth-child(3) { border-left: 0; padding-left: 0; } .fa-zweiteilig { grid-template-columns: 1fr; } }
@media (max-width: 734px) { .fa-drei, .fa-liste { grid-template-columns: 1fr; } .fa-plaene { padding: var(--s3); } }

/* Auswahl beim ersten Besuch, Umschalter unten, Kontoart bei der Anmeldung */
.design-wahl { position: fixed; inset: 0; z-index: 80; display: grid; place-items: safe center; overflow-y: auto; padding: 16px; background: rgb(5 5 20 / .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.design-wahl-karte { width: min(640px, 100%); padding: 36px; border-radius: 24px; background: rgb(24 24 30 / .96); border: 1px solid rgb(255 255 255 / .12);
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / .8); text-align: center; display: grid; gap: 14px; }
.design-wahl-karte h2 { font-size: clamp(26px, 3vw, 34px); margin: 0; }
.design-wahl-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
.design-wahl-knoepfe button { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border-radius: 18px; cursor: pointer; font: inherit; color: var(--ink);
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12); transition: border-color .2s, background .2s, transform .2s; }
.design-wahl-knoepfe button:hover, .design-wahl-knoepfe button:focus-visible { border-color: #8ea4ea; background: rgb(142 164 234 / .12); transform: translateY(-2px); outline: 0; }
.design-wahl-knoepfe svg { width: 40px; height: 40px; fill: none; stroke: #8ea4ea; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.design-wahl-knoepfe b { font-size: 19px; }
.design-wahl-knoepfe span { color: var(--zweit); font-size: 14px; }
@media (max-width: 520px) { .design-wahl-knoepfe { grid-template-columns: 1fr; } .design-wahl-karte { padding: 24px; } }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.fuss-zeile p { margin: 0; }
.design-schalter { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: rgb(118 118 128 / .2); }
.design-schalter span { padding: 0 8px; font-size: 12px; color: var(--zweit); }
.design-schalter button { border: 0; background: transparent; color: var(--ink); font: 500 12px var(--font); padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.design-schalter button[aria-checked="true"] { background: rgb(99 99 102 / .9); color: #fff; }
html[data-design="firma"] .design-schalter { background: #e8ebf0; }
html[data-design="firma"] .design-schalter button[aria-checked="true"] { background: var(--blau); }
.konto-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.konto-art button { padding: 12px; border-radius: 12px; cursor: pointer; font: 600 15px var(--font); color: var(--ink); background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12); }
.konto-art button[aria-checked="true"] { border-color: var(--blau); background: rgb(41 151 255 / .14); }
html[data-design="firma"] .konto-art button { background: #fff; border-color: #d1d5db; }
html[data-design="firma"] .konto-art button[aria-checked="true"] { border-color: var(--blau); background: #eaf1ff; }
.umschalter.drei { grid-template-columns: repeat(3, 1fr); }
/* Firmen-Design schon gewählt (public/design.js), React aber noch nicht so weit: Inhalt kurz ausblenden statt die private Startseite zu zeigen */
html[data-design="firma"]:not(.design-bereit) main { visibility: hidden; animation: design-zeigen 0s linear 2s forwards; }   /* spätestens nach 2 s sichtbar */
@keyframes design-zeigen { to { visibility: visible; } }
.fa-bereich h2, .fa-bereich > .vorzeile { text-align: left; }
html[data-design="firma"] :is(.hervor-symbol, .thema-symbol) { background: #eaf1ff; border-color: #c7d7fb; box-shadow: none; }
html[data-design="firma"] :is(.hervor-symbol, .thema-symbol, .hinweis-band) svg { stroke: var(--blau); }

/* ---------- Firmen-Design dunkel (Standard; hell nur, wenn gewählt: html[data-modus="hell"]) ---------- */
html[data-design="firma"]:not([data-modus="hell"]) {
  color-scheme: dark;
  --schwarz: #0d0f13; --ink: #e8eaef; --zweit: #b4bac5; --leise: #a9b0bc; --linie: rgb(255 255 255 / .09);
  --flaeche: #15181e; --flaeche-2: #1c2028; --link: #6b9dff; --blau: #2d6ae6; --blau-hover: #2558c8;
  --cyan: #6b9dff; --gruen: #3ecf74; --rot: #f06262; --gelb: #e6b84a;
  --verlauf: linear-gradient(var(--link), var(--link));
  --fa-glas: rgb(26 28 38 / .5); --fa-rand: rgb(255 255 255 / .1); --fa-blur: blur(24px) saturate(150%);
  --glas: #15181e; --glas-hover: #1a1e25; --glas-rand: rgb(255 255 255 / .09);
  --glas-schatten: 0 1px 2px rgb(0 0 0 / .5), 0 14px 34px -22px rgb(0 0 0 / .9);
}
html[data-design="firma"]:not([data-modus="hell"]) .kopf { background: rgb(13 15 19 / .9); }
html[data-design="firma"]:not([data-modus="hell"]) .fuss, html[data-design="firma"]:not([data-modus="hell"]) body[data-seite="start"] .fuss { background: #111318; }
html[data-design="firma"]:not([data-modus="hell"]) :is(.kachel, .bento-kachel, .weg, .wege, .zahl, .spar-zahl, .ticket-karte, .ticket-vorrang, .ticket-tipps,
  .ticket-offen-link, .ds-kurz li, .ds-tabelle-rahmen, .fragen details, .link-kachel, .staerke, .preis, .hinweis-band, .anmelden-noetig, .tabelle,
  .meine-tickets button, .hervor-punkt, .gratis-karte, .enterprise-band, .spar-vergleich, .profil-kopf, .mp-flaeche, .ticket-art span, .b-toast, .ticket-absender,
  .b-chat, .b-lumo) { background: var(--fa-glas) !important; }
html[data-design="firma"]:not([data-modus="hell"]) .pille.zweit { background: #232833; }
html[data-design="firma"]:not([data-modus="hell"]) .pille.zweit:hover { background: #2b313d; }
html[data-design="firma"]:not([data-modus="hell"]) .umschalter, html[data-design="firma"]:not([data-modus="hell"]) .design-schalter { background: #1c2028; }
html[data-design="firma"]:not([data-modus="hell"]) .umschalter button[aria-selected="true"],
html[data-design="firma"]:not([data-modus="hell"]) .umschalter button[aria-checked="true"] { background: #2e3442; box-shadow: none; }
html[data-design="firma"]:not([data-modus="hell"]) :is(.formular input, .formular select, .formular textarea) { background: #0f1116; border-color: #2c313c; }
html[data-design="firma"]:not([data-modus="hell"]) :is(.formular input, .formular select, .formular textarea):focus { background: #0f1116; border-color: var(--blau); }
html[data-design="firma"]:not([data-modus="hell"]) .ticket-art input:checked + span { background: rgb(59 120 240 / .18) !important; }
html[data-design="firma"]:not([data-modus="hell"]) .ticket-art input:checked + span svg { stroke: var(--link); }
html[data-design="firma"]:not([data-modus="hell"]) :is(.b-blase.er, .b-knoepfe span, code) { background: #232833; }
html[data-design="firma"]:not([data-modus="hell"]) .b-terminal { background: #0a0c10; }
html[data-design="firma"]:not([data-modus="hell"]) .tabelle .kopfzeile { background: #1a1d24; }
html[data-design="firma"]:not([data-modus="hell"]) .zeitstrahl::before { background: #2b3a63; }
html[data-design="firma"]:not([data-modus="hell"]) :is(.hervor-symbol, .thema-symbol) { background: rgb(59 120 240 / .14); border-color: rgb(107 157 255 / .3); }
html[data-design="firma"]:not([data-modus="hell"]) :is(.hervor-symbol, .thema-symbol, .hinweis-band) svg { stroke: var(--link); }
html[data-design="firma"]:not([data-modus="hell"]) .konto-art button { background: #15181e; border-color: #2c313c; }
html[data-design="firma"]:not([data-modus="hell"]) .konto-art button[aria-checked="true"] { background: rgb(59 120 240 / .16); border-color: var(--blau); }
html[data-design="firma"]:not([data-modus="hell"]) .tabelle.preis-tabelle .nein-leise { color: #5b6170; }
html[data-design="firma"]:not([data-modus="hell"]) :is(.abzeichen.admin, .abzeichen.team) { color: #c4b5fd; }
html[data-design="firma"]:not([data-modus="hell"]) .fa-fakten b, html[data-design="firma"]:not([data-modus="hell"]) .fa-zahlen b { color: var(--link); }
.design-schalter-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Firmen-Design 2: wie bei Apple – Glas über weichen Farbflächen in Lumobix-Farben, ruhige Bewegung statt 3D, Lumo dabei ---------- */
html[data-design="firma"] body::before { content: ""; position: fixed; inset: -25%; z-index: -3; pointer-events: none;
  background: radial-gradient(38% 34% at 22% 28%, rgb(168 216 242 / .5), transparent 70%), radial-gradient(34% 30% at 78% 22%, rgb(179 164 230 / .45), transparent 70%),
    radial-gradient(40% 36% at 60% 78%, rgb(142 164 234 / .42), transparent 70%);
  filter: blur(40px); animation: fa-treiben 38s ease-in-out infinite alternate; }
html[data-design="firma"]:not([data-modus="hell"]) body::before { opacity: .8; }
@keyframes fa-treiben { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-3%, 3%, 0) scale(1.02); } }
html[data-design="firma"] .kopf { background: var(--fa-glas); -webkit-backdrop-filter: var(--fa-blur); backdrop-filter: var(--fa-blur); border-bottom-color: var(--fa-rand); }
html[data-design="firma"] .fuss, html[data-design="firma"] body[data-seite="start"] .fuss { background: var(--fa-glas); -webkit-backdrop-filter: var(--fa-blur); backdrop-filter: var(--fa-blur); }
html[data-design="firma"] :is(.fa-drei article, .fa-zahlen div, .fa-plaene) { background: var(--fa-glas); border-color: var(--fa-rand);
  -webkit-backdrop-filter: var(--fa-blur); backdrop-filter: var(--fa-blur); border-radius: 22px; }
html[data-design="firma"] :is(.fa-drei article, .fa-zahlen div, .bento-kachel, .link-kachel, .preis, .weg) { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
html[data-design="firma"] :is(.kachel, .bento-kachel, .weg, .preis, .ticket-karte, .link-kachel, .fragen details, .ds-tabelle-rahmen) { border-radius: 22px; }
html[data-design="firma"] .pille { border-radius: 980px; }
/* Held mit Lumo */
.fa-held { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); align-items: center; column-gap: var(--s6); }
.fa-held .fa-fakten { grid-column: 1 / -1; }
.fa-held h1 { font-size: clamp(40px, 5.2vw, 72px); }
.fa-held-text > * { animation: fa-auftauchen .9s cubic-bezier(.2,.8,.2,1) both; }
.fa-held-text > :nth-child(2) { animation-delay: .08s; } .fa-held-text > :nth-child(3) { animation-delay: .16s; } .fa-held-text > :nth-child(4) { animation-delay: .24s; }
@keyframes fa-auftauchen { from { opacity: 0; transform: translateY(18px); } }
.fa-lumo { margin: 0; display: grid; justify-items: center; gap: 18px; animation: fa-auftauchen 1s cubic-bezier(.2,.8,.2,1) .2s both; }
.fa-lumo-scheibe { width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 40%, rgb(255 255 255 / .22), rgb(255 255 255 / .04) 70%); border: 1px solid var(--fa-rand, rgb(255 255 255 / .2));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 90px -40px rgb(10 14 40 / .45), inset 0 1px 0 rgb(255 255 255 / .35); }
.fa-lumo-scheibe img { position: absolute; left: 50%; bottom: 13%; width: auto; height: 92%; translate: -50% 0;
  filter: drop-shadow(0 18px 18px rgb(10 14 40 / .35)); animation: fa-schweben 6s ease-in-out infinite; }
@keyframes fa-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fa-blase { max-width: 300px; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.45; color: var(--zweit); text-align: center;
  background: var(--fa-glas, rgb(255 255 255 / .08)); border: 1px solid var(--fa-rand, rgb(255 255 255 / .12)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.fa-blase b { display: block; color: var(--ink); font-size: 15px; }
/* Abschnitt „Lumo, die lokale KI“ */
.fa-lumo-bereich { display: grid; grid-template-columns: 260px 1fr; gap: var(--s6); align-items: center; }
.fa-lumo-bild { justify-self: center; width: 240px; aspect-ratio: 1; border-radius: 40px; position: relative; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 35%, rgb(168 216 242 / .55), rgb(142 164 234 / .35) 55%, rgb(179 164 230 / .3)); border: 1px solid var(--fa-rand, rgb(255 255 255 / .15)); box-shadow: var(--glas-schatten); }
.fa-lumo-bild img { position: absolute; left: 50%; bottom: 0; width: auto; height: 88%; translate: -50% 0; transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.fa-lumo-bereich:hover .fa-lumo-bild img { transform: scale(1.05) rotate(-2deg); }
.fa-lumo-punkte { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 14px; }
.fa-lumo-punkte li { color: var(--zweit); line-height: 1.5; padding-left: 22px; position: relative; }
.fa-lumo-punkte li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--verlauf); }
.fa-lumo-punkte b { color: var(--ink); }
@media (max-width: 1068px) { .fa-held { grid-template-columns: 1fr; } .fa-lumo { order: -1; } .fa-lumo-bereich { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html[data-design="firma"] body::before, .fa-lumo-scheibe::before, .fa-lumo-scheibe img, .fa-held-text > *, .fa-lumo { animation: none; }
}
/* Lumo-Begleiter unten rechts im Firmen-Design: Lumo als Bild, Blase und Fenster in Glas, hell und dunkel lesbar */
.lumo-bot .lumo-bild { display: none; }
html[data-design="firma"] .lumo-bot { width: 54px; height: 80px; }
html[data-design="firma"] .lumo-bot :is(.kopf-bot, .koerper-bot) { display: none; }
html[data-design="firma"] .lumo-bot .lumo-bild { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgb(10 14 40 / .35)); }
html[data-design="firma"] .lumo-blase { background: var(--fa-glas); border: 1px solid var(--fa-rand); box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--fa-blur); backdrop-filter: var(--fa-blur); }
html[data-design="firma"] .lumo-verlauf .von-lumo { background: color-mix(in oklab, var(--ink) 9%, transparent); }
html[data-design="firma"] .lumo-verlauf .von-dir { color: #fff; }
html[data-design="firma"] .lumo-chips button { background: color-mix(in oklab, var(--ink) 8%, transparent); }
html[data-design="firma"] .lumo-chips button:hover { background: color-mix(in oklab, var(--ink) 14%, transparent); }
html[data-design="firma"] .lumo-eingabe input { background: color-mix(in oklab, var(--ink) 5%, transparent); }
/* Firmen-Design: Feinschliff nach der Fehlersuche (Karten, Symbole, Abzeichen, Zahlen der Lumo-Seite, Vergleich der Firmen-Pläne) */
html[data-design="firma"] :is(.zahl, .spar-zahl, .staerke, .hervor-punkt, .gratis-karte, .enterprise-band, .spar-vergleich, .profil-kopf, .mp-flaeche,
  .ticket-vorrang, .ticket-tipps, .ticket-offen-link, .ds-kurz li, .anmelden-noetig) { border-radius: var(--rund); }
html[data-design="firma"] .hervor-punkt { padding: var(--s5) var(--s4) var(--s4); border-radius: 24px; }
html[data-design="firma"] body[data-seite="lumo"] .zahl { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important; border-radius: 0; }
html[data-design="firma"] .aussage-symbol { background: #eaf1ff; border-color: #c7d7fb; box-shadow: none; }
html[data-design="firma"] .aussage-symbol svg { stroke: var(--blau); }
html[data-design="firma"]:not([data-modus="hell"]) .aussage-symbol { background: rgb(59 120 240 / .14); border-color: rgb(107 157 255 / .3); }
html[data-design="firma"]:not([data-modus="hell"]) .aussage-symbol svg { stroke: var(--link); }
html[data-design="firma"][data-modus="hell"] .empfehlung { color: #fff; }
.tabelle.preis-tabelle .folgt { color: var(--leise); }
html[data-design="firma"][data-modus="hell"] .tabelle.preis-tabelle.fuenf-spalten .kopfzeile .max small { color: #1849b0; }
@media (max-width: 734px) {
  html[data-design="firma"] .lumo-bot { width: 40px; height: 60px; }
  .tabelle.preis-tabelle.fuenf-spalten .kopfzeile .max small { display: none; }   /* zu schmal: Spalte bleibt farbig hervorgehoben */
}

/* ---------- Hilfe: Unterreiter (Anleitungen, Server verbinden, Neuigkeiten, Support) ---------- */
.unterreiter { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; width: max-content; max-width: calc(100% - 2 * var(--rand));
  margin: calc(52px + var(--s5)) auto 0; padding: 4px; border-radius: 12px; background: rgb(118 118 128 / .2); }
.unterreiter a { padding: 7px 16px; border-radius: 9px; font-size: 14px; color: var(--zweit); white-space: nowrap; transition: color .2s, background .2s; }
.unterreiter a:hover { color: var(--ink); text-decoration: none; }
.unterreiter a[aria-current="page"] { color: var(--ink); background: rgb(255 255 255 / .14); box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.unterreiter + .kopfbereich, .unterreiter + section.kopfbereich { padding-top: var(--s6); }
html[data-design="firma"][data-modus="hell"] .unterreiter { background: rgb(118 128 150 / .12); }
html[data-design="firma"][data-modus="hell"] .unterreiter a[aria-current="page"] { background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
@media (max-width: 734px) { .unterreiter { width: auto; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; } }

/* ---------- Ruhiger und weniger „Baukasten“: Merkmale als Liste mit feinen Linien statt gleicher Kacheln, Verlauf nur im Seitentitel,
   Einblenden kürzer und ohne großen Sprung ---------- */
html .merkmale { gap: 0 var(--s5); }
html[data-design] .merkmale > .merkmal, html .merkmale > .merkmal { background: none; border: 0; border-top: 1px solid var(--linie); border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: var(--s3) 0; display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; row-gap: 4px; }
html[data-design] .merkmale > .merkmal:hover { transform: none; box-shadow: none; }
.merkmale > .merkmal > svg { grid-row: 1 / span 4; width: 22px; height: 22px; margin: 1px 0 0; }
.merkmale > .merkmal > :not(svg) { grid-column: 2; }
:is(.bereich, .thema, .kapitel, .fa-bereich, .aussage, .schluss-bereich) :is(h2, h3) .verlauf { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; padding-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .erscheint { transform: translateY(10px); transition-duration: .5s; } }

/* ---------- Startseiten: Lumobix Server-Dienst vorstellen (Text links, Bild aus dem Film rechts) ---------- */
.server-werbung { max-width: var(--breite); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s6); align-items: center; }
.sw-neu { display: inline-block; padding: 4px 12px; border-radius: 99px; font: 600 13px var(--font); letter-spacing: .04em; color: #fff;
  background: var(--blau); margin-bottom: var(--s2); }
.sw-text h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; margin: 0 0 var(--s2); }
.sw-text > p:not(.sw-neu) { color: var(--zweit); font-size: 19px; line-height: 1.45; }
.sw-liste { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: 10px; }
.sw-liste li { position: relative; padding-left: 28px; color: var(--ink); }
.sw-liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg); }
.sw-bild { position: relative; display: block; border-radius: 22px; overflow: hidden; border: 1px solid var(--linie); box-shadow: 0 40px 90px -40px rgb(0 0 0 / .8); }
.sw-bild img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sw-bild:hover img { transform: scale(1.03); }
.sw-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 20px 16px 20px 24px; border-radius: 50%; fill: #fff;
  background: rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / .3); }
.sw-bild span { position: absolute; left: 16px; bottom: 14px; padding: 5px 12px; border-radius: 99px; font: 600 13px var(--font); color: #fff; background: rgb(0 0 0 / .45); }
html[data-design="firma"] .sw-neu { background: var(--blau); }
@media (max-width: 900px) { .server-werbung { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------- Ruhig und eigen statt „KI-Look“ (11.11.2026): Überschriften ausgewogen umbrechen, Ziffern gleich breit, Knöpfe mit Rückmeldung ---------- */
h1, h2, h3, .unterzeile, .einleitung { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
@media (max-width: 734px) { :is(h1, h2, .unterzeile) br { display: none; } }
.preis .betrag, .gratis-preis .betrag, .tabelle, .abo-zeile b, .zahl b, .spar-zahl b, .b-zahl, .fa-fakten b, .fa-zahlen b, .mp-zahl b, .zaehler, .nf-zahl { font-variant-numeric: tabular-nums; }
.pille { transition: background .2s, transform .15s; }
.pille:not(:disabled):active { transform: scale(.97); }
.pille[aria-busy="true"] { opacity: .75; cursor: progress; }
.pille[aria-busy="true"]:not(.zweit):not(.gefahr) { background: var(--blau); color: #fff; }   /* arbeitet: bleibt blau statt „nicht verfügbar“-grau */
.kachel > .tabelle { border: 0; border-radius: 0; background: none; }
.impressum { display: grid; gap: var(--s2); margin: 0; }
.impressum div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--s2); }
.impressum dt { color: var(--zweit); }
.impressum dd { margin: 0; }
@media (max-width: 734px) { .impressum div { grid-template-columns: 1fr; gap: 2px; } }
::placeholder { color: var(--leise); opacity: 1; }   /* Platzhalter lesbar, auch ohne helles Farbschema des Browsers */
/* ---------- Lumobix-Designs (/designs, nur aus Lumobix): Vorschau je Design mit den Farben aus der Datei ---------- */
.design-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); max-width: 1200px; margin: 0 auto; }
.design-karte { display: grid; gap: var(--s1); align-content: start; padding: var(--s2) var(--s2) var(--s3); border-radius: var(--rund); background: var(--flaeche);
  border: 1px solid rgb(255 255 255 / .06); }
.design-karte h3 { margin-top: var(--s1); }
.design-karte p { color: var(--zweit); font-size: 15px; }
.design-karte .pille { justify-self: start; margin-top: var(--s1); }
.design-vorschau { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--d-himmel), var(--d-mitte) 55%, var(--d-horizont)); }
.design-flaeche { position: relative; display: grid; gap: 10px; justify-items: start; padding: 16px 18px; border-radius: 14px; min-width: 58%;
  background: rgb(20 20 24 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.design-flaeche::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: var(--d-rand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.design-flaeche b { font: 700 20px var(--font-display); color: #fff; }
.design-flaeche em { font-style: normal; font-size: 12px; color: #fff; background: var(--d-akzent); padding: 5px 12px; border-radius: 980px; }
.design-lichter { position: absolute; left: 6%; right: 6%; top: 12%; display: flex; justify-content: space-between; }
.design-lichter i { width: 5px; height: 5px; border-radius: 50%; background: var(--d-lichter); box-shadow: 0 0 8px var(--d-lichter); }
.design-lichter i:nth-child(even) { transform: translateY(6px); }
.design-schritte { list-style: none; padding: 0; max-width: 1200px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); counter-reset: s; }
.design-schritte li { display: grid; gap: 4px; padding-left: 40px; position: relative; counter-increment: s; }
.design-schritte li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px var(--font); background: var(--flaeche-2); font-variant-numeric: tabular-nums; }
.design-schritte span { color: var(--zweit); font-size: 15px; }
@media (max-width: 1068px) { .design-karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) { .design-karten, .design-schritte { grid-template-columns: 1fr; } }

/* ---------- Deine Lumobix (/unterwegs, fürs Handy): Geräte-Liste und Chat ---------- */
.bereich.fern { max-width: 720px; margin-inline: auto; }
.fern-liste { display: grid; gap: var(--s2); }
.fern-geraet { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--rund); background: var(--flaeche);
  color: var(--ink); text-align: left; font: inherit; cursor: pointer; -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.fern-geraet:hover { background: var(--flaeche-2); }
.fern-geraet:disabled { cursor: default; opacity: .55; }
.fern-bild { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--flaeche-2); }
.fern-bild svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fern-text { flex: 1; min-width: 0; display: grid; }
.fern-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fern-text span { color: var(--leise); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fern-zustand { flex: none; font-size: 13px; padding: 3px 10px; border-radius: 980px; background: var(--flaeche-2); color: var(--zweit); }
.fern-zustand.frei { color: #6fd08c; }
.fern-zustand.arbeitet { color: #8ea4ea; }
.fern-zustand.wartet { color: #f0b35a; }
.fern-chat { display: grid; gap: var(--s2); }
.fern-kopf { display: flex; align-items: center; gap: 12px; }
.fern-verlauf { display: grid; gap: 8px; align-content: start; max-height: min(60vh, 640px); overflow-y: auto; padding: 12px; border-radius: var(--rund); background: var(--flaeche); }
.fern-nachricht { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--flaeche-2); }
.fern-nachricht.du { justify-self: end; background: var(--blau); color: #fff; }
.fern-rueckfrage { display: grid; gap: 8px; padding: 12px; border-radius: var(--rund); background: rgb(240 179 90 / .12); }
.fern-tasten { display: flex; gap: 8px; flex-wrap: wrap; }
.fern-eingabe { display: flex; gap: 8px; align-items: end; }
.fern-eingabe textarea { flex: 1; min-width: 0; resize: vertical; font: inherit; font-size: 16px; }
.kopfbereich.klein { padding: calc(52px + var(--s6)) var(--rand) var(--s3); }
@media (max-width: 640px) {
  .kopfbereich.klein { padding-top: calc(52px + var(--s4)); }
  .kopfbereich.klein h1 { font-size: 34px; }
  .kopfbereich.klein .einleitung { font-size: 17px; margin-top: var(--s2); }
}

/* ---------- Eigene Seiten (Add-ons, Deine Lumobix): ohne Menü und ohne 3D-Zimmer, fester ruhiger Grund, schnell auf dem Handy ---------- */
.eigen { min-height: 100vh; display: flex; flex-direction: column; background: #0b0b0f; }
:where(html[data-design="firma"]) .eigen { background: var(--schwarz); }
:where(html[data-modus="hell"]) .eigen { background: #f5f5f7; }
.eigen-kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 max(var(--s2), calc((100% - 1040px) / 2));
  background: rgb(11 11 15 / .92); border-bottom: 1px solid var(--linie); }
:where(html[data-modus="hell"]) .eigen-kopf { background: rgb(245 245 247 / .92); }
.eigen-marke { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 17px; text-decoration: none; }
.eigen-marke:hover { text-decoration: none; }
.eigen-marke svg { width: 22px; height: 22px; }
.eigen-name { padding-left: 12px; border-left: 1px solid var(--linie); color: var(--zweit); font-size: 15px; }
.eigen-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--zweit); font-size: 14px; }
.eigen-rechts img { width: 26px; height: 26px; border-radius: 50%; }
.eigen-inhalt { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: var(--s5) var(--s2) var(--s6); box-sizing: border-box; }
.eigen-kopfbereich { margin-bottom: var(--s4); }
.eigen-kopfbereich h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; margin: 0; }
.eigen-kopfbereich p { color: var(--zweit); font-size: 19px; margin: var(--s1) 0 0; max-width: 640px; }
.eigen-kopfbereich.klein h1 { font-size: clamp(28px, 4vw, 40px); }
.eigen-kopfbereich.klein p { font-size: 17px; }
.eigen-leise { color: var(--leise); font-size: 15px; }
.eigen-karte { display: grid; gap: var(--s1); justify-items: start; padding: var(--s3); border-radius: 18px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.eigen-karte h3, .eigen-karte p { margin: 0; }
.eigen-leer { justify-items: center; text-align: center; padding: var(--s5) var(--s3); }
.eigen-wahl { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); margin-bottom: var(--s4); }
.eigen-wahl button { border: 0; background: none; color: var(--zweit); font: 500 15px var(--font); padding: 7px 16px; border-radius: 9px; cursor: pointer; }
.eigen-wahl button.an { background: var(--flaeche); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.eigen-abschnitt { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.eigen-abschnitt h2 { display: flex; align-items: center; gap: 10px; font-size: 24px; margin: 0; }
.eigen .design-karten { max-width: none; margin: 0; }
.eigen .design-karte { background: var(--flaeche-2); border: 1px solid var(--linie); backdrop-filter: none; -webkit-backdrop-filter: none; }
.eigen .design-schritte { margin: var(--s2) 0 0; }
.eigen-fuss { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; padding: var(--s3) var(--s2); border-top: 1px solid var(--linie); color: var(--leise); font-size: 13px; }
.eigen-fuss a { color: var(--leise); }
/* Add-on-Karte (z. B. Lumobix unterwegs) */
.addon-karte { display: flex; gap: var(--s2); padding: var(--s3); border-radius: 18px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.addon-symbol { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--blau); color: #fff; }
.addon-symbol svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.addon-text { flex: 1; min-width: 0; display: grid; gap: 6px; }
.addon-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.addon-zeile h3 { margin: 0; font-size: 21px; }
.addon-text p, .addon-text ul { margin: 0; color: var(--zweit); }
.addon-text ul { padding-left: 18px; font-size: 15px; }
.addon-hinweis { font-size: 14px; }
.addon-schild { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 980px; background: var(--flaeche); color: var(--zweit); letter-spacing: 0; }
.addon-schild.aktiv { background: rgb(48 209 88 / .16); color: #30d158; }
.addon-schild.frei { background: rgb(48 209 88 / .16); color: #30d158; }
.addon-kauf { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.addon-preis { color: var(--zweit); font-size: 15px; }
.addon-preis b { color: var(--ink); font-variant-numeric: tabular-nums; }
.addon-preis i { font-style: normal; margin: 0 8px; color: var(--leise); }
@media (max-width: 760px) {
  .eigen .design-karten { grid-template-columns: 1fr 1fr; }
  .eigen-inhalt { padding-top: var(--s4); }
}
@media (max-width: 520px) {
  .eigen .design-karten { grid-template-columns: 1fr; }
  .addon-karte { flex-direction: column; }
  .eigen-name { display: none; }
}
/* Deine Lumobix auf eigenem Grund: Flächen fest statt Glas (lesbar), keine Unschärfe (schnell) */
.eigen .fern-geraet, .eigen .fern-verlauf { background: var(--flaeche-2); border: 1px solid var(--linie); backdrop-filter: none; -webkit-backdrop-filter: none; }
.eigen .fern-nachricht { background: var(--flaeche); }
.eigen .fern-nachricht.du { background: var(--blau); }
.eigen .fern-verlauf { max-height: calc(100vh - 290px); min-height: 220px; }
.unterwegs-schritte { margin: 0; padding-left: 20px; color: var(--zweit); display: grid; gap: 6px; }

/* Kopfleiste auf großen Bildschirmen: über die ganze Breite (mit Rand), Seiten-Links genau in der Bildschirmmitte, Konto rechts */
@media (min-width: 1069px) {
  .kopf-innen { display: grid; grid-template-columns: 1fr auto 1fr; max-width: none; }
  .kopf-innen > .marke { justify-self: start; }
  .kopf-innen > .reiter { margin: 0; }
  .kopf-innen > .kopf-rechts { justify-self: end; }
  .kopf-innen > .menue { display: none; }
}

/* Handy und schwache Geräte: statt des 3D-Zimmers ein fester Nachthimmel; Flächen ohne teure Unschärfe (flüssig scrollen) */
html.ohne-zimmer { background: #05051a linear-gradient(180deg, #05051a 0%, #0b0a26 45%, #1c1236 80%, #2a1a40 100%) fixed; }
html.ohne-zimmer #bg, html.ohne-zimmer #botzzz { display: none; }
html.ohne-zimmer .kachel, html.ohne-zimmer .kopf, html.ohne-zimmer .design-karte, html.ohne-zimmer .fern-geraet, html.ohne-zimmer .fern-verlauf {
  backdrop-filter: none; -webkit-backdrop-filter: none; }
html.ohne-zimmer .kachel { background: rgb(28 28 34 / .94); }
html.ohne-zimmer .kopf { background: rgb(14 14 20 / .96); }
html.ohne-zimmer .daempfer { background: rgb(0 0 0 / .3); }
.portal-knoepfe { margin-left: auto; display: flex; gap: 8px; align-self: flex-end; }
.portal-knoepfe[hidden] { display: none; }
.addon-plan { font-size: 14px; color: #30d158; }
.addon-form { display: grid; gap: var(--s2); margin-top: var(--s2); }
.addon-form-kopf { display: flex; align-items: center; gap: 10px; }
.addon-form-kopf h3 { margin: 0; }
.addon-form-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.addon-form-raster label { display: grid; gap: 6px; font-size: 14px; color: var(--zweit); }
@media (max-width: 734px) { .addon-form-raster { grid-template-columns: 1fr; } }