/* Grundgestaltung aller HTML-Seiten (CSP erlaubt kein Inline-CSS).
   Ruhig wie eine Apple-App: hell Weiß mit fast Schwarz, dunkel fast Schwarz mit fast Weiß, Systemschrift.
   Eine Akzentfarbe (Korall) nur für Hauptknöpfe und fällige Markierungen. Kontrast Knopftext:
   hell #fff auf #c8412a = 4,95:1, dunkel #0e0d0c auf #ff7a5c = 7,57:1. */
:root { color-scheme: light dark;
  --grund:#ffffff; --flaeche:#f5f5f7; --text:#1d1d1f; --leise:#6e6e73; --linie:#e3e3e6;
  --akzent:#c8412a; --auf-akzent:#ffffff; --fehler:#b3261e; --fokus:#c8412a;
  --schrift:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif; }
@media (prefers-color-scheme: dark) {
  :root { --grund:#0e0d0c; --flaeche:#1a1817; --text:#f4f2ef; --leise:#9b968f; --linie:#2b2826;
    --akzent:#ff7a5c; --auf-akzent:#0e0d0c; --fehler:#ff8a7a; --fokus:#ff7a5c; }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--grund); color:var(--text); font:17px/1.47 var(--schrift); -webkit-font-smoothing:antialiased; }
main { max-width:420px; margin:0 auto;
  padding:calc(56px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(80px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px)); }
h1 { font-size:32px; line-height:1.15; font-weight:700; margin:0 0 8px; letter-spacing:-0.022em; }
p.unter { color:var(--leise); margin:0 0 32px; }
label { display:block; font-size:15px; color:var(--leise); margin:20px 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], input[type=date], input[type=time],
textarea, select { width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:17px; color:var(--text);
  background:var(--grund); border:1px solid var(--linie); border-radius:10px; }
textarea { resize:vertical; line-height:1.45; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--fokus); outline-offset:1px; border-color:transparent; }
button { margin-top:28px; width:100%; min-height:50px; font:600 17px/1 var(--schrift); color:var(--auf-akzent);
  background:var(--akzent); border:0; border-radius:12px; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:2px solid var(--fokus); outline-offset:2px; }
button.still { background:transparent; color:var(--text); border:1px solid var(--linie); font-weight:400; }
a { color:var(--text); }
.links { margin-top:28px; font-size:15px; color:var(--leise); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.links a { color:var(--leise); }
.meldung { padding:12px 14px; border-radius:10px; background:var(--flaeche); margin:0 0 20px; font-size:15px; }
.meldung.fehler { background:transparent; border:1px solid var(--fehler); color:var(--fehler); }
.wahl { display:block; border:1px solid var(--linie); border-radius:12px; padding:16px; margin:12px 0 0; cursor:pointer; color:var(--text); font-size:17px; }
.wahl:has(input:checked) { border-color:var(--text); }
.wahl input { margin-right:10px; accent-color:var(--akzent); }
.wahl small { display:block; color:var(--leise); margin:4px 0 0 26px; font-size:14px; }
.zeile { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linie); font-size:15px; }
.zeile span:first-child { color:var(--leise); }
.breit main { max-width:960px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--linie); vertical-align:middle; }
th { color:var(--leise); font-weight:400; }
td form { display:inline; }
td:last-child { white-space:nowrap; }
td button { margin:0; width:auto; min-height:36px; padding:0 12px; font-size:14px; }
html.ht-aktiv main { padding-top:calc(96px + env(safe-area-inset-top, 0px)); }   /* oben rechts schwebt das Haustier, darunter beginnt der Inhalt */
.demo { font-size:13px; color:var(--leise); border:1px dashed var(--linie); padding:10px 12px; border-radius:10px; margin-top:40px; }