/* ============================================================
   starkespasswort.de – Design nach dem Vorbild des
   Schwesterprojekts sicheres-wlan-passwort.de ("Nachtfunk"):
   dunkler Navy-Kopf, helle Papierfläche, Raleway-Überschriften,
   Royalblau als Akzent. Statt Funkwellen trägt der Kopf ein
   dezentes Punktraster (Passwort-Punkte ••••), die Stärke-Anzeige
   zeigt Schutz-Bögen über einem kleinen Schloss.
   ============================================================ */
: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:     #A66A10;
  --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: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* Raleway (variable Schrift) – selbst gehostet und als WOFF2 komprimiert.
   Fehlt die Datei, greift automatisch der System-Fallback aus --anzeige;
   die Seite bleibt also in jedem Fall funktionsfähig. */
@font-face{
  font-family:"Raleway";
  src:url("../font/Raleway-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;   /* variabler Achsenbereich */
  font-style:normal;
  font-display:swap;     /* Text sofort lesbar, Schrift wird nachgereicht */
}

*{ 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);
  /* Punktraster statt Funkwellen: die Passwort-Punkte •••• als
     dezentes Markenmotiv, nach oben hin auslaufend. */
  background:
    radial-gradient(rgba(255,255,255,.055) 1.6px, transparent 2.3px),
    linear-gradient(175deg, var(--nacht) 60%, var(--nacht-tief));
  background-size:26px 26px, auto;
  background-position:8px 14px, 0 0;
  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-plakette{
  display:inline-flex; align-items:center;
  padding:12px 16px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
  box-shadow:0 12px 28px rgba(9,22,43,.26), inset 0 0 0 1px rgba(255,255,255,.45);
}
/* 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:44px; 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-plakette{ padding:10px 14px; border-radius:16px; }
  .logo-bild{ height:auto; width:min(100%, 360px); }
}

.held-layout{
  display:grid; gap:22px; align-items:center;
}
@media (min-width:900px){
  /* Zwei Felder oben (Überschrift | Bühne), darunter der Fließtext über
     die volle Breite. Zeilenabstand kleiner als der Spaltenabstand, damit
     Überschrift und Text zusammengehörig wirken. */
  .held-layout{
    grid-template-columns:minmax(0, 1.2fr) minmax(280px, 400px);
    column-gap:48px; row-gap:14px;
  }
  .held{ grid-column:1; grid-row:1; }
  .held-buehne{ grid-column:2; grid-row:1; }
  .held-text{ grid-column:1 / -1; grid-row:2; }
}

.held{ padding:30px 0 8px; }
.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.75rem, 4.4vw, 2.7rem);
  line-height:1.16; margin:0 0 14px;
  text-wrap:balance; /* ausgeglichene Zeilen; ältere Browser ignorieren das */
}
.held h1 em{ font-style:normal; color:var(--led); }
/* Fließtext im Kopf: läuft bewusst über die gesamte Inhaltsbreite.
   Keine Zeichenbegrenzung mehr – die Breite deckelt bereits das Polster
   des Kopfbereichs (max. rund 888px Inhalt). */
.held-text{
  margin:0 0 4px; max-width:none; color:#BCCFDD;
  font-size:1.06rem; line-height:1.62;
}
@media (max-width:899px){
  /* Einspaltig: Überschrift, Text, dann die Bühne – so steht die Aussage
     vor der Illustration. */
  .held-text{ order:2; }
  .held-buehne{ order:3; }
}

/* ---------- Hero-Bühne: schwebende Tasten-Kappen ----------
   Halbtransparente Kappen lassen das Punktraster des Kopfes durchscheinen –
   dadurch wirken sie wie Teil des Hintergrunds statt aufgeklebt. Position,
   Größe, Drehung und Takt bekommt jede Kappe über eigene Custom Properties;
   die Schwebe-Animation selbst ist für alle dieselbe. */
.held-buehne{
  position:relative; width:100%; aspect-ratio:5 / 4;
  justify-self:center; max-width:400px;
}
.held-buehne::before{ /* weicher Lichtkern hinter dem Schwarm */
  content:""; position:absolute; inset:12% 8%; border-radius:50%;
  background:radial-gradient(circle,
    rgba(81,126,255,.20) 0%, rgba(81,126,255,.10) 45%,
    rgba(210,105,232,.07) 62%, rgba(81,126,255,0) 78%);
  filter:blur(16px);
}
.taste{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--gr); height:var(--gr);
  display:flex; align-items:center; justify-content:center;
  border-radius:24%;
  background:linear-gradient(160deg,
    rgba(255,255,255,.11), rgba(255,255,255,.035) 55%, rgba(7,17,38,.28));
  border:2px solid rgba(196,213,234,.40);
  box-shadow:0 12px 24px rgba(6,15,34,.45), inset 0 1px 0 rgba(255,255,255,.16);
  color:#E9F1FA; font-family:var(--anzeige); font-weight:800;
  font-size:calc(var(--gr) * .42); line-height:1;
  transform:rotate(var(--dreh));
  animation:tasteSchweben var(--dauer) ease-in-out var(--start) infinite alternate;
  user-select:none;
}
.taste.akzent{
  color:var(--led); border-color:rgba(50,161,226,.85);
  box-shadow:0 12px 26px rgba(6,15,34,.5), 0 0 16px rgba(50,161,226,.32),
             inset 0 0 12px rgba(50,161,226,.13);
  text-shadow:0 0 12px rgba(50,161,226,.55);
}
.tz{ display:block; }
/* Zeichenwechsel (per JS getriggert): neues Zeichen ploppt kurz auf.
   Läuft auf dem inneren Span, damit das Schweben der Kappe weiterläuft. */
.tz.wechsel{ animation:tzWechsel .5s ease; }

/* Komposition des Schwarms: 3 Größen, 4 Akzent-Kappen, lockere Drehungen.
   Jede Kappe bekommt eigenen Hub (vertikal), Drift (seitlich) und ein
   leichtes Kippen – zusammen mit den negativen Startwerten schwebt nichts
   im Gleichtakt und die Bahnen wirken organisch statt mechanisch. */
.t1{  --x:6%;  --y:10%; --gr:clamp(46px, 5vw, 66px);  --dreh:-8deg;  --dauer:8s;    --start:-2s;   --hub:18px; --drift:7px;  --kipp:4deg; }
.t2{  --x:40%; --y:0%;  --gr:clamp(36px, 4vw, 52px);  --dreh:6deg;   --dauer:6.5s;  --start:-5s;   --hub:15px; --drift:-6px; --kipp:-3deg; }
.t3{  --x:58%; --y:32%; --gr:clamp(42px, 4.6vw, 60px);--dreh:-4deg;  --dauer:7.5s;  --start:-1s;   --hub:20px; --drift:8px;  --kipp:5deg; }
.t4{  --x:82%; --y:8%;  --gr:clamp(34px, 3.8vw, 50px);--dreh:10deg;  --dauer:9s;    --start:-7s;   --hub:16px; --drift:-7px; --kipp:-4deg; }
.t5{  --x:4%;  --y:58%; --gr:clamp(30px, 3.4vw, 44px);--dreh:7deg;   --dauer:10s;   --start:-4s;   --hub:14px; --drift:6px;  --kipp:3deg; }
.t6{  --x:30%; --y:70%; --gr:clamp(36px, 4vw, 52px);  --dreh:-10deg; --dauer:7s;    --start:-6s;   --hub:19px; --drift:-8px; --kipp:6deg; }
.t7{  --x:60%; --y:72%; --gr:clamp(40px, 4.4vw, 56px);--dreh:5deg;   --dauer:8.5s;  --start:-3s;   --hub:16px; --drift:7px;  --kipp:-5deg; }
.t8{  --x:88%; --y:52%; --gr:clamp(30px, 3.4vw, 44px);--dreh:-6deg;  --dauer:6s;    --start:-8s;   --hub:15px; --drift:-6px; --kipp:4deg; }
.t9{  --x:25%; --y:0%;  --gr:clamp(28px, 3.2vw, 40px);--dreh:9deg;   --dauer:7s;    --start:-2.5s; --hub:14px; --drift:6px;  --kipp:-4deg; }
.t10{ --x:24%; --y:42%; --gr:clamp(30px, 3.4vw, 44px);--dreh:-7deg;  --dauer:8s;    --start:-5.5s; --hub:17px; --drift:-7px; --kipp:5deg; }
.t11{ --x:79%; --y:78%; --gr:clamp(28px, 3.2vw, 40px);--dreh:8deg;   --dauer:6.5s;  --start:-4.5s; --hub:15px; --drift:6px;  --kipp:-3deg; }

@keyframes tasteSchweben{
  from{ transform:translate(0, 0) rotate(var(--dreh)); }
  to{   transform:translate(var(--drift), calc(-1 * var(--hub)))
                  rotate(calc(var(--dreh) + var(--kipp))); }
}
@keyframes tzWechsel{
  0%{ transform:scale(.55); opacity:0; }
  60%{ transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); }
}

@media (max-width:899px){
  .held-layout{ gap:22px; }
  /* Mobil: flacherer Schwarm unter dem Text, damit die Karte
     nicht zu weit nach unten rutscht. */
  .held-buehne{ max-width:330px; aspect-ratio:16 / 9; }
}

.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 Passwort-Karte (überlappt den Kopf) ---------- */
.pw-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. */
}
.pw-karte::after{ /* Punktraster-Wasserzeichen (Passwort-Punkte) */
  content:""; position:absolute; inset:0; border-radius:var(--radius); overflow:hidden;
  background:radial-gradient(circle, rgba(31,111,229,.07) 3px, transparent 3.9px);
  background-size:20px 20px;
  /* Nur die obere rechte Ecke zeigt die Punkte – die Maske läuft weich aus. */
  -webkit-mask-image:radial-gradient(230px 170px at 100% 0%, #000, transparent 72%);
  mask-image:radial-gradient(230px 170px at 100% 0%, #000, transparent 72%);
  pointer-events:none;
}
/* Puls beim Erzeugen (reine Zierde, per JS kurz getriggert) */
.pw-karte.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:block;
  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;
}
/* Auf dem Bildschirm stehen die Segmente OHNE Abstand aneinander: Eine
   Lücke sähe aus wie ein Leerzeichen im Passwort und würde besonders dann
   verwirren, wenn jemand selbst eines eintippen möchte. Die Aufteilung in
   Spans bleibt trotzdem – sie trägt die versetzte Einblend-Animation.
   Die Lesehilfe-Lücken gibt es weiterhin auf dem gedruckten Notfallblatt,
   dort weist das Etikett ausdrücklich darauf hin (siehe @media print). */
.pw-gruppe{ display:inline-block; }
.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; }
  .pw-karte.puls::before{ animation:none; }
  .taste{ animation:none; }
  .tz.wechsel{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Stärke-Anzeige: Schutz-Bögen über Mini-Schloss + Messlinie ---------- */
.staerke{ display:flex; align-items:center; gap:12px; margin:14px 0 4px; flex-wrap:wrap; }
.schutz{ 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. */
.schutz .fb1, .schutz .fb2, .schutz .fb3{ stroke:var(--aus); fill:none; transition:stroke .25s ease; }
/* .fp ist das kleine Schloss (gefüllter Pfad) unter den Bögen. */
.schutz .fp{ 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"] .schutz{ 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{
  /* Die beiden Wunschfarben bleiben die Basis des Verlaufs. Eine dezente
     dunkle Ebene darüber hält auch am helleren Magenta-Ende genügend
     Kontrast für die weiße Beschriftung. */
  background:
    linear-gradient(rgba(22,35,59,.10), rgba(22,35,59,.10)),
    linear-gradient(135deg, #D608FF 0%, #4F33FF 100%);
  color:#fff; border-color:#6A2CFF;
  box-shadow:0 10px 24px -13px rgba(79,51,255,.90), 0 6px 18px -14px rgba(214,8,255,.85);
}
.knopf-primaer:hover{
  background:
    linear-gradient(rgba(22,35,59,.16), rgba(22,35,59,.16)),
    linear-gradient(135deg, #D608FF 0%, #4F33FF 100%);
  box-shadow:0 12px 28px -13px rgba(79,51,255,.95), 0 8px 20px -14px rgba(214,8,255,.90);
}
.knopf-sekundaer{
  background:var(--akzent); color:#fff; border-color:var(--akzent-tief);
  box-shadow:0 6px 16px -10px rgba(31,111,229,.65);
}
.knopf-sekundaer:hover{ background:var(--akzent-tief); border-color:var(--akzent-tief); color:#fff; }
.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){
  /* Wie im Schwesterprojekt: Der QR-Transfer erhält als primäre Aktion die
     volle Breite. Notfallblatt und Buchstabier-Ansicht folgen gleich breit. */
  .transfer{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .transfer-karte-handy{ grid-column:1 / -1; }
}
.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,
.transfer-handy-text > p{ margin:0 0 14px; font-size:.92rem; color:var(--gedaempft); }
.problem-bildblock{
  display:block; margin:4px 0 18px;
}
.problem-bild{ margin:0 0 18px; }
.problem-bild img{
  display:block; width:100%; height:auto;
  border-radius:20px; border:1px solid var(--linie);
  box-shadow:0 12px 28px rgba(22,35,59,.12);
}
.problem-bildblock > p{ margin:0; }

.inhalt-bildblock{
  margin-top:14px;
  margin-bottom:4px;
}
.breitbild-abbildung{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--linie);
  box-shadow:0 12px 28px rgba(22,35,59,.12);
  background:#fff;
}
.breitbild-abbildung img{
  display:block; width:100%; height:auto;
}
.transfer-handy-layout{ display:grid; gap:18px; align-items:start; }
@media (min-width:760px){
  .transfer-handy-layout:has(.qr-rahmen:not([hidden])){
    grid-template-columns:minmax(0, 1fr) 220px;
  }
}

/* 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:7px 13px; font-size:.86rem; font-weight:600; color:var(--gedaempft);
}
.segmente input{ position:absolute; opacity:0; pointer-events:none; }
.segmente input:checked + span{ color:var(--akzent-tief); }
.segmente label:has(input:checked){
  background:#fff; color:var(--akzent-tief);
  box-shadow:0 1px 4px rgba(22,35,59,.14);
}
.segmente label:has(input:focus-visible){ 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:9px 6px; text-align:center;
  font-family:var(--mono); font-size:.95rem; font-weight:700;
}

.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); }

.qr-rahmen{
  display:flex; align-items:center; justify-content:center;
  width:100%; 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; }

/* Eigenständige Aktionsknöpfe bekommen zum nachfolgenden Erklärungstext
   bewusst mehr Luft. Die kompakte Haupt-Aktionsleiste oben bleibt davon
   unberührt. */
.transfer-handy-text > .knopf + .klein,
.speicher-knoepfe + .klein,
.transfer-karte-buchstabieren > .knopf ~ .klein{ margin-top:18px; }

.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;
}

/* ---------- 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; }
details.faq .faq-inhalt .knopf{ margin-top:8px; }

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 + .pw-karte{ margin-top:0; }
.generator-fehler.sichtbar{ margin:0 0 16px; }

/* ---------- 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-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:.5em; animation:none; }
  .druck-zeile .dz-wert .pw-gruppe.ohne-abstand{ margin-right:0; }
  .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; }

/* ---------- 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; }

/* ============================================================
   Zusätze für starkespasswort.de (gegenüber dem Schwesterprojekt)
   ============================================================ */

/* Das hidden-Attribut muss IMMER gewinnen – auch gegen Klassen, die
   selbst ein display setzen (.knopf, .qr-rahmen, .ablage-zeile …).
   Ohne diese Regel überstimmt Autoren-CSS das Browser-Stylesheet. */
[hidden]{ display:none !important; }

/* Aufgeklappte Bereiche: aktiver Knopf-Zustand (QR, Buchstabieren) */
.knopf-sekundaer[aria-expanded="true"],
.knopf-sekundaer[aria-pressed="true"]{
  border-color:var(--akzent); color:var(--akzent-tief); background:var(--akzent-hell);
}

/* ---------- Zwischenablage-Hygiene (erscheint nach dem Kopieren) ---------- */
.ablage-zeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin-top:10px; font-size:.85rem; color:var(--gedaempft);
}
.knopf-link{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:.85rem; font-weight:700; color:var(--akzent-tief);
  text-decoration:underline; text-underline-offset:3px;
}
.knopf-link:hover{ color:var(--akzent); }

/* ---------- Buchstabier-Ansicht (Anton–Berta–Cäsar) ---------- */
.bu-bereich{ margin-top:14px; }
.bu-hinweis{ font-size:.85rem; color:var(--gedaempft); margin:6px 0 10px; }
.bu-vorlesen-zeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin:8px 0 14px;
}
.bu-sprach-hinweis{
  flex:1 1 260px; margin:0; font-size:.8rem; line-height:1.4;
  color:var(--gedaempft);
}
.bu-liste{
  list-style:none; display:flex; flex-wrap:wrap; gap:7px;
  padding:0; margin:0;
}
.bu-chip{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:60px; padding:7px 9px 6px;
  background:#F7FAFE; border:1px solid var(--linie); border-radius:9px;
}
.bu-chip.gross{ border-color:var(--akzent); background:var(--akzent-hell); }
.bu-z{ font-family:var(--mono); font-weight:700; font-size:1.02rem; color:var(--tinte); }
.bu-w{ font-size:.68rem; color:var(--gedaempft); white-space:nowrap; }
.bu-fall{
  font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--akzent-tief);
}

/* Label über dem Prüffeld (gleiche Optik wie .ssid-titel der Referenz) */
.pruef-titel{
  display:flex; align-items:center; gap:6px;
  font-size:.88rem; font-weight:700; margin-bottom:6px;
}

/* ---------- Prüfer: milde Tipps (blauer Punkt statt Warn-Orange) ---------- */
.pruef-hinweise li.tipp::before{ background:var(--akzent); }

/* ---------- Text-Wortmarke (Übergangslösung, bis das Logo steht) ---------- */
.wortmarke-text{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--anzeige); font-weight:800; font-size:1.35rem;
  letter-spacing:-.01em; color:#fff;
}
.wortmarke-text svg{ width:30px; height:30px; flex:none; }
.wortmarke-text .tld{ color:var(--led); }