/* =====================================================================
   Website: Kopfzeile, Hero, Leistungen, Ablauf, Partner, Anfrage, Fuss
   ===================================================================== */

/* ------------------------------ Kopfzeile ----------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
    background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: var(--shadow-1);
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: min(100% - 2 * var(--s-5), var(--content));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  /* Nicht flex: none. Sonst weigert sich die Marke zu schrumpfen und
     schiebt bei schmalen Fenstern die ganze Seite auseinander - unter
     640 px war das der Grund fuer den waagerechten Rollbalken. */
  flex: 0 1 auto;
}

.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-size: .98rem; font-weight: 700; letter-spacing: -.02em; }
.brand-text small { font-size: .74rem; color: var(--text-muted); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 1 auto; }

.theme-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.theme-toggle:hover { color: var(--primary); border-color: var(--primary); }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
}

.cart-link { position: relative; }

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
}

.cart-count[data-count="0"] { display: none; }

/* =====================================================================
   Das schwebende Menü und das Kontomenü

   Die Kopfzeile trägt nur noch, was man ständig braucht: Marke,
   Tag/Nacht, Shop, Konto. Alles andere ist zwei Bewegungen entfernt und
   nicht mehr im Weg.

   Vorgeschichte: Vorher standen alle Navigationseinträge nebeneinander
   in der Leiste. Gemessen brauchte die Kopfzeile der Startseite rund
   1200 Pixel; umgeschaltet wurde bei 1000. Dazwischen lief sie über und
   die ganze Seite bekam einen waagerechten Rollbalken. Für einen
   angemeldeten Kunden mit einem Eintrag mehr brach sie schon bei
   1280 px in zwei Zeilen um. Eine feste Zahl konnte das nicht lösen,
   weil die nötige Breite davon abhängt, wer zusieht.

   Jetzt hängt gar nichts mehr davon ab: Die Kopfzeile trägt vier feste
   Dinge, die auf jeder Breite passen. Die Navigation liegt im
   schwebenden Menü links, die persönlichen Wege im Kontomenü rechts.
   ===================================================================== */

/* Nichts in der Kopfzeile darf breiter sein wollen, als Platz ist.
   Ohne min-width: 0 weigert sich ein Flex-Kind, unter seine
   Inhaltsbreite zu schrumpfen - und schiebt die Seite auseinander. */
.header-inner,
.brand,
.brand-text,
.header-actions { min-width: 0; }

.header-actions { margin-left: auto; }

.brand-text strong,
.brand-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-toggle,
.brand img,
.kopf-shop { flex: none; }

/* Der Weg in den Shop, ständig sichtbar. */
.kopf-shop {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 42px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.kopf-shop:hover,
.kopf-shop.is-current { border-color: var(--primary); background: var(--surface-alt); }
.kopf-shop svg { width: 18px; height: 18px; flex: none; }

/* Der Warenkorb steht nur da, wenn etwas darin liegt. „Nur das
   Nötige" heisst sonst: ein leerer Korb, den man nie braucht. */
.cart-link[data-leer="ja"] { display: none; }

/* =====================  Das schwebende Menü  ========================= */
/* Knopf und Liste hängen aneinander und fahren gemeinsam heraus: Der
   Knopf wandert mit, so wie eine Schublade ihren Griff mitnimmt. Das
   ist nicht nur hübsch - es zeigt beim Ausfahren, dass die Liste am
   Knopf hängt, und beim Einfahren, wohin sie verschwindet.          */
.flug {
  --flug-breite: min(280px, 78vw);
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 90;
  display: flex;
  align-items: center;
  transform: translate(calc(-1 * var(--flug-breite)), -50%);
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
}

/* Aufgefahren wird beim Überfahren, beim Tastaturfokus und nach einem
   Antippen (.ist-offen setzt assets/js/site.js). Der Fokus zählt mit,
   sonst wäre die Liste mit der Tastatur nicht erreichbar - sie stünde
   ausserhalb des Bildes und der Fokus liefe ins Nichts.

   Das Überfahren gilt nur dort, wo es ein Überfahren gibt. Auf einem
   Telefon bleibt der :hover-Zustand nach dem Antippen am Element
   kleben, bis man woandershin tippt - und damit hatte das X am
   11.09.2026 keine Wirkung: Das Skript nahm .ist-offen weg, und
   :hover hielt die Liste weiter offen. Dasselbe konnte :focus-within,
   denn ein angetippter Knopf hat den Fokus; deshalb gibt das Skript
   ihn beim Schliessen ab.                                          */
@media (hover: hover) and (pointer: fine) {
  .flug:hover { transform: translate(0, -50%); }
}
.flug:focus-within,
.flug.ist-offen { transform: translate(0, -50%); }

.flug-knopf {
  flex: none;
  width: 46px;
  height: 68px;
  display: grid;
  /* place-content statt place-items: Sonst dehnen sich die drei Zeilen
     ueber die ganze Hoehe des Knopfes, die Striche stehen 20 Pixel
     auseinander - und beim Drehen entsteht kein Kreuz, sondern zwei
     Schraegstriche, die sich nie treffen.                          */
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: var(--shadow-2);
  transition: background var(--dur) var(--ease);
}

.flug-knopf:hover { background: var(--surface); }

.flug-knopf span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

/* Zum Kreuz, sobald die Liste draussen ist - der Knopf schliesst dann. */
@media (hover: hover) and (pointer: fine) {
  .flug:hover .flug-knopf span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .flug:hover .flug-knopf span:nth-child(2) { opacity: 0; }
  .flug:hover .flug-knopf span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
.flug:focus-within .flug-knopf span:nth-child(1),
.flug.ist-offen .flug-knopf span:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.flug:focus-within .flug-knopf span:nth-child(2),
.flug.ist-offen .flug-knopf span:nth-child(2) { opacity: 0; }

.flug:focus-within .flug-knopf span:nth-child(3),
.flug.ist-offen .flug-knopf span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------
   Rechts statt links

   Der Betreiber haelt das Telefon mal so, mal so: "Schön wäre auch,
   wenn ich das Menü links und rechts frei verschieben könnte nach
   Bedarf." Die Seite merkt sich, wo es zuletzt stand.

   Gespiegelt wird alles, was eine Seite hat: die Verankerung, die
   Richtung, in die es sich zurueckzieht, die Reihenfolge von Knopf und
   Liste und die abgerundeten Ecken. Ein Knopf mit der Rundung der
   falschen Seite sieht nicht wie ein Griff aus, sondern wie ein
   Fehler.                                                          */
.flug.ist-rechts {
  left: auto;
  right: 0;
  flex-direction: row-reverse;
  transform: translate(var(--flug-breite), -50%);
}
@media (hover: hover) and (pointer: fine) {
  .flug.ist-rechts:hover { transform: translate(0, -50%); }
}
.flug.ist-rechts:focus-within,
.flug.ist-rechts.ist-offen { transform: translate(0, -50%); }

.flug.ist-rechts .flug-knopf {
  border-left: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

/* Waehrend des Ziehens folgt das Menue dem Finger - da darf nichts
   nachfedern, sonst haengt es hinterher. */
.flug.wird-gezogen { transition: none; }

/* Der Griff zum Verschieben steht im Menue selbst und nicht als
   unsichtbare Geste: Eine Bedienung, die man nicht sieht, gibt es fuer
   die meisten nicht. */
.flug-seite {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-1);
  background: none;
  font: inherit;
  font-size: .82rem;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}
.flug-seite:hover { color: var(--text); border-style: solid; }

.main-nav {
  width: var(--flug-breite);
  max-height: min(78dvh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.main-nav a {
  padding: var(--s-3) var(--s-3);
  border-radius: var(--r-md);
  font-size: .95rem;
  font-weight: 550;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.main-nav a:hover,
.main-nav a.is-current {
  background: var(--surface-alt);
  color: var(--text);
}

.main-nav a.is-current { box-shadow: inset 2px 0 0 var(--primary); }

/* Ein Aufruf am Fuss der Liste - der Knopf „Anfrage stellen" stand
   vorher in der Kopfzeile und kostete dort 133 Pixel. */
.main-nav .btn { margin-top: var(--s-3); }

/* ------------------------- Der Baum im Menü --------------------------
   Der Betreiber am 09.09.2026: "links im hamburger menü steht jetzt
   nur start shop konto, das sollte dann beim überfahren weiter auf
   klappen. Fahre ich über dem shop, muss erkannt werden wie bin ich
   angemeldet, dann muss erweitert werden was ich kann."

   Der Inhalt kommt aus assets/js/hauptmenue.js und haengt davon ab,
   wer angemeldet ist. Hier steht nur, wie er aussieht.

   Aufgeklappt wird beim Ueberfahren UND beim Klick auf den Pfeil.
   Nur das eine oder nur das andere waere jeweils die Haelfte: Mit der
   Maus will man nicht klicken, mit dem Finger kann man nicht
   ueberfahren.                                                      */
.main-nav.ist-baum { gap: 1px; }

.ast > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-2);
  border-radius: var(--r-md);
  cursor: pointer;
  list-style: none;
}
.ast > summary::-webkit-details-marker { display: none; }
.ast > summary:hover { background: var(--surface-alt); }

.ast-kopf {
  flex: 1;
  padding: var(--s-3);
  font-size: .95rem;
  font-weight: 550;
  color: var(--text-muted);
  text-decoration: none;
}
.ast > summary:hover .ast-kopf { color: var(--text); }
.ast-kopf.is-current { color: var(--text); }

.ast-pfeil {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}
.ast[open] > summary .ast-pfeil { transform: rotate(180deg); }

/* Beim Ueberfahren des ganzen Astes aufklappen - ohne den Zustand zu
   aendern. details[open] bleibt dem Klick vorbehalten, sonst klappte
   ein Ast beim Verlassen wieder zu, den man gerade festgestellt hat. */
.ast-kinder {
  display: grid;
  gap: 1px;
  padding-left: var(--s-3);
  margin-left: var(--s-3);
  border-left: 1px solid var(--line-soft);
}

.ast-blatt {
  padding: var(--s-3);
  border-radius: var(--r-md);
  font-size: .95rem;
  font-weight: 550;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ast-blatt.ist-kind { padding-block: var(--s-2); font-size: .88rem; font-weight: 500; }
.ast-blatt:hover { background: var(--surface-alt); color: var(--text); }
.ast-blatt.is-current {
  background: var(--surface-alt);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--primary);
}

/* =========================  Das Kontomenü  ==========================
   Die Tafel haengt unter dem Knopf, mit einem sichtbaren Abstand
   dazwischen. Dieser Abstand war bis zum 09.09.2026 eine echte
   Luecke - acht Pixel, in denen weder Knopf noch Tafel lagen. Wer mit
   der Maus vom Namen nach unten ins Menue fuhr, verliess dabei
   .konto-menue, :hover endete, und die Tafel verschwand mitten in der
   Bewegung.

   Dagegen stand eine Bruecke: ein ::before an der Tafel, das die
   Luecke von oben ueberdeckte. Sie hat nie gegriffen, und das war
   nachmessbar - elementsFromPoint lieferte in der Luecke
   .site-header und nichts vom Menue. Der Grund: Die Kopfzeile ist
   position:sticky mit z-index 80 und bildet damit einen eigenen
   Stapelkontext; die Tafel darin traegt z-index 70 und liegt fuer den
   Treffertest darunter.

   Jetzt gibt es die Luecke gar nicht mehr. Die Huelle reicht mit
   einem Innenabstand bis an die Tafel heran, und ein gleich grosser
   negativer Aussenabstand nimmt ihr denselben Platz wieder weg - in
   der Kopfzeile sitzt also alles wie zuvor, nur ist der Weg nach
   unten durchgehend Teil des Menues.

   Eine Luecke, die man ueberbruecken muss, ist schlechter als keine
   Luecke.                                                          */
.konto-menue {
  position: relative;
  flex: none;
  padding-bottom: var(--s-2);
  margin-bottom: calc(-1 * var(--s-2));
}

.konto-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 210px;
  height: 42px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.konto-knopf:hover { border-color: var(--primary); background: var(--surface-alt); }
.konto-knopf > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-pfeil { flex: none; width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }

.konto-menue:hover .konto-pfeil,
.konto-menue:focus-within .konto-pfeil,
.konto-menue.ist-offen .konto-pfeil { transform: rotate(180deg); }

.konto-panel {
  position: absolute;
  /* Unmittelbar an der Huelle - der Abstand steckt in deren
     Innenabstand, siehe oben.                                    */
  top: 100%;
  right: 0;
  z-index: 70;
  width: min(300px, calc(100vw - 2 * var(--s-4)));
  max-height: min(70dvh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  /* Nicht display:none, sondern unsichtbar und ohne Anfassbarkeit:
     Nur so lässt sich der Übergang überhaupt zeigen. */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}

.konto-menue:hover .konto-panel,
.konto-menue:focus-within .konto-panel,
.konto-menue.ist-offen .konto-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Die Bruecke ist entfallen. Sie hat den Zeiger nie aufgefangen: Die
   Kopfzeile liegt im Stapel darueber (sticky, z-index 80), und der
   Treffertest fand dort .site-header statt der Tafel. Statt eine
   Luecke zu ueberbruecken, gibt es jetzt keine mehr - siehe
   .konto-menue.                                                    */

.konto-kopf {
  margin: 0;
  padding: var(--s-2) var(--s-3) var(--s-3);
  font-size: .78rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line-soft);
}

.konto-kopf b { display: block; font-size: .92rem; color: var(--text); font-weight: 650; }

.konto-gruppe {
  margin: var(--s-3) 0 2px;
  padding-inline: var(--s-3);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.konto-weg {
  display: grid;
  gap: 1px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

/* Aufklappbare Gruppe im Kontomenue. summary traegt dieselbe
   Beschriftung wie vorher der Absatz - deshalb .konto-gruppe auch
   hier, und nur der Zeiger und das Dreieck kommen dazu.          */
.konto-falt > summary.konto-gruppe {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  list-style: none;
  padding-block: var(--s-2);
  border-radius: var(--r-sm);
}
.konto-falt > summary::-webkit-details-marker { display: none; }
.konto-falt > summary::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.konto-falt[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.konto-falt > summary:hover { background: var(--surface-alt); }

.konto-weg small { font-size: .76rem; color: var(--text-muted); line-height: 1.35; }
.konto-weg:hover { background: var(--surface-alt); }
.konto-weg.ist-hier { background: var(--surface-alt); box-shadow: inset 2px 0 0 var(--primary); }
/* Beim Betreiber ist die Tafel laenger als ihr Platz und scrollt.
   Abmelden darf dabei nicht unten herausrutschen - es ist der eine
   Weg, den man im Zweifel sucht.                                   */
.konto-weg.ist-abmelden {
  position: sticky;
  bottom: calc(-1 * var(--s-3));
  margin-top: var(--s-2);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.konto-weg.ist-abmelden:hover { color: var(--danger); }

/* Auf schmalen Geräten fährt das Kontomenü von der Seite ein statt
   nach unten: Ein 300 Pixel breites Tafelchen unter einem Knopf am
   rechten Rand passt dort nicht, es stünde halb ausserhalb.        */
@media (max-width: 560px) {
  .konto-panel {
    position: fixed;
    inset: var(--header-h) 0 auto auto;
    width: min(320px, 88vw);
    max-height: calc(100dvh - var(--header-h));
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    /* Ohne waagerechten Versatz: Ein fest positioniertes Element, das
       rechts aus dem Bild ragt, erzeugt einen waagerechten Rollbalken -
       auch wenn es unsichtbar ist. Genau das ist passiert, und zwar nur
       bei angemeldeten Konten und nur unter 560 px, also an der Stelle,
       an der man am wenigsten hinsieht. Das seitliche Einfahren steht
       weiter unten, abgesichert durch overflow-x: clip.            */
    transform: translateY(-8px);
  }
  /* Auf schmalen Schirmen faehrt die Tafel fest von rechts ein und
     haengt nicht mehr unter dem Knopf. Der Innenabstand der Huelle
     waere dort nur eine unsichtbare Flaeche, die Klicks abfaengt. */
  .konto-menue { padding-bottom: 0; margin-bottom: 0; }
  .brand-text small { display: none; }
  .konto-knopf > span { display: none; }
  .konto-knopf { padding-inline: var(--s-2); }
}

@media (max-width: 420px) {
  .brand-text { display: none; }
  .header-inner { gap: var(--s-3); }
  .kopf-shop span { display: none; }
  .kopf-shop { padding-inline: var(--s-3); }
}

/* Das seitliche Einfahren auf schmalen Geräten.

   overflow-x: clip schneidet ab, ohne einen Scrollbereich zu erzeugen.
   overflow-x: hidden täte das auch, machte aber die Wurzel zum
   Scrollbereich - und dann klebt die Kopfzeile nicht mehr. Wo clip
   fehlt (Safari vor 16), bleibt es beim Einblenden von oben: eine
   Bewegung weniger ist besser als ein Rollbalken, der nirgends
   hinführt.                                                        */
@supports (overflow-x: clip) {
  html { overflow-x: clip; }

  @media (max-width: 560px) {
    .konto-panel { transform: translateX(100%); }
    .konto-menue:hover .konto-panel,
    .konto-menue:focus-within .konto-panel,
    .konto-menue.ist-offen .konto-panel { transform: none; }
  }
}

/* Wer weniger Bewegung eingestellt hat, bekommt sie nicht. Das Menü
   ist danach nicht schlechter - nur schneller da.                  */
@media (prefers-reduced-motion: reduce) {
  .flug,
  .flug-knopf span,
  .konto-panel,
  .konto-pfeil { transition-duration: .01ms; }
}

/* --------------------------- Fortschrittsbalken ----------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
}

.scroll-progress i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-teal-bright));
  transition: width .1s linear;
}

/* --------------------------------- Hero ------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(var(--s-7), 5vw, var(--s-9)) clamp(var(--s-8), 6vw, var(--s-10));
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 620px;
  background:
    radial-gradient(46% 52% at 18% 28%, color-mix(in srgb, var(--brand-teal) 22%, transparent), transparent 70%),
    radial-gradient(40% 46% at 82% 10%, color-mix(in srgb, var(--brand-teal-bright) 18%, transparent), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}

.hero-grid {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-copy { display: grid; gap: var(--s-5); align-content: start; }

.hero h1 { max-width: 15ch; }

.hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-teal), var(--brand-teal-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-size: .88rem;
  color: var(--text-muted);
}

.hero-trust span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-trust svg { width: 17px; height: 17px; color: var(--primary); flex: none; }

/* Frueher war .hero-media selbst der Bildrahmen und die Verweise lagen
   als Schleier darauf. Im Banner steht aber der Firmenname mit dem
   Spruchband - die Verweise verdeckten ihn. Jetzt ist .hero-media nur
   die Spalte: Bild oben, Verweise darunter.                        */
.hero-media {
  position: relative;
}

.hero-media-frame {
  display: block;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--line-soft);
  /* Das Banner ist 21:9. Frueher stand hier 21/13 - bei object-fit:
     cover haette das die Seiten beschnitten, also Zaehlerschrank
     links und Wallbox rechts. Das Verhaeltnis folgt dem Bild.   */
  aspect-ratio: 21 / 9;
  background: var(--surface-alt);
}

.hero-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Unter dem Bild, mittig. Auf dem Bild lagen sie vorher auf dem
   Spruchband; oben deckten sie ein Drittel des flachen Banners zu.  */
.hero-media-badge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* Kein Schleier mehr - unter dem Bild waere er sinnlos. Stattdessen
   dieselbe Anmutung wie die uebrigen ruhigen Schaltflaechen.        */
.hero-media-badge a {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hero-media-badge a:hover { background: var(--surface-alt); border-color: var(--text-muted); }

/* ------------------------------ Kennzahlen ---------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
}

.stat {
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: var(--s-1);
}

.stat b {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.stat span { font-size: .9rem; color: var(--text-muted); }

/* ------------------------------ Leistungen ---------------------------- */
.service-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.service-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease);
}

.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.service-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-alt);
}

.service-media video,
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.service-card:hover .service-media video,
.service-card:hover .service-media img { transform: scale(1.045); }

.service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-ink) 55%, transparent), transparent 55%);
  pointer-events: none;
}

.service-body { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.service-body p { color: var(--text-muted); font-size: .94rem; line-height: 1.6; }

.service-more {
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: .88rem;
  font-weight: 640;
  color: var(--primary);
}

.service-more svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.service-card:hover .service-more svg { transform: translateX(4px); }

/* -------------------------------- Ablauf ------------------------------ */
.steps {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: step;
}

.step {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--primary);
}

.step h3 { font-size: 1.05rem; }
.step p { font-size: .92rem; color: var(--text-muted); line-height: 1.6; }

/* -------------------------------- Partner ----------------------------- */
.partner-band {
  padding-block: clamp(var(--s-7), 5vw, var(--s-8));
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
}

.marquee {
  position: relative;
  margin-top: var(--s-6);
  /* Das Laufband ist absichtlich breiter als der Bildschirm - es laeuft
     ja durch. Die Maske blendet die Raender weich aus, sie SCHNEIDET
     aber nichts ab: Der Kasten der Kacheln reichte weiter nach rechts
     als das Fenster. Solange die Kacheln unsichtbare Rechtecke waren,
     fiel das niemandem auf; seit sie eine weisse Platte mit Rahmen
     haben, ragt sichtbar etwas hinaus. Deshalb hier ein echter
     Schnitt und nicht nur eine Maske.                              */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  width: max-content;
  animation: marquee 52s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* Jedes Logo auf einer weissen Platte.

   Das ist keine Geschmacksfrage, sondern das, was die Hersteller
   verlangen. Daikin schreibt es woertlich vor - Logo immer auf weissem
   Grund, Mindestabstand ringsum so hoch wie die Bildmarke, keine
   Aenderungen an der Vorlage. Viessmann und Siemens fuehren dasselbe in
   ihren Markenrichtlinien.

   Die Platte loest zugleich das Problem, das die Originalfarbe erst
   aufwirft: Ein dunkles Logo auf dunklem Grund verschwindet. Mit der
   Platte ist der Untergrund in beiden Darstellungen derselbe, und
   niemand muss am Logo drehen.                                      */
.marquee-track a {
  flex: none;
  display: grid;
  place-items: center;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-soft);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.marquee-track a:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: var(--shadow-1);
}


/* Alle Logos gleich hoch - und dafuer muss die Breite frei bleiben.

   Vorher stand hier max-width: 150px. Zusammen mit object-fit: contain
   heisst das: Wer breiter waere, wird nicht abgeschnitten, sondern
   INNERHALB seines Kastens verkleinert. Die drei breitesten Schriftzuege
   kamen so nie auf ihre Hoehe - gemessen am 10.09.2026 auf der
   veroeffentlichten Seite:

       Stiebel Eltron   24 px   statt 38
       SolarEdge        30 px   statt 38
       KOSTAL           32 px   statt 38

   Ein Schriftzug ist nun einmal breit. Wer gleiche Hoehe will, muss
   ungleiche Breite zulassen. 280 Pixel reichen fuer den breitesten
   (Stiebel Eltron, Seitenverhaeltnis 6,2 : 1) und bleiben trotzdem eine
   Grenze fuer den Fall, dass jemand eine Datei mit riesigem Rand
   einstellt.

   Die zweite Ursache lag nicht im Stylesheet, sondern in zwei Dateien:
   hager.webp war 400x250 gross, das Logo darin nur 400x73 - 71 Prozent
   der Hoehe war leerer Rand, und der Schriftzug wurde entsprechend
   klein gemalt. Bei Aumann waren es 28 Prozent. Beide Dateien sind
   jetzt auf ihren Inhalt beschnitten. Ein Rand in der Datei laesst sich
   mit keiner CSS-Regel wegrechnen.                                  */
.marquee-track img {
  height: clamp(30px, 3.45vw, 44px);
  width: auto;
  max-width: 280px;
  object-fit: contain;
  /* KEIN Filter. Bis zum 10.09.2026 stand hier grayscale(1) mit
     opacity .55, im dunklen Modus zusaetzlich invert(1). Das ist
     huebsch und zugleich genau das, was Daikin, Viessmann und Siemens
     ihren Fachpartnern untersagen: Ein eingefaerbtes oder invertiertes
     Logo ist eine geaenderte Vorlage. Und ein invertiertes Logo zeigt
     nicht mehr die Marke, sondern ihr Negativ.                     */
}


/* -------------------------------- Zitate ------------------------------ */
.quote-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.quote {
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.quote-stars { display: flex; gap: 2px; color: var(--tertiary); }
.quote-stars svg { width: 16px; height: 16px; }
.quote p { font-size: .96rem; line-height: 1.65; }
.quote footer { display: flex; align-items: center; gap: var(--s-3); font-size: .88rem; color: var(--text-muted); }

/* ---------------------------- Google-Bewertungen ---------------------- */
/* Die Karten benutzen bewusst dieselbe .quote-Grundform wie der
   statische Abschnitt daneben - dadurch passt alles zusammen, ohne
   Farben und Abstaende ein zweites Mal zu pflegen.                    */
.rev-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}

.rev-zahl { font-size: 2rem; font-weight: 700; line-height: 1; }
.rev-anzahl { color: var(--text-muted); font-size: .92rem; }

.stars { display: inline-flex; gap: 1px; color: var(--text-muted); }
.stars .star { font-size: 1.05rem; line-height: 1; }
.stars .star.on { color: var(--tertiary, #e0a233); }

.rev-grid { align-items: start; }

.rev { gap: var(--s-3); }
.rev-kopf { display: flex; align-items: center; gap: var(--s-3); }

.rev-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--surface-alt);
}

.rev-avatar--leer {
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--text-muted);
}

.rev-name { font-size: .95rem; display: block; }
.rev-name a { color: inherit; text-decoration: none; }
.rev-name a:hover { text-decoration: underline; }

.rev-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: .84rem;
  color: var(--text-muted);
}

.rev-text {
  margin: 0;
  font-size: .96rem;
  line-height: 1.65;
  white-space: pre-line;
}

.rev-hinweis, .rev-quelle { font-size: .82rem; color: var(--text-muted); }
.rev-quelle { margin-top: var(--s-4); }

.rev-fuss {
  display: flex;
  gap: var(--s-4);
  font-size: .82rem;
}

.rev-fuss a { color: var(--text-muted); }
.rev-fuss a:hover { color: var(--text); }

@media (max-width: 620px) {
  .rev-note { gap: var(--s-2) var(--s-3); }
  .rev-zahl { font-size: 1.6rem; }
}

/* --------------------------------- FAQ -------------------------------- */
.faq { display: grid; gap: var(--s-2); max-width: 860px; }

.faq details {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.faq details[open] { border-color: color-mix(in srgb, var(--primary) 34%, transparent); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  font-weight: 620;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); line-height: 1.65; }

/* -------------------------------- Anfrage ----------------------------- */
.inquiry-grid {
  display: grid;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}

@media (max-width: 940px) { .inquiry-grid { grid-template-columns: 1fr; } }

.contact-cards { display: grid; gap: var(--s-3); }

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}

.contact-card:hover { border-color: var(--primary); transform: translateX(3px); }

.contact-card .ci {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.contact-card .ci svg { width: 20px; height: 20px; }
.contact-card b { display: block; font-size: .95rem; }
.contact-card span { font-size: .84rem; color: var(--text-muted); }

/* ------------------------ Schwebende Schnellaktionen ------------------ */
.floating {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 70;
  display: grid;
  gap: var(--s-2);
  justify-items: end;
}

/* Im Ruhezustand drei gleiche Kreise; die Beschriftung faehrt erst
   beim Ueberfahren aus. Das haelt die Ecke ruhig und verdeckt weniger
   von der Seite - auf schmalen Fenstern merklich.

   Die Beschriftung wird dabei nicht ausgeblendet, sondern nur
   zusammengeschoben. Sie bleibt im Dokument und wird von
   Vorleseprogrammen weiter angesagt; mit "display: none" waere sie
   fuer diese Leser verschwunden.                                      */
.fab {
  display: inline-flex;
  align-items: center;
  height: 50px;
  /* 1 (Rand) + 13 + 22 (Zeichen) + 13 + 1 = 50: solange nichts
     ausgefahren ist, ist der Knopf so hoch wie breit, also rund.
     Auch die farbigen haben den Rand, nur durchsichtig - sonst waeren
     sie zwei Pixel schmaler als der weisse.                           */
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 620;
  color: var(--text);
  white-space: nowrap;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.fab svg,
.fab img { width: 22px; height: 22px; flex: none; }
.fab.accent { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.fab.wa { background: #25d366; color: #06301a; border-color: transparent; }

.fab-label {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--dur) var(--ease),
    margin-left var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

/* Ausgefahren - einmal beschrieben, zweimal benutzt. */
.fab:focus-visible .fab-label {
  max-width: 9rem;
  margin-left: var(--s-3);
  opacity: 1;
}

/* Nur wo es einen Zeiger gibt. Auf dem Handy bleiben es Kreise: dort
   gibt es kein Ueberfahren, und der Platz ist knapper.                */
@media (hover: hover) {
  .fab:hover .fab-label {
    max-width: 9rem;
    margin-left: var(--s-3);
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .fab { height: 48px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fab, .fab-label { transition: none; }
}

/* ------------------------------- Fusszeile ---------------------------- */
.site-footer {
  margin-top: clamp(var(--s-8), 6vw, var(--s-9));
  padding-block: clamp(var(--s-7), 5vw, var(--s-8)) var(--s-5);
  background: var(--brand-ink);
  color: #b9cdd3;
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.site-footer h4 {
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f9aa2;
  margin-bottom: var(--s-3);
  font-weight: 650;
}

.site-footer a { color: #d5e4e8; text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--brand-teal-bright); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.site-footer .brand-block strong { color: #eaf3f5; font-size: 1.05rem; display: block; margin-bottom: var(--s-2); }
.site-footer .brand-block p { font-size: .92rem; line-height: 1.7; }

.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: #7f9aa2;
}

.version-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  font-family: var(--font-mono);
  font-size: .76rem;
}

/* ------------------------------ Cookie-Leiste ------------------------- */
.cookiebar {
  position: fixed;
  inset-inline: var(--s-4);
  bottom: var(--s-4);
  z-index: 200;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  display: grid;
  gap: var(--s-4);
  transform: translateY(140%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.cookiebar.is-open { transform: none; }
.cookiebar p { font-size: .88rem; line-height: 1.6; color: var(--text-muted); }
.cookiebar h3 { font-size: 1.02rem; }
.cookiebar .row { justify-content: flex-end; }

/* ------------------------------ Unterseiten --------------------------- */
.page-hero {
  padding-block: clamp(var(--s-7), 5vw, var(--s-8)) var(--s-6);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: .84rem;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span[aria-hidden] { opacity: .5; }

.prose { max-width: 74ch; display: grid; gap: var(--s-4); }
.prose h2 { margin-top: var(--s-5); }
.prose h3 { margin-top: var(--s-3); }
.prose ul, .prose ol { padding-left: var(--s-5); display: grid; gap: var(--s-2); color: var(--text-muted); }
.prose p { color: var(--text-muted); }
.prose strong { color: var(--text); }

/* --------------------- Wege für den Betreiber ------------------------ */
/* Verwaltung und Redaktion stehen in derselben Navigation wie alles
   andere, sollen aber erkennbar nicht zum öffentlichen Teil gehören.
   Deshalb ein Rahmen statt einer eigenen Farbe: sichtbar anders, ohne
   die Kopfzeile bunt zu machen.                                       */


/* ------------------ Fussstand nicht unter den Knoepfen ---------------- */
/* Wer bis ans Ende scrollt, hatte den Websitestand hinter dem
   WhatsApp-Knopf: Die Schnellaktionen haengen fest am unteren Rand,
   und der Stand sitzt am rechten Ende der letzten Fusszeile - also
   genau darunter.

   Freigehalten wird die Breite der Knopfsaeule, nicht ihre Hoehe. Die
   Knoepfe sind im Ruhezustand 50 Pixel breit; mit ihrem Abstand zum
   Rand ergibt das den Streifen, den die Fusszeile rechts aussparen
   muss. Eine Aussparung nach unten haette am Seitenende einen
   fingerhohen leeren Streifen hinterlassen, ohne mehr zu leisten. */
.footer-bottom { padding-right: calc(50px + 2 * var(--s-4)); }

/* Schmale Fenster brauchen das nicht: Dort bricht die Zeile um, der
   Stand rutscht an den linken Rand und steht ohnehin frei. Die
   Aussparung waere dann nur verschenkte Breite. */
@media (max-width: 620px) {
  .footer-bottom { padding-right: 0; }
}

/* Auf den Betreiberseiten steht die Zeile allein im Fuss — es gibt keine
   Spalten darüber, von denen sie abgesetzt werden müsste. Vorher stand
   dafür an fünf Stellen style="margin-top:0;border:0" im Quelltext. */
.footer-bottom.allein {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ====================================================================
   Das Logo als Ladeanzeige

   Solange etwas geladen, nachgeladen oder eine Anmeldung geprüft wird,
   steht das Logo in Schwarzweiß, und die Farbe läuft langsam darüber
   hinweg. Ist alles da, bleibt es bunt.

   Zwei Ebenen übereinander: das Bild selbst, grau gestellt, und
   darüber dasselbe Bild in Farbe — durch eine wandernde Maske
   sichtbar. Die Maske ist ein weicher Verlauf und keine Kante: Eine
   harte Kante sähe aus, als würde etwas abgeschnitten.

   Die Richtung wechselt bei jedem Lauf. Sie steht in einer Klasse, die
   das Skript setzt (assets/js/ladeanzeige.js).
   ==================================================================== */
.logo-lade {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.logo-lade img { display: block; }

/* Grau wird nur, solange geladen wird - und weich, damit das Umschalten
   am Ende nicht wie ein Bildfehler wirkt. */
.logo-lade img { transition: filter .45s var(--ease, ease); }
.logo-lade.laedt img { filter: grayscale(1) contrast(.92); }

.logo-lade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--logo-bild);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
}

.logo-lade.laedt::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(var(--logo-winkel, to top),
    transparent 0%, #000 35%, #000 65%, transparent 100%);
  mask-image: linear-gradient(var(--logo-winkel, to top),
    transparent 0%, #000 35%, #000 65%, transparent 100%);
  -webkit-mask-size: var(--logo-maskgroesse, 100% 300%);
  mask-size: var(--logo-maskgroesse, 100% 300%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: logoFarbe 1.9s linear infinite;
}

.logo-lade.lauf-hoch   { --logo-winkel: to top;   --logo-maskgroesse: 100% 300%; }
.logo-lade.lauf-runter { --logo-winkel: to bottom;--logo-maskgroesse: 100% 300%; }
.logo-lade.lauf-rechts { --logo-winkel: to right; --logo-maskgroesse: 300% 100%; }
.logo-lade.lauf-links  { --logo-winkel: to left;  --logo-maskgroesse: 300% 100%; }

.logo-lade.lauf-hoch.laedt::after,
.logo-lade.lauf-runter.laedt::after { animation-name: logoFarbeSenkrecht; }
.logo-lade.lauf-rechts.laedt::after,
.logo-lade.lauf-links.laedt::after { animation-name: logoFarbeWaagerecht; }

@keyframes logoFarbeSenkrecht {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to   { -webkit-mask-position: 0 -100%; mask-position: 0 -100%; }
}

@keyframes logoFarbeWaagerecht {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
}

/* Wer Bewegung abbestellt hat, bekommt sie nicht: Dann steht das Logo
   still in Schwarzweiß, und das sagt dasselbe. */
@media (prefers-reduced-motion: reduce) {
  /* Keine wandernde Farbe - die Farbebene bleibt ganz weg, sonst laege
     sie starr ueber dem grauen Bild und das Logo saehe unveraendert
     aus. Grau allein sagt dasselbe: hier passiert gerade etwas. */
  .logo-lade.laedt::after { animation: none; opacity: 0; }
  .logo-lade.laedt img { filter: grayscale(1); transition: none; }
}