/* Prüfseite „Ist das echt?“ im Stil von kessleritsolutions.de: hell/dunkel, grüner Akzent,
   Mono-Überzeilen. Keine externen Schriften, nur Systemschriften. */
:root {
  --hinter: #f4f5f1;
  --karte: #ffffff;
  --text: #191c1b;
  --grau: #4f5753;
  --rand: #d9ddd8;
  --rand-stark: #8e9893;
  --akzent: #1f6a45;
  --akzent-text: #ffffff;
  --akzent-zart: #e6f1ea;
  --rot: #b3261e;
  --rot-zart: #fdecea;
  --gelb: #8a5a00;
  --gelb-zart: #fff4d6;
  --gruen: #1f6a45;
  --gruen-zart: #e3f2e8;
  --radius: 10px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

/* Dunkel: wie die Webseite. Folgt dem System, außer man hat oben umgeschaltet. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hinter: #1b1e1d;
    --karte: #222726;
    --text: #eceeed;
    --grau: #a3aca8;
    --rand: #343a38;
    --rand-stark: #5d6663;
    --akzent: #5cbf86;
    --akzent-text: #0f1a14;
    --akzent-zart: #22362b;
    --rot: #ff8a80;
    --rot-zart: #3a2120;
    --gelb: #f3c35b;
    --gelb-zart: #3a3120;
    --gruen: #6fd09a;
    --gruen-zart: #1f3529;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --hinter: #1b1e1d;
  --karte: #222726;
  --text: #eceeed;
  --grau: #a3aca8;
  --rand: #343a38;
  --rand-stark: #5d6663;
  --akzent: #5cbf86;
  --akzent-text: #0f1a14;
  --akzent-zart: #22362b;
  --rot: #ff8a80;
  --rot-zart: #3a2120;
  --gelb: #f3c35b;
  --gelb-zart: #3a3120;
  --gruen: #6fd09a;
  --gruen-zart: #1f3529;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: var(--hinter);
}

a { color: var(--akzent); }

/* Kopfzeile wie auf der Webseite */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1040px; margin: 0 auto; padding: 14px 16px;
}
.kopf-rand { border-bottom: 1px solid var(--rand); }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.marke img { width: 32px; height: auto; }
.marke .logo-hell { display: none; }
:root[data-theme="dark"] .marke .logo-dunkel { display: none; }
:root[data-theme="dark"] .marke .logo-hell { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marke .logo-dunkel { display: none; }
  :root:not([data-theme="light"]) .marke .logo-hell { display: block; }
}
.marke-text { display: flex; flex-direction: column; line-height: 1.1; }
.marke-text strong { font-size: .8rem; letter-spacing: .04em; }
.marke-text span { font-size: .62rem; color: var(--grau); }
.kopf-rechts { display: flex; align-items: center; gap: 8px; }
.kopf-link, .thema {
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--text); text-decoration: none;
  padding: 7px 12px; border: 1px solid var(--rand); border-radius: 8px; background: var(--karte); cursor: pointer;
}
.thema { padding: 7px 10px; line-height: 1; }

main { max-width: 680px; margin: 0 auto; padding: 32px 16px 40px; }

.ueberzeile {
  font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--akzent); margin: 0 0 10px;
}
h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 850; margin: 0 0 12px; }
h2 { font-size: 1.15rem; letter-spacing: -.01em; margin: 24px 0 8px; }
.unterzeile { color: var(--grau); margin: 0 0 24px; }

/* Karte wie der „IT-Monatsbericht“ */
.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 14px;
  padding: 20px; box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

label.gross { display: block; font-weight: 700; margin: 0 0 8px; }
label.gross.abstand { margin-top: 22px; }

textarea, input[type="text"] {
  width: 100%; font: inherit; padding: 12px 14px;
  border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--hinter); color: var(--text);
}
textarea::placeholder, input::placeholder { color: var(--grau); opacity: .8; }
textarea:focus, input:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.knopf {
  display: block; width: 100%; margin: 18px 0 0; padding: 15px 16px;
  font: inherit; font-size: 1.08rem; font-weight: 700;
  color: var(--akzent-text); background: var(--akzent); border: 1px solid var(--akzent); border-radius: var(--radius); cursor: pointer;
}
.knopf.zweit { background: var(--karte); color: var(--text); border-color: var(--rand-stark); }
.knopf:disabled { opacity: .6; cursor: wait; }

.link {
  display: block; margin: 12px auto 0; padding: 6px; font: inherit; font-size: .95rem;
  background: none; border: none; color: var(--akzent); text-decoration: underline; cursor: pointer;
}

.oder {
  display: flex; align-items: center; gap: 12px; color: var(--grau); margin: 14px 0 0;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.oder::before, .oder::after { content: ""; flex: 1; border-top: 1px solid var(--rand); }
.vorschau { margin-top: 12px; text-align: center; }
.vorschau img { max-width: 100%; max-height: 260px; border: 1px solid var(--rand); border-radius: var(--radius); }
.dateiname { text-align: center; font-weight: 600; margin: 4px 0 0; }

.haken { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .95rem; color: var(--grau); }
.haken input { width: 20px; height: 20px; accent-color: var(--akzent); }

.hinweis {
  background: var(--akzent-zart); padding: 12px 14px; border-radius: var(--radius); margin: 20px 0 0; font-size: .95rem;
}
.fehler {
  background: var(--rot-zart); color: var(--rot); border: 1px solid var(--rot);
  padding: 12px 14px; border-radius: var(--radius); font-weight: 600; margin: 16px 0 0;
}
.laeuft { text-align: center; font-weight: 600; color: var(--grau); }
.unsichtbar { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.vorteile { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--grau); }
.vorteile li::before { content: "✓ "; color: var(--akzent); font-weight: 700; }

/* Ergebnis: Farbe nie allein, immer mit Symbol und Text */
.ampel {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: var(--radius); border: 2px solid;
  font-size: 1.4rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em;
}
.ampel .symbol { font-size: 2.4rem; line-height: 1; }
.ampel.rot { color: var(--rot); background: var(--rot-zart); border-color: var(--rot); }
.ampel.gelb { color: var(--gelb); background: var(--gelb-zart); border-color: var(--gelb); }
.ampel.gruen { color: var(--gruen); background: var(--gruen-zart); border-color: var(--gruen); }

.kurzfazit { font-size: 1.15rem; font-weight: 600; margin: 16px 0 4px; }
.masche {
  display: inline-block; font-family: var(--mono); font-size: .8rem; color: var(--akzent);
  background: var(--akzent-zart); padding: 3px 10px; border-radius: 6px; margin: 4px 0 0;
}
.warnung { background: var(--rot); color: #fff; padding: 14px; border-radius: var(--radius); margin-top: 16px; }
:root[data-theme="dark"] .warnung { color: #2a0d0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warnung { color: #2a0d0b; } }
.warnung a { color: inherit; font-weight: 800; }
ul { padding-left: 1.2em; }
li { margin-bottom: 6px; }
.links { color: var(--grau); font-size: .9rem; word-break: break-all; font-family: var(--mono); }
.rueckfrage { margin-top: 8px; }
.klein { font-size: .9rem; color: var(--grau); }
.ok { color: var(--gruen); font-weight: 700; }
.haftung { margin-top: 24px; font-size: .88rem; color: var(--grau); border-top: 1px solid var(--rand); padding-top: 12px; }
.platzhalter { background: var(--gelb-zart); padding: 12px; border-radius: var(--radius); }

.fuss { border-top: 1px solid var(--rand); text-align: center; padding: 18px 16px; font-size: .9rem; color: var(--grau); }
.fuss a { color: var(--grau); }

@media (max-width: 480px) {
  .kopf-link { display: none; }
  main { padding-top: 24px; }
  .karte { padding: 16px; }
}