/* ---------------------------------------------------------------------------
   MN Solutions – gemeinsames Stylesheet fuer www.mnsol.de und addons.mnsol.de

   Keine Frameworks, keine Schriften und keine Skripte von fremden Servern:
   die Datenschutzerklaerung sagt genau das zu, also muss es stimmen. Die
   Systemschrift liefert auf Apple-Geraeten ohnehin SF Pro, auf Windows Segoe UI
   und auf Android Roboto -- alle drei passen zum Bild und kosten keine Anfrage.

   Die Token-Namen entsprechen absichtlich denen in ui/src/index.css, damit die
   Webseite und das Portal nicht auseinanderlaufen.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg:          #fbfbfd;
  --bg-elevated: #ffffff;
  --bg-sunken:   #f2f2f5;
  --fg:          #1d1d1f;
  --fg-muted:    #6e6e73;
  --fg-faint:    #86868b;
  --line:        rgba(0, 0, 0, .10);
  --line-strong: rgba(0, 0, 0, .18);
  --accent:      #0066cc;
  --accent-hover:#0077ed;
  --accent-fg:   #ffffff;
  --ok:          #1d8a4e;

  --nav-bg:      rgba(251, 251, 253, .72);
  --shadow-sm:   0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --shadow-md:   0 2px 6px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.07);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 24px;

  --page:  min(1080px, 100% - 3rem);
  --prose: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #000000;
    --bg-elevated: #16161a;
    --bg-sunken:   #0d0d0f;
    --fg:          #f5f5f7;
    --fg-muted:    #a1a1a6;
    --fg-faint:    #86868b;
    --line:        rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .22);
    --accent:      #2997ff;
    --accent-hover:#5aafff;
    --accent-fg:   #000000;
    --ok:          #30d158;

    --nav-bg:      rgba(0, 0, 0, .72);
    --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
    --shadow-md:   0 12px 40px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Grundraster ------------------------------------------------- */

.page { width: var(--page); margin-inline: auto; }
.prose { max-width: var(--prose); }
section { padding-block: 5rem; }
section + section { border-top: 1px solid var(--line); }
@media (max-width: 640px) { section { padding-block: 3.5rem; } }

/* ---------- Typografie --------------------------------------------------- */

h1, h2, h3 { letter-spacing: -.022em; line-height: 1.1; margin: 0 0 .6rem; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: .9rem; }
h3 { font-size: 1.125rem; letter-spacing: -.012em; }
p  { margin: 0 0 1.1rem; }
.lead { font-size: clamp(1.1rem, 2.1vw, 1.3rem); color: var(--fg-muted); line-height: 1.45; }
.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .75rem;
}
.small { font-size: .875rem; color: var(--fg-muted); }
.muted { color: var(--fg-muted); }
strong { font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
.prose a, main p a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: .5px; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }
li::marker { color: var(--fg-faint); }

code, .mono, kbd {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
kbd {
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: 6px; padding: .1em .4em; font-size: .85em; white-space: nowrap;
}

/* ---------- Navigation ---------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: var(--page); margin-inline: auto;
  display: flex; align-items: center; gap: 1.75rem;
  height: 52px;
}
.nav a { color: var(--fg-muted); font-size: .8125rem; letter-spacing: -.01em; }
.nav a:hover { color: var(--fg); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--fg); }
.nav .brand {
  color: var(--fg); font-weight: 600; font-size: .95rem; letter-spacing: -.02em;
  margin-right: auto; display: flex; align-items: center; gap: .55rem;
}
.nav .spacer { margin-left: auto; }
@media (max-width: 720px) {
  .nav-inner { gap: 1.1rem; height: auto; padding-block: .7rem; flex-wrap: wrap; }
  .nav .brand { margin-right: 0; width: 100%; }
  .nav .spacer { margin-left: 0; }
}

/* Wortmarke: drei Balken, wie eine Anlagenuebersicht. Reines CSS. */
.mark {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: linear-gradient(145deg, var(--accent), #5ac8fa);
  position: relative;
}
.mark::before, .mark::after {
  content: ""; position: absolute; left: 5px; height: 2px; border-radius: 1px;
  background: rgba(255,255,255,.95);
}
.mark::before { top: 7px;  width: 12px; }
.mark::after  { top: 12px; width: 7px; }

/* ---------- Hero ---------------------------------------------------------- */

.hero { padding-block: clamp(4rem, 11vw, 8rem) clamp(3.5rem, 8vw, 6rem); text-align: center; }
.hero h1 { margin-bottom: 1.1rem; }
.hero .lead { max-width: 36rem; margin-inline: auto; margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---------- Schaltflaechen ------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .72rem 1.35rem; border-radius: 980px;
  font-size: .9375rem; font-weight: 500; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); }
.btn-secondary { background: transparent; color: var(--accent); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg-sunken); color: var(--accent); }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

.link-arrow::after { content: " \203A"; font-weight: 400; }

/* ---------- Karten und Raster -------------------------------------------- */

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .45rem; }
.card p:last-child { margin-bottom: 0; }
.card-lg { padding: 2.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
a.card { display: block; color: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
a.card:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow-md); }
a.card h3 { color: var(--accent); }

/* Ein dezentes Symbol je Karte, rein per CSS erzeugt. */
.card .ico {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 1rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}

/* ---------- Kopierfeld ---------------------------------------------------- */

.copy {
  display: flex; align-items: center; gap: .75rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
  margin: 1rem 0 .6rem;
}
.copy code { flex: 1; overflow-x: auto; white-space: nowrap; font-size: .875rem; }
.copy button {
  flex: none; font: inherit; font-size: .8125rem; font-weight: 500;
  padding: .35rem .8rem; border-radius: 980px;
  border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--fg);
  cursor: pointer;
}
.copy button:hover { background: var(--bg); }

/* ---------- Schritte ------------------------------------------------------ */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 0; }
.steps li {
  counter-increment: step; position: relative;
  padding-left: 3rem; padding-bottom: 1.75rem; margin: 0;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--bg-sunken); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: .8125rem; font-weight: 600; color: var(--fg-muted);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 1rem; top: 2.1rem; bottom: .35rem;
  width: 1px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps h3 { margin-bottom: .3rem; }
.steps p:last-child { margin-bottom: 0; }

/* ---------- Definitionslisten (Impressum) --------------------------------- */

dl.facts { margin: 0; display: grid; gap: 0; }
dl.facts div {
  display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem;
  padding: 1.1rem 0; border-top: 1px solid var(--line);
}
dl.facts div:last-child { border-bottom: 1px solid var(--line); }
dl.facts dt { color: var(--fg-muted); font-size: .9375rem; }
dl.facts dd { margin: 0; }
@media (max-width: 640px) {
  dl.facts div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- Hinweisleiste ------------------------------------------------- */

.note {
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Fusszeile ------------------------------------------------------ */

.footer { border-top: 1px solid var(--line); background: var(--bg-sunken); padding-block: 2.5rem; }
.footer .page { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.footer a { color: var(--fg-muted); font-size: .8125rem; }
.footer a:hover { color: var(--fg); }
.footer .copyright { color: var(--fg-faint); font-size: .8125rem; margin-left: auto; }
@media (max-width: 640px) { .footer .copyright { margin-left: 0; width: 100%; } }

/* ===========================================================================
   Bewegung
   ===========================================================================

   Der verdeckte Ausgangszustand haengt an <html class="js">, und diese Marke
   setzt ein winziges Skript im Kopf der Seite -- vor dem ersten Zeichnen, damit
   nichts aufblitzt und dann verschwindet. Dasselbe Skript nimmt die Marke nach
   2,5 s wieder weg, falls motion.js nicht geladen hat. Eine Seite, deren Inhalt
   an einer Skriptdatei haengt, ist sonst genau einen Netzfehler von leer
   entfernt.

   prefers-reduced-motion schaltet alles ab -- das ist keine Kuer: Bewegung kann
   bei vestibulaeren Stoerungen Uebelkeit ausloesen.
--------------------------------------------------------------------------- */

.js main > section > *:not(.grid),
.js main > header > *,
.js main > section > .grid > *,
.js main .steps > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}
.js .is-visible { opacity: 1 !important; transform: none !important; }

/* Gestaffelt, damit eine Kartenreihe nacheinander erscheint statt als Block.
   Mehr als drei Stufen nicht: danach wirkt es zaeh statt lebendig. */
.js [data-delay="1"] { transition-delay: .06s; }
.js [data-delay="2"] { transition-delay: .12s; }
.js [data-delay="3"] { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .js main > section > *, .js main > header > *,
  .js main > section > .grid > *, .js main .steps > li {
    opacity: 1; transform: none; transition: none;
  }
}

/* --- Kopfzeile: Trennlinie erst beim Scrollen ----------------------------- */

.nav { transition: border-color .25s ease, background-color .25s ease; }
.nav:not(.is-scrolled) { border-bottom-color: transparent; }

/* --- Hero: ruhiger Farbschimmer hinter der Ueberschrift ------------------- */

.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto; height: 34rem;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 52% at 28% 32%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(38% 48% at 74% 22%, color-mix(in oklab, #5ac8fa 20%, transparent), transparent 72%);
  filter: blur(24px);
  opacity: .55;
  animation: drift 22s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark) { .hero::before { opacity: .38; } }

@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* Browser ohne color-mix bekommen keinen Schimmer -- kein Verlust. */
@supports not (background: color-mix(in oklab, red, blue)) {
  .hero::before { display: none; }
}

/* --- Karten: minimale Anhebung, kein Wackeln ------------------------------ */

.card { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease; }
.card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* --- Pfeil rueckt beim Zeigen nach ---------------------------------------- */

.link-arrow::after { display: inline-block; transition: transform .2s ease; }
a:hover .link-arrow::after, .link-arrow:hover::after { transform: translateX(3px); }

/* --- Kopierfeld: kurze Bestaetigung --------------------------------------- */

.copy button { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.copy button.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ===========================================================================
   Farbe je Karte
   ===========================================================================
   Jede Karte kann einen eigenen Ton fuehren. Er faerbt das Symbolfeld, den
   Rahmen beim Zeigen und eine feine Leiste an der Oberkante -- nicht den Text:
   Fliesstext bleibt in der Textfarbe, sonst leidet der Kontrast.

   SECURITY/UX: Diese Toene sind Schmuck. Zustaende (in Ordnung, Warnung,
   kritisch) haben im Portal eigene Farben und duerfen mit diesen hier nie
   verwechselbar sein -- deshalb kommen sie auf der Webseite gar nicht vor.
--------------------------------------------------------------------------- */

.card { --tone: var(--accent); position: relative; overflow: hidden; }

.card[data-tone="solar"]  { --tone: #e8a33d; }
.card[data-tone="energy"] { --tone: #0f9d8f; }
.card[data-tone="home"]   { --tone: #6366f1; }
.card[data-tone="care"]   { --tone: #0066cc; }
.card[data-tone="signal"] { --tone: #c2569b; }

@media (prefers-color-scheme: dark) {
  .card[data-tone="solar"]  { --tone: #f3bc63; }
  .card[data-tone="energy"] { --tone: #2dd4bf; }
  .card[data-tone="home"]   { --tone: #8b8ef6; }
  .card[data-tone="care"]   { --tone: #2997ff; }
  .card[data-tone="signal"] { --tone: #e07ab8; }
}

/* Leiste an der Oberkante, faehrt beim Zeigen aus. */
.card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--tone), transparent 85%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }

.card .ico {
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 12%, var(--bg-sunken));
  border-color: color-mix(in oklab, var(--tone) 24%, var(--line));
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease;
}
.card:hover .ico { transform: translateY(-2px) scale(1.06); }

.card:hover, .card:focus-within {
  border-color: color-mix(in oklab, var(--tone) 32%, var(--line));
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--tone) 14%, transparent);
}

@supports not (background: color-mix(in oklab, red, blue)) {
  .card .ico { color: var(--tone); }
}
@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
  .card:hover .ico { transform: none; }
}

/* ===========================================================================
   Aufklappbare Projekte
   ===========================================================================
   <details> und <summary>, nicht nachgebaut: Das funktioniert ohne
   JavaScript, ist mit der Tastatur bedienbar und meldet Vorlesegeraeten von
   sich aus, ob der Abschnitt offen ist. Die Animation ist Zugabe -- bleibt sie
   aus, klappt es trotzdem auf.
--------------------------------------------------------------------------- */

details.proj { padding: 0; }
details.proj > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
}
details.proj > summary::-webkit-details-marker { display: none; }
details.proj > summary:focus-visible { outline: 2px solid var(--tone); outline-offset: -2px; }
details.proj > summary h3 { margin: 0 0 .2rem; }
details.proj > summary .ico { margin: 0; }
.proj-head { flex: 1; min-width: 0; }
.proj-sub { color: var(--fg-muted); font-size: .9rem; margin: 0; }

/* Der Pfeil dreht sich beim Aufklappen. */
.proj-chevron {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: .35rem;
  color: var(--fg-faint);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
details.proj > summary:hover .proj-chevron { color: var(--tone); }
details.proj[open] > summary .proj-chevron { transform: rotate(90deg); }

.proj-body { padding: 0 1.75rem 1.5rem; }
.proj-body > :first-child { margin-top: 0; }
.proj-body > :last-child { margin-bottom: 0; }

details.proj[open] .proj-body { animation: unfold .3s cubic-bezier(.22,.61,.36,1); }
@keyframes unfold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proj-chevron { transition: none; }
  details.proj[open] .proj-body { animation: none; }
}

/* ===========================================================================
   Bewegung beim Zeigen -- an den uebrigen Stellen
   ========================================================================= */

/* Navigationspunkte bekommen einen Strich, der von links einlaeuft. */
.nav a:not(.brand) { position: relative; }
.nav a:not(.brand)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--accent); border-radius: 1px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.nav a:not(.brand):hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { text-decoration: none; }

/* Die Wortmarke in der Kopfzeile kippt beim Zeigen leicht. */
.nav .brand .mark { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.nav .brand:hover .mark { transform: rotate(-6deg) scale(1.08); }

/* Hauptschaltflaeche: ein Lichtstreifen laeuft einmal durch. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 35%, transparent); }

.btn-secondary:hover { border-color: var(--accent); }

/* Kopierfeld hebt sich beim Zeigen ab. */
.copy { transition: border-color .25s ease, background-color .25s ease; }
.copy:hover { border-color: var(--line-strong); }

/* Schritte: die Nummer faerbt sich, wenn man den Schritt beruehrt. */
.steps li:hover::before {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--bg-sunken));
}
.steps li::before { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }

/* Fusszeile. */
.footer a { position: relative; transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .nav a:not(.brand)::after, .nav .brand .mark,
  .btn-primary::before, .copy, .steps li::before { transition: none; }
}

/* ===========================================================================
   Bildergalerie
   ===========================================================================
   Bilder liegen in zwei Groessen vor und werden ueber srcset ausgewaehlt: ein
   Telefon laedt nicht die Fassung fuer grosse Bildschirme. width/height stehen
   im Markup, damit beim Laden nichts springt.
--------------------------------------------------------------------------- */

.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }
.galerie figure { margin: 0; }
.galerie img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-sunken);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.galerie figure:hover img { transform: scale(1.015); box-shadow: var(--shadow-md); }
.galerie figcaption { color: var(--fg-muted); font-size: .8125rem; margin-top: .55rem; }
.galerie .hoch img { aspect-ratio: 3 / 4; }
@media (prefers-reduced-motion: reduce) { .galerie figure:hover img { transform: none; } }

/* ===========================================================================
   Videoband
   ===========================================================================
   Das Video liegt hinter dem Inhalt, nicht daneben. Darueber ein dunkler
   Verlauf: ohne ihn haengt die Lesbarkeit der Schrift davon ab, welches
   Einzelbild gerade laeuft -- und das ist keine Grundlage.

   Ohne Skript und bei reduzierter Bewegung bleibt das Standbild stehen. Der
   Verlauf ist derselbe, der Text also in beiden Faellen gleich gut lesbar.
--------------------------------------------------------------------------- */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(20rem, 42vh, 28rem);
  background: #0b0d10;                 /* Grund, falls das Video spaeter laedt */
}
.band-schmal { min-height: clamp(12rem, 24vh, 17rem); }

.band > video,
.band > img.standbild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Hochformat vom Telefon in einem breiten Band: der obere Bildbereich ist
     der interessante, deshalb nicht mittig beschneiden. */
  object-position: 50% 42%;
}

.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4,6,9,.62) 0%, rgba(4,6,9,.46) 45%, rgba(4,6,9,.74) 100%);
}

.band .page { padding-block: 3rem; }
.band, .band h2, .band h3, .band p, .band dt, .band dd, .band strong { color: #fff; }
.band .eyebrow { color: #7fc4ff; }
.band .muted, .band .small { color: rgba(255,255,255,.76); }
.band a { color: #9fd2ff; }

/* Kennzahlen im Band */
.kennzahlen { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 1.75rem; }
.kennzahlen div { min-width: 7rem; }
.kennzahlen dt { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
                 color: rgba(255,255,255,.7); margin: 0 0 .2rem; }
.kennzahlen dd { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600;
                 letter-spacing: -.02em; }
.kennzahlen .klein dd { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }

@media (max-width: 640px) { .kennzahlen { gap: 1.5rem 2rem; } }

/* ===========================================================================
   Erzeugungsdaten
   ===========================================================================
   Gespeist aus /daten/erzeugung.json, die der Server in festem Takt schreibt.
   Fehlt die Datei oder ist sie leer, bleibt der ganze Abschnitt verborgen --
   eine Anzeige ohne Daten waere eine Behauptung.

   Balken sind einfache Elemente, kein Diagramm-Werkzeug: die Zusage in der
   Datenschutzerklaerung, nichts von fremden Servern zu laden, gilt auch hier.
--------------------------------------------------------------------------- */

/* Vorrang vor allem anderen: ein Abschnitt mit [hidden] bleibt verborgen,
   auch wenn eine Einblende-Regel ihn sonst anfassen wuerde. */
.erzeugung[hidden], .js .erzeugung[hidden] { display: none !important; }

.werte { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.wert { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem;
        background: var(--bg-elevated); }
.wert dt { color: var(--fg-muted); font-size: .8125rem; letter-spacing: .03em;
           text-transform: uppercase; margin: 0 0 .35rem; }
.wert dd { margin: 0; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 600;
           letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wert .einheit { font-size: .75em; font-weight: 500; color: var(--fg-muted); margin-left: .25em; }

.jahr { margin-top: 2rem; }
.balken {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: clamp(.25rem, 1.2vw, .6rem);
  height: clamp(8rem, 22vh, 13rem);
  padding-top: .5rem;
  border-bottom: 1px solid var(--line);
}
.balken > div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.balken .saeule {
  background: linear-gradient(180deg, color-mix(in oklab, #e8a33d 88%, transparent), #e8a33d);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  /* Die Hoehe setzt das Skript; die Bewegung macht aus dem Sprung ein Wachsen. */
  transition: height .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark) {
  .balken .saeule { background: linear-gradient(180deg, color-mix(in oklab, #f3bc63 88%, transparent), #f3bc63); }
}
@media (prefers-reduced-motion: reduce) { .balken .saeule { transition: none; } }

.balken-beschriftung {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: clamp(.25rem, 1.2vw, .6rem);
  margin-top: .5rem;
  font-size: .7rem; color: var(--fg-faint); text-align: center;
}
.balken-beschriftung span { overflow: hidden; }

.stand { color: var(--fg-faint); font-size: .8125rem; margin-top: 1.25rem; }

/* ===========================================================================
   Umrechnung in Anschauliches
   ===========================================================================
   Kilowattstunden sagen den meisten Menschen nichts. Ladungen und Kilometer
   schon. Die Annahmen stehen sichtbar daneben -- eine Vergleichszahl ohne ihre
   Annahme ist eine Behauptung.
--------------------------------------------------------------------------- */

.vergleiche {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 2rem;
}

/* --- Laufband aus Kacheln -------------------------------------------------
   Zehn Vergleiche nebeneinander sind eine Wand, und Seiten, die umspringen,
   zwingen zum Mitlesen im fremden Takt. Also laufen sie durch: langsam, in
   einer Richtung, ohne Bedienung. Die Kacheln stehen zweimal hintereinander,
   damit die Schleife ohne Sprung zurueckkommt; die zweite Reihe ist fuer
   Vorleseprogramme ausgeblendet, weil sie nichts Neues sagt.

   Weg und Dauer setzt das Skript in --lauf und --dauer, weil beide von der
   Kachelbreite abhaengen und die sich mit dem Fenster aendert. */
.karussell { position: relative; margin-top: 2rem; }
.fenster { overflow: hidden; }
.vergleiche.spur {
  display: flex; grid-template-columns: none; margin-top: 0;
  animation: kachellauf var(--dauer, 90s) linear infinite;
  will-change: transform;
}
.spur > .vergleich { flex: 0 0 calc((100% - 2.5rem) / 3); }
@media (max-width: 62rem) { .spur > .vergleich { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 40rem) { .spur > .vergleich { flex-basis: 100%; } }
@keyframes kachellauf { to { transform: translateX(calc(-1 * var(--lauf, 0px))); } }
/* Bewusst KEIN Anhalten beim Darueberfahren: eine Reihe, die stehenbleibt,
   sobald der Zeiger sie streift, wirkt kaputt, und wer eine Kachel lesen will,
   klickt sie an -- dafuer gibt es die Lupe. */

@media (prefers-reduced-motion: reduce) {
  /* Keine Bewegung: dann stehen die Kacheln als Raster da, wie ueberall sonst
     auf der Seite -- die zweite Reihe wird vom Skript gar nicht erst gebaut. */
  .vergleiche.spur { animation: none; flex-wrap: wrap; }
  .spur > .vergleich { flex-basis: calc((100% - 2.5rem) / 3); }
}

.vergleich {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elevated); box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.5rem 0;
}
.vergleich dt { color: var(--fg-muted); font-size: .8125rem; letter-spacing: .03em;
                text-transform: uppercase; margin: 0 0 .35rem; }
.vergleich dd { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 600;
                letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.vergleich .zusatz { font-size: .8125rem; font-weight: 500; color: var(--fg-muted);
                     margin-top: .3rem; }
.vergleich .annahme { font-size: .75rem; color: var(--fg-faint); margin: .6rem 0 0; }

/* Die Fahrbahn: die Figur faehrt darauf von links nach rechts. */
.bahn {
  position: relative; height: 3.25rem; margin: 1rem -1.5rem 0;
  border-top: 1px dashed var(--line);
}
.bahn .figur {
  position: absolute; bottom: .35rem; left: 0;
  width: 3.5rem; height: auto; color: var(--tone, var(--accent));
  animation: fahren 9s linear infinite;
  will-change: transform;
}
.bahn .figur.langsam { animation-duration: 13s; }

/* Von links ausserhalb bis rechts ausserhalb. cqw ist die Breite der Karte --
   deshalb traegt .vergleich container-type. */
@keyframes fahren {
  from { transform: translateX(-4rem); }
  to   { transform: translateX(100cqw); }
}
.vergleich { container-type: inline-size; }

/* SECURITY/KORREKTHEIT: In SVG bezieht sich transform-origin ohne
   transform-box: fill-box nicht auf das Element, sondern auf die Zeichenflaeche.
   Ohne diese Zeile drehen sich die Raeder um einen Punkt weit ausserhalb und
   schleudern durchs Bild statt sich zu drehen. */
.rad {
  transform-box: fill-box;
  transform-origin: center;
  animation: rollen 1.1s linear infinite;
}
.rad.langsam { animation-duration: 1.6s; }
@keyframes rollen { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Aeltere Browser ohne cqw bekommen wenigstens eine stehende Figur statt einer,
   die an der falschen Stelle klebt. */
@supports not (width: 1cqw) {
  .bahn .figur { animation: none; left: 50%; transform: translateX(-50%); }
}

/* Der Akku fuellt sich, statt zu fahren. */
.akku { position: relative; height: 3.25rem; margin: 1rem -1.5rem 0;
        border-top: 1px dashed var(--line); display: grid; place-items: center; }
.akku svg { width: 3.5rem; color: var(--tone, var(--accent)); }
.akku .fuellung {
  transform-box: fill-box;          /* siehe Kommentar bei .rad */
  transform-origin: left center;
  animation: laden 3.2s ease-in-out infinite;
}
@keyframes laden {
  0%, 8%   { transform: scaleX(0); opacity: .85; }
  70%, 88% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bahn .figur { animation: none; left: 50%; transform: translateX(-50%); }
  .rad { animation: none; }
  .akku .fuellung { animation: none; transform: scaleX(1); }
}

/* Umschalter fuer den Zeitraum der Umrechnung. */
.umschalter {
  display: inline-flex; gap: .25rem; margin-top: 1.75rem;
  padding: .25rem; border-radius: 980px;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.umschalter button {
  font: inherit; font-size: .875rem; font-weight: 500;
  padding: .45rem 1rem; border-radius: 980px;
  border: 1px solid transparent; background: transparent; color: var(--fg-muted);
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.umschalter button:hover { color: var(--fg); }
.umschalter button[aria-pressed="true"] {
  background: var(--bg-elevated); color: var(--fg);
  border-color: var(--line); box-shadow: var(--shadow-sm);
}
.umschalter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) { .umschalter { width: 100%; justify-content: space-between; } }

/* ===========================================================================
   24-Stunden-Verlauf
   ===========================================================================
   Eine Linie aus SVG, von Hand gezeichnet. Kein Diagramm-Werkzeug: die
   Datenschutzerklaerung sagt zu, dass nichts von fremden Servern geladen wird,
   und eine Linie mit 288 Punkten braucht keine Bibliothek.
--------------------------------------------------------------------------- */

.wert.klickbar { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.wert.klickbar:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.wert.klickbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wert .hinweis-klick {
  font-size: .7rem; color: var(--fg-faint); margin: .5rem 0 0;
  display: flex; align-items: center; gap: .3rem;
}
.wert[aria-expanded="true"] .hinweis-klick .pfeil { transform: rotate(90deg); }
.hinweis-klick .pfeil { transition: transform .25s ease; display: inline-block; }

.verlauf { margin-top: 2rem; }
.verlauf[hidden] { display: none !important; }
.verlauf svg { display: block; width: 100%; height: clamp(9rem, 26vh, 15rem); overflow: visible; }
.verlauf .flaeche { fill: color-mix(in oklab, var(--tone, var(--accent)) 16%, transparent); }
.verlauf .linie {
  fill: none; stroke: var(--tone, var(--accent)); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.verlauf .raster { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.verlauf .achse {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--fg-faint); margin-top: .4rem;
}
.verlauf .spitze { font-size: .8125rem; color: var(--fg-muted); margin-top: .75rem; }

/* Die Linie zeichnet sich einmal, wenn der Verlauf aufgeklappt wird. */
.verlauf .linie.zeichnen {
  stroke-dasharray: var(--laenge); stroke-dashoffset: var(--laenge);
  animation: ziehen 1.1s ease-out forwards;
}
@keyframes ziehen { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .verlauf .linie.zeichnen { animation: none; stroke-dashoffset: 0; }
  .hinweis-klick .pfeil { transition: none; }
}

/* --- Anlagenseite: der Momentanzustand ------------------------------------
   Aufbau nach Wichtigkeit statt nach Rasterplatz: eine grosse Zahl (die
   Leistung), darunter ihr Verlauf, dann die Aufteilung, dann der Speicher,
   zuletzt das Wetter. Vorher standen neun gleich grosse Kacheln nebeneinander
   und keine sagte, wo man anfangen soll. */

.jetzt-haupt {
  margin-top: 2rem;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.jetzt-haupt[hidden] { display: none !important; }
.jetzt-haupt .marke {
  margin: 0; color: var(--fg-muted); font-size: .8125rem;
  letter-spacing: .03em; text-transform: uppercase;
}
.jetzt-haupt .gross {
  margin: .2rem 0 0; font-weight: 600; line-height: 1;
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  font-variant-numeric: tabular-nums;
}
.jetzt-haupt .gross .einheit {
  font-size: .32em; font-weight: 500; color: var(--fg-muted); margin-left: .3em;
}
.jetzt-haupt .verlauf { margin-top: 1.2rem; }

.drossel {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 1rem 0 0; padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, #e8a33d 12%, transparent);
  border: 1px solid color-mix(in oklab, #e8a33d 32%, transparent);
  font-size: .875rem; line-height: 1.5; color: var(--fg);
  max-width: 44rem;
}
.drossel[hidden] { display: none !important; }
.warnpunkt {
  width: .6rem; height: .6rem; border-radius: 999px; background: #e8a33d;
  flex: none; margin-top: .45rem;
  animation: pulsen 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .warnpunkt { animation: none; } }

.gruppe { margin-top: 2.2rem; }
.gruppe[hidden] { display: none !important; }
.gruppe-titel {
  margin: 0 0 .9rem; font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted);
}
/* Das Wetter gehoert dazu, aber nicht auf dieselbe Stufe wie die Leistung. */
.gedaempft .wert { background: transparent; box-shadow: none; }
.gedaempft .wert dd { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }

.soc { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.soc-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--fg-muted); font-size: .8125rem; letter-spacing: .03em;
}
.soc-zahl { color: var(--fg); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.soc-zahl .einheit { font-size: .6em; font-weight: 500; color: var(--fg-muted); margin-left: .2em; }
.soc-balken {
  margin-top: .7rem; height: .7rem; border-radius: 999px;
  background: var(--bg-sunken); overflow: hidden;
}
.soc-fuellung {
  height: 100%; border-radius: inherit; width: 0;
  background: linear-gradient(90deg, #0f9d8f, #2dd4bf);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}

/* Anteile der Quellen. Ein Balken statt vier Zahlen: der Vergleich ist die
   Aussage, und den liest ein Balken schneller als eine Liste. */
.mix-balken {
  display: flex; height: 1.1rem; border-radius: 999px; overflow: hidden;
  background: var(--bg-sunken);
}
.mix-teil { width: 0; transition: width .9s cubic-bezier(.22,.61,.36,1); }
.mix-liste {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .5rem .5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  font-size: .875rem;
}
.mix-liste li { display: flex; align-items: center; gap: .5rem; color: var(--fg-muted); }
.mix-liste li[hidden] { display: none !important; }
.mix-liste b { margin-left: auto; color: var(--fg); font-variant-numeric: tabular-nums; }
.punkt { width: .65rem; height: .65rem; border-radius: 999px; background: var(--quelle); flex: none; }

/* Die Kennung faerbt nur das Token; gefaerbt wird, was faerben soll --
   der Balkenabschnitt und der Punkt davor, nicht der Listeneintrag. */
[data-quelle="pv"]       { --quelle: #e8a33d; }
[data-quelle="bhkw"]     { --quelle: #c2569b; }
[data-quelle="speicher"] { --quelle: #0f9d8f; }
[data-quelle="netz"]     { --quelle: #6e6e73; }
.mix-teil { background: var(--quelle); }

@media (prefers-color-scheme: dark) {
  [data-quelle="pv"]       { --quelle: #f3bc63; }
  [data-quelle="bhkw"]     { --quelle: #e07ab8; }
  [data-quelle="speicher"] { --quelle: #2dd4bf; }
  [data-quelle="netz"]     { --quelle: #98989d; }
}
@media (prefers-reduced-motion: reduce) {
  .soc-fuellung, .mix-teil { transition: none; }
}

/* --- Laufband und Einstieg in die Livedaten -------------------------------
   Das Band oben zeigt den Zustand der Anlage, bevor jemand irgendwo geklickt
   hat: eine Seite ueber eine laufende Anlage soll nicht still dastehen. */

/* Zwei Werte in der Ecke des Bandes auf der Startseite. Ohne Kasten: das
   Video traegt sie, ein Schatten macht sie lesbar. Die Zahlen rollen, statt zu
   springen -- eine Zahl, die springt, liest man als Fehler; eine, die laeuft,
   liest man als Messung. */
.ecke {
  position: absolute; z-index: 1;
  right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.ecke[hidden] { display: none !important; }
.ecke { transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1); }
.ecke.wechsel { opacity: 0; transform: translateY(.5rem); }
.ecke .zeile { display: flex; align-items: baseline; gap: .45rem; }
.ecke .marke {
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.ecke b { font-size: clamp(1.8rem, 4.8vw, 2.9rem); font-weight: 600; line-height: 1.05; }
.ecke .marke { font-size: .8125rem; }
.ecke .einheit { font-size: .9375rem; color: rgba(255, 255, 255, .8); }

.knopf-paar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* Auf der Startseite fuehrt der Knopf weiter, ist also ein Verweis --
   gleiche Gestalt, damit er dasselbe verspricht. */
a.knopf-live { text-decoration: none; }

.knopf-zeile { margin-top: 1.7rem; }
.knopf-zeile[hidden] { display: none !important; }
.knopf-live {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 0; border-radius: 999px;
  padding: .8rem 1.5rem;
  font: inherit; font-weight: 500; font-size: .9375rem;
  /* Dunkel statt weiss: der Knopf steht auf einem Video, und eine weisse
     Flaeche schneidet ein Loch hinein. Dunkel mit feiner Kante legt sich
     darueber, statt es zu verdecken. */
  color: #fff; background: rgba(10, 12, 16, .68);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.knopf-live:hover {
  transform: translateY(-1px);
  background: rgba(10, 12, 16, .82);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
}
.knopf-live:active { transform: translateY(0); }
.knopf-live:focus-visible { outline: 2px solid #9fd2ff; outline-offset: 3px; }
/* Der Punkt pulst, solange zugeklappt ist -- er sagt "hier laeuft etwas",
   ohne dass eine Zeile Text es behaupten muss. */
.puls { width: .55rem; height: .55rem; border-radius: 999px; background: #3ddc84; flex: none; }
.knopf-live[aria-expanded="false"] .puls { animation: pulsen 2s ease-in-out infinite; }
@keyframes pulsen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 138, 78, .55); }
  70%      { box-shadow: 0 0 0 .5rem rgba(29, 138, 78, 0); }
}

/* Beim Aufklappen faehrt der Abschnitt einmal auf, statt zu erscheinen. */
.jetzt.aufgeklappt { animation: aufklappen .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes aufklappen {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ecke { transition: none; }
  .ecke.wechsel { opacity: 1; transform: none; }
  .knopf-live[aria-expanded="false"] .puls, .ecke .puls { animation: none; }
  .jetzt.aufgeklappt { animation: none; }
  .knopf-live { transition: none; }
}

/* Steht die Anlage, tritt an die Stelle der Zahl ein Satz. Er braucht weniger
   Groesse als eine Kennzahl -- er ist eine Auskunft, keine Messung. */
.ecke b.wortlaut { font-size: clamp(1.1rem, 2.8vw, 1.45rem); font-weight: 500; }
.ecke .einheit[hidden] { display: none !important; }
.jetzt-haupt.ruht .gross { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 500; }
.jetzt-haupt.ruht .gross .einheit { display: none; }
.ecke .marke:empty { display: none; }

/* --- Vergleichskacheln: mittig, anklickbar ------------------------------- */
.vergleich { text-align: center; cursor: pointer; }
.vergleich dd, .vergleich .zusatz, .vergleich .annahme { text-align: center; }
.vergleich:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.vergleich:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vergleich { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.vergleich:hover { transform: translateY(-2px); }
.akku svg, .bahn .figur { margin-inline: auto; }
/* Der Luftstrom des Foehns zieht nach aussen. */
.luft { animation: blasen 1.4s ease-in-out infinite; }
@keyframes blasen {
  0%, 100% { opacity: .35; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(-2px); }
}

/* --- Die Lupe: eine Kachel gross ----------------------------------------- */
.lupe {
  width: min(32rem, calc(100% - 2rem));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-elevated); color: var(--fg);
  padding: 2.25rem 2rem 2rem; text-align: center;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(1rem) scale(.97);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}
.lupe[open] { opacity: 1; transform: none; }
.lupe::backdrop { background: rgba(4, 6, 9, .5); backdrop-filter: blur(6px); }
.lupe-zu {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--fg-muted);
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.lupe-zu:hover { background: var(--bg-sunken); color: var(--fg); }
.lupe-zu svg { width: 1.1rem; height: 1.1rem; }
.lupe-bild { display: grid; place-items: center; margin-bottom: 1.2rem; }
.lupe-bild svg { width: 7.5rem; height: auto; color: var(--tone, var(--accent)); }
.lupe h3 { margin: 0; font-size: 1.1rem; letter-spacing: .01em; }
.lupe-wert {
  margin: .4rem 0 1.1rem; font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.lupe-text { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--fg-muted); }
.lupe-annahme { margin: 1rem 0 0; font-size: .8125rem; color: var(--fg-faint); }

@media (prefers-reduced-motion: reduce) {
  .lupe { transition: none; opacity: 1; transform: none; }
  .vergleich { transition: none; }
  .vergleich:hover { transform: none; }
  .luft { animation: none; }
}

/* Das Zaehlwerk auf der Startseite. Zwei Zahlen ueber den Betrieb, gross genug,
   dass man sie im Vorbeiscrollen sieht -- eine Behauptung ("wir sammeln Daten")
   wird dadurch zu einer Auskunft, die sich vor den Augen des Lesers aendert. */
.zaehlwerk {
  margin: 1.5rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.zaehlwerk[hidden] { display: none !important; }
.zaehlwerk-kopf {
  display: flex; align-items: center; gap: .55rem;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: .9rem;
}
.zaehlwerk-kopf .puls { background: #1d8a4e; animation: pulsen 2s ease-in-out infinite; }
.zaehlwerk-zahlen {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 0;
}
.zaehlwerk-zahlen > div { margin: 0; }
.zaehlwerk-zahlen dd {
  margin: 0; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 600;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--fg);
}
.zaehlwerk-zahlen dt {
  margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--fg);
}
.zaehlwerk-zahlen p { margin: .15rem 0 0; font-size: .75rem; color: var(--fg-faint); }
.zaehlwerk-zahlen p b { color: var(--fg-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .zaehlwerk-kopf .puls { animation: none; } }