/* ══════════════════════════════════════════════════════════════
   OTP-Link · nur werkzeugeigene Stile, baut auf ../styles.css auf.
   Zustände nur über Helligkeit und Hairlines: Erfolg ist nicht grün
   (die Marke ist grün), Fehler sind nicht rot.
   ══════════════════════════════════════════════════════════════ */

/* Das hidden-Attribut muss gewinnen, auch gegen display:flex aus
   .formular__feld oder .otp-ansicht. */
.otp [hidden] { display: none !important; }

/* Mit JavaScript bleibt die Hinweis-Ansicht verborgen, bis otp-link.js
   entschieden hat (sonst blitzt "braucht JavaScript" kurz auf). */
.js .otp-ansicht[data-ansicht="hinweis"]:not([data-grund]) { display: none; }
.js .otp-ohne-js { display: none; }

.otp {
  /* Platz für die fixierte Kopf-Kapsel (top 12px + Höhe) */
  padding: calc(var(--kopf-hoehe) + 56px) var(--rand) 96px;
}
@media (min-width: 640px) {
  .otp { padding-top: calc(var(--kopf-hoehe) + 96px); padding-bottom: 128px; }
}

.bahn--otp { max-width: 720px; gap: 32px; }
.otp__kopf { display: flex; flex-direction: column; gap: 14px; }

/* ── Meldung (role=status) ──────────────────────────────────── */
/* Gleiches Muster wie .otp-warnung (umlaufende Hairline + "!"-Ring), kein
   Seitenstreifen: ein einziger Hinweis-Stil im Werkzeug (Kritik 24.09.). */
.otp-meldung {
  position: relative;
  margin: 0;
  padding: 14px 18px 14px 46px;
  border: .5px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  max-width: none;
  text-wrap: pretty;
  /* melde() scrollt die Meldung ins Bild; die fixierte Kopf-Kapsel darf sie nicht verdecken */
  scroll-margin-top: calc(var(--kopf-hoehe) + 24px);
}
.otp-meldung::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: .5px solid var(--text);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.otp-meldung:empty { display: none; }

/* Beschriftungen und Hinweise im Werkzeug lesbarer als der Seiten-Standard
   (10px bei 48 % Deckkraft lag knapp unter AA). Nur innerhalb von .otp. */
.otp .formular__feld label,
.otp .label--klein { font-size: 11px; color: var(--text-2); }
.otp .hinweis,
.otp .formular__notiz { font-size: 12px; color: var(--text-2); }
.otp-meldung strong { font-weight: 700; }

/* ── Ansichten ──────────────────────────────────────────────── */
.otp-ansicht { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.otp-ansicht:not([hidden]) { animation: otp-ein .45s var(--ease-out); }
@keyframes otp-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Überschriften bekommen den Fokus nur per Skript (Ansichtswechsel), damit
   Screenreader den Wechsel ansagen. Ein Rahmen darum wäre nur Unruhe. */
.otp-ansicht h2[tabindex="-1"]:focus { outline: none; }

.otp-karte {
  padding: clamp(20px, 4vw, 36px);
  border: .5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche-1);
}

.otp textarea { min-height: 7.5em; }
.otp .formular__feld input,
.otp .formular__feld textarea { width: 100%; min-width: 0; font-size: 16px; } /* 16px: iOS zoomt sonst beim Tippen */

.otp-zaehler {
  margin: 0;
  align-self: flex-end;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.otp-zaehler[data-zuviel] { color: var(--text); }

.otp .pille:disabled { opacity: .38; cursor: not-allowed; }
.otp .pille--jade:disabled:hover { opacity: .38; }
.otp .pille[aria-busy="true"] { cursor: progress; }

/* ── Erstellt ───────────────────────────────────────────────── */
.otp-link {
  margin: 0;
  max-width: none;
  padding: 14px 16px;
  border: .5px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche-2);
  font-family: var(--anzeige);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.otp-warnung {
  position: relative;
  margin: 0;
  max-width: none;
  padding: 14px 16px 14px 46px;
  border: .5px solid var(--linie-stark);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
.otp-warnung::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: .5px solid var(--text);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.otp-vorschau-block { display: flex; flex-direction: column; gap: 10px; }
.otp-vorschau {
  margin: 0;
  max-width: none;
  padding: 4px 0 4px 16px;
  border-left: .5px solid var(--linie-stark);
  color: var(--text-2);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.otp-aevum {
  margin: 8px 0 0;
  max-width: none;
  padding-top: 20px;
  border-top: .5px solid var(--linie);
  font-size: 12px;
  color: var(--text-2);
}

/* ── Inhalt (Empfänger) ─────────────────────────────────────── */
.otp-inhalt {
  margin: 0;
  padding: 16px 18px;
  border: .5px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche-2);
  font-family: var(--fliess);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 60vh;
  overflow: auto;
}
.otp-ansicht .pille { align-self: flex-start; }
.otp-ansicht .knopfreihe .pille { align-self: auto; }

/* ── Geräteliste ────────────────────────────────────────────── */
.otp-geraet { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.otp-geraet__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.otp-textknopf {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 4px;
  cursor: pointer;
}
.otp-textknopf:hover { color: var(--text); }

.otp-liste { margin: 0; padding: 0; list-style: none; }
.otp-liste__eintrag {
  display: grid;
  grid-template-columns: 11ch minmax(0, 1fr) auto;
  grid-template-areas: "zeit notiz knopf" "zeit zustand knopf";
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  padding: 12px 0;
  border-top: .5px solid var(--linie);
  font-size: 13px;
}
.otp-liste__eintrag:last-child { border-bottom: .5px solid var(--linie); }
.otp-liste__zeit { grid-area: zeit; color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.otp-liste__notiz { grid-area: notiz; color: var(--text); overflow-wrap: anywhere; }
.otp-liste__zustand { grid-area: zustand; color: var(--text-2); font-size: 12px; }
.otp-liste__eintrag[data-zustand="offen"] .otp-liste__zustand { color: var(--text); }
.otp-liste__knopf { grid-area: knopf; }
.otp-liste .pille { height: 34px; padding: 0 14px; }

@media (max-width: 559px) {
  .otp-liste__eintrag {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "zeit knopf" "notiz knopf" "zustand knopf";
  }
}

/* ══ Umbau 03.10.2026 (Dima) ══════════════════════════════════
   Text unter der H1, gerahmtes Geheimnis-Feld, Zusagen mit Haken,
   breiter Knopf mit Schloss, sechs Karten unter dem Formular. */

.otp__titelzeile {
  margin: 0;
  font-family: var(--anzeige);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--text);
  text-wrap: balance;
}
.otp__einleitung {
  margin: -4px 0 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Geheimnis-Feld: ringsum Jade statt nur Unterstrich. Fokus legt einen
   weichen Jade-Schein darum, Fehler bleibt hell (kein Rot). */
.otp #otp-geheimnis {
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid var(--jade);
  border-radius: 12px;
  background: var(--flaeche-2);
  line-height: 1.6;
  transition: box-shadow var(--dauer-zustand) var(--ease-out), border-color var(--dauer-zustand) var(--ease-out);
}
.otp #otp-geheimnis::placeholder { color: var(--text-3); opacity: 1; }
.otp #otp-geheimnis:focus { border-color: var(--jade); box-shadow: 0 0 0 3px #00c08b2e; }
.otp #otp-geheimnis[aria-invalid="true"] { border-color: var(--text); }

/* Zusagen: Jade-Kreis mit Haken in Grund-Schwarz (Text auf Jade nie weiß).
   Haken aus zwei Rahmenkanten, kein Bild: die CSS-Datei bleibt ohne Adressen. */
.otp-haken {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.otp-haken li {
  position: relative;
  min-height: 20px;
  padding-left: 32px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text);
}
.otp-haken li::before,
.otp-haken li::after {
  content: "";
  position: absolute;
  top: 50%;
}
.otp-haken li::before {
  left: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 9999px;
  background: var(--jade);
}
.otp-haken li::after {
  left: 7.5px;
  width: 5px;
  height: 9px;
  margin-top: -6px;
  border: solid var(--grund);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Hauptknopf: volle Kartenbreite, Schloss vor dem Text. */
.otp .otp-erzeugen {
  align-self: stretch;
  height: 52px;
  font-size: 12px;
}
.otp-erzeugen__schloss {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Was das Werkzeug kann ─────────────────────────────────── */
.otp-infos {
  margin-top: 32px;
  padding-top: 40px;
  border-top: .5px solid var(--linie-weich);
}
.otp-infos__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .otp-infos__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .otp-infos__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.otp-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 24px;
  border: .5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche-1);
}
.otp-info__zeichen {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #00c08b1a;
  color: var(--jade);
}
.otp-info__zeichen svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.otp-info__titel {
  margin: 0;
  font-family: var(--anzeige);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.otp-info p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ── Passwort-Generator (Dima 03.10.2026) ─────────────────────────
   Kleiner Auslöser in der Feldzeile, darunter eine aufklappbare Tafel mit Passwort,
   Stärke, Länge, Zeichenarten und zwei Knöpfen. Ziffern Jade, Sonderzeichen gedimmt. */
.otp-feldkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.otp-ausloeser {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: .5px solid var(--linie-stark); border-radius: 9999px;
  background: transparent; color: var(--text);
  font: 500 10px/1 var(--fliess); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dauer-hover) var(--ease-out);
}
.otp-ausloeser:hover, .otp-ausloeser[aria-expanded="true"] { border-color: var(--jade); }
.otp-ausloeser:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }
.otp-ausloeser svg { width: 14px; height: 14px; fill: none; stroke: var(--jade); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.otp-generator {
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px;
  border: .5px solid #00c08b4d; border-radius: 12px;
  background: #00c08b0a;
}
.otp-generator__ausgabe {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: .5px solid var(--linie-stark); border-radius: 10px;
  background: #141414;
}
.otp-generator__passwort {
  flex: 1; min-width: 0; margin: 0;
  font: 500 18px/1.45 var(--fliess); letter-spacing: .04em;
  color: var(--text); overflow-wrap: anywhere;
}
.otp-generator__passwort .z { color: var(--jade); }
.otp-generator__passwort .s { color: #f0f0f8a6; }
.otp-generator__rund {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px;
  border: .5px solid var(--linie-stark); border-radius: 9999px;
  background: transparent; color: var(--text); cursor: pointer;
}
.otp-generator__rund:hover { border-color: var(--jade); }
.otp-generator__rund:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }
.otp-generator__rund svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.otp-generator__staerke { display: flex; flex-direction: column; gap: 8px; }
.otp-generator__balken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.otp-generator__balken i { height: 3px; border-radius: 2px; background: var(--flaeche-3); }
.otp-generator__balken i.an { background: var(--text); }
.otp-generator__balken[data-stufe="4"] i.an { background: var(--jade); }
.otp-generator__staerke p { margin: 0; font-size: 12px; color: var(--text-2); }
.otp-generator__staerke b { color: var(--text); font-weight: 500; }
.otp-generator__reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.otp-generator__reihe .label { width: 100%; margin: 0; }
/* Keine Großschrift: sonst stünde aus „a–z“ ein zweites „A–Z“ da */
.otp-generator__reihe .pille--wahl { height: 34px; padding: 0 14px; font-size: 12px; letter-spacing: .04em; text-transform: none; }
.otp-generator__meldung { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text); }
.otp-generator__meldung:empty { display: none; }
@media (max-width: 480px) {
  .otp-generator { padding: 16px; }
  .otp-generator .knopfreihe .pille { flex: 1 1 100%; }
}