/* ── tool.css — Charakter „Passwort-Stärke“ ───────────────────────────────────────────────────────────────────────────
   WAS:   Akzentfarben (Azur · Limette · Rosa), Raster der Tafeln, Hauptbild = das Passwort in farbige Bausteine zerlegt
          (Breite je Baustein ∝ Zeichenzahl, darunter Art und Beitrag in Bit, Mini-Balken), darüber der gestapelte Messer
          (je Baustein ein Abschnitt, Länge ∝ Bit) mit Stufen-Skala. Farbe = Art des Bausteins (--k-*), Stufenfarbe = Ergebnis (--st*).
   WARUM: „Wie stark ist das?“ ist nur nachvollziehbar, wenn man sieht, WOFÜR die Punkte vergeben werden: ein Wort kostet den
          Angreifer wenig (rot/blau), Zufall viel (grün). Die Zerlegung ist das Argument, die Zahl nur die Folge.
   WIE ÄNDERN: Farben nur in den Variablenblöcken unten (--a1/--a2/--a3, --k-<art>, --st0…--st4). Die Art-Schlüssel (pw, wort,
          tastatur, folge, wiederholung, datum, zufall, trenner) kommen aus js/kern.js; jd (Jahr/Datum) teilt sich die Farbe.
          Grundbausteine stehen in ../_werk/werk.css (gemeinsam für alle Tools).
   LAYOUT (Lauf 2, 27.10.): EINE durchgehende Spalte (.werk auf 860 px, Kopf und Inhalt fluchten): Eingabe → Ergebnis → Zerlegung → Verbesserungen →
          eingeklappte Kästen → Über dieses Tool → Hilfe & Infos. Nichts steht neben etwas anderem; gleiche Breiten. Desktop (≥ 761 px) und
          Handy (≤ 760 px) haben je einen eigenen Medienblock am Ende der Datei. Überholte Regeln stehen auskommentiert (Lauf 2). */
.werk { width: min(860px, 100%); }
.kopf-glyphe { width: 82px; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }   /* Original-Icon (breit, transparent) auf neutralem Grund */
.kopf-glyphe img { display: block; width: 68px; height: auto; max-height: 44px; object-fit: contain; }
:root { --a1: #5aa9ff; --a2: #a3e635; --a3: #ff7ac6; --a1-tinte: #04162e;
  --k-pw: #ff6b6b; --k-wort: #5aa9ff; --k-tastatur: #b39bff; --k-folge: #3fd9cf; --k-wiederholung: #ffb02e; --k-datum: #ff7ac6; --k-zufall: #4ade80; --k-trenner: #8f98a8;
  --st0: #ff6b6b; --st1: #ff9a4d; --st2: #f5c542; --st3: #9ad86a; --st4: #4ade80; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #1a6fd6; --a2: #5c8f00; --a3: #c4358c; --a1-tinte: #ffffff;
  --k-pw: #d63c3c; --k-wort: #1a6fd6; --k-tastatur: #6a45e0; --k-folge: #0a8780; --k-wiederholung: #b86a00; --k-datum: #c4358c; --k-zufall: #16a34a; --k-trenner: #6c7482;
  --st0: #d63c3c; --st1: #d9731a; --st2: #b58a00; --st3: #4f9a24; --st4: #16a34a; } }
:root[data-thema="hell"] { --a1: #1a6fd6; --a2: #5c8f00; --a3: #c4358c; --a1-tinte: #ffffff;
  --k-pw: #d63c3c; --k-wort: #1a6fd6; --k-tastatur: #6a45e0; --k-folge: #0a8780; --k-wiederholung: #b86a00; --k-datum: #c4358c; --k-zufall: #16a34a; --k-trenner: #6c7482;
  --st0: #d63c3c; --st1: #d9731a; --st2: #b58a00; --st3: #4f9a24; --st4: #16a34a; }

/* .pw-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start;
  grid-template-areas: "eingabe eingabe" "buehne rechts" "hinweise check"; }
.pw-eingabe { grid-area: eingabe; } .pw-buehne { grid-area: buehne; } .pw-rechts { grid-area: rechts; display: grid; gap: 14px; min-width: 0; }
.pw-hinweise { grid-area: hinweise; } .pw-check { grid-area: check; } */
.pw-spalte, .pw-inhalt { display: grid; gap: 14px; min-width: 0; }
.pw-klein { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--leise); }
.pw-unter { margin: 0; font: 700 14px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }

/* ── Eingabe ── */
.pw-lokal { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--k-zufall); }
.pw-lokal svg { width: 17px; height: 17px; }
#rahmen-pw { padding-right: 6px; }
#rahmen-pw input { font-size: clamp(22px, 3vw, 30px); padding: 15px 16px; letter-spacing: 0.01em; }
.pw-knopf { flex: none; width: 44px; height: 44px; margin-left: 2px; border-radius: 12px; border: 0; background: transparent; color: var(--leise); display: grid; place-items: center; transition: background .15s, color .15s; }
.pw-knopf:hover { background: var(--flaeche-3); color: var(--text); }
.pw-knopf svg { width: 22px; height: 22px; }
.pw-knopf[aria-pressed="true"] { color: var(--a1); }
.pw-knopf.versteckt { display: none; }
.pw-zusage { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--leise); }
#gekuerzt { margin-top: 8px; }
/* .pw-kurz { display: none; }   — Lauf 2: nur noch ein Zusagesatz */

/* ── Hauptbild: Bausteine ── */
.pw-stufe { font: 800 clamp(34px, 8vw, 56px)/1.1 var(--schrift); letter-spacing: -0.01em; color: var(--stufe, var(--leise)); margin: 0 0 16px; }
/* .pw-stufe (alt): font: 700 16px var(--schrift) — klein in der Kopfzeile der Zerlegung */
.pw-leer p { margin: 0 0 16px; color: var(--leise); }
.pw-leer .chips { margin-top: 4px; }
.pw-leer .chip { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.pw-inhalt { --stufe: var(--st0); }
.pw-inhalt[data-stufe="1"] { --stufe: var(--st1); } .pw-inhalt[data-stufe="2"] { --stufe: var(--st2); } .pw-inhalt[data-stufe="3"] { --stufe: var(--st3); } .pw-inhalt[data-stufe="4"] { --stufe: var(--st4); }
/* Lauf 2: --stufe kommt direkt von #inhalt (data-stufe), die :has-Regeln der alten Bühne entfallen
.pw-buehne { --stufe: var(--leise); }
.pw-buehne:has(.pw-inhalt[data-stufe="0"]:not(.versteckt)) { --stufe: var(--st0); } .pw-buehne:has(.pw-inhalt[data-stufe="1"]:not(.versteckt)) { --stufe: var(--st1); }
.pw-buehne:has(.pw-inhalt[data-stufe="2"]:not(.versteckt)) { --stufe: var(--st2); } .pw-buehne:has(.pw-inhalt[data-stufe="3"]:not(.versteckt)) { --stufe: var(--st3); }
.pw-buehne:has(.pw-inhalt[data-stufe="4"]:not(.versteckt)) { --stufe: var(--st4); } */
.pw-verdeckt { margin: 12px 0 0; font-size: 14.5px; color: var(--hinweis); }

.pw-bausteine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pw-b { --f: var(--k-zufall); position: relative; flex: var(--n, 1) 1 calc(var(--n, 1) * 15px + 74px); min-width: 74px; max-width: 100%; display: grid; grid-template-rows: auto auto auto; gap: 3px;
  padding: 12px 12px 10px; border-radius: var(--r); background: color-mix(in srgb, var(--f) 13%, var(--flaeche-2)); border: 1px solid color-mix(in srgb, var(--f) 42%, transparent);
  outline: none; transition: border-color .15s, background .15s, transform .15s; }
.pw-b.k-pw { --f: var(--k-pw); } .pw-b.k-wort { --f: var(--k-wort); } .pw-b.k-tastatur { --f: var(--k-tastatur); } .pw-b.k-folge { --f: var(--k-folge); }
.pw-b.k-wiederholung { --f: var(--k-wiederholung); } .pw-b.k-jahr, .pw-b.k-datum { --f: var(--k-datum); } .pw-b.k-zufall { --f: var(--k-zufall); } .pw-b.k-trenner { --f: var(--k-trenner); }
.pw-b:hover, .pw-b:focus-visible, .pw-b.an { border-color: var(--f); background: color-mix(in srgb, var(--f) 22%, var(--flaeche-2)); }
.pw-b:focus-visible { box-shadow: var(--fokus); }
.pw-b-text { font: 500 clamp(24px, 2.6vw, 32px)/1.2 var(--mono); letter-spacing: 0.02em; color: var(--f); overflow-wrap: anywhere; word-break: break-all; min-height: 1.2em; }
.pw-b-art { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.pw-b-art small { font-weight: 400; color: var(--leise); font-size: 13px; }
.pw-b-bit { font: 700 17px var(--mono); color: var(--text); }
/* Lauf 2: Mini-Balken entfallen (Messer im Ergebnis zeigt die Anteile)
.pw-b-balken { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--f) 20%, transparent); overflow: hidden; margin-top: 3px; }
.pw-b-balken i { display: block; height: 100%; border-radius: 99px; background: var(--f); width: var(--w, 0%); transition: width .45s var(--kurve); } */
.pw-b.k-trenner { flex: 0 0 auto; min-width: 54px; padding: 12px 8px 10px; text-align: center; }
.pw-b.k-trenner .pw-b-text { font-size: 24px; }
.pw-b.neu { animation: pw-ein .32s var(--kurve) backwards; }
@keyframes pw-ein { from { opacity: 0; transform: translateY(8px); } }

/* ── Messer: gestapelte Beiträge ── */
/* .pw-messer-kopf (Lauf 2 entfallen): .pw-messer-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; } */
.pw-messer-summe { font: 700 26px/1.2 var(--mono); color: var(--stufe); }
.pw-messer { position: relative; display: flex; height: 26px; border-radius: 99px; overflow: hidden; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie); }
.pw-messer i { display: block; height: 100%; flex: none; width: var(--w, 0%); background: var(--f, var(--k-zufall)); border-right: 2px solid var(--flaeche); transition: width .45s var(--kurve), background .2s; }
.pw-messer i:last-child { border-right: 0; }
.pw-messer i.k-pw { --f: var(--k-pw); } .pw-messer i.k-wort { --f: var(--k-wort); } .pw-messer i.k-tastatur { --f: var(--k-tastatur); } .pw-messer i.k-folge { --f: var(--k-folge); }
.pw-messer i.k-wiederholung { --f: var(--k-wiederholung); } .pw-messer i.k-jahr, .pw-messer i.k-datum { --f: var(--k-datum); } .pw-messer i.k-zufall { --f: var(--k-zufall); } .pw-messer i.k-trenner { --f: var(--k-trenner); }
.pw-messer i.anordnung { --f: var(--sehr-leise); opacity: .55; }
.pw-skala { position: relative; height: 54px; margin: 12px 0 4px; }
.pw-skala.pw-skala-band { height: 6px; margin: 8px 0 18px; }   /* Ergebnis: nur das Farbband, die Beschriftungen stehen im Kasten "Zerlegung im Detail" */
.pw-skala .band { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 99px; opacity: .9; }
.pw-skala span { position: absolute; top: 8px; transform: translateX(-50%); display: grid; justify-items: center; font-size: 12.5px; color: var(--leise); line-height: 1.25; white-space: nowrap; }
.pw-skala span::before { content: ""; width: 2px; height: 5px; background: var(--linie-stark); margin-bottom: 2px; }
.pw-skala span.ende { transform: translateX(-100%); justify-items: end; }
.pw-skala b { font: 700 13.5px var(--mono); color: var(--text); }
.pw-skala span.erste { transform: none; justify-items: start; }
.pw-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 18px; padding: 0; font-size: 14px; color: var(--leise); }
.pw-legende li { display: inline-flex; align-items: center; gap: 7px; }
.pw-legende i { width: 11px; height: 11px; border-radius: 4px; background: var(--f); }
.pw-legende .k-pw { --f: var(--k-pw); } .pw-legende .k-wort { --f: var(--k-wort); } .pw-legende .k-tastatur { --f: var(--k-tastatur); } .pw-legende .k-folge { --f: var(--k-folge); }
.pw-legende .k-wiederholung { --f: var(--k-wiederholung); } .pw-legende .k-jd { --f: var(--k-datum); } .pw-legende .k-zufall { --f: var(--k-zufall); } .pw-legende .k-trenner { --f: var(--k-trenner); } .pw-legende .k-anordnung { --f: var(--sehr-leise); }

/* ── Detailzeilen ── */
.pw-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pw-d { display: grid; grid-template-columns: minmax(0, 11ch) 1fr auto; gap: 4px 14px; align-items: baseline; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.pw-d.an { background: var(--flaeche-2); border-color: var(--linie-stark); }
.pw-d-text { font: 500 17px var(--mono); color: var(--f, var(--text)); overflow-wrap: anywhere; }
.pw-d-erkl { font-size: 14.5px; color: var(--leise); line-height: 1.4; }
.pw-d-erkl b { color: var(--text); font-weight: 700; }
.pw-d-bit { font: 700 15px var(--mono); text-align: right; white-space: nowrap; }
.pw-d.k-pw { --f: var(--k-pw); } .pw-d.k-wort { --f: var(--k-wort); } .pw-d.k-tastatur { --f: var(--k-tastatur); } .pw-d.k-folge { --f: var(--k-folge); }
.pw-d.k-wiederholung { --f: var(--k-wiederholung); } .pw-d.k-jahr, .pw-d.k-datum { --f: var(--k-datum); } .pw-d.k-zufall { --f: var(--k-zufall); } .pw-d.k-trenner { --f: var(--k-trenner); }

/* ── Kennzahlen ── */
/* gleichmäßiges 2er-Raster, gleich breite Zellen (Lauf 2) */
.pw-werte, .pw-knack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-werte .wert, .pw-knack .wert { grid-template-columns: 1fr; }
.pw-werte .wert-zahl { font-size: 19px; }
.pw-werte .wert.haupt { grid-column: 1 / -1; }
.pw-werte .wert.haupt .wert-zahl { color: var(--stufe, var(--text)); }
.pw-werte[data-stufe="0"] { --stufe: var(--st0); } .pw-werte[data-stufe="1"] { --stufe: var(--st1); } .pw-werte[data-stufe="2"] { --stufe: var(--st2); } .pw-werte[data-stufe="3"] { --stufe: var(--st3); } .pw-werte[data-stufe="4"] { --stufe: var(--st4); }
/* .pw-werte .wert.breit-mobil { grid-column: 1 / -1; }   — Lauf 2: alle Zellen gleich breit */
.pw-knack .wert-label { white-space: normal; line-height: 1.25; }
.pw-knack .wert-zahl { font-size: 19px; }
.pw-arten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.pw-arten span { font: 700 14px var(--mono); padding: 3px 9px; border-radius: 8px; border: 1px solid var(--linie); color: var(--sehr-leise); }
.pw-arten span.an { color: var(--text); border-color: var(--linie-stark); background: var(--flaeche); }
.pw-arten span.an[data-a="kl"] { color: var(--k-wort); } .pw-arten span.an[data-a="gr"] { color: var(--k-wiederholung); } .pw-arten span.an[data-a="zi"] { color: var(--k-folge); }
.pw-arten span.an[data-a="sy"] { color: var(--k-datum); } .pw-arten span.an[data-a="ux"] { color: var(--k-tastatur); }

/* ── Hinweise, Check ── */
.pw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pw-liste li { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 11px; align-items: start; font-size: 15.5px; line-height: 1.45; padding: 10px 12px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.pw-liste .ik { width: 22px; height: 22px; margin-top: 1px; color: var(--c); }
.pw-liste li.warn { --c: var(--st0); } .pw-liste li.tipp { --c: var(--st2); } .pw-liste li.gut { --c: var(--st4); } .pw-liste li.ok { --c: var(--st4); } .pw-liste li.nein { --c: var(--st0); }
.pw-liste li.warn, .pw-liste li.nein { border-color: color-mix(in srgb, var(--c) 35%, var(--linie)); }
.pw-quelle { font: 700 12px var(--mono); letter-spacing: .04em; color: var(--leise); border: 1px solid var(--linie-stark); border-radius: 6px; padding: 1px 6px; margin-top: 2px; }
.pw-status { font-size: 13px; font-weight: 700; color: var(--c); display: block; }
.pw-leer-text { margin: 0; }

/* ── Ergebniszeile: Bit + eine Knackzeit, zwei gleich breite Zellen ── */
.pw-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pw-zeile-teil { min-width: 0; display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); }
.pw-zeile-label { font-size: 14px; font-weight: 700; color: var(--leise); }
.pw-zeile-wert { font: 700 26px/1.2 var(--mono); color: var(--stufe); overflow-wrap: anywhere; }
.pw-zeile-z { font-size: 14px; color: var(--leise); }
.fb-inhalt .pw-klein:first-child { margin-top: 0; }
.fb-faltbar .fb-inhalt { margin-top: 14px; }
.pw-eingabe .pw-leer { margin-top: 16px; }

/* ── Über dieses Tool (Tool-Profil, SEO/GEO) und Hilfe & Infos: gleiche Spalte ── */
.tool-profil { margin-top: 18px; padding: 20px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); min-width: 0; }
.tool-profil-titel { margin: 0 0 10px; font: 700 15px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); display: flex; align-items: center; gap: 9px; }
.tool-profil-titel::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--a1); }
.tool-profil h3 { margin: 18px 0 8px; font: 700 16px/1.3 var(--schrift); color: var(--text); }
.tool-profil p { margin: 0 0 10px; color: var(--leise); line-height: 1.6; }
.tool-profil-einl { color: var(--text); }
.tool-profil-liste { margin: 0; padding: 0 0 0 20px; color: var(--leise); line-height: 1.55; display: grid; gap: 4px; }
.tool-profil-faq { display: grid; gap: 8px; margin-top: 8px; }
.tool-profil-faq details { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 0 16px; }
.tool-profil-faq summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tool-profil-faq summary::-webkit-details-marker { display: none; }
.tool-profil-faq summary::after { content: "+"; margin-left: auto; font: 500 22px/1 var(--mono); color: var(--sehr-leise); transition: transform 0.25s var(--kurve); }
.tool-profil-faq details[open] summary::after { transform: rotate(45deg); }
.tool-profil-faq details p { margin: 0 0 14px; }
.wissen-raster { grid-template-columns: minmax(0, 1fr); }
.wissen details p + p { margin-top: -6px; }

/* ── Desktop (≥ 761 px) ── */
@media (min-width: 761px) {
  .pw-ergebnis { padding: 24px; }
  .pw-zeile-teil { padding: 14px 16px; }
}
/* (alt) @media (max-width: 980px) { .pw-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eingabe" "buehne" "rechts" "hinweise" "check"; } } */

/* ── Handy (≤ 760 px): dieselbe Reihenfolge in einer Spalte, Eingabe zuerst ── */
@media (max-width: 760px) {
  .kopf-glyphe { width: 70px; }
  .kopf-glyphe img { width: 58px; max-height: 38px; }
  .pw-zeile-wert, .pw-messer-summe { font-size: 18px; }
  .pw-lokal { font-size: 13px; white-space: nowrap; }
  .pw-eingabe .tafel-titel { font-size: 14px; }
  .pw-zeile { gap: 8px; } .pw-zeile-teil { padding: 10px 12px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}
@media (max-width: 640px) {
  .pw-bausteine { gap: 6px; }
  .pw-b { padding: 10px 9px 8px; }
  .pw-b-text { font-size: 22px; }
  .pw-b-art { font-size: 13px; }
  .pw-b-bit { font-size: 15px; }
  .pw-d { grid-template-columns: 1fr auto; }
  .pw-d-text { grid-column: 1; } .pw-d-bit { grid-column: 2; grid-row: 1; } .pw-d-erkl { grid-column: 1 / -1; }
  .pw-werte, .pw-knack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rahmen-pw input { padding: 13px 12px; }
  /* .pw-lokal span { display: none; }  — Lauf 2: Abzeichen-Text bleibt, es gibt nur noch einen Zusagesatz
  .pw-lang { display: none; } .pw-kurz { display: block; font-size: 13.5px; } */
  .pw-skala span.mobil-aus { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pw-b.neu { animation: none; } }