/* Via Talentis – Gestaltung
   Copyright (c) 2026 – Betreiber siehe Impressum. Alle Rechte vorbehalten.

   Keine Schriften und keine Skripte von fremden Servern: Alles kommt von hier.
   (Google Fonts würde bei jedem Seitenaufruf die IP-Adresse eines Kindes an Google
   schicken – für eine Schulplattform keine Option. Eine eigene Schrift kann später
   mitgeliefert werden; bis dahin die Systemschrift.) */

:root{
  --grund:#F6F4EF; --karte:#FFFFFF; --tinte:#1B2A2E; --leise:#5A6B6E;
  --linie:#E4E0D6; --haupt:#17494D; --haupt-dunkel:#0E3235;
  --akzent:#C2683C; --akzent-dunkel:#A9532B;
  --gut:#3F7A4A; --gut-bg:#E9F1EA; --schlecht:#A33A2C; --schlecht-bg:#FBECE8;
  --radius:16px;
  --oben:env(safe-area-inset-top,0px);
  --unten:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#14191A; --karte:#1D2426; --tinte:#ECEAE4; --leise:#A2B0B1;
    --linie:#313A3C; --haupt:#6FA8A4; --haupt-dunkel:#8CC0BC;
    --gut-bg:#16301F; --schlecht-bg:#341C18;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  padding:var(--oben) 0 var(--unten);
}
#app{max-width:720px;margin:0 auto;padding:16px 16px 48px}
[hidden]{display:none !important}

h1{font-size:1.55rem;line-height:1.2;margin:.1em 0 .35em;letter-spacing:-.01em}
h2{font-size:1.1rem;margin:0 0 .6em}
p{margin:.4em 0 .8em}
a{color:var(--haupt)}
a:hover{color:var(--haupt-dunkel)}
code{background:var(--grund);border:1px solid var(--linie);border-radius:5px;padding:1px 5px;font-size:.9em}
.leise{color:var(--leise)}
.klein{font-size:.87rem}
.mitte{text-align:center}

.kopf{
  background:var(--haupt);color:#fff;border-radius:0 0 22px 22px;
  margin:-16px -16px 18px;padding:20px 20px 22px;
}
.kopf h1{margin:0;color:#fff}
.kopf .leise{color:#BCD3D1}
.marke{display:flex;align-items:center;gap:11px}
.marke .zeichen{
  width:42px;height:42px;border-radius:13px;background:var(--akzent);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff;
}

.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:16px;margin:0 0 14px}
.karte h2{display:flex;align-items:baseline;gap:8px}
.karte h2 .rechts{margin-left:auto;font-size:.8rem;font-weight:400;color:var(--leise)}

label{display:block;margin:12px 0;font-weight:600;font-size:.92rem}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;margin-top:6px;padding:12px;font:inherit;font-size:1rem;
  border:2px solid var(--linie);border-radius:11px;background:var(--grund);color:var(--tinte);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--haupt);box-shadow:0 0 0 3px rgba(23,73,77,.22);
}
:focus-visible{outline:3px solid var(--haupt);outline-offset:2px}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 18px;margin:6px 0;font:inherit;font-weight:700;
  border:1px solid transparent;border-radius:12px;background:var(--linie);color:var(--tinte);
  cursor:pointer;text-decoration:none;
}
.knopf.voll{display:flex;width:100%}
.knopf.haupt{background:var(--haupt);color:#fff}
.knopf.haupt:hover{background:var(--haupt-dunkel);color:#fff}
.knopf.leiser{background:transparent;border-color:var(--linie);color:var(--tinte)}
.knopf.klein{min-height:38px;padding:8px 12px;font-size:.85rem}
.knopf[disabled]{opacity:.55;cursor:not-allowed}

.reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.reihe>.wachsen{flex:1 1 140px;min-width:0}

.hinweis{padding:11px 13px;border-radius:12px;background:var(--gut-bg);border:1px solid var(--linie);font-size:.9rem;margin:10px 0}
.fehler{padding:11px 13px;border-radius:12px;background:var(--schlecht-bg);color:var(--schlecht);border:1px solid var(--linie);font-weight:600;font-size:.9rem;margin:10px 0}

table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--leise);padding:6px 8px;border-bottom:1px solid var(--linie)}
td{padding:9px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
tr:last-child td{border-bottom:0}
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}

.schild{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--grund);border:1px solid var(--linie);font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--leise)}
.schild.gut{background:var(--gut-bg);color:var(--gut);border-color:transparent}
.schild.warn{background:#FBF0E2;color:var(--akzent-dunkel);border-color:transparent}

.liste{display:flex;flex-direction:column;gap:10px}
.eintrag{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--karte);border:1px solid var(--linie);border-radius:14px;text-decoration:none;color:inherit}
.eintrag .wachsen{flex:1 1 auto;min-width:0}
.eintrag b{display:block}

.meldung{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--unten));
  max-width:min(92vw,420px);padding:12px 16px;border-radius:12px;
  background:var(--tinte);color:var(--grund);font-size:.9rem;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:50;
}

.fuss{margin-top:22px;font-size:.82rem;color:var(--leise);text-align:center}
.fuss a{color:var(--leise)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------------- Zugangskarten
   Werden ausgedruckt, ausgeschnitten und ausgeteilt. Auf Papier bleibt nur
   das Nötige stehen: Name, Adresse, QR-Code, Passwort. */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.zugangskarte{
  display:flex;gap:11px;align-items:center;
  border:1.5px dashed var(--linie);border-radius:14px;padding:11px 13px;background:var(--karte);
}
.zk-qr{width:62px;height:62px;flex:none}
.zk-qr svg{width:100%;height:100%;display:block}
.zk-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.zk-text b{font-size:1rem}
.zk-pw{
  margin-top:3px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:1.05rem;font-weight:700;letter-spacing:.02em;color:var(--haupt);
}

@media print{
  body{background:#fff;padding:0}
  #app{max-width:none;padding:0}
  .kopf,.karte,.meldung,.fuss{display:none !important}
  #karten-karte,#p-karten-karte{display:block !important;border:0;padding:0;margin:0}
  #karten-karte h2,#karten-karte p,#karten-karte .reihe,
  #p-karten-karte h2,#p-karten-karte p,#p-karten-karte .reihe{display:none}
  .karten{grid-template-columns:repeat(2,1fr);gap:6mm}
  .zugangskarte{break-inside:avoid;border-color:#999;background:#fff}
  .zk-pw{color:#000}
}