:root{
    --blau:#1565C0; --blau-tief:#0D47A1; --blau-nacht:#0D47A1;
    --tuerkis:#0E9F7E; --himmel:#EAF3FE; --himmel-tief:#D8E9FC; --creme:#F2FAF7;
    --grund:#F8FAFC; --flaeche:#FFFFFF; --tinte:#0F172A; --grau:#475569;
    --rand:#E2E8F0; --gruen:#15803D; --gruen-hell:#DCFCE7;
    --bernstein:#B45309; --bernstein-hell:#FEF3C7; --cyan:#0E7490;
    --schrift-marke:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
    --schrift-text:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
    --spalte:1120px;
  }
  /* Diese Seite ist bewusst IMMER hell — sie soll auf jedem Gerät gleich
     freundlich wirken, auch wenn das Handy im Dunkelmodus läuft
     (Kunde 08.09.2026). Darum kein dunkles Thema und keine
     prefers-color-scheme-Umschaltung. */
  html{color-scheme:only light}

  *{box-sizing:border-box}
  body{margin:0;background:var(--grund);color:var(--tinte);
    font-family:var(--schrift-text);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased}
  .spalte{max-width:var(--spalte);margin:0 auto;padding:0 24px}
  h1,h2,h3,.marke{font-family:var(--schrift-marke);text-wrap:balance;
    letter-spacing:-0.02em;line-height:1.15}
  h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin:0 0 12px}
  h3{font-size:19px;font-weight:700;margin:0 0 6px;line-height:1.3}
  p{margin:0 0 14px;max-width:65ch}
  a{color:inherit}
  .augenbraue{font-family:var(--schrift-marke);font-size:12.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin:0 0 10px}

  /* ── Kopf ───────────────────────────────────────────────── */
  header{background:linear-gradient(168deg,var(--himmel) 0%,var(--creme) 62%,var(--grund) 100%);color:var(--tinte);position:relative;overflow:hidden;border-bottom:1px solid var(--rand)}
  header::after{content:"";position:absolute;inset:-20% -14% auto 52%;height:520px;
    background:radial-gradient(closest-side,rgba(14,159,126,.16),transparent 72%);pointer-events:none}
  .kopfleiste{display:flex;align-items:center;justify-content:space-between;
    gap:16px;padding:18px 0;position:relative;z-index:1}
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--schrift-marke);
    font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--blau-tief)}
  .logo-bild{width:112px;height:auto;object-fit:contain;display:block}
  .logo-gross{width:150px;height:auto;margin:0 auto 22px;display:block;object-fit:contain}
  .logo-zeichen{width:32px;height:32px;border-radius:9px;background:#fff;
    color:var(--blau-nacht);display:grid;place-items:center;font-size:15px;font-weight:800}
  .kopfleiste nav{display:flex;gap:22px;font-size:15px}
  .kopfleiste nav a{color:var(--grau);text-decoration:none;font-weight:600}
  .kopfleiste nav a:hover{color:var(--blau)}
nav a.nav-anmelden{color:#fff;background:var(--blau);padding:8px 16px;border-radius:9px;margin-left:6px}
nav a.nav-anmelden:hover{background:var(--blau-tief);color:#fff}
  /* ── Menue am Telefon (17.09.2026) ─────────────────────────
     Kunde 17.09.2026: Am Handy standen alle Punkte nebeneinander, die Zeile
     fuellte den halben Bildschirm und "Sicherheit/Impressum/Anmelden" fielen
     aus dem Blick. Ab 860 px bleibt die Leiste unveraendert, darunter klappt
     sie in ein Menue hinter einem Knopf.
     WARUM :target und kein Haken (checkbox + label)? Diese Seite wird mit
     script-src 'none' ausgeliefert, es gibt also kein JavaScript. Ein Haken
     bliebe beim Antippen eines Menuepunktes gesetzt, das Menue bliebe also
     ueber dem Ziel stehen; nur ein zweiter Griff zum Knopf wuerde es
     schliessen. Mit :target ist dagegen immer nur EIN Anker aktiv: "#menue"
     oeffnet, und jeder Menuepunkt (#preis, #app …) macht diesen Anker wieder
     frei — das Menue geht beim Antippen von selbst zu. Flaeche dahinter und
     Schliessen-Knopf zeigen auf "#kopf" und wirken genauso. */
  .burger,.menue-hinter,.menue-x{display:none}
  .menue{display:block}

  /* Zwischenbreiten 860–1080 px: die waagerechte Leiste darf umbrechen,
     statt aus dem Kopf zu laufen (header hat overflow:hidden) — seit
     17.09.2026 steht ein Punkt mehr darin. */
  @media (min-width:860px) and (max-width:1080px){
    .kopfleiste nav{flex-wrap:wrap;justify-content:flex-end;gap:10px 16px;font-size:14.5px}
  }

  @media (max-width:859.98px){
    /* z-index 60: .held (der Kopfbereich) hat selbst z-index:1 und steht
       spaeter im Dokument — ohne diese Zeile wuerde der Text des Kopfes
       ueber dem geoeffneten Menue liegen (gesehen 17.09.2026). */
    .kopfleiste{gap:12px;padding:14px 0;z-index:60}
    .burger{display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto;
      border:1px solid var(--himmel-tief);border-radius:11px;background:#fff;
      color:var(--blau-tief);text-decoration:none}
    .burger span{display:block;width:22px;height:2px;border-radius:2px;
      background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
    .burger:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
    .menue{display:none}
    /* Das geoeffnete Menue liegt als eigene Schicht fest ueber dem Bild
       (position:fixed, inset:0). So steht der Anker "#menue" beim Oeffnen
       schon vollstaendig im Sichtfeld und der Browser springt nicht erst
       ein Stueck nach unten (17.09.2026). */
    .menue:target{display:block;position:fixed;inset:0;z-index:60}
    .menue:target .menue-hinter{display:block;position:absolute;inset:0;z-index:40;
      background:rgba(15,23,42,.45)}
    .menue:target nav{position:absolute;top:0;left:0;right:0;z-index:41;display:block;
      background:var(--flaeche);border-bottom:1px solid var(--rand);
      box-shadow:0 18px 44px rgba(13,71,161,.22);padding:6px 20px 18px;
      max-height:92vh;overflow-y:auto;font-size:17px}
    .menue:target nav a{display:block;color:var(--tinte);font-size:17px;
      line-height:1.45;padding:14px 2px;border-bottom:1px solid var(--rand)}
    .menue:target nav a.menue-x{display:flex;align-items:center;justify-content:flex-end;
      gap:8px;min-height:48px;padding:8px 2px;color:var(--grau);
      font-family:var(--schrift-marke);font-size:13px;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase}
    .menue:target nav a.nav-anmelden{margin:18px 0 2px;padding:16px 18px;
      border-bottom:0;border-radius:10px;background:var(--blau);color:#fff;
      text-align:center;font-family:var(--schrift-marke);font-weight:700;font-size:17px}
  }

  .held{position:relative;z-index:1;padding:56px 0 68px;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
  @media (max-width:900px){.held{grid-template-columns:1fr;gap:34px;padding:40px 0 52px}}
  .held h1{font-size:clamp(34px,5.2vw,56px);font-weight:800;line-height:1.05;margin:0 0 18px}
  .held p{color:var(--grau);font-size:19px;max-width:52ch}
  .held .stich{display:inline-block;background:#fff;
    border:1px solid var(--himmel-tief);color:var(--blau-tief);border-radius:999px;
    padding:5px 13px;font-size:13px;font-weight:600;margin-bottom:20px;
    font-family:var(--schrift-marke)}
  .knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  @media (max-width:560px){
    .knopfreihe{flex-direction:column;align-items:stretch}
    .knopf{justify-content:center;padding:14px 20px}
  }
  .knopf{display:inline-flex;align-items:center;gap:8px;border-radius:10px;
    padding:12px 20px;font-family:var(--schrift-marke);font-weight:700;font-size:15px;
    text-decoration:none;border:1px solid transparent}
  .knopf-voll{background:var(--blau);color:#fff;box-shadow:0 8px 20px rgba(21,101,192,.26)}
  .knopf-leer{border-color:var(--himmel-tief);background:#fff;color:var(--blau-tief)}
  .knopf:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

  /* Bildschirm-Andeutung im Kopf */
  .fenster{background:var(--flaeche);border-radius:14px;overflow:hidden;
    box-shadow:0 18px 44px rgba(13,71,161,.14);border:1px solid var(--rand)}
  .fenster-kopf{background:var(--blau);color:#fff;padding:11px 14px;
    display:flex;align-items:center;gap:9px;font-family:var(--schrift-marke);
    font-weight:700;font-size:14px}
  .fenster-kopf span{margin-left:auto;font-weight:500;opacity:.85;font-size:12.5px}
  .zeile{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
    padding:11px 14px;border-bottom:1px solid var(--rand);font-size:14px;color:var(--tinte)}
  .zeile:last-child{border-bottom:0}
  .zeile b{font-weight:600}
  .zeile small{color:var(--grau);display:block;font-size:12.5px}
  .marke-chip{font-family:var(--schrift-marke);font-size:11.5px;font-weight:700;
    padding:3px 9px;border-radius:999px;white-space:nowrap}
  .chip-gruen{background:var(--gruen-hell);color:var(--gruen)}
  .chip-bernstein{background:var(--bernstein-hell);color:var(--bernstein)}
  .zahl{font-variant-numeric:tabular-nums;font-weight:700}

  /* ── Abschnitte ─────────────────────────────────────────── */
  section{padding:74px 0}
  section.hell{background:var(--flaeche);border-top:1px solid var(--rand);
    border-bottom:1px solid var(--rand)}
  .kopfblock{max-width:60ch;margin-bottom:38px}
  .kopfblock p{color:var(--grau);font-size:18px}

  /* Problem */
  .problem{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media (max-width:860px){.problem{grid-template-columns:1fr}}
  .problem div{border-left:3px solid var(--bernstein);padding:2px 0 2px 16px}
  .problem p{color:var(--grau);margin:0;font-size:16px}

  /* Preis */
  .unterzeile{margin-top:16px;font-size:14.5px;color:var(--grau);
    font-family:var(--schrift-marke);font-weight:600}
  .preis{background:var(--flaeche);border-bottom:1px solid var(--rand)}
  .preisfeld{display:grid;grid-template-columns:320px minmax(0,1fr);gap:34px;
    align-items:center;border:1px solid var(--rand);border-radius:18px;
    padding:28px;background:var(--grund)}
  @media (max-width:860px){.preisfeld{grid-template-columns:1fr;gap:24px}}
  .preisschild{text-align:center;padding:26px 20px;border-radius:14px;
    background:linear-gradient(160deg,var(--himmel),var(--creme));
    border:1px solid var(--himmel-tief)}
  .preiszahl{display:block;font-family:var(--schrift-marke);font-weight:800;
    font-size:52px;line-height:1;color:var(--blau-tief);letter-spacing:-.03em}
  .preistakt{display:block;font-family:var(--schrift-marke);font-weight:700;
    font-size:15px;color:var(--blau);margin-top:6px}
  .preisklein{display:block;font-size:13.5px;color:var(--grau);margin:8px 0 18px}
  .preisliste{margin:0;padding:0;list-style:none}
  .preisliste li{position:relative;padding-left:30px;margin-bottom:12px;
    font-size:16.5px;color:var(--tinte)}
  .preisliste li::before{content:"";position:absolute;left:2px;top:8px;
    width:15px;height:8px;border-left:2.5px solid var(--gruen);
    border-bottom:2.5px solid var(--gruen);transform:rotate(-45deg)}

  /* Schmerz -> Loesung */
  .schmerz{background:var(--flaeche);border-bottom:1px solid var(--rand)}
  .paare{display:flex;flex-direction:column;gap:14px}
  .paar{display:grid;grid-template-columns:1fr 44px 1fr;gap:0;align-items:stretch;
    border:1px solid var(--rand);border-radius:14px;overflow:hidden;background:var(--grund)}
  @media (max-width:800px){
    .paar{grid-template-columns:1fr}
    /* Fehler 08.09.2026: Der Pfeil war gedreht — rotate(90deg) kippt die
       GANZE Flaeche samt Hintergrund und legte einen Streifen quer ueber
       den Text. Schmal steht deshalb einfach ein Abwaertszeichen. */
    .pfeil{height:36px;width:100%}
  }
  .weh,.hilft{padding:18px 20px}
  .weh{border-right:1px solid var(--rand)}
  @media (max-width:800px){.weh{border-right:0;border-bottom:1px solid var(--rand)}}
  .hilft{background:var(--gruen-hell)}
  .paar p{margin:0;font-size:16px;max-width:46ch}
  .weh p{color:var(--grau)}
  .hilft p{color:var(--tinte)}
  .etikett{display:block;font-family:var(--schrift-marke);font-size:11.5px;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
  .weh .etikett{color:var(--bernstein)}
  .hilft .etikett{color:var(--gruen)}
  .pfeil{display:grid;place-items:center;color:var(--blau);font-size:20px;
    background:var(--grund);font-weight:700}
  .pfeil::before{content:"→"}
  @media (max-width:800px){.pfeil::before{content:"↓"}}

  /* Kette */
  .kette{display:grid;grid-template-columns:repeat(6,1fr);gap:0;
    counter-reset:glied;margin-top:8px}
  @media (max-width:980px){.kette{grid-template-columns:repeat(2,1fr);gap:22px 18px}}
  @media (max-width:560px){.kette{grid-template-columns:1fr}}
  .glied{position:relative;padding:0 16px 0 0}
  .glied::before{counter-increment:glied;content:counter(glied);
    display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
    background:var(--blau);color:#fff;font-family:var(--schrift-marke);
    font-weight:800;font-size:15px;margin-bottom:14px;position:relative;z-index:1}
  .glied::after{content:"";position:absolute;left:34px;top:17px;right:0;height:2px;
    background:linear-gradient(90deg,var(--blau),var(--rand))}
  .glied:last-child::after{display:none}
  @media (max-width:980px){.glied::after{display:none}.glied{padding-right:0}}
  .glied h3{font-size:16px;margin-bottom:4px}
  .glied p{font-size:14.5px;color:var(--grau);margin:0;max-width:26ch}
  .kette-fuss{margin-top:30px;padding:16px 18px;border-radius:12px;
    background:var(--gruen-hell);color:var(--gruen);font-weight:600;
    font-family:var(--schrift-marke);font-size:15.5px}

  /* Karten */
  .karten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media (max-width:980px){.karten{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.karten{grid-template-columns:1fr}}
  .karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;
    padding:22px}
  section.hell .karte{background:var(--grund)}
  .karte h3{color:var(--tinte)}
  .karte p{color:var(--grau);font-size:15.5px;margin:0}
  .karte .sym{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
    background:rgba(21,101,192,.1);color:var(--blau);margin-bottom:14px;font-size:19px}

  /* App-Block */
  .app{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:center}
  @media (max-width:900px){.app{grid-template-columns:1fr;gap:32px}}
  .app ul{margin:0;padding:0;list-style:none}
  .app li{position:relative;padding-left:28px;margin-bottom:11px;color:var(--grau);font-size:16.5px}
  .app li::before{content:"";position:absolute;left:0;top:9px;width:15px;height:8px;
    border-left:2.5px solid var(--gruen);border-bottom:2.5px solid var(--gruen);
    transform:rotate(-45deg)}
  .app li b{color:var(--tinte);font-weight:600}
  .telefon{background:#fff;border:1px solid var(--rand);border-radius:30px;padding:10px;
    box-shadow:0 18px 44px rgba(13,71,161,.14)}
  .telefon-innen{background:var(--flaeche);border-radius:22px;overflow:hidden}
  .telefon-kopf{background:var(--blau);color:#fff;padding:16px 15px 14px;
    font-family:var(--schrift-marke)}
  .telefon-kopf b{display:block;font-size:16px}
  .telefon-kopf small{opacity:.85;font-size:12.5px}
  .telefon-inhalt{padding:12px 13px 16px}
  .tkarte{border:1px solid var(--rand);border-radius:11px;padding:11px 12px;margin-bottom:9px}
  .tkarte b{font-size:14px;display:block;margin-bottom:2px}
  .tkarte small{color:var(--grau);font-size:12.5px}
  .tleiste{display:flex;justify-content:space-between;border-top:1px solid var(--rand);
    padding:9px 4px 2px;margin-top:4px;font-size:10.5px;color:var(--grau);
    font-family:var(--schrift-marke);font-weight:600}
  .tleiste span:first-child{color:var(--blau)}

  /* Sicherheit */
  /* 17.09.2026: drei statt vier Spalten — der Abschnitt hat jetzt sechs
     Kacheln (zweiter Faktor, Betrieb), die sich so sauber auf 3+3 verteilen. */
  .sicher{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media (max-width:900px){.sicher{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.sicher{grid-template-columns:1fr}}
  .sicher div{padding:18px;border:1px solid var(--rand);border-radius:12px;
    background:var(--flaeche)}
  .sicher h3{font-size:15.5px}
  .sicher p{font-size:14.5px;color:var(--grau);margin:0}

  /* Tabelle */
  .tabellenrahmen{overflow-x:auto;border:1px solid var(--rand);border-radius:12px;
    background:var(--flaeche)}
  table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
  th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rand)}
  th{font-family:var(--schrift-marke);font-weight:700;font-size:13px;
    text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
  tr:last-child td{border-bottom:0}
  td.wer{font-weight:600}

  /* Rechtliches */
  .recht{padding:64px 0;border-top:1px solid var(--rand)}
  .recht.hell{background:var(--flaeche)}
  .rechtsbox{max-width:74ch}
  .rechtsbox h3{font-size:16px;margin:26px 0 6px;color:var(--blau-tief)}
  .rechtsbox h3:first-child{margin-top:8px}
  .rechtsbox p{color:var(--grau);font-size:16px;margin:0 0 6px}
  .rechtsbox b{color:var(--tinte)}
  .rechtsbox a{color:var(--blau);text-decoration:none;font-weight:600}
  .rechtsbox a:hover{text-decoration:underline}
  .offen{background:var(--bernstein-hell);color:var(--bernstein);
    padding:1px 7px;border-radius:5px;font-weight:600;font-size:14.5px}
  .stand{margin-top:22px}
  .fusslinks{display:flex;gap:18px}
  .fusslinks a{color:var(--blau);text-decoration:none;font-weight:600}
  .fusslinks a:hover{text-decoration:underline}

  /* Abschluss */
  .schluss{background:linear-gradient(168deg,var(--creme),var(--himmel));color:var(--tinte);text-align:center;padding:76px 0;border-top:1px solid var(--rand)}
  .schluss h2{color:var(--blau-tief)}
  .schluss p{color:var(--grau);margin:0 auto 24px;max-width:52ch;font-size:18px}
  footer{padding:26px 0;font-size:14px;color:var(--grau);
    display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  /* 17.09.2026: Store-Abzeichen. Die OFFIZIELLEN Grafiken von Apple und Google,
   eingebettet — die Inhalts-Richtlinie der Seite laesst nur eigene Bilder und
   data:-Adressen zu; extern geladene blieben leer. Solange die Pruefung laeuft,
   sind sie gedaempft und NICHT verlinkt: ein Klick ins Leere faellt auf den
   Anbieter zurueck. Bei Freigabe: opacity/filter raus, in <a href> fassen. */
  .stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
  .stores img{height:46px;width:auto;opacity:.5;filter:grayscale(1)}
  .stores-hinweis{font-size:12.5px;color:var(--grau);margin-top:8px}

  /* ════════════════════════════════════════════════════════════
     17.09.2026 — Ergaenzungen fuer die neue Aufteilung.
     Alles darueber ist unveraendert aus der bisherigen einen Datei
     uebernommen, damit die Startseite genau so aussieht wie vorher.
     ════════════════════════════════════════════════════════════ */

  /* ── Rechtspunkte in der Navigation ─────────────────────────
     Impressum, Datenschutz und AGB sind seit heute eigene Seiten. In der
     Leiste am Rechner ist fuer drei weitere Punkte kein Platz — sie bricht
     schon zwischen 860 und 1080 px um. Dort stehen sie deshalb nur im
     Fussbereich; der steht auf jeder der vier Seiten, Impressum ist damit
     ueberall mit einem Klick erreichbar (§ 5 DDG). Am Handy erscheinen sie
     unten im Menue als abgesetzte, kleinere Gruppe. */
  .nav-recht{display:none}

  @media (max-width:859.98px){
    .menue:target nav .nav-recht{display:flex;flex-wrap:wrap;gap:0 20px;
      margin-top:-1px;padding-top:10px;border-top:1px solid var(--rand)}
    /* Die eigene Trennlinie liegt genau auf der Linie des letzten Punktes
       darueber (margin-top:-1px), sonst stuenden dort zwei Striche. */
    .menue:target nav .nav-recht a{border-bottom:0;padding:9px 2px;
      font-size:14.5px;font-weight:600;color:var(--grau)}
  }

  /* ── Abschnitt "Zugang" mit zwei Karten (17.09.2026) ────────
     Die dritte Karte ("Eigene Anlage je Traeger") ist auf Weisung raus, sie
     stand doppelt und bleibt unter Sicherheit. Im Dreier-Raster bliebe rechts
     eine Luecke, darum hier zwei Spalten; am Handy wie ueberall untereinander.
     Die #zugang-Regel ist staerker als .karten, deshalb braucht auch die
     schmale Breite ihre eigene Zeile. */
  #zugang .karten{grid-template-columns:repeat(2,1fr)}
  @media (max-width:640px){#zugang .karten{grid-template-columns:1fr}}

  /* ── Rechtsseiten (17.09.2026) ──────────────────────────────
     Eigene Seiten /impressum, /datenschutz und /agb. Sie tragen denselben
     Kopf und denselben Fuss wie die Startseite; hier nur der Rueckweg und
     ein ruhiger Rahmen fuer den Text. Der Wortlaut ist unveraendert. */
  .rechtsseite{padding:0 0 8px}
  .rueckweg{display:inline-flex;align-items:center;gap:8px;margin:30px 0 0;
    font-family:var(--schrift-marke);font-size:14.5px;font-weight:700;
    color:var(--blau);text-decoration:none}
  .rueckweg:hover{text-decoration:underline}
  .rueckweg:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
  .rechtsseite .recht{padding:22px 0 64px;border-top:0}

  /* ── "Nach oben" am Handy (17.09.2026) ──────────────────────
     Wunsch des Inhabers: Die Seiten sind lang, am Telefon ist der Weg zurueck
     zum Kopf — und damit zum Menue — sonst ein langes Wischen. JavaScript ist
     ausgeschlossen (script-src 'none'), darum ein schlichter Anker auf
     "#kopf", den der Kopf ohnehin traegt. Sichtbar nur unter 860 px, also
     genau dort, wo auch der Menue-Knopf erscheint; am Rechner ist der Weg
     kurz genug.
     UEBERDECKUNG DES MENUES — zwei Sicherungen:
       1. Der Pfeil liegt auf z-index 30 und damit unter dem geoeffneten
          Menue (.menue:target = 60) und unter der Kopfleiste (ebenfalls 60).
       2. Solange "#menue" offen ist, blendet ihn die :has()-Regel ganz aus.
     Faellt (2) in einem alten Browser aus, greift immer noch (1).
     Abstand unten mit env(safe-area-inset-bottom), damit er auf dem iPhone
     nicht unter der Browserleiste klebt. */
  .nachoben{display:none}
  @media (max-width:859.98px){
    .nachoben{display:grid;place-items:center;position:fixed;z-index:30;
      right:16px;bottom:calc(18px + env(safe-area-inset-bottom));
      width:48px;height:48px;border-radius:999px;
      background:rgba(21,101,192,.92);color:#fff;text-decoration:none;
      border:1px solid rgba(255,255,255,.6);
      box-shadow:0 10px 24px rgba(13,71,161,.28)}
    .nachoben:hover{background:var(--blau-tief)}
    .nachoben:focus-visible{outline:3px solid var(--blau-tief);outline-offset:3px}
    body:has(.menue:target) .nachoben{display:none}
  }