/* Anatol-Akquise – Stil nach mollypuppet.com: weiße Fläche, schwarze Versalien, Blau als Akzent,
   Orange und Rot aus den Kostümfotos für die Kategorien. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fragment+Mono&display=swap');

:root {
  --ink: #111111; --grau: #7a7a7a; --hell: #f5f5f5; --linie: #e4e4e4; --papier: #ffffff;
  --blau: #0099ff; --blau-hell: #e6f4ff;
  --orange: #f28c28; --orange-hell: #fdeedd;
  --rot: #e63950; --rot-hell: #ffd8d9;
  --gruen: #135714; --gruen-hell: #e7fad4;
  --lila: #333296; --lila-hell: #d8c4ff;
  --akzent: var(--blau); --akzent-hell: var(--blau-hell);
  --mono: 'Fragment Mono', ui-monospace, Menlo, monospace;
  --sans: Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
body.kat-kita { --akzent: var(--orange); --akzent-hell: var(--orange-hell); }
body.kat-schule { --akzent: var(--blau); --akzent-hell: var(--blau-hell); }
body.kat-fest { --akzent: var(--rot); --akzent-hell: var(--rot-hell); }

* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--papier); line-height: 1.45; }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

header.kopf { border-bottom: 1px solid var(--linie); padding: 14px 28px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; position: sticky; top: 0; background: #fff; z-index: 5; }
.marke { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 1.05rem; }
.marke small { display: block; font-family: var(--mono); font-size: .68rem; color: var(--grau); text-transform: none; letter-spacing: 0; font-weight: 400; }
nav.haupt { display: flex; gap: 6px; flex-wrap: wrap; }
nav.haupt a { color: var(--ink); padding: 8px 12px; border-radius: 6px; font-weight: 500; font-size: .95rem; }
nav.haupt a:hover { background: var(--hell); text-decoration: none; }
nav.haupt a.aktiv { background: var(--ink); color: #fff; }
nav.haupt a.kita.aktiv { background: var(--orange); }
nav.haupt a.schule.aktiv { background: var(--blau); }
nav.haupt a.fest.aktiv { background: var(--rot); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--rot); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; margin-left: 4px; vertical-align: middle; }
.testmodus-hinweis { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: #7a4a00; background: var(--orange-hell); padding: 6px 10px; border-radius: 6px; }

main { padding: 28px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 2.2rem; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 4px; font-weight: 700; line-height: 1.05; }
h2 { font-size: 1.1rem; text-transform: uppercase; margin: 28px 0 10px; letter-spacing: .02em; }
.unter { font-family: var(--mono); color: var(--grau); font-size: .78rem; text-transform: uppercase; margin-bottom: 20px; }
.meldung { padding: 10px 14px; border-radius: 6px; margin: 0 0 18px; background: var(--gruen-hell); color: var(--gruen); font-weight: 500; }
.meldung.fehler { background: var(--rot-hell); color: #8a1020; }

.werkzeuge { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.werkzeuge input[type=text], .werkzeuge select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 6px; font: inherit; }
.zaehler { font-family: var(--mono); font-size: .78rem; color: var(--grau); margin-left: auto; }

table.liste { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.liste th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: .7rem; text-transform: uppercase; color: var(--grau); padding: 8px 8px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
table.liste td { padding: 9px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.liste tr:hover td { background: #fafafa; }
table.liste td.nr { font-family: var(--mono); color: var(--grau); font-size: .8rem; white-space: nowrap; }
table.liste td.name a { color: var(--ink); font-weight: 600; }
table.liste td .klein { display: block; color: var(--grau); font-size: .8rem; }
table.liste td.aktionen { white-space: nowrap; text-align: right; }
tr.gespielt td { color: var(--grau); background: var(--hell); }
tr.frist-nah td.frist { color: var(--rot); font-weight: 600; }

.status { display: inline-block; font-family: var(--mono); font-size: .68rem; padding: 2px 8px; border-radius: 10px; background: var(--hell); color: var(--grau); white-space: nowrap; }
.status.gesendet { background: var(--blau-hell); color: #0b5c99; }
.status.geantwortet { background: var(--lila-hell); color: var(--lila); }
.status.interessiert { background: var(--orange-hell); color: #7a4a00; }
.status.gebucht { background: var(--gruen-hell); color: var(--gruen); }
.status.abgesagt, .status.nicht.anschreiben { background: var(--rot-hell); color: #8a1020; }

button, .knopf { font: inherit; font-weight: 600; border: 1px solid var(--ink); background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: .86rem; line-height: 1.2; }
button:hover, .knopf:hover { background: var(--hell); text-decoration: none; }
button.primaer, .knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.primaer:hover, .knopf.primaer:hover { filter: brightness(.93); }
button.leise, .knopf.leise { border-color: var(--linie); color: var(--grau); font-weight: 500; }
button.klein, .knopf.klein { padding: 4px 9px; font-size: .78rem; }
form.inline { display: inline; }

.raster { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .raster { grid-template-columns: 1fr; } }
.karte { border: 1px solid var(--linie); border-radius: 10px; padding: 18px 20px; background: #fff; }
.karte.akzent { border-top: 4px solid var(--akzent); }
.karte h3 { margin: 0 0 4px; font-size: 1.15rem; }
.karte .art { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: var(--grau); margin-bottom: 12px; }
dl.daten { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; font-size: .9rem; }
dl.daten dt { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; color: var(--grau); padding-top: 3px; }
dl.daten dd { margin: 0; overflow-wrap: anywhere; }
dl.daten dd.gross { font-size: 1.05rem; font-weight: 600; }

form.formular label { display: block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; color: var(--grau); margin: 12px 0 4px; }
form.formular input[type=text], form.formular input[type=email], form.formular input[type=password], form.formular input[type=number], form.formular select, form.formular textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--linie); border-radius: 6px; font: inherit; font-size: .95rem; background: #fff; }
form.formular textarea { min-height: 360px; line-height: 1.5; resize: vertical; }
form.formular textarea.kurz { min-height: 90px; }
form.formular .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form.formular .aktionen { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.bausteine { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.bausteine button { background: var(--akzent-hell); border-color: transparent; font-weight: 500; }
.bausteine button:hover { background: var(--akzent); color: #fff; }
.hilfe { font-size: .8rem; color: var(--grau); margin-top: 6px; }

.verlauf { margin-top: 24px; }
.mail { border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.mail.ein { border-left: 5px solid var(--lila); }
.mail.aus { border-left: 5px solid var(--linie); }
.mail.ungelesen { background: var(--lila-hell); }
.mail .kopfzeile { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: .72rem; color: var(--grau); margin-bottom: 6px; }
.mail .betreff { font-weight: 600; margin-bottom: 6px; }
.mail pre { white-space: pre-wrap; font: inherit; margin: 0; font-size: .9rem; max-height: 320px; overflow: auto; }
.mail .test { color: #7a4a00; font-family: var(--mono); font-size: .7rem; }

.antwort-zeile { display: grid; grid-template-columns: 320px 1fr; gap: 18px; margin-bottom: 26px; align-items: start; }
@media (max-width: 900px) { .antwort-zeile { grid-template-columns: 1fr; } }

.platzhalter { font-family: var(--mono); font-size: .78rem; background: var(--hell); padding: 10px 12px; border-radius: 6px; margin-bottom: 14px; }
.platzhalter code { background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--linie); }
.leer { color: var(--grau); padding: 30px 0; text-align: center; font-family: var(--mono); font-size: .8rem; }
footer { padding: 30px 28px; color: var(--grau); font-family: var(--mono); font-size: .7rem; text-align: center; }