/*
 * Schlicht und ohne fremde Quellen: keine Webfonts, keine Icon-Bibliothek,
 * keine externen Stylesheets. Die Content-Security-Policy verbietet das
 * ohnehin — auf einer Seite, die Klartext-Geheimnisse anzeigt, hat kein
 * Drittanbieter etwas verloren.
 */

:root {
  --papier: #fbfbfa;
  --karte: #ffffff;
  --tinte: #1c1917;
  --gedaempft: #57534e;
  --leise: #78716c;
  --linie: #e7e5e4;
  --linie-stark: #d6d3d1;
  --akzent: #1c1917;
  --warnung: #9a3412;
  --warnung-grund: #fff7ed;
  --warnung-linie: #fed7aa;
  --gut: #14532d;
  --gut-grund: #f0fdf4;
  --gut-linie: #bbf7d0;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1c1917;
    --karte: #262322;
    --tinte: #f5f5f4;
    --gedaempft: #a8a29e;
    --leise: #8a8380;
    --linie: #3a3634;
    --linie-stark: #4a4644;
    --akzent: #f5f5f4;
    --warnung: #fdba74;
    --warnung-grund: #2a1a0e;
    --warnung-linie: #7c3f12;
    --gut: #86efac;
    --gut-grund: #0f2417;
    --gut-linie: #276140;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 20px 64px;
  background: var(--papier);
  color: var(--tinte);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 620px; margin: 0 auto; }

header { margin-bottom: 28px; }

h1 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.unterzeile { color: var(--gedaempft); font-size: 14px; margin: 0; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 18px;
}

.feld { margin-bottom: 20px; }
.feld:last-child { margin-bottom: 0; }

label, .beschriftung {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.hinweis {
  font-size: 13px;
  color: var(--gedaempft);
  margin: 6px 0 0;
}

input[type='text'], input[type='email'], input[type='number'], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie-stark);
  border-radius: 7px;
  background: var(--karte);
  color: var(--tinte);
  font: inherit;
}

textarea {
  min-height: 150px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.55;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: transparent;
}

.reihe { display: flex; gap: 14px; flex-wrap: wrap; }
.reihe > * { flex: 1 1 200px; }

.zeile-kontrolle { display: flex; align-items: flex-start; gap: 9px; }
.zeile-kontrolle input { margin-top: 3px; flex: 0 0 auto; }
.zeile-kontrolle label { margin: 0; font-weight: 400; font-size: 14px; }

button {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--akzent);
  color: var(--papier);
  cursor: pointer;
}

button:hover:not(:disabled) { opacity: 0.88; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.leise {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie-stark);
}

button.klein { padding: 7px 13px; font-size: 13px; }

.knopfleiste { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Kennwortanzeige — muss am Telefon vorlesbar sein, also groß und luftig. */
.kennwort {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  word-break: break-word;
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: 7px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.geheimnis {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: 7px;
  padding: 14px 16px;
  margin: 0 0 12px;
  max-height: 380px;
  overflow: auto;
}

.link-anzeige {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 7px;
  padding: 11px 13px;
  margin-bottom: 10px;
}

.merker {
  border-radius: 7px;
  padding: 13px 15px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid;
}

.merker.warnung { background: var(--warnung-grund); border-color: var(--warnung-linie); color: var(--warnung); }
.merker.gut     { background: var(--gut-grund);     border-color: var(--gut-linie);     color: var(--gut); }
.merker.neutral { background: var(--papier);        border-color: var(--linie);         color: var(--gedaempft); }
.merker p:first-child { margin-top: 0; }
.merker p:last-child  { margin-bottom: 0; }

dl.uebersicht { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 9px 18px; }
dl.uebersicht dt { color: var(--gedaempft); font-size: 13px; }
dl.uebersicht dd { margin: 0; font-size: 14px; word-break: break-word; }

.verborgen { display: none !important; }

.fussnote {
  font-size: 12.5px;
  color: var(--leise);
  text-align: center;
  margin-top: 26px;
  line-height: 1.55;
}

.laden {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: dreh 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 7px;
}

@keyframes dreh { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .laden { animation-duration: 2.4s; }
}

.zaehler { font-size: 12.5px; color: var(--leise); text-align: right; margin-top: 5px; }
.zaehler.knapp { color: var(--warnung); }

/*
 * Kleinigkeiten, die sonst als style-Attribut im HTML stünden.
 * Die Content-Security-Policy verbietet inline-Styles ('style-src self') —
 * bewusst, denn die Ausnahme dafür wäre dieselbe, die auch eingeschleusten
 * Stilen die Tür öffnet.
 */
.karten-titel { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.normal { font-weight: 400; }
.ruhig { margin: 0; color: var(--gedaempft); }

/* Element mit angeben — sonst gewinnen die spezifischeren Regeln von
   `dl.uebersicht dd` bzw. `dl.uebersicht` weiter oben. */
dl.uebersicht dd.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
dl.uebersicht.eng { margin-bottom: 20px; }
.vorspann { margin: 0 0 10px; }
.fehlermeldung { color: var(--warnung); }

ul.liste { margin: 0; padding-left: 20px; color: var(--gedaempft); }
ul.liste li + li { margin-top: 7px; }