/* ============================================================================
   Solar-Dash — Website
   ----------------------------------------------------------------------------
   Die Farben sind NICHT frei erfunden: sie stammen aus der App selbst.
   PV orange, Speicher gruen, Netz rot, Haus blau — dieselben Werte, die der
   Kunde spaeter im Energiefluss sieht. Wer die Seite und danach die App
   oeffnet, soll dieselbe Sprache wiedererkennen.

   Die Seite ist bewusst nur dunkel. Das ist keine vergessene Hell-Variante:
   die App ist dunkel, das Logo lebt auf Schwarz, und die Messwerte leuchten
   nur auf dunklem Grund so, wie sie es im Produkt tun.
   ========================================================================= */

:root {
  /* --- Flaechen ---------------------------------------------------------- */
  --grund:        #080B11;
  --grund-tief:   #05070B;
  --flaeche:      #10151E;
  --flaeche-hoch: #161D28;
  --rand:         #222C3A;
  --rand-hell:    #2E3A4B;

  /* --- Text -------------------------------------------------------------- */
  --text:         #F2F5F9;
  --text-ruhig:   #A7B3C4;
  --text-leise:   #75839A;

  /* --- Energiefarben (semantisch, aus der App) --------------------------- */
  --pv:           #F59E0B;   /* Erzeugung  */
  --pv-hell:      #FBBF24;
  --speicher:     #34D399;   /* Batterie   */
  --netz:         #F87171;   /* Netz       */
  --haus:         #60A5FA;   /* Verbrauch  */
  --raster:       #22D3EE;   /* Logo-Grid  */

  /* --- Abstaende (4/8-Rhythmus) ------------------------------------------ */
  --s1: 0.5rem;  --s2: 1rem;    --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;    --s7: 6rem;    --s8: 8rem;

  --breite:       1140px;
  --breite-text:  56ch;
  --radius:       14px;
  --radius-gross: 22px;

  --schrift-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --schrift-text:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --schrift-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --zeit:  180ms;
  --kurve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   Grundlagen
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;   /* damit Ankerziele nicht unter der Kopfleiste landen */
}

body {
  margin: 0;
  overflow-x: clip;   /* Riegel gegen waagerechtes Scrollen */
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--pv); text-decoration: none; transition: color var(--zeit) var(--kurve); }
a:hover { color: var(--pv-hell); }

:focus-visible {
  outline: 2px solid var(--pv);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
p + p { margin-top: var(--s2); }

/* Der Browser gibt <figure> von sich aus 40px Seitenrand — das nahm den
   Telefonbildern 80px Breite. */
figure { margin: 0; }

/* Springt direkt zum Inhalt — nur sichtbar, wenn man mit Tab navigiert. */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--s2) var(--s3);
  background: var(--pv);
  color: #1A1206;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.sprung:focus { left: 0; }

/* Das Sprungziel darf keinen sichtbaren Rahmen bekommen, muss den Fokus
   aber annehmen koennen (tabindex="-1" im HTML). */
#inhalt:focus { outline: none; }

/* ============================================================================
   Bausteine
   ========================================================================= */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.band { padding-block: var(--s7); position: relative; }
.band--eng { padding-block: var(--s6); }
.band--rand { border-top: 1px solid var(--rand); }

.augenbraue {
  font-family: var(--schrift-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.augenbraue::before {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  flex: none;
}

.titel-gross { font-size: clamp(2rem, 5vw, 3.1rem); }
.titel-band  { font-size: clamp(1.65rem, 3.6vw, 2.4rem); margin-bottom: var(--s2); }
.titel-karte { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }

.vorspann {
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  color: var(--text-ruhig);
  max-width: var(--breite-text);
  line-height: 1.6;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: var(--s4);
}

/* --- Knopf ---------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--zeit) var(--kurve),
              background-color var(--zeit) var(--kurve),
              border-color var(--zeit) var(--kurve);
}
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }

.knopf--voll {
  background: var(--pv);
  color: #1A1206;
}
.knopf--voll:hover { background: var(--pv-hell); color: #1A1206; }

.knopf--rand {
  background: transparent;
  border-color: var(--rand-hell);
  color: var(--text);
}
.knopf--rand:hover { border-color: var(--pv); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .knopf:hover { transform: none; }
}

/* ============================================================================
   Kopfleiste
   ========================================================================= */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 11, 17, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--zeit) var(--kurve),
              background-color var(--zeit) var(--kurve);
}
.kopf[data-gescrollt='ja'] {
  border-bottom-color: var(--rand);
  background: rgba(8, 11, 17, 0.95);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 68px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.marke:hover { color: var(--text); }
.marke { white-space: nowrap; }
.marke__symbol {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex: none;
}

/* Rechte Haelfte der Kopfleiste: Die Wege koennen schieben, der Knopf
   nicht — er muss auch auf dem schmalsten Schirm stehen bleiben. */
.kopf__rechts {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.kopf__wege {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.kopf__rechts > .knopf { flex: none; }
.kopf__wege a:not(.knopf) {
  color: var(--text-ruhig);
  font-size: 0.95rem;
  font-weight: 500;
}
.kopf__wege a:not(.knopf):hover { color: var(--text); }

/* Frueher verschwand die gesamte Navigation unter 860px. Jetzt wird sie
   zu einer waagerecht schiebbaren Zeile — der Besucher behaelt alle Wege,
   und der Knopf bleibt rechts stehen. */
/* Wird es eng, schiebt die Wege-Zeile waagerecht — frueher verschwand die
   Navigation unter 860px ersatzlos. Der Knopf bleibt dabei immer stehen. */
@media (max-width: 980px) {
  .kopf__innen { gap: var(--s2); }
  .kopf__rechts { gap: var(--s2); }
  .kopf__wege {
    gap: var(--s2);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .kopf__wege::-webkit-scrollbar { display: none; }
  .kopf__wege a { font-size: 0.88rem; white-space: nowrap; }
  .kopf__rechts > .knopf { padding-inline: 1.15rem; }
}

/* Auf dem Handy weichen die Textwege ganz: vier Woerter in einer Schiebe-
   zeile findet niemand. Die Wege stehen dafuer vollstaendig im Fuss. */
@media (max-width: 620px) {
  .kopf__wege { display: none; }
}

/* ============================================================================
   Hero
   ----------------------------------------------------------------------------
   Das Motiv stammt aus dem Logo: eine Sonne ueber einem perspektivischen
   Raster. Hier liegt es als Hintergrund unter dem Text — dasselbe Bild,
   nur ruhiger.
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s6), 9vw, var(--s8)) var(--s7);
  border-bottom: 1px solid var(--rand);
}

.hero__grund {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Sonnenschein oben Mitte-links, wie im Logo */
.hero__schein {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 105vw);
  aspect-ratio: 1;
  /* Eng und hoch gesetzt. Ein breiter, schwacher Schein faerbt die ganze
     Flaeche braeunlich und sieht nach Schmutz aus statt nach Licht. */
  background: radial-gradient(circle,
    rgba(245, 158, 11, 0.26) 0%,
    rgba(245, 158, 11, 0.11) 24%,
    rgba(245, 158, 11, 0.035) 44%,
    transparent 66%);
}

/* Perspektivisches Raster, das nach unten laeuft */
.hero__raster {
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.13) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(340px) rotateX(56deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 46%, transparent 94%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 46%, transparent 94%);
  opacity: 0.75;
}

.hero__innen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(var(--s4), 5vw, var(--s7));
  align-items: center;
}

@media (max-width: 900px) {
  .hero__innen { grid-template-columns: 1fr; }
  .hero__bild { justify-self: center; }
}

.hero h1 {
  font-size: clamp(2.3rem, 6.2vw, 3.9rem);
  margin-bottom: var(--s3);
}
.hero h1 .betont {
  background: linear-gradient(100deg, var(--pv) 0%, var(--pv-hell) 55%, var(--speicher) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__text {
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  color: var(--text-ruhig);
  max-width: 34rem;
  margin-bottom: var(--s4);
}

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.hero__fussnote {
  font-size: 0.9rem;
  color: var(--text-leise);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Das Telefon im Hero */
.hero__bild {
  position: relative;
  width: min(300px, 78vw);
}
.hero__bild img {
  width: 100%;
  border-radius: 30px;
  border: 1px solid var(--rand-hell);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 34px 70px -18px rgba(0, 0, 0, 0.85),
    0 0 90px -30px rgba(245, 158, 11, 0.35);
}

/* ============================================================================
   Kennzahlenreihe
   ========================================================================= */

.zahlen {
  display: grid;
  /* Auf dem Handy zwei nebeneinander statt vier untereinander — vier
     einzelne Zeilen kosteten einen halben Bildschirm. */
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 45%), 1fr));
  gap: var(--s3);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  padding-block: var(--s4);
}
.zahlen__feld { text-align: center; }
.zahlen__wert {
  font-family: var(--schrift-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pv);
  line-height: 1.1;
}
.zahlen__feld:nth-child(2) .zahlen__wert { color: var(--speicher); }
.zahlen__feld:nth-child(3) .zahlen__wert { color: var(--haus); }
.zahlen__feld:nth-child(4) .zahlen__wert { color: var(--netz); }
.zahlen__wort {
  font-size: 0.86rem;
  color: var(--text-leise);
  margin-top: 0.35rem;
}

/* ============================================================================
   Die Kette: Wechselrichter -> Gateway -> Cloud -> App
   ----------------------------------------------------------------------------
   Vier Glieder. Auf schmalen Schirmen untereinander, der Pfeil dreht mit.
   ========================================================================= */

.kette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  margin-top: var(--s5);
}
@media (max-width: 900px) { .kette { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kette { grid-template-columns: 1fr; } }

.glied {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: var(--s3);
}

/* Verbindungspfeil zum naechsten Glied */
/* Der Strich in die Luecke zur naechsten Karte. Er wird ueber ein eigenes
   Element im Raster gezeichnet statt ueber den Rand hinaus — sonst zaehlt
   er zur Seitenbreite und erzeugt waagerechtes Scrollen. */
.glied:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--s2);
  height: 1px;
  background: linear-gradient(90deg, var(--rand-hell), var(--pv));
  pointer-events: none;
}
@media (max-width: 900px) {
  .glied:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
  .glied:not(:last-child)::after {
    top: 100%;
    left: 50%;
    width: 1px;
    height: var(--s2);
    background: linear-gradient(180deg, var(--rand-hell), var(--pv));
  }
  .glied:nth-child(2)::after { display: block; }
}

.glied__nr {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--pv);
  margin-bottom: var(--s1);
}
/* Diese vier sind echte <h3>. Ihre Groesse kommt von hier, nicht von der
   Ueberschriften-Grundregel — sonst wuerden sie im Text zu laut. */
.glied__titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem 0;
}

/* Die zweite Kartenreihe (Gateway) hat vier gleichrangige Karten ohne
   Nummern. Frueher stand hier ein Inline-Style, der die Media-Queries der
   Kette aushebelte — dadurch brach sie bei 900px in 3+1 statt 2+2. */
.kette--vier .glied__nr { display: none; }
.glied__text { font-size: 0.92rem; color: var(--text-ruhig); line-height: 1.55; }

/* ============================================================================
   Bildschirme der App
   ========================================================================= */

.schirme {
  display: grid;
  /* Hoechstens drei nebeneinander: bei fuenf Spalten wird ein Telefonbild so
     schmal, dass man auf den Bildschirmfotos nichts mehr erkennt. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--s5) var(--s4);
  margin-top: var(--s5);
  max-width: 1000px;
  margin-inline: auto;
}

.schirm {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.schirm img {
  width: 100%;
  max-width: 268px;
  margin-inline: auto;
  border-radius: 26px;
  border: 1px solid var(--rand);
  background: var(--grund-tief);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.9);
  transition: transform 300ms var(--kurve),
              border-color 300ms var(--kurve),
              box-shadow 300ms var(--kurve);
}
.schirm:hover img {
  border-color: var(--rand-hell);
  box-shadow: 0 26px 54px -20px rgba(0, 0, 0, 0.95),
              0 0 60px -28px rgba(245, 158, 11, 0.4);
}
.schirm:hover img { transform: translateY(-6px); border-color: var(--rand-hell); }
@media (prefers-reduced-motion: reduce) { .schirm:hover img { transform: none; } }

.schirm__titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: var(--s3) 0 0.35rem 0;
}
.schirm__text {
  font-size: 0.94rem;
  color: var(--text-ruhig);
  max-width: 32ch;
  margin-inline: auto;
  line-height: 1.55;
}

/* ============================================================================
   Kompatibilitaet
   ========================================================================= */

.marken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}

.marke-karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.marke-karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rand);
}
.marke-karte__name {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0;
}
.marke-karte__modelle {
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  color: var(--text-leise);
}

/* Text und Knopfreihe in den beiden Abschlusskarten */
.karte__text {
  color: var(--text-ruhig);
  font-size: 0.95rem;
  max-width: 54ch;
}
.karte__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: auto;      /* schiebt die Knoepfe an den unteren Kartenrand */
  padding-top: var(--s2);
}
.karte__knoepfe .knopf { font-size: 0.94rem; padding: 0.7rem 1.2rem; }

.bedingung {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-ruhig);
}
.bedingung__zeichen {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 0.15rem;
}
.bedingung--ja .bedingung__zeichen { color: var(--speicher); }
.bedingung--noetig .bedingung__zeichen { color: var(--pv); }

/* ============================================================================
   Preis
   ========================================================================= */

.preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
  align-items: stretch;
}

.preis {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
}
.preis--betont {
  border-color: rgba(245, 158, 11, 0.45);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.07), transparent 55%),
    var(--flaeche);
}

.preis__marke {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pv);
  margin-bottom: var(--s1);
}
.preis__name {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}
.preis__wert {
  /* Bewusst NICHT die Monospace: die gibt Komma und Euro-Zeichen dieselbe
     Breite wie einer Ziffer, und "149,99 €" faellt sichtbar auseinander.
     Die Monospace bleibt den Messwerten vorbehalten, wo Ziffern in Spalten
     untereinander stehen muessen. */
  font-family: var(--schrift-display);
  font-size: 2.15rem;
  font-weight: 800;
  margin-block: var(--s2) 0.2rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.preis__takt { font-size: 0.88rem; color: var(--text-leise); margin-bottom: var(--s3); }
/* Der Kopf jeder Preiskarte bekommt dieselbe Hoehe, damit die Listen
   darunter auf einer Linie beginnen. */
.preis__name { min-height: 2.6em; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: var(--text-ruhig);
}
.liste svg { flex: none; width: 18px; height: 18px; margin-top: 0.2rem; color: var(--speicher); }

/* ============================================================================
   Hinweiskasten — fuer die ehrlichen Saetze
   ========================================================================= */

.hinweis {
  display: flex;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--radius);
  border: 1px solid rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.07);
  font-size: 0.96rem;
  color: var(--text-ruhig);
  margin-top: var(--s4);
}
.hinweis svg { flex: none; width: 20px; height: 20px; color: var(--haus); margin-top: 0.15rem; }
/* Ohne Begrenzung lief der Text ueber die ganze Seitenbreite — gemessen
   145 Zeichen je Zeile. Lesbar sind rund 75. */
.hinweis > div { max-width: 76ch; }
.hinweis strong { color: var(--text); font-weight: 600; }

/* ============================================================================
   Fuss
   ========================================================================= */

.fuss {
  border-top: 1px solid var(--rand);
  background: var(--grund-tief);
  padding-block: var(--s5) var(--s4);
  font-size: 0.92rem;
}
/* Frueher stand hier minmax(0, 1.4fr) plus drei feste 140px-Spuren. Die
   erste Spalte durfte damit auf null schrumpfen: zwischen 440 und 740px
   blieben ihr 8 bis 60px, und der Markenname (white-space: nowrap) legte
   sich quer ueber die Spalte daneben. Jetzt bestimmt der Inhalt die
   Mindestbreite, und unter 780px stehen genau zwei Spalten. */
.fuss__gitter {
  display: grid;
  grid-template-columns: minmax(min(300px, 100%), 1.6fr) repeat(3, minmax(max-content, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s4);
}

@media (max-width: 860px) {
  .fuss__gitter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s3);
  }
  /* Der Markenblock nimmt beide Spalten — sonst quetscht er sich neben
     eine Linkliste. */
  .fuss__gitter > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .fuss__gitter { grid-template-columns: 1fr; }
}
.fuss__titel {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--s2);
}
.fuss__wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.fuss__wege a {
  color: var(--text-ruhig);
  display: inline-block;
  padding-block: 0.42rem;   /* auf Fingergroesse gebracht */
}
.fuss__wege a:hover { color: var(--pv); }
.fuss__unten {
  border-top: 1px solid var(--rand);
  padding-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s1) var(--s2);
  color: var(--text-leise);
  font-size: 0.86rem;
  /* Platz fuer den Nach-oben-Knopf, der unten rechts schwebt — sonst legt
     er sich auf den Hinweis zu den Beispielwerten. */
  padding-inline-end: 62px;
}

/* Schmal: die beiden Angaben untereinander statt gequetscht nebeneinander. */
@media (max-width: 680px) {
  .fuss__unten {
    flex-direction: column;
    padding-inline-end: 0;
    padding-bottom: 58px;
  }
}

/* ============================================================================
   Rechtstexte (Impressum, Datenschutz, Nutzungsbedingungen)
   ========================================================================= */

.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: var(--s5);
  margin-bottom: var(--s2);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rand);
}
.rechtstext h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: var(--s4);
  margin-bottom: var(--s1);
  color: var(--text);
}
.rechtstext p, .rechtstext li { color: var(--text-ruhig); }
.rechtstext ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin-block: var(--s2); }
.rechtstext .stand {
  font-family: var(--schrift-mono);
  font-size: 0.8rem;
  color: var(--text-leise);
}
.rechtstext dl { display: grid; gap: 0.4rem; margin-block: var(--s2); }
.rechtstext dt { color: var(--text); font-weight: 600; }
.rechtstext dd { margin: 0 0 var(--s2) 0; color: var(--text-ruhig); }
.rechtstext__weiter {
  border-top: 1px solid var(--rand);
  margin-top: var(--s5);
  padding-top: var(--s3);
}

/* ============================================================================
   Bewegung
   ----------------------------------------------------------------------------
   Grundregel: Ohne JavaScript ist alles sichtbar. Erst wenn das Skript
   laeuft, setzt es .js an das <html> — und nur dann starten Elemente
   unsichtbar. Sonst waere die Seite fuer Suchmaschinen und fuer jeden mit
   abgeschaltetem JavaScript leer.

   Zweite Regel: Wer im System "Bewegung reduzieren" gesetzt hat, bekommt
   die Seite ohne jede Animation — siehe der Block ganz unten.
   ========================================================================= */

/* --- Einfahren beim Erscheinen ------------------------------------------- */

.js .auf {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform;
}
.js .auf.da {
  opacity: 1;
  transform: none;
}
/* Nach dem Einfahren die Optimierung wieder abgeben — sonst haelt der
   Browser fuer jedes Element unnoetig eine eigene Ebene vor. */
.js .auf.fertig { will-change: auto; }

/* --- Der Sonnenschein atmet ---------------------------------------------- */

@keyframes atmen {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}
.hero__schein { animation: atmen 9s ease-in-out infinite; }

/* --- Das Raster fliesst nach unten --------------------------------------- */

@keyframes fliessen {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 62px, 0 0; }
}
.hero__raster { animation: fliessen 5.5s linear infinite; }

/* --- Energie wandert durch die Kette -------------------------------------
   Das Motiv aus der App: ein Lichtpunkt laeuft die Leitung entlang. Hier
   laeuft er durch die vier Glieder — vom Wechselrichter bis aufs Handy.
   Jedes Glied bekommt seinen Versatz, damit ein Punkt weiterzuwandern
   scheint statt vier gleichzeitig zu blinken.
   ------------------------------------------------------------------------ */

.glied::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  /* Der Lichtpunkt wandert ueber die HINTERGRUND-Position, nicht ueber
     transform. Mit transform verliesse das Element seine Box und schoebe
     die Seite waagerecht auf — auf einem 584px breiten Schirm waren das
     210px Ueberlauf. So bleibt der Balken immer in seiner eigenen Kante,
     und das Glied braucht kein overflow:hidden (das wiederum den
     Verbindungsstrich daneben abgeschnitten haette). */
  background-image: linear-gradient(90deg,
    transparent 0%,
    var(--pv) 42%,
    var(--pv-hell) 50%,
    var(--pv) 58%,
    transparent 100%);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  opacity: 0;
}
.js .kette.da .glied::before {
  animation: durchlauf 2.6s var(--kurve) infinite;
  animation-delay: var(--takt, 0s);
}
@keyframes durchlauf {
  0%        { background-position: -70% 0; opacity: 0; }
  12%       { opacity: 1; }
  38%       { opacity: 1; }
  50%, 100% { background-position: 170% 0; opacity: 0; }
}

.glied:nth-child(1) { --takt: 0s; }
.glied:nth-child(2) { --takt: 0.28s; }
.glied:nth-child(3) { --takt: 0.56s; }
.glied:nth-child(4) { --takt: 0.84s; }

/* Der Verbindungsstrich zwischen den Gliedern pulst mit */
@keyframes strich {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.js .kette.da .glied:not(:last-child)::after {
  animation: strich 2.6s var(--kurve) infinite;
  animation-delay: var(--takt, 0s);
}

/* --- Das Telefon im Hero schwebt ----------------------------------------- */

@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.js .hero__bild img { animation: schweben 7s ease-in-out infinite; }

/* --- Zahlen: der Wert wechselt weich ------------------------------------- */

.zahlen__wert { transition: color var(--zeit) var(--kurve); }

/* --- Bildschirme staffeln ------------------------------------------------ */

.js .schirme .schirm:nth-child(1) { --verzug: 0ms; }
.js .schirme .schirm:nth-child(2) { --verzug: 70ms; }
.js .schirme .schirm:nth-child(3) { --verzug: 140ms; }
.js .schirme .schirm:nth-child(4) { --verzug: 210ms; }
.js .schirme .schirm:nth-child(5) { --verzug: 280ms; }

.js .marken .marke-karte:nth-child(2) { --verzug: 90ms; }
.js .marken .marke-karte:nth-child(3) { --verzug: 180ms; }

.js .preise .preis:nth-child(2) { --verzug: 90ms; }
.js .preise .preis:nth-child(3) { --verzug: 180ms; }

/* --- Knoepfe: der Schein wandert einmal durch ----------------------------- */

.knopf--voll {
  position: relative;
  overflow: hidden;
}
.knopf--voll::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 720ms var(--kurve);
}
.knopf--voll:hover::after { transform: translateX(120%); }

/* ============================================================================
   Bewegung reduzieren — alles aus
   ----------------------------------------------------------------------------
   Dieser Block steht bewusst als LETZTER im Stylesheet: Was hier drin steht,
   muss jede Animation darueber ueberschreiben koennen.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .js .auf {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__schein,
  .hero__raster,
  .js .hero__bild img,
  .js .kette.da .glied::before,
  .js .kette.da .glied:not(:last-child)::after {
    animation: none !important;
  }
  .glied::before { display: none; }
  .knopf--voll::after { display: none; }
}


/* ============================================================================
   Druck
   ----------------------------------------------------------------------------
   Rechtstexte werden ausgedruckt und abgeheftet. Auf Papier ist die dunkle
   Fassung unbrauchbar: schwarze Flaeche, und der helle Text verschwindet.
   ========================================================================= */

@media print {
  :root {
    --grund: #FFFFFF; --grund-tief: #FFFFFF;
    --flaeche: #FFFFFF; --flaeche-hoch: #FFFFFF;
    --rand: #CBD5E1; --rand-hell: #94A3B8;
    --text: #000000; --text-ruhig: #1F2937; --text-leise: #4B5563;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kopf, .sprung, .hero__grund, .fuss__gitter { display: none; }
  .band { padding-block: 0.6cm; }
  .rechtstext { max-width: none; }
  .rechtstext h2 { break-after: avoid; }
  a { color: #000; text-decoration: underline; }
  /* Wohin ein Link fuehrt, sieht man auf Papier sonst nicht. */
  .rechtstext a[href^="http"]::after,
  .rechtstext a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .karte, .hinweis, .glied, .preis, .marke-karte { border: 1px solid #CBD5E1; }
  .auf { opacity: 1 !important; transform: none !important; }
}


/* ============================================================================
   Zurueck nach oben
   ----------------------------------------------------------------------------
   Auf dem Handy ist die Startseite rund 19 Bildschirme lang, und die
   Kopfleiste fuehrt dort keine Sprungmarken mehr mit. Ohne diesen Knopf
   muesste man den ganzen Weg zurueckwischen.
   ========================================================================= */

.hoch {
  position: fixed;
  right: var(--s3);
  bottom: var(--s3);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(22, 29, 40, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rand-hell);
  color: var(--text-ruhig);
  transition: color var(--zeit) var(--kurve),
              border-color var(--zeit) var(--kurve),
              transform var(--zeit) var(--kurve);
}
.hoch:hover {
  color: var(--pv);
  border-color: var(--pv);
  transform: translateY(-2px);
}
.hoch[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hoch:hover { transform: none; }
}