/* ── tool.css — Charakter „IBAN Validator“ ───────────────────────────────────────────────────────────────────
   WAS:   Bausteinfarben (jede Rolle in der IBAN hat ihre Farbe: Land · Prüfziffern · Bank · Filiale · Konto · nationale
          Prüfziffer · Zusatz), Hauptbild „Streifen“ (jedes Zeichen der IBAN als Zelle, Zellen gruppiert zu Bausteinen, Soll-Zellen
          gestrichelt), Prüfrechnung in drei Schritt-Karten, Urteil-Banner, Erzeugen- und Stapel-Ansicht.
   WARUM: Das Tool lebt von der Einsicht, WIE eine IBAN gebaut ist und WARUM sie gültig oder falsch ist. Die Farbe eines Bausteins
          bleibt überall gleich: im Streifen, an der Kachel, im Stapel — Tippfehler und Rechnung sieht man dann an derselben Stelle.
   WIE ÄNDERN: Akzente --a1 (Bank) · --a2 (Prüfziffern) · --a3 (Konto) und die übrigen Rollenfarben unten (--c-*) in beiden
          Themen (dunkel = Grund, hell = Medienabfrage + data-thema). Grundbausteine (Tafel, Feld, Kachel, Chip …) in ../_werk/werk.css.
   LAUF 2 (27.10.): Kopf-Icon = Original-PNG; Bausteinliste .b-fl statt Kacheln; IBAN-Box .b-iban; Zusammenfassungszeile .b-summe; eingeklappte Kästen (.fb-*
          kommen aus werk.css); Tool-Profil .tool-profil (Text in index.html + js/texte.js). Entfallenes ist auskommentiert.
   Kennung der Klassen: b- (iban-validator). Rollenklassen: r-land r-pruefziffer r-bank r-filiale r-konto r-pruef r-zusatz r-rest. */
:root { --a1: #2dd4bf; --a2: #fbbf24; --a3: #f472b6; --a1-tinte: #042f2e;
  --c-land: #94a3b8; --c-filiale: #60a5fa; --c-pruef: #fb923c; --c-zusatz: #a78bfa; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #0f766e; --a2: #b45309; --a3: #be185d; --a1-tinte: #f0fdfa;
  --c-land: #5b6678; --c-filiale: #1d4ed8; --c-pruef: #c2410c; --c-zusatz: #6d28d9; } }
:root[data-thema="hell"] { --a1: #0f766e; --a2: #b45309; --a3: #be185d; --a1-tinte: #f0fdfa;
  --c-land: #5b6678; --c-filiale: #1d4ed8; --c-pruef: #c2410c; --c-zusatz: #6d28d9; }

.r-land, .r-rest { --rc: var(--c-land); } .r-pruefziffer { --rc: var(--a2); } .r-bank { --rc: var(--a1); } .r-filiale { --rc: var(--c-filiale); }
.r-konto { --rc: var(--a3); } .r-pruef { --rc: var(--c-pruef); } .r-zusatz { --rc: var(--c-zusatz); }

/* Tool-Icon im Kopf (Original-PNG, breit, transparent) auf neutralem Grund */
.kopf-glyphe { width: 82px; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }
.kopf-glyphe img { display: block; width: 68px; height: auto; max-height: 44px; object-fit: contain; }

/* Datenschutz-Zeile unter dem Eingabefeld, Tabs */
.b-lokal { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: 14.5px; color: var(--leise); }
.b-lokal svg { width: 17px; height: 17px; flex: none; color: var(--a1); }
/* Lauf 2: großes Datenschutz-Band entfällt
.b-privat { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r); font-size: 15px; color: var(--text);
  background: color-mix(in srgb, var(--a1) 11%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--a1) 35%, transparent); }
.b-privat svg { width: 20px; height: 20px; flex: none; color: var(--a1); }
*/
.b-tabs { margin: 0 0 14px; }
.b-tabs .segment { display: flex; max-width: 560px; }
.b-tabs .segment button { flex: 1; min-height: 46px; font-size: 16px; }
.segment button[aria-selected="true"] { background: color-mix(in srgb, var(--a1) 14%, var(--flaeche)); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 0 0 1px var(--linie-stark); }
.segment button[aria-pressed="true"] { background: color-mix(in srgb, var(--a1) 14%, var(--flaeche)); }
.segment button:focus-visible { box-shadow: var(--fokus); }

/* Raster je Ansicht */
.b-raster { display: grid; gap: 14px; align-items: start; }
.b-r-pruefen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "links bild" "kasten kasten"; }
.b-links { grid-area: links; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .b-bild { grid-area: bild; } .b-kaesten { grid-area: kasten; display: grid; gap: 14px; min-width: 0; }
/* Lauf 2 alt: grid-template-areas: "ein bild" "rech rech" "det det"; .b-rech/.b-det entfallen (Prüfrechnung und Angaben sind Kästen bzw. Liste) */
.b-r-erzeugen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "ein aus"; }
.b-eein { grid-area: ein; } .b-rechts { grid-area: aus; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.b-r-stapel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "ein aus"; }
.b-sein { grid-area: ein; } .b-saus { grid-area: aus; }
.b-satz { margin: 0 0 14px; color: var(--leise); font-size: 15px; line-height: 1.5; max-width: 80ch; }
.b-klein { font-size: 14px; margin: 14px 0 0; }
.b-leerhinweis { color: var(--leise); margin: 6px 0; }
.b-leerhinweis:empty { display: none; }
.b-leerhinweis.ok { color: var(--ok); font-weight: 700; }
.b-inline { margin: 0; white-space: nowrap; }
.b-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.b-aktionen:empty { display: none; }
.b-aktionen .ikon-knopf .knopf-text { display: inline; font-size: 15px; }

/* Eingabe: Zähler im Feld, Urteil, Meldung, Beispiele */
.b-ein .feld-rahmen input { letter-spacing: 0; font-size: clamp(15.5px, 4.3vw, 21px); }
.feld-einheit { font-size: 15px; white-space: nowrap; }
.b-urteil { --uf: var(--leise); display: flex; gap: 13px; align-items: center; margin-top: 4px; padding: 13px 16px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); }
.b-urteil-ik { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--grund);
  background: var(--uf); transition: background .25s; }
.b-urteil-ik svg { width: 22px; height: 22px; }
.b-urteil-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.b-urteil-text strong { font: 700 20px/1.2 var(--titel); color: var(--uf); }
.b-urteil-text span { font-size: 15px; line-height: 1.4; color: var(--leise); }
.b-urteil[data-z="leer"] .b-urteil-ik, .b-urteil[data-z="tippen"] .b-urteil-ik { background: var(--flaeche-3); color: var(--leise); }
.b-urteil[data-z="ok"] { --uf: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--flaeche)); }
.b-urteil[data-z="warn"] { --uf: var(--hinweis); border-color: color-mix(in srgb, var(--hinweis) 45%, transparent); background: color-mix(in srgb, var(--hinweis) 9%, var(--flaeche)); }
.b-urteil[data-z="fehler"] { --uf: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 45%, transparent); background: var(--fehler-grund); }
.b-urteil[data-z="tippen"] .b-urteil-text strong, .b-urteil[data-z="leer"] .b-urteil-text strong { color: var(--text); }
.b-meldung { line-height: 1.7; }
.b-meldung .b-vorschlag { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 6px; color: var(--leise); }
.b-meldung .b-vorschlag code { color: var(--text); font-size: 15px; }
.b-bsp .chip, .b-kaesten .chip { font-family: var(--mono); letter-spacing: 0.04em; }
.chip small { font-family: var(--schrift); }

/* ── Hauptbild: der Streifen ── */
.b-streifen { display: flex; flex-wrap: wrap; gap: 16px 12px; align-items: flex-start; margin: 4px 0 6px; }
.b-streifen:empty { display: none; }
.b-seg { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.b-zellen { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.b-z { width: clamp(21px, 2.55vw, 33px); height: clamp(32px, 3.6vw, 46px); display: grid; place-items: center; border-radius: 8px;
  font: 700 clamp(15px, 1.9vw, 24px)/1 var(--mono); color: var(--text); position: relative;
  background: color-mix(in srgb, var(--rc) 20%, var(--flaeche-2)); box-shadow: inset 0 -3px 0 var(--rc); transition: transform .15s, background .2s; }
.b-z.neu { animation: z-ein .35s var(--kurve); }
@keyframes z-ein { from { transform: translateY(5px) scale(.9); opacity: .2; } }
.b-z.geist { background: transparent; box-shadow: none; border: 1.5px dashed var(--linie-stark); }
.b-z.schlecht { background: var(--fehler-grund); color: var(--fehler); box-shadow: inset 0 -3px 0 var(--fehler), 0 0 0 1.5px var(--fehler); }
.b-seg.hot .b-z { transform: translateY(-3px); background: color-mix(in srgb, var(--rc) 34%, var(--flaeche-2)); }
.b-seg-label { max-width: 10em; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; color: var(--rc); }
.b-streifen.leise { opacity: .55; }

/* Bausteinliste unter dem Streifen: eine Zeile je Baustein (Farbstreifen links, Name, Wert, Kopieren) */
.b-fl { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.b-fl:empty { display: none; }
.b-f { display: grid; grid-template-columns: minmax(130px, 36%) minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 52px; padding: 6px 8px 6px 14px;
  border-radius: var(--r-klein); background: var(--flaeche-2); border: 1px solid var(--linie); border-left: 5px solid var(--rc); }
.b-f.hot { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 10%, var(--flaeche-2)); }
.b-f-name { font-size: 14.5px; font-weight: 700; color: var(--leise); line-height: 1.25; }
.b-f-wert { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.b-f-wert code { font: 700 19px/1.35 var(--mono); letter-spacing: 0.05em; color: var(--text); overflow-wrap: anywhere; }
.b-f-z { font-size: 14px; color: var(--leise); }
.b-f.leise .b-f-wert { color: var(--sehr-leise); font-size: 16px; }
.b-f .kopier { width: 38px; height: 38px; }
/* Lauf 2 alt: Feld-Kacheln (.b-felder, .b-detwerte)
/* Feld-Kacheln unter dem Streifen: jede mit Farbpunkt, kopierbar */
.b-felder { margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.b-felder:empty { display: none; }
.wert[class*="r-"] .wert-label::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: var(--rc); vertical-align: -1px; }
.wert[class*="r-"] .wert-zahl { letter-spacing: 0.05em; }
.wert.hot { border-color: var(--rc); }
.wert.leise .wert-zahl { color: var(--sehr-leise); font-size: 18px; }
.b-detwerte { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.b-detwerte .wert.breit { grid-column: span 2; }
*/

/* Eingabefeld: ×-Löschknopf im Feld */
.b-x { flex: none; width: 44px; height: 44px; margin-right: 4px; border-radius: 12px; border: 0; background: transparent; color: var(--leise); display: grid; place-items: center; transition: background .15s, color .15s; }
.b-x:hover { background: var(--flaeche-3); color: var(--text); }
.b-x svg { width: 22px; height: 22px; }

/* IBAN in Papierform (Prüfen und Erzeugen): groß, mit Kopieren und kleinem Knopf ohne Leerzeichen */
.b-iban { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.b-iban-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.b-iban-zeile { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.b-iban-text { flex: 1; min-width: 0; font: 700 clamp(19px, 2.1vw, 25px)/1.4 var(--mono); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.b-roh { height: 34px; font-size: 14px; }
.b-grenze { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--leise); }
.b-summe { margin: 0; font: 700 18px/1.4 var(--titel); }
.b-summe:empty { display: none; }

/* Kästen: Weitere Angaben */
.b-bban { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.b-bban:empty { display: none; }
.b-bban-label { font-size: 14.5px; font-weight: 700; color: var(--leise); }
.b-bban code { font: 700 18px/1.4 var(--mono); letter-spacing: 0.05em; overflow-wrap: anywhere; min-width: 0; }
.b-stellen { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.b-stellen li { display: flex; flex-wrap: wrap; gap: 0 12px; padding: 6px 12px; border-left: 5px solid var(--rc); background: var(--flaeche-2); border-radius: var(--r-klein); font-size: 15px; }
.b-st-name { font-weight: 700; min-width: 11em; }
.b-st-text { color: var(--leise); }
.b-kaesten .chips { margin-top: 8px; }

/* ── Prüfrechnung: drei Schritt-Karten ── */
.b-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.b-schritte:empty { display: none; }
.b-schritt { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 14px 16px 16px; min-width: 0; }
.b-schritt h3 { margin: 0 0 4px; font: 700 17px/1.25 var(--titel); }
.b-schritt .b-s-text { margin: 0 0 10px; color: var(--leise); font-size: 14.5px; line-height: 1.45; }
.b-rzahl { font: 500 19px/1.65 var(--mono); overflow-wrap: anywhere; word-break: break-all; letter-spacing: 0.02em; }
.b-rzahl .kopf { color: var(--a2); font-weight: 700; }
.b-rzahl .buchst { color: var(--a3); font-weight: 700; border-bottom: 2px solid var(--a3); }
.b-rzahl .alt { color: var(--sehr-leise); }
.b-rzahl.pfeil { line-height: 1.1; padding: 2px 0; color: var(--sehr-leise); }
.b-rzahl.eins { line-height: 1.4; }
.b-rzeilen { display: flex; flex-direction: column; gap: 4px; font: 500 16px/1.45 var(--mono); }
.b-rz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.b-rz .zahl { overflow-wrap: anywhere; word-break: break-all; }
.b-rz .vor { color: var(--a3); font-weight: 700; }
.b-rz .op { color: var(--sehr-leise); font-size: 14px; white-space: nowrap; }
.b-rz .r { font-weight: 700; }
.b-rz.letzte .r { padding: 0 7px; border-radius: 7px; background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.b-rz.letzte.falsch .r { background: var(--fehler-grund); color: var(--fehler); }
.b-fazit { margin: 14px 0 0; font: 700 18px/1.35 var(--titel); }
.b-fazit.ok { color: var(--ok); } .b-fazit.nein { color: var(--fehler); }
.b-fazit:empty { display: none; }

/* ── Erzeugen ── */
.b-erz-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.b-land { flex: 1 1 220px; }
.b-select { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: transparent; outline: none; padding: 12px 40px 12px 14px; font: 500 18px/1.2 var(--schrift); color: var(--text); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.b-select option { background: var(--flaeche); color: var(--text); }
.b-erz-kopf .ikon-knopf { height: 52px; }
.b-erz-kopf .ikon-knopf .knopf-text { display: inline; font-size: 15px; }
.b-efelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.b-ef .feld-label::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: var(--rc); vertical-align: -1px; }
.b-ef .feld-rahmen input { font-size: 20px; padding: 10px 12px; letter-spacing: 0.06em; }
.b-ef .feld-rahmen:focus-within { border-color: var(--rc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 45%, transparent); }
.b-ef .feld-einheit { padding-right: 12px; font-size: 13.5px; }
.b-ef .meldung { margin-top: 5px; font-size: 13.5px; }
.b-ewerte { margin-top: 12px; grid-template-columns: 1fr; }
.b-ewerte:empty { display: none; }
.b-erechnung { margin: 12px 0 0; color: var(--leise); font-size: 14.5px; line-height: 1.5; }
.b-erechnung:empty { display: none; }
.b-erechnung b { color: var(--text); font-family: var(--mono); }

/* ── Stapel ── */
.b-zeilen { margin-left: auto; font-size: 14px; color: var(--sehr-leise); white-space: nowrap; }
.b-area { align-items: stretch; }
.b-area textarea { width: 100%; min-height: 200px; resize: vertical; border: 0; background: transparent; outline: none; padding: 12px 14px; font: 500 17px/1.55 var(--mono); color: var(--text); }
.b-area textarea::placeholder { color: var(--sehr-leise); }
.b-datei { position: relative; cursor: pointer; }
.b-datei input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.b-datei:focus-within { box-shadow: var(--fokus); }
.b-swerte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-swerte .wert { grid-template-columns: 1fr; }
.b-swerte .wert-zahl { font-size: 28px; font-weight: 700; }
.b-swerte .wert.gut .wert-zahl { color: var(--ok); } .b-swerte .wert.schlecht .wert-zahl { color: var(--fehler); } .b-swerte .wert.dupe .wert-zahl { color: var(--hinweis); }
.b-sleiste { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 16px 0 10px; }
.b-sleiste .b-aktionen { margin-top: 0; }
.b-filter { display: inline-flex; gap: 10px; align-items: center; }
.b-leerkasten { text-align: center; padding: 22px 8px; color: var(--leise); }
.b-leerkasten strong { font: 700 22px var(--titel); color: var(--text); }
.b-leerkasten p { margin: 6px 0 0; }
.b-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 620px; overflow: auto; }
.b-liste:empty { display: none; }
.b-liste:focus-visible { box-shadow: var(--fokus); border-radius: var(--r-klein); }
.b-zeile { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 10px 9px 12px; border-radius: var(--r-klein); background: var(--flaeche-2); border: 1px solid var(--linie); }
.b-zeile .ik { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--grund); background: var(--ok); }
.b-zeile.schlecht .ik { background: var(--fehler); } .b-zeile .ik svg { width: 16px; height: 16px; }
.b-zeile .iban { font: 500 17px/1.3 var(--mono); letter-spacing: 0.03em; overflow-wrap: anywhere; }
.b-zeile .info { font-size: 14px; color: var(--leise); display: flex; flex-wrap: wrap; gap: 0 10px; }
.b-zeile.schlecht .info .grund { color: var(--fehler); }
.b-zeile .dupe { color: var(--hinweis); font-weight: 700; }
.b-zeile .hauptspalte { min-width: 0; }
.b-zeile .ikon-knopf { height: 36px; font-size: 14px; }
.b-zeile .ikon-knopf .knopf-text { display: inline; }

/* Tablet */
@media (max-width: 980px) {
  .b-r-pruefen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "bild" "kasten"; }
  .b-r-erzeugen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ein" "aus"; }   /* Lauf 2: Eingabe zuerst, Ergebnis darunter (vorher umgekehrt) */
  .b-r-stapel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ein" "aus"; }
  .b-schritte { grid-template-columns: minmax(0, 1fr); }
}
/* Handy */
@media (max-width: 640px) {
  .b-tabs .segment button { padding-left: 4px; padding-right: 4px; }
  .b-streifen { gap: 14px 8px; }
  .b-z { width: 21px; height: 33px; font-size: 15.5px; }
  .b-zellen { gap: 2px; }
  .b-seg-label { font-size: 12px; }
  .b-f { grid-template-columns: minmax(0, 1fr) auto; }
  .b-f-name { grid-column: 1; } .b-f-wert { grid-column: 1; } .b-f .kopier { grid-column: 2; grid-row: 1 / span 2; }
  .b-iban-text { font-size: 18px; }
  .b-st-name { min-width: 0; flex-basis: 100%; }
  .b-liste { max-height: none; overflow: visible; }   /* Lauf 2: kein zweiter Scrollbereich am Handy */
  .b-urteil-text strong { font-size: 18px; }
  .b-zeile { grid-template-columns: 28px minmax(0, 1fr); }
  .b-zeile .ikon-knopf { grid-column: 2; justify-self: start; }
  .b-erz-kopf .ikon-knopf { width: 100%; }
  .b-rzahl { font-size: 17px; }
  .b-rzeilen { font-size: 15px; }
}

/* Kopf-Icon am Handy (Handy-Feinschliff getrennt vom Desktop) */
@media (max-width: 760px) {
  .kopf-glyphe { width: 70px; }
  .kopf-glyphe img { width: 58px; max-height: 38px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}

/* ── Tool-Profil (SEO/GEO): „Über dieses Tool“, statisch im HTML ── */
.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; }