/* AGORA-Website – nur Werte aus tokens.css */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--w-kopf-hoehe); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--w-grund); color: var(--w-text);
  font: var(--w-gewicht-normal) var(--w-groesse-3) / var(--w-zeile) var(--w-schrift);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color var(--w-dauer-mittel) ease, color var(--w-dauer-mittel) ease;
}
img { display: block; }
a { color: var(--w-akzent); text-decoration: none; }
:focus-visible { outline: var(--w-fokus-dicke) solid var(--w-akzent); outline-offset: var(--w-fokus-dicke); border-radius: var(--w-radius-s); }
h1, h2, h3 { font-family: var(--w-schrift-anzeige); margin: 0; text-wrap: balance; }
p { margin: 0; }
.leise { color: var(--w-text-leise); }
.klein { font-size: var(--w-groesse-2); }
.gut { color: var(--w-gut); }
.warn { color: var(--w-warn); }
.fehler { color: var(--w-fehler); }
.sprung { position: absolute; left: var(--w-abstand-4); top: calc(-1 * var(--w-kopf-hoehe)); z-index: 30; background: var(--w-akzent); color: var(--w-text-auf-akzent); padding: var(--w-abstand-2) var(--w-abstand-4); border-radius: var(--w-radius-rund); }
.sprung:focus { top: var(--w-abstand-2); }

/* ---------- Kopf (Glas) ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20; height: var(--w-kopf-hoehe);
  background: var(--w-glas); backdrop-filter: blur(var(--w-unschaerfe)) saturate(180%); -webkit-backdrop-filter: blur(var(--w-unschaerfe)) saturate(180%);
  border-bottom: var(--w-linie-dicke) solid var(--w-linie);
}
.kopf-innen { max-width: var(--w-seite-breite); height: 100%; margin: 0 auto; padding: 0 var(--w-abstand-4); display: flex; align-items: center; gap: var(--w-abstand-5); }
.marke { display: flex; align-items: center; gap: var(--w-abstand-2); color: var(--w-text); font-weight: var(--w-gewicht-fett); font-family: var(--w-schrift-anzeige); letter-spacing: 0.02em; }
.kopf-nav { display: flex; gap: var(--w-abstand-5); flex: 1; justify-content: center; }
.kopf-nav a { color: var(--w-text-leise); font-size: var(--w-groesse-2); transition: color var(--w-dauer-kurz) ease; }
.kopf-rechts { display: flex; align-items: center; gap: var(--w-abstand-2); margin-left: auto; }
.thema-knopf { width: var(--w-abstand-6); height: var(--w-abstand-6); border: 0; border-radius: var(--w-radius-rund); background: transparent; color: var(--w-text-leise); display: grid; place-items: center; cursor: pointer; transition: transform var(--w-dauer-kurz) var(--w-kurve), background-color var(--w-dauer-kurz) ease; }
.thema-knopf svg { width: var(--w-abstand-4); height: var(--w-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.thema-knopf:active { transform: scale(var(--w-druck)); }
@media (hover: hover) and (pointer: fine) {
  .kopf-nav a:hover { color: var(--w-text); }
  .thema-knopf:hover { background: var(--w-flaeche-2); color: var(--w-text); }
  .knopf:hover { filter: brightness(1.08); }
  .knopf-zweit:hover { background: var(--w-flaeche-3); filter: none; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; height: calc(var(--w-abstand-7) - var(--w-abstand-1));
  padding: 0 var(--w-abstand-5); border-radius: var(--w-radius-rund); background: var(--w-akzent); color: var(--w-text-auf-akzent);
  font-weight: var(--w-gewicht-mittel); white-space: nowrap;
  transition: transform var(--w-dauer-kurz) var(--w-kurve), filter var(--w-dauer-kurz) ease, background-color var(--w-dauer-kurz) ease;
}
.knopf:active { transform: scale(var(--w-druck)); }
.knopf-zweit { background: var(--w-flaeche-2); color: var(--w-text); }
.knopf-klein { height: var(--w-abstand-6); padding: 0 var(--w-abstand-4); font-size: var(--w-groesse-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative; text-align: center; padding: var(--w-abstand-9) var(--w-abstand-4) var(--w-abstand-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--w-abstand-5);
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--w-glanz); z-index: -1; pointer-events: none; }
.etikett { font-size: var(--w-groesse-2); font-weight: var(--w-gewicht-mittel); color: var(--w-akzent); letter-spacing: 0.02em; }
.hero-titel { font-size: var(--w-groesse-8); line-height: var(--w-zeile-eng); letter-spacing: var(--w-sperrung-gross); font-weight: var(--w-gewicht-fett); }
.leise-verlauf { color: var(--w-text-leise); }
.hero-text { max-width: var(--w-text-breite); font-size: var(--w-groesse-4); color: var(--w-text-leise); }
.hero-knoepfe { display: flex; gap: var(--w-abstand-3); flex-wrap: wrap; justify-content: center; }
.hero-punkte { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--w-abstand-5); flex-wrap: wrap; justify-content: center; font-size: var(--w-groesse-2); color: var(--w-text-leise); }
.hero-punkte li::before { content: "✓ "; color: var(--w-gut); }
.hero > * { animation: auftauchen var(--w-dauer-lang) var(--w-kurve) both; }
.hero > :nth-child(2) { animation-delay: 60ms; }
.hero > :nth-child(3) { animation-delay: 120ms; }
.hero > :nth-child(4) { animation-delay: 180ms; }
.hero > :nth-child(5) { animation-delay: 240ms; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(var(--w-versatz)); filter: blur(4px); } }

/* ---------- App-Vorschau ---------- */
.vorschau-buehne { max-width: var(--w-seite-breite); margin: 0 auto; padding: 0 var(--w-abstand-4) var(--w-abstand-8); }
.fenster { border-radius: var(--w-radius-m); overflow: hidden; border: var(--w-linie-dicke) solid var(--w-linie); background: var(--w-grund); box-shadow: var(--w-schatten-3); }
.fenster-titel { height: var(--w-titel-hoehe); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--w-abstand-3); border-bottom: var(--w-linie-dicke) solid var(--w-linie); font-size: var(--w-groesse-1); font-weight: var(--w-gewicht-fett); }
.fenster-marke { display: flex; align-items: center; gap: var(--w-abstand-2); }
.fenster-knoepfe { display: flex; gap: var(--w-abstand-4); }
.fenster-knoepfe i { width: var(--w-abstand-3); height: var(--w-linie-dicke); background: var(--w-text-leise); }
.app { display: grid; grid-template-columns: var(--w-leiste-breite) 1fr 1fr; height: var(--w-vorschau-hoehe); font-size: var(--w-groesse-2); }
.app-leiste { background: var(--w-flaeche); border-right: var(--w-linie-dicke) solid var(--w-linie); padding: var(--w-abstand-3); display: flex; flex-direction: column; gap: var(--w-abstand-2); min-width: 0; }
.app-suche { height: var(--w-abstand-6); border-radius: var(--w-radius-rund); background: var(--w-flaeche-2); color: var(--w-text-leise); display: flex; align-items: center; padding: 0 var(--w-abstand-3); }
.app-gruppe { font-size: var(--w-groesse-0); font-weight: var(--w-gewicht-fett); color: var(--w-text-leise); letter-spacing: 0.06em; margin-top: var(--w-abstand-2); display: flex; justify-content: space-between; }
.zaehler { color: var(--w-akzent); letter-spacing: 0; }
.app-baum { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--w-abstand-1); }
.app-baum li { padding: var(--w-abstand-1) var(--w-abstand-2); border-radius: var(--w-radius-s); display: flex; align-items: center; gap: var(--w-abstand-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-baum li.aktiv { background: var(--w-flaeche-3); }
.app-baum li.einr { padding-left: var(--w-abstand-4); }
.app-baum li.einr2 { padding-left: var(--w-abstand-6); }
.punkt { width: var(--w-punkt); height: var(--w-punkt); border-radius: var(--w-radius-rund); background: var(--w-flaeche-3); flex: none; }
.punkt-gut { background: var(--w-gut); }
.punkt-akzent { background: var(--w-akzent); }
.laeuft { animation: pulsieren 1.6s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: 0.35; } }
.app-abos { margin-top: auto; display: flex; flex-direction: column; gap: var(--w-abstand-1); border-top: var(--w-linie-dicke) solid var(--w-linie); padding-top: var(--w-abstand-3); }
.abo-zeile { display: flex; justify-content: space-between; gap: var(--w-abstand-2); font-size: var(--w-groesse-1); }
.abo-wert { font-family: var(--w-schrift-mono); color: var(--w-text-leise); }
.balken { height: var(--w-balken); border-radius: var(--w-radius-rund); background: var(--w-flaeche-3); overflow: hidden; }
.balken i { display: block; height: 100%; width: 100%; background: var(--w-akzent); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--w-kurve-weich); }
.balken i.gut { background: var(--w-gut); }
.balken i.warn { background: var(--w-warn); }
.ist-da .b-12 { transform: scaleX(0.12); }
.ist-da .b-34 { transform: scaleX(0.34); }
.ist-da .b-61 { transform: scaleX(0.61); }
.ist-da .b-82 { transform: scaleX(0.82); }
.ist-da .b-100 { transform: scaleX(1); }
.app-mitte { display: flex; flex-direction: column; min-width: 0; border-right: var(--w-linie-dicke) solid var(--w-linie); }
.app-kopf { display: flex; justify-content: space-between; gap: var(--w-abstand-3); padding: var(--w-abstand-3); border-bottom: var(--w-linie-dicke) solid var(--w-linie); white-space: nowrap; overflow: hidden; }
.app-plan { display: flex; align-items: center; gap: var(--w-abstand-3); padding: var(--w-abstand-2) var(--w-abstand-3); background: var(--w-flaeche); border-bottom: var(--w-linie-dicke) solid var(--w-linie); font-size: var(--w-groesse-1); }
.plan-ziel { white-space: nowrap; }
.plan-balken { flex: 1; height: var(--w-balken); border-radius: var(--w-radius-rund); background: var(--w-flaeche-3); overflow: hidden; }
.plan-balken i { display: block; height: 100%; width: 100%; background: var(--w-gut); transform-origin: left; transform: scaleX(0.4); transition: transform var(--w-dauer-lang) var(--w-kurve-weich); }
.app-chat { flex: 1; padding: var(--w-abstand-3); display: flex; flex-direction: column; gap: var(--w-abstand-3); overflow: hidden; }
.nachricht { max-width: 85%; padding: var(--w-abstand-2) var(--w-abstand-3); border-radius: var(--w-radius-m); }
.nachricht.nutzer { align-self: flex-end; background: var(--w-akzent-weich); }
.nachricht.ki { align-self: flex-start; min-height: calc(var(--w-abstand-7) + var(--w-abstand-2)); }
.karte-lauf, .karte-freigabe { border: var(--w-linie-dicke) solid var(--w-linie); border-radius: var(--w-radius-m); padding: var(--w-abstand-2) var(--w-abstand-3); display: flex; flex-direction: column; gap: var(--w-abstand-1); background: var(--w-flaeche); }
.lauf-kopf { display: flex; align-items: center; gap: var(--w-abstand-2); }
.werkzeug { font-size: var(--w-groesse-1); color: var(--w-text-leise); }
.werkzeug code, .modell-zeile code { font-family: var(--w-schrift-mono); color: var(--w-text); }
.laeuft-text { color: var(--w-akzent); }
.karte-freigabe { border-color: var(--w-warn); background: var(--w-warn-weich); }
.freigabe-knoepfe { display: flex; gap: var(--w-abstand-2); margin-top: var(--w-abstand-1); }
.mini-knopf { padding: var(--w-abstand-1) var(--w-abstand-3); border-radius: var(--w-radius-rund); background: var(--w-akzent); color: var(--w-text-auf-akzent); font-size: var(--w-groesse-1); }
.mini-knopf.zweit { background: var(--w-flaeche-3); color: var(--w-text); }
.js .app-chat .karte-lauf, .js .app-chat .karte-freigabe, .js .app-chat .nachricht { opacity: 0; transform: translateY(var(--w-abstand-2)); transition: opacity var(--w-dauer-mittel) ease, transform var(--w-dauer-mittel) var(--w-kurve); }
.js .app-chat .sichtbar { opacity: 1; transform: none; }
.app-eingabe { margin: var(--w-abstand-3); height: var(--w-abstand-7); border-radius: var(--w-radius-rund); background: var(--w-flaeche-2); display: flex; align-items: center; gap: var(--w-abstand-2); padding: 0 var(--w-abstand-2); }
.plus, .senden { width: var(--w-abstand-6); height: var(--w-abstand-6); border-radius: var(--w-radius-rund); display: grid; place-items: center; flex: none; }
.senden { background: var(--w-akzent); color: var(--w-text-auf-akzent); }
.eingabe-text { flex: 1; color: var(--w-text-leise); white-space: nowrap; overflow: hidden; }
.modus { font-size: var(--w-groesse-1); color: var(--w-text-leise); white-space: nowrap; }
.app-rechts { display: flex; flex-direction: column; min-width: 0; background: var(--w-flaeche); }
.app-tabs { display: flex; border-bottom: var(--w-linie-dicke) solid var(--w-linie); }
.tab { padding: var(--w-abstand-2) var(--w-abstand-4); color: var(--w-text-leise); }
.tab.aktiv { color: var(--w-text); box-shadow: inset 0 calc(-1 * var(--w-fokus-dicke)) 0 var(--w-akzent); }
.code { margin: 0; padding: var(--w-abstand-4); font: var(--w-groesse-2) / 1.7 var(--w-schrift-mono); overflow: hidden; }
.c-leise { color: var(--w-text-leise); }
.c-a { color: var(--w-lila); }
.c-b { color: var(--w-akzent); }
.zeile-neu { display: block; background: var(--w-gut-weich); border-left: var(--w-fokus-dicke) solid var(--w-gut); margin-left: calc(-1 * var(--w-abstand-4)); padding-left: calc(var(--w-abstand-4) - var(--w-fokus-dicke)); }
.unterschrift { text-align: center; margin-top: var(--w-abstand-4); font-size: var(--w-groesse-2); color: var(--w-text-leise); }

/* ---------- Abschnitte ---------- */
.abschnitt { max-width: var(--w-seite-breite); margin: 0 auto; padding: var(--w-abstand-8) var(--w-abstand-4); display: flex; flex-direction: column; gap: var(--w-abstand-7); }
.abschnitt-kopf { display: flex; flex-direction: column; gap: var(--w-abstand-3); align-items: center; text-align: center; }
.abschnitt-kopf h2 { font-size: var(--w-groesse-7); line-height: 1.1; letter-spacing: var(--w-sperrung-gross); }
.abschnitt-kopf .leise { max-width: var(--w-text-breite); font-size: var(--w-groesse-4); }
h3 { font-size: var(--w-groesse-5); line-height: 1.25; letter-spacing: -0.01em; }

/* Einblenden beim Scrollen */
.js [data-zeigen] { opacity: 0; transform: translateY(var(--w-versatz)); transition: opacity var(--w-dauer-lang) var(--w-kurve), transform var(--w-dauer-lang) var(--w-kurve); }
.js [data-zeigen].ist-da { opacity: 1; transform: none; }

/* Setups */
.setups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--w-abstand-5); }
.setup { background: var(--w-flaeche); border: var(--w-linie-dicke) solid var(--w-linie); border-radius: var(--w-radius-xl); padding: var(--w-abstand-6); display: flex; flex-direction: column; gap: var(--w-abstand-4); }
.setup-lokal { box-shadow: inset 0 var(--w-balken) 0 var(--w-gut); }
.setup-cloud { box-shadow: inset 0 var(--w-balken) 0 var(--w-akzent); }
.setup-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--w-abstand-3); }
.preis { font-size: var(--w-groesse-2); color: var(--w-text-leise); font-weight: var(--w-gewicht-mittel); }
.marke-chip { display: inline-block; font-size: var(--w-groesse-1); font-weight: var(--w-gewicht-fett); padding: 0 var(--w-abstand-2); border-radius: var(--w-radius-rund); white-space: nowrap; line-height: 1.7; }
.chip-gut { color: var(--w-gut); background: var(--w-gut-weich); }
.chip-akzent { color: var(--w-akzent); background: var(--w-akzent-weich); }
.chip-warn { color: var(--w-warn); background: var(--w-warn-weich); }
.chip-lila { color: var(--w-lila); background: var(--w-flaeche-3); }
.haken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--w-abstand-2); }
.haken li { padding-left: var(--w-abstand-5); position: relative; }
.haken li::before { content: "✓"; position: absolute; left: 0; color: var(--w-gut); font-weight: var(--w-gewicht-fett); }
.haken.klein { font-size: var(--w-groesse-2); }
.hinweis { font-size: var(--w-groesse-2); color: var(--w-text-leise); margin-top: auto; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; border: var(--w-linie-dicke) solid var(--w-linie); border-radius: var(--w-radius-l); background: var(--w-flaeche); }
.vergleich { width: 100%; border-collapse: collapse; font-size: var(--w-groesse-2); min-width: calc(var(--w-text-breite) - var(--w-abstand-8)); }
.warum-tabelle { min-width: var(--w-text-breite); }
.vergleich caption { text-align: left; padding: var(--w-abstand-4) var(--w-abstand-4) 0; color: var(--w-text-leise); font-size: var(--w-groesse-1); }
.vergleich th, .vergleich td { text-align: left; padding: var(--w-abstand-3) var(--w-abstand-4); border-bottom: var(--w-linie-dicke) solid var(--w-linie); vertical-align: top; }
.vergleich thead th { font-size: var(--w-groesse-1); color: var(--w-text-leise); font-weight: var(--w-gewicht-fett); }
.vergleich tbody th { font-weight: var(--w-gewicht-mittel); }
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }
.vergleich .hervor { background: var(--w-akzent-weich); font-weight: var(--w-gewicht-mittel); }

/* Funktionen */
.funktion { display: grid; grid-template-columns: 1fr 1fr; gap: var(--w-abstand-7); align-items: center; }
.funktion.umgekehrt .funktion-text { order: 2; }
.funktion-text { display: flex; flex-direction: column; gap: var(--w-abstand-4); }
.mini-fenster { background: var(--w-flaeche); border: var(--w-linie-dicke) solid var(--w-linie); border-radius: var(--w-radius-l); padding: var(--w-abstand-6); box-shadow: var(--w-schatten-2); font-size: var(--w-groesse-2); }
.baum-gross { display: flex; flex-direction: column; align-items: center; }
.ast { display: flex; gap: var(--w-abstand-3); flex-wrap: wrap; justify-content: center; }
.kante { width: var(--w-linie-dicke); height: var(--w-abstand-5); background: var(--w-linie); }
.knoten { display: flex; align-items: center; gap: var(--w-abstand-2); padding: var(--w-abstand-2) var(--w-abstand-3); border-radius: var(--w-radius-rund); background: var(--w-grund); border: var(--w-linie-dicke) solid var(--w-linie); white-space: nowrap; }
.knoten.klein { font-size: var(--w-groesse-1); color: var(--w-text-leise); }
.k-main { font-weight: var(--w-gewicht-fett); }
.ist-da .knoten { animation: auftauchen var(--w-dauer-lang) var(--w-kurve) both; }
.ist-da .ast .knoten:nth-child(2) { animation-delay: 80ms; }
.ist-da .ast-3 .knoten { animation-delay: 240ms; }
.ist-da .ast-3 .knoten:nth-child(2) { animation-delay: 300ms; }
.ist-da .ast-3 .knoten:nth-child(3) { animation-delay: 360ms; }
.modelle, .abo-block { display: flex; flex-direction: column; gap: var(--w-abstand-3); }
.abo-block { gap: var(--w-abstand-2); }
.modell-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: var(--w-abstand-3); align-items: center; }
.zustand { font-size: var(--w-groesse-1); padding: 0 var(--w-abstand-2); border-radius: var(--w-radius-rund); background: var(--w-flaeche-3); min-width: calc(var(--w-abstand-7) + var(--w-abstand-3)); text-align: center; font-family: var(--w-schrift-mono); }
.zustand.gut { background: var(--w-gut-weich); color: var(--w-gut); }
.zustand.akzent { background: var(--w-akzent-weich); color: var(--w-akzent); }
.balken.gross i { transition: none; }

.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--w-abstand-4); }
.kachel { background: var(--w-flaeche); border: var(--w-linie-dicke) solid var(--w-linie); border-radius: var(--w-radius-l); padding: var(--w-abstand-5); display: flex; flex-direction: column; gap: var(--w-abstand-2); }
.kachel h3 { font-size: var(--w-groesse-4); }
.kachel p { font-size: var(--w-groesse-2); }
.kacheln .kachel:nth-child(4n+2) { transition-delay: 60ms; }
.kacheln .kachel:nth-child(4n+3) { transition-delay: 120ms; }
.kacheln .kachel:nth-child(4n+4) { transition-delay: 180ms; }

/* Engine */
.engine { position: relative; }
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-abstand-4); }
.zahl { text-align: center; padding: var(--w-abstand-6) var(--w-abstand-4); border-radius: var(--w-radius-xl); background: var(--w-flaeche); border: var(--w-linie-dicke) solid var(--w-linie); display: flex; flex-direction: column; gap: var(--w-abstand-1); }
.zahl-wert { font: var(--w-gewicht-fett) var(--w-groesse-8) / 1 var(--w-schrift-anzeige); letter-spacing: var(--w-sperrung-gross); font-variant-numeric: tabular-nums; }
.zahl-einheit { font-weight: var(--w-gewicht-mittel); color: var(--w-akzent); }

/* Gründe */
.gruende { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--w-abstand-4); }
.grund { display: flex; flex-direction: column; gap: var(--w-abstand-2); }
.grund h3 { font-size: var(--w-groesse-4); }
.grund p { font-size: var(--w-groesse-2); }
.grund-zahl { font-family: var(--w-schrift-mono); color: var(--w-akzent); font-size: var(--w-groesse-2); }

/* FAQ */
.fragen { max-width: var(--w-text-breite); width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.fragen details { border-bottom: var(--w-linie-dicke) solid var(--w-linie); }
.fragen summary { cursor: pointer; padding: var(--w-abstand-4) 0; font-weight: var(--w-gewicht-mittel); list-style: none; display: flex; justify-content: space-between; gap: var(--w-abstand-4); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--w-text-leise); transition: transform var(--w-dauer-mittel) var(--w-kurve); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding-bottom: var(--w-abstand-4); color: var(--w-text-leise); }

/* Laden */
.laden-karte { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--w-abstand-4); padding: var(--w-abstand-8) var(--w-abstand-5); border-radius: var(--w-radius-xl); background: var(--w-flaeche); border: var(--w-linie-dicke) solid var(--w-linie); position: relative; overflow: hidden; }
.laden-karte::before { content: ""; position: absolute; inset: 0; background: var(--w-glanz); pointer-events: none; }
.laden-karte > * { position: relative; }
.laden-karte h2 { font-size: var(--w-groesse-7); letter-spacing: var(--w-sperrung-gross); }

/* Fuß */
.fuss { border-top: var(--w-linie-dicke) solid var(--w-linie); }
.fuss-innen { max-width: var(--w-seite-breite); margin: 0 auto; padding: var(--w-abstand-6) var(--w-abstand-4); display: flex; justify-content: space-between; align-items: center; gap: var(--w-abstand-4); flex-wrap: wrap; font-size: var(--w-groesse-2); }
.fuss nav { display: flex; gap: var(--w-abstand-5); }
.fuss nav a { color: var(--w-text-leise); }

/* ---------- Breiten ---------- */
@media (max-width: 980px) {
  .app { grid-template-columns: var(--w-leiste-breite) 1fr; }
  .app-rechts { display: none; }
  .kacheln, .gruende { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .kopf-nav { display: none; }
  .hero { padding-top: var(--w-abstand-8); }
  .app { grid-template-columns: 1fr; }
  .app-leiste { display: none; }
  .app-mitte { border-right: 0; }
  .setups, .funktion, .zahlen { grid-template-columns: 1fr; }
  .funktion { gap: var(--w-abstand-5); }
  .funktion.umgekehrt .funktion-text { order: 0; }
  .setup, .mini-fenster { padding: var(--w-abstand-5); }
  .abschnitt { padding: var(--w-abstand-7) var(--w-abstand-4); }
}
@media (max-width: 480px) {
  .kacheln, .gruende { grid-template-columns: 1fr; }
  .modus { display: none; }
}

/* ---------- Ruhe ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero > *, .ist-da .knoten { animation: none; }
  .laeuft { animation: none; }
  .js [data-zeigen], .app-chat .karte-lauf, .app-chat .karte-freigabe, .app-chat .nachricht { transform: none; transition: opacity var(--w-dauer-mittel) ease; }
  .balken i, .plan-balken i { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .kopf { background: var(--w-grund); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Vergleich mit Produkten: Monogramm-Kreise, erste Spalte fest */
.warum-tabelle thead th { vertical-align: bottom; }
.mono { display: grid; place-items: center; width: var(--w-mono); height: var(--w-mono); border-radius: var(--w-radius-rund); color: var(--w-mono-schrift); font-size: var(--w-groesse-1); font-weight: var(--w-gewicht-fett); margin-bottom: var(--w-abstand-1); }
.mono-1 { background: var(--w-mono-1); }
.mono-2 { background: var(--w-mono-2); }
.mono-3 { background: var(--w-mono-3); }
.mono-4 { background: var(--w-mono-4); }
.mono-a { background: var(--w-mono-a); }
.spalte-name { display: block; color: var(--w-text); font-size: var(--w-groesse-2); }
.spalte-firma { display: block; font-weight: var(--w-gewicht-normal); }
.tabelle-fest tbody th, .tabelle-fest thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--w-flaeche); min-width: var(--w-spalte-fest); box-shadow: inset calc(-1 * var(--w-linie-dicke)) 0 0 var(--w-linie); }
.warum-tabelle { min-width: calc(var(--w-seite-breite) - var(--w-abstand-9)); }
@media (max-width: 720px) {
  .tabelle-fest tbody th, .tabelle-fest thead th:first-child { width: var(--w-spalte-fest); min-width: 0; max-width: var(--w-spalte-fest); }
  .warum-tabelle { min-width: 0; width: max-content; }
  .warum-tabelle td, .warum-tabelle thead th { min-width: calc(var(--w-abstand-9) - var(--w-abstand-3)); }
}