/* ------------------------------------------------------------------
   die gemeinsame grundlage aller apps: farben, schrift, die anmelde-
   maske und der versionsstreifen. app-eigenes gehoert nicht hierher.

   das hell/dunkel-schema ist aus kalota uebernommen: die farben liegen
   als variablen auf :root, und html.light definiert dieselben namen neu.
   umgeschaltet wird per javascript, nicht per media query - so kann ein
   knopf die uhrzeit-automatik uebersteuern.
   ------------------------------------------------------------------ */

:root{
  --ink:#0f1113; --panel:#181a1d; --panel2:#1e2125; --line:#2b3036;
  --paper:#edeae4; --muted:#878d95; --dim:#5c636b;
  --under:#e0503a; --over:#6fcf85; --hit:#e3c05c; --prot:#8bb0d4; --r:10px;
  --under-d:#8c4034; --over-d:#4c8560; --hit-d:#8d7a44;
  --head:"Fraunces", Georgia, serif;
  --sans:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"SF Mono", ui-monospace, "JetBrains Mono", Consolas, "Segoe UI Mono", monospace;
}
html.light{
  --ink:#f4f1ea; --panel:#fbf9f4; --panel2:#eeebe2; --line:#dcd6c9;
  --paper:#26282c; --muted:#6d7278; --dim:#9aa0a6;
  --under:#c6432e; --over:#3f9d5f; --hit:#a9822a; --prot:#4a79a8;
  --under-d:#efd2cc; --over-d:#d3ecdb; --hit-d:#eee0bd;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:13.5px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
  /* ohne das schiebt ios beim tippen in ein feld die ganze seite */
  -webkit-text-size-adjust:100%;
}

/* die app fuellt den sichtbaren bereich. dvh statt vh, sonst schneidet
   safaris adressleiste unten etwas ab. die safe-area haelt den home-
   indicator des iphones frei. */
.rahmen{
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* der app-inhalt bleibt verborgen, bis die anmeldung geklaert ist.
   basis.css blockiert das erste zeichnen der seite, also erscheint der
   inhalt nie, bevor feststeht ob jemand angemeldet ist - kein aufblitzen
   von text mehr, bevor die maske da ist. die anmelde-maske (#anmeldung)
   und die banner haben eigene ids und bleiben davon unberuehrt.
   auth.js setzt die klasse .angemeldet, sobald jemand eingeloggt ist. */
:root:not(.angemeldet) .rahmen{ display:none !important }

button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,textarea,select{
  font:inherit; color:var(--paper); background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  width:100%; outline:none;
}
input:focus,textarea:focus{border-color:#4a525c; background:#22262b}
html.light input:focus,html.light textarea:focus{border-color:#c3b9a4; background:#fffdf7}

/* ---- auf dem handy: alles unter 16px laesst safari beim antippen
        in das feld hineinzoomen, und man kommt nicht wieder heraus ---- */
@media (max-width:768px){
  input,textarea,select{font-size:16px}
}

/* ---- seitentitel und untere menuezeile: das AUSSEHEN ist fuer alle apps
   gleich (icon-leiste unten, gleicher titel). das POSITIONIEREN - hoehe,
   safe-area, querformat - bleibt in der jeweiligen app.css: dort haengt es
   am layout der app und ist je geraet teuer erkauft. ---- */
.viewtitle{ font-family:var(--head); font-weight:600; font-size:22px; margin:0 }

.tabbar{ display:flex; background:var(--panel); border-top:1px solid var(--line) }
.tabbar button{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:12px 0 10px; color:var(--dim);
}
.tabbar button.on{ color:var(--paper) }
.tabbar svg{ width:24px; height:24px }

/* ---- anmelde-maske (shared/auth.js) ---- */
#anmeldung{
  position:fixed; inset:0; z-index:9000; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:24px calc(24px + env(safe-area-inset-left));
}
#anmeldung form{width:100%; max-width:300px; display:flex; flex-direction:column; gap:10px}
#anmeldung h1{
  font-family:var(--head); font-weight:600; font-size:22px;
  margin:0 0 6px; text-align:center;
}
#anmeldung button{
  background:var(--paper); color:var(--ink); border-radius:8px;
  padding:11px; font-weight:600;
}
#anmeldung button:disabled{opacity:.5}
#anmeldung .fehler{margin:2px 0 0; color:var(--under); font-size:12.5px; text-align:center}

/* ---- versionsstreifen (shared/pwa.js) ---- */
#neueversion{
  position:fixed; z-index:9100; left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--paper); color:var(--ink); border-radius:var(--r);
  padding:11px; font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.35);
}

/* ---- "zum startbildschirm hinzufuegen" (shared/anheften.js) ----
   liegt ueber allem, auch ueber der anmeldemaske: auf ios hat die app
   vom startbildschirm einen eigenen speicher - eine anmeldung im browser
   braechte dort also nichts. den hinweis baut shared/anheften.js aus einer
   kleinen beschreibung; das aussehen ist hier fuer alle apps dasselbe. */
.anheften{
  position:fixed; inset:0; z-index:9500; display:flex;
  align-items:center; justify-content:center; padding:26px;
  background:var(--ink); color:var(--paper); overflow-y:auto;
}
.anheften[hidden]{ display:none !important }
.anheften-karte{
  width:100%; max-width:360px; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:14px;
}
.anheften-logo{ width:58px; height:58px; color:var(--paper) }
.anheften-karte h1{
  font-family:var(--head); font-weight:600; font-size:26px;
  letter-spacing:.14em; text-transform:uppercase; margin:0;
}
.anheften-text{ margin:0; color:var(--muted); font-size:14px; line-height:1.55 }
.anheften-schritte{
  list-style:none; margin:6px 0 0; padding:0; width:100%;
  display:flex; flex-direction:column; gap:2px; text-align:left;
}
.anheften-schritte li{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); font-size:14px; line-height:1.4;
}
.anheften-sym{
  width:34px; height:34px; flex:none; border-radius:9px;
  border:1px solid var(--line); background:var(--panel2);
  display:flex; align-items:center; justify-content:center; color:var(--paper);
}
.anheften-sym svg{ width:19px; height:19px }
.anheften-schritte b{ font-weight:600; color:var(--paper) }
.anheften-weiter{
  margin-top:8px; color:var(--dim); font-size:13px;
  text-decoration:underline; text-underline-offset:3px;
}
.anheften-fussnote{ color:var(--dim); font-size:11.5px; line-height:1.4; max-width:290px }

/* ---- fehleranzeige (siehe index.html der apps) ---- */
#fehlerbalken{
  position:fixed; z-index:9200; left:0; right:0;
  bottom:env(safe-area-inset-bottom); margin:0;
  background:var(--under); color:#fff;
  font-family:var(--mono); font-size:11.5px; line-height:1.45;
  padding:10px 12px; white-space:pre-wrap; word-break:break-word;
  max-height:45vh; overflow:auto;
}