/* ============================================================
   Design "Nachtfunk"
   Dunkler Petrol-Kopf mit Funkwellen, warme Papierfläche,
   Serifen-Überschriften (Systemschrift, keine Webfonts),
   Amber als Router-LED-Akzent. Signatur: die Stärke-Anzeige
   als WLAN-Empfangsfächer.
   ============================================================ */
:root{
  --nacht:       #23386B;   /* Navy: Kopf & Fuß – seriös, ruhig */
  --nacht-tief:  #16253F;
  --papier:      #EEF2F7;   /* kühle, helle Grundfläche */
  --karte:       #FFFFFF;
  --tinte:       #16233B;
  --gedaempft:   #5A6B82;
  --linie:       #DCE3EC;
  --akzent:      #1F6FE5;   /* Royalblau – Interaktion */
  --akzent-tief: #1553B8;
  --akzent-hell: #E6EFFD;
  --led:         #32A1E2;   /* Azur: sparsame Highlights (Signalpunkte) */
  --gut:         #1B7F58;
  --warnung:     #A2670F;
  --schlecht:    #B3392B;
  --aus:         #C9D3E0;   /* inaktive Fächer-Bögen */
  --radius:      18px;
  --schatten:    0 24px 60px -28px rgba(22,35,59,.40), 0 4px 14px rgba(22,35,59,.08);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Überschriften: Raleway, mit System-Fallback falls die Datei fehlt */
  --anzeige: "SWP Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* Raleway-Ableitung – lokal als kompaktes WOFF2-Subset in der einzig verwendeten Stärke 700.
   Enthalten sind lateinische Zeichen, deutsche Umlaute und gebräuchliche
   Satzzeichen. Die Lizenz liegt unter font/OFL-Raleway.txt bei. */
@font-face{
  font-family:"SWP Display";
  src:url("../font/SWP-Display-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--tinte);
  background:var(--papier);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
main{ max-width:980px; margin:0 auto; padding:0 20px 40px; }

a{ color:var(--akzent-tief); }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--akzent); outline-offset:2px; border-radius:6px; }

.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- Dunkler Kopf mit Funkwellen ---------- */
header.seitenkopf{
  /* background-color separat: Sicherheitsnetz, falls eine ältere Engine
     den Verlaufs-Stapel verwirft – der Kopf bleibt dann trotzdem dunkel. */
  background-color:var(--nacht);
  background:
    radial-gradient(circle 780px at 50% 118%,
      rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 210px,
      transparent 211px, transparent 260px,
      rgba(255,255,255,.045) 261px, rgba(255,255,255,.045) 262px,
      transparent 263px, transparent 330px,
      rgba(255,255,255,.04) 331px, rgba(255,255,255,.04) 332px,
      transparent 333px, transparent 410px,
      rgba(255,255,255,.035) 411px, rgba(255,255,255,.035) 412px,
      transparent 413px, transparent 500px,
      rgba(255,255,255,.03) 501px, rgba(255,255,255,.03) 502px,
      transparent 503px),
    linear-gradient(175deg, var(--nacht) 60%, var(--nacht-tief));
  color:#EAF3F5;
  padding:22px 20px 118px; /* Fallback für Browser ohne max() */
  /* 444px = 490px halbe Inhaltsbreite − 20px Seitenpolster − 26px Kartenpolster.
     So starten Logo, Überschrift und Chips exakt über dem Text in der Karte. */
  padding:22px max(20px, calc(50% - 444px)) 118px;
}
.wortmarke{ display:flex; align-items:center; margin-bottom:16px; }
/* Logo als Bild. Die Datei ist auf den sichtbaren Inhalt zugeschnitten –
   ein transparenter Rand würde die Marke sonst gegenüber der Überschrift
   nach rechts versetzen. Die Angaben width/height im HTML entsprechen der
   Datei und verhindern Layout-Sprünge beim Laden (Cumulative Layout Shift). */
.logo-bild{
  height:47px; width:auto; max-width:100%; display:block;
}
/* Auf schmalen Schirmen begrenzt die Breite statt der Höhe, damit das
   breite Logo nie über den Rand läuft. */
@media (max-width:700px){ .logo-bild{ height:auto; width:min(100%, 360px); } }

.held{ padding:26px 0 4px; }
.held h1{
  font-family:var(--anzeige); font-weight:700; letter-spacing:-.01em;
  font-size:2.2rem; /* Fallback für Browser ohne clamp() */
  font-size:clamp(1.7rem, 4.4vw, 2.6rem);
  line-height:1.16; margin:0 0 12px;
}
.held h1 em{ font-style:normal; color:var(--led); }
.held p{
  margin:0; max-width:580px; color:#B9CDD2; font-size:1.03rem;
}

.vertrauen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:600; color:#DCE9EC;
  border:1px solid rgba(255,255,255,.22);
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.chip::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--led); box-shadow:0 0 6px var(--led); /* LED-Punkt */
}

/* ---------- Die WLAN-Karte (überlappt den Kopf) ---------- */
.wlan-karte{
  position:relative;
  margin-top:-84px;
  background:var(--karte);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  padding:26px 26px 22px;
  /* Bewusst KEIN overflow:hidden: Die ?-Erklärboxen ragen über den
     Kartenrand hinaus und würden sonst abgeschnitten. Das
     Wasserzeichen wird stattdessen über border-radius begrenzt. */
}
.wlan-karte::after{ /* Funkwellen-Wasserzeichen */
  content:""; position:absolute; inset:0; border-radius:var(--radius); overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%, transparent 58px, rgba(31,111,229,.06) 59px, rgba(31,111,229,.06) 61px, transparent 62px),
    radial-gradient(circle at 100% 0%, transparent 98px, rgba(31,111,229,.06) 99px, rgba(31,111,229,.06) 101px, transparent 102px),
    radial-gradient(circle at 100% 0%, transparent 138px, rgba(31,111,229,.06) 139px, rgba(31,111,229,.06) 141px, transparent 142px);
  pointer-events:none;
}
/* Funk-Puls beim Erzeugen (reine Zierde, per JS kurz getriggert) */
.wlan-karte.funk-puls::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  pointer-events:none; animation:funkpuls .7s ease-out both;
}
@keyframes funkpuls{
  from{ box-shadow:0 0 0 0 rgba(31,111,229,.30); }
  to{   box-shadow:0 0 0 26px rgba(31,111,229,0); }
}
.karten-etikett{
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--akzent-tief); margin-bottom:12px;
}

.pw-anzeige{
  position:relative;
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 0;
  font-family:var(--mono);
  font-size:1.25rem; /* Fallback */
  font-size:clamp(1.05rem, 2.9vw, 1.5rem);
  font-weight:600; letter-spacing:.03em;
  min-height:2.4em; padding:16px 16px;
  background:linear-gradient(180deg,#FDFDFF,#F3F7FC);
  border:1.5px solid var(--linie); border-radius:12px;
  word-break:break-all; cursor:text;
  overflow:hidden;
}
.pw-anzeige::after{ /* dezenter LED-Schimmer oben */
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, transparent, var(--led), transparent); opacity:.55;
  pointer-events:none;
}
.pw-gruppe{ margin-right:0; }
.pw-gruppe.animiert{ animation:einblenden .3s both; animation-delay:calc(var(--i) * 45ms); }
@keyframes einblenden{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  /* Wichtig: gleiche Spezifität wie die Animations-Regeln,
     sonst gewinnen diese und die Animation liefe trotz Systemeinstellung. */
  .pw-gruppe.animiert{ animation:none; }
  .wlan-karte.funk-puls::before{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Stärke-Anzeige: WLAN-Empfangsfächer + Messlinie ---------- */
.staerke{ display:flex; align-items:center; gap:12px; margin:14px 0 4px; flex-wrap:wrap; }
.faecher{ width:40px; height:34px; flex:none; }
/* WICHTIG: Bögen ausschließlich über `stroke` einfärben und `fill:none`
   explizit im CSS setzen. Ein `fill` auf den Pfaden würde das Attribut
   fill="none" im SVG überschreiben (CSS schlägt Präsentationsattribut) –
   die Bögen liefen dann zu einer gefüllten Fläche zusammen. */
.faecher path{ stroke:var(--aus); fill:none; transition:stroke .25s ease; }
.faecher circle{ fill:var(--aus); stroke:none; transition:fill .25s ease; }

/* Punkt leuchtet ab "schwach", Bögen füllen sich Stufe für Stufe */
.staerke[data-stufe="schwach"] .fp{ fill:var(--schlecht); }

.staerke[data-stufe="ausreichend"] .fp{ fill:var(--warnung); }
.staerke[data-stufe="ausreichend"] .fb1{ stroke:var(--warnung); }

.staerke[data-stufe="gut"] .fp{ fill:#3E97C9; }
.staerke[data-stufe="gut"] .fb1,
.staerke[data-stufe="gut"] .fb2{ stroke:#3E97C9; }

.staerke[data-stufe="stark"] .fp,
.staerke[data-stufe="exzellent"] .fp{ fill:var(--gut); }
.staerke[data-stufe="stark"] .fb1,
.staerke[data-stufe="stark"] .fb2,
.staerke[data-stufe="stark"] .fb3,
.staerke[data-stufe="exzellent"] .fb1,
.staerke[data-stufe="exzellent"] .fb2,
.staerke[data-stufe="exzellent"] .fb3{ stroke:var(--gut); }
.staerke[data-stufe="exzellent"] .faecher{ filter:drop-shadow(0 0 3px rgba(27,127,88,.45)); }

.messleiste{
  flex:1 1 170px; height:5px; background:#E3E9F1; border-radius:99px; overflow:hidden;
}
.messleiste > div{ height:100%; width:0; border-radius:99px; transition:width .35s ease, background .35s ease; }
.staerke[data-stufe="schwach"]      .messleiste > div{ background:var(--schlecht); }
.staerke[data-stufe="ausreichend"]  .messleiste > div{ background:var(--warnung); }
.staerke[data-stufe="gut"]          .messleiste > div{ background:#3E97C9; }
.staerke[data-stufe="stark"]        .messleiste > div{ background:var(--gut); }
.staerke[data-stufe="exzellent"]    .messleiste > div{ background:linear-gradient(90deg, var(--akzent), var(--gut)); }
.staerke-text{ font-size:.88rem; color:var(--gedaempft); }
.staerke-text b{ color:var(--tinte); }
.staerke[data-stufe="schwach"] .staerke-text b{ color:var(--schlecht); }
.staerke[data-stufe="ausreichend"] .staerke-text b{ color:var(--warnung); }

/* ---------- Aktionsknöpfe ---------- */
.aktionen{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.knopf{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid transparent; border-radius:12px; padding:12px 19px;
  font-size:.96rem; font-weight:600; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.knopf:active{ transform:translateY(1px); }
.knopf svg{ width:18px; height:18px; flex:none; }
.knopf-primaer{
  background:var(--akzent); color:#fff; border-color:var(--akzent-tief);
  box-shadow:0 6px 16px -8px rgba(31,111,229,.7);
}
.knopf-primaer:hover{ background:var(--akzent-tief); }
.knopf-sekundaer{ background:#fff; color:var(--tinte); border-color:var(--linie); }
.knopf-sekundaer:hover{ border-color:var(--akzent); color:var(--akzent-tief); }
.knopf[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- Einstellungen ---------- */
.einstellungen{
  margin-top:20px; padding-top:20px; border-top:1px dashed var(--linie);
  display:grid; gap:18px;
}
.laengen-zeile{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.laengen-titel{ font-weight:700; display:flex; align-items:center; gap:6px; }
.laengen-wert{
  font-family:var(--mono); font-weight:700; font-size:1.15rem;
  color:var(--akzent-tief); min-width:2.2em; text-align:center;
  background:var(--akzent-hell); border-radius:8px; padding:2px 8px;
}
input[type="range"]{
  flex:1 1 200px; accent-color:var(--akzent); height:28px; cursor:pointer;
}
.optionen-zeile{ display:flex; flex-wrap:wrap; gap:14px 26px; }
.art-zeile{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.art-zeile .segmente{ margin-bottom:0; }
.versteckt{ display:none !important; }
details.faq .faq-inhalt ol{ margin:6px 0 10px; padding-left:22px; }
details.faq .faq-inhalt ol li{ margin-bottom:6px; }
.option{ display:flex; align-items:center; gap:9px; font-size:.95rem; }
.option input[type="checkbox"]{
  width:19px; height:19px; accent-color:var(--akzent); cursor:pointer;
}
.option label{ cursor:pointer; }

/* ---------- ?-Tooltips (nativ per details, touch- & tastaturfähig) ---------- */
details.hilfe{ position:relative; display:inline-block; }
/* Beim Überfahren mit der Maus öffnet JavaScript das Element (siehe app.js).
   Klick, Tastatur und Touch funktionieren unverändert weiter. */
details.hilfe > summary{
  list-style:none; cursor:help;
  width:19px; height:19px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800;
  background:var(--akzent-hell); color:var(--akzent-tief);
  border:1px solid #C6D6F2; user-select:none;
}
details.hilfe > summary::-webkit-details-marker{ display:none; }
details.hilfe[open] > summary{ background:var(--akzent); color:#fff; }
.hilfe-text{
  /* z-index hoch genug, um über nachfolgenden Karten zu liegen;
     top:23px lässt keine Lücke zum ?-Symbol (sonst schließt der Tooltip,
     sobald die Maus dorthin wandert).
     --versatz wird beim Öffnen per JS gesetzt, falls die Box sonst über den
     Bildschirmrand ragen würde; ohne JS bleibt sie schlicht mittig. */
  --versatz:0px;
  position:absolute; z-index:120; top:23px; left:50%;
  transform:translateX(calc(-50% + var(--versatz)));
  width:290px;                        /* Fallback für alte Browser */
  width:min(290px, calc(100vw - 32px));
  background:var(--nacht); color:#EAF2F6;
  font-size:.83rem; font-weight:400; line-height:1.5;
  padding:11px 13px; border-radius:10px;
  box-shadow:0 8px 24px rgba(22,35,59,.30);
}
/* Das Pfeilchen wandert gegenläufig mit, damit es weiterhin auf das
   ?-Symbol zeigt, auch wenn die Box seitlich verschoben wurde. */
.hilfe-text::before{
  content:""; position:absolute; top:-6px; left:calc(50% - var(--versatz));
  transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--nacht);
}

/* ---------- Transfer-Bereich ---------- */
.transfer{
  display:grid; gap:20px; margin-top:24px;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .transfer{ grid-template-columns:1.05fr .95fr; } }
.transfer-karte{
  /* isolation:auto + kein z-index: so bleiben Tooltips aus der Karte
     darüber sichtbar und werden nicht verdeckt. */
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius); box-shadow:0 4px 14px rgba(22,35,59,.06);
  padding:22px 24px;
}
.transfer-karte h2{
  font-family:var(--anzeige); font-size:1.18rem; font-weight:700; letter-spacing:-.005em;
  margin:0 0 6px; display:flex; align-items:center; gap:8px;
}
.transfer-karte h2 svg{ width:20px; height:20px; color:var(--akzent); }
.transfer-karte > p{ margin:0 0 14px; font-size:.92rem; color:var(--gedaempft); }

/* Segment-Umschalter */
.segmente{
  display:inline-flex; background:#E8EDF5; border-radius:11px; padding:3px; gap:3px;
  margin-bottom:14px;
}
.segmente label{
  position:relative; cursor:pointer; border-radius:8px;
  padding:0; font-size:.86rem; font-weight:600; color:var(--gedaempft);
}
.segmente label > span{
  display:block; border-radius:inherit; padding:7px 13px;
}
.segmente input{ position:absolute; opacity:0; pointer-events:none; }
.segmente input:checked + span{
  background:#fff; color:var(--akzent-tief);
  box-shadow:0 1px 4px rgba(22,35,59,.14);
}
.segmente input:focus-visible + span{ outline:3px solid var(--akzent); outline-offset:2px; }
/* Zahlen-Auswahl (Wortanzahl): feste Mindestbreite, damit alle Felder
   gleich groß und auf dem Handy sicher zu treffen sind. */
.segmente-zahlen{ margin-bottom:0; }
.segmente-zahlen label{
  min-width:44px; padding:0; text-align:center;
  font-family:var(--mono); font-size:.95rem; font-weight:700;
}
.segmente-zahlen label > span{ min-width:44px; padding:9px 6px; }

.ssid-feld{ margin-bottom:14px; }
.ssid-titel{ display:flex; align-items:center; gap:6px; font-size:.88rem; font-weight:700; margin-bottom:6px; }
.ssid-feld input{
  width:100%; padding:10px 12px; font-size:.95rem;
  border:1.5px solid var(--linie); border-radius:10px; font-family:inherit;
  background:#FBFCFF;
}
.ssid-feld input:focus-visible{ outline:3px solid var(--akzent); outline-offset:1px; border-color:var(--akzent); }
.ssid-feld input[aria-invalid="true"]{ border-color:var(--schlecht); background:#FFF8F7; }
.ssid-status{
  display:flex; justify-content:flex-end; min-height:1.35em; margin-top:5px;
  font-size:.78rem; color:var(--gedaempft);
}
.ssid-status.fehler{ color:var(--schlecht); font-weight:700; }

.qr-rahmen{
  display:flex; align-items:center; justify-content:center;
  min-height:220px; background:#F7FAFE; border:1.5px dashed #D6E0EE; border-radius:12px;
  padding:12px;
}
.qr-rahmen img, .qr-rahmen canvas{ image-rendering:pixelated; border-radius:4px; }
.qr-hinweis{ font-size:.85rem; color:var(--gedaempft); text-align:center; max-width:260px; }
.klein{ font-size:.8rem; color:var(--gedaempft); margin-top:10px; }
.transfer-karte > p.klein{ margin:10px 0 0; }

.speicher-knoepfe{ display:grid; gap:10px; }
.speicher-knoepfe .knopf{ width:100%; justify-content:center; }
.warnbox{
  margin-top:14px; padding:11px 13px; border-radius:10px;
  background:#FBF3E4; border:1px solid #EBD9B4; color:#6E4E12; font-size:.85rem;
}

/* ---------- Inhaltsbilder ---------- */
.inhalt-bild{
  display:block; width:100%; height:auto; border-radius:12px;
}
.aufbewahrung-bild{ margin-top:10px; }
.abschnitt-bild{ margin:0 0 18px; }

/* ---------- Passwort-Check ---------- */
.pruef-zeile{ display:flex; gap:10px; margin:4px 0 4px; }
.pruef-zeile input{
  flex:1; min-width:0; padding:11px 13px; font-size:1rem;
  font-family:var(--mono); letter-spacing:.03em;
  border:1.5px solid var(--linie); border-radius:10px;
  background:#FBFCFF;
}
.pruef-zeile input:focus-visible{
  outline:3px solid var(--akzent); outline-offset:1px; border-color:var(--akzent);
}
.pruef-auge{ flex:none; width:48px; padding:0; justify-content:center; }
.pruef-hinweise{ list-style:none; padding:0; margin:12px 0 0; }
.pruef-hinweise li{
  position:relative; padding-left:20px; margin-bottom:7px;
  font-size:.9rem; color:var(--gedaempft);
}
.pruef-hinweise li::before{
  content:""; position:absolute; left:2px; top:.42em; width:8px; height:8px;
  border-radius:50%; background:var(--warnung);
}
.pruef-hinweise li.positiv::before{ background:var(--gut); }

/* ---------- Inhaltsbereiche ---------- */
section.inhalt{ margin-top:46px; }
section.inhalt h2{
  font-family:var(--anzeige); font-size:1.5rem; font-weight:700; letter-spacing:-.005em;
  margin:0 0 14px;
}
.schritte{ display:grid; gap:14px; }
@media (min-width:700px){ .schritte{ grid-template-columns:repeat(3,1fr); } }
.schritt{
  background:var(--karte); border:1px solid var(--linie); border-radius:14px;
  padding:18px 18px 16px;
}
.schritt .nr{
  width:30px; height:30px; border-radius:50%;
  background:var(--akzent); color:#fff; font-weight:800; font-size:.92rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.schritt h3{ margin:0 0 6px; font-size:1rem; }
.schritt p{ margin:0; font-size:.9rem; color:var(--gedaempft); }

details.faq{
  background:var(--karte); border:1px solid var(--linie); border-radius:12px;
  margin-bottom:10px; overflow:hidden;
  border-left:4px solid var(--akzent);
}
details.faq > summary{
  cursor:pointer; padding:15px 18px; font-weight:700; font-size:.97rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.faq > summary::-webkit-details-marker{ display:none; }
details.faq > summary::after{
  content:"+"; font-size:1.3rem; font-weight:400; color:var(--akzent); flex:none;
  transition:transform .2s ease;
}
details.faq[open] > summary::after{ transform:rotate(45deg); }
details.faq .faq-inhalt{ padding:0 18px 16px; font-size:.92rem; color:var(--gedaempft); }
details.faq .faq-inhalt p{ margin:0 0 8px; }
details.faq .faq-inhalt p:last-child{ margin-bottom:0; }

ul.punkte{ padding-left:20px; margin:0; }
ul.punkte li{ margin-bottom:9px; font-size:.94rem; color:var(--gedaempft); }
ul.punkte li b{ color:var(--tinte); }

/* ---------- Fehlerzustand ---------- */
.fatal{
  background:#FCEBE8; border:1px solid #EFC3BC; color:#7A2B20;
  border-radius:12px; padding:14px 16px; margin-bottom:18px; font-size:.94rem;
  display:none;
}
.fatal.sichtbar{ display:block; position:relative; margin-top:-84px; }
/* Wenn der Fehlerkasten sichtbar in den Kopf ragt, rückt die Karte nach unten. */
.fatal.sichtbar + .wlan-karte{ margin-top:0; }

/* ---------- Fußzeile (dunkle Klammer zum Kopf) ---------- */
footer.fusszeile{
  background:var(--nacht); color:#9FB7BD;
  margin-top:46px;
  padding:24px 20px 32px; /* Fallback für Browser ohne max() */
  padding:24px max(20px, calc(50% - 444px)) 32px;
  font-size:.84rem;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
}
footer.fusszeile nav{ margin-left:auto; display:flex; gap:18px; }
footer.fusszeile a{ color:#D9E6E9; text-decoration:none; }
footer.fusszeile a:hover{ text-decoration:underline; color:var(--led); }

/* ---------- Druckansicht: die WLAN-Zugangskarte ---------- */
#druckbogen{ display:none; }
@media print{
  body > *:not(#druckbogen){ display:none !important; }
  body{ background:#fff; }
  #druckbogen{ display:block; padding:20mm 16mm; font-family:var(--sans); color:#111; }
  .druck-fehler{
    max-width:150mm; border:2px solid #8B2E23; border-radius:10px; padding:16px 18px;
    font-size:11pt; line-height:1.45; color:#5A1F18;
  }
  .druck-karte{
    border:2px dashed #999; border-radius:14px; padding:22px 26px; max-width:150mm;
  }
  .druck-karte .dk-titel{
    font-size:11pt; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color:#1F6FE5; margin-bottom:14px;
  }
  .druck-zeile{ margin-bottom:12px; }
  .druck-zeile .dz-label{ font-size:8.5pt; text-transform:uppercase; letter-spacing:.08em; color:#555; }
  .druck-zeile .dz-wert{ font-family:var(--mono); font-size:13pt; font-weight:600; word-break:break-all; }
  .druck-zeile .dz-wert .pw-gruppe{ margin-right:0; animation:none; }
  .druck-zeile .dz-linie{ border-bottom:1px solid #999; height:22px; width:70mm; }
  .druck-qr{ margin:14px 0 6px; }
  .druck-hinweise{ margin-top:16px; font-size:8.5pt; color:#444; max-width:150mm; }
  .druck-hinweise p{ margin:0 0 4px; }
  .schnitt-hinweis{ font-size:8pt; color:#888; margin-top:8px; max-width:150mm; }
}

/* ---------- Utility-Klassen (ersetzen Inline-Styles, CSP-tauglich) ---------- */
.mono{ font-family:var(--mono); }
.sektion-intro{ margin:0 0 14px; color:var(--gedaempft); font-size:.94rem; }
.sektion-abschluss{ margin:12px 0 0; color:var(--gedaempft); font-size:.9rem; }
.dz-normal{ text-transform:none; }
#druckDatum{ font-size:10pt; }
.noscript-warnung{ max-width:980px; margin:20px auto; padding:16px 20px; background:#FCEBE8;
  border:1px solid #EFC3BC; border-radius:12px; color:#7A2B20; font-family:system-ui,sans-serif; }
.kopier-fallback{ position:fixed; left:-9999px; top:0; opacity:0; }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.seitenkopf.schlank{ padding-bottom:26px; } /* Rechtsseiten: Kopf ohne Hero */
.rechtsseite{ max-width:820px; margin:0 auto; padding:26px 20px 44px; }
.rechtsseite h1{ font-family:var(--anzeige); font-weight:700; font-size:1.7rem; margin:10px 0 14px; }
.rechtsseite h2{ font-family:var(--anzeige); font-weight:700; font-size:1.16rem; margin:26px 0 8px; }
.rechtsseite p{ line-height:1.65; margin:0 0 12px; font-size:.95rem; }
.rechtsseite a{ color:var(--akzent); }
/* Logo-Link auf den Rechtsseiten: kein Unterstrich, dezente Rückmeldung */
.wortmarke-link{ color:inherit; text-decoration:none; display:block; }
.wortmarke-link:hover{ opacity:.85; }
.rechtsseite ul{ margin:0 0 12px; padding-left:22px; font-size:.95rem; }
.rechtsseite ul li{ margin-bottom:4px; line-height:1.55; }
.rechtsseite h3{ font-size:1rem; margin:18px 0 6px; }
.punkte a{ color:var(--akzent); }

/* Unterstreichung im Fließtext: etwas Abstand zur Schrift, damit
   Unterlängen nicht durchschnitten werden. */
.transfer-karte > p u{ text-underline-offset:3px; text-decoration-thickness:1.5px; }