/* Neutral im Apple-Liquid-Glass-Stil (L16). Kanzlei-Farbe kommt als --akzent aus der Einstellung. Keine fremden Server, keine Schrift-Downloads. */
:root {
  --akzent: #0A84FF;
  --grund: #eef1f6; --grund2: #dfe5ee;
  --glas: rgba(255,255,255,.62); --glas-rand: rgba(255,255,255,.85); --glas-schatten: 0 10px 30px rgba(20,30,50,.10);
  --text: #11151c; --text2: #4b5565; --linie: rgba(17,21,28,.08);
  --rot: #d92d20; --gelb: #b97a00; --gruen: #12855a;
  --rund: 22px; --rund-klein: 14px;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #0b0e14; --grund2: #141a24; --glas: rgba(255,255,255,.07); --glas-rand: rgba(255,255,255,.14);
          --glas-schatten: 0 12px 40px rgba(0,0,0,.45); --text: #eef2f8; --text2: #a5aebd; --linie: rgba(255,255,255,.09);
          --rot: #ff6b5e; --gelb: #f5b840; --gruen: #3ad29f; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--schrift); color: var(--text); font-size: 16px; line-height: 1.45; min-height: 100vh; background: var(--grund2); }
/* Hintergrund als feste Ebene - background-attachment: fixed reisst auf Handys und beim Scrollen ab */
body::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(60% 40% at 90% 0%, color-mix(in srgb, var(--akzent) 28%, transparent), transparent 70%),
              radial-gradient(50% 40% at 0% 60%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent 70%),
              linear-gradient(180deg, var(--grund), var(--grund2)); }
a { color: var(--akzent); text-decoration: none; }
.glas { background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten), inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border-radius: var(--rund); }
.kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 12px; }
.kopf .marke { font-weight: 650; flex: 1; }
.kopf .marke small { display: block; font-weight: 500; color: var(--text2); font-size: 12.5px; }
.logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, #fff)); }
main { max-width: 1100px; margin: 0 auto; padding: 4px 16px 40px; }
h1 { font-size: 26px; margin: 18px 4px 6px; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 22px 4px 10px; }
.unter { color: var(--text2); margin: 0 4px 16px; }
.karte { padding: 18px; margin-bottom: 14px; }
.pille, button, .knopf { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; padding: 11px 18px;
  min-height: 44px; font: 600 15px var(--schrift); cursor: pointer; color: #fff; background: var(--akzent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--akzent) 35%, transparent); }
.knopf.leise { background: var(--linie); color: var(--text); box-shadow: none; }
[hidden] { display: none !important; }   /* Bildpruefung 04.11.: Knopf-Stil (inline-flex) ueberstimmte "hidden" - jetzt grundsaetzlich nicht mehr moeglich */
.kopf { flex-wrap: wrap; }
/* Nutzer-Menue (Muharrem 04.11.): gleich gross wie die anderen Knoepfe, Abmelden erst im aufgeklappten Menue */
.nutzer { position: relative; }
.nutzer summary { list-style: none; } .nutzer summary::-webkit-details-marker { display: none; }
.nutzer .kuerzel { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--akzent); }
.nutzer-menue { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 20;
  background: #fff; backdrop-filter: none; box-shadow: 0 18px 44px rgba(15,23,34,.22); border-radius: 16px; }   /* Bildpruefung: Knopf schien durch */
.nutzer-menue .knopf { justify-content: center; }
.kopf-oben { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
input, select, textarea { font: 16px var(--schrift); color: var(--text); width: 100%; padding: 12px 14px; min-height: 46px; border-radius: var(--rund-klein);
  border: 1px solid var(--linie); background: color-mix(in srgb, var(--glas) 80%, transparent); }
label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ampel { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.ampel::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ampel.rot { color: var(--rot); background: color-mix(in srgb, var(--rot) 13%, transparent); }
.ampel.gelb { color: var(--gelb); background: color-mix(in srgb, var(--gelb) 15%, transparent); }
.ampel.gruen { color: var(--gruen); background: color-mix(in srgb, var(--gruen) 14%, transparent); }
.zaehler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.zaehler a { padding: 14px; text-align: center; color: var(--text); }
.zaehler b { display: block; font-size: 28px; }
.zeile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linie); color: var(--text); }
.zeile:last-child { border-bottom: none; }
.zeile .wer { flex: 1; min-width: 0; }
.zeile .wer b { display: block; }
.zeile .wer small { color: var(--text2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken { height: 6px; border-radius: 6px; background: var(--linie); overflow: hidden; width: 90px; }
.balken i { display: block; height: 100%; background: var(--akzent); }
.punkt { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.punkt:last-child { border-bottom: none; }
.punkt .was { flex: 1; min-width: 200px; }
.punkt .was small { display: block; color: var(--text2); }
.punkt form { display: flex; gap: 8px; align-items: center; }
.punkt select { width: auto; min-width: 150px; }
.marke-stufe { font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--linie); }
.marke-stufe.fertig { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: var(--gruen); }
.marke-stufe.fehlt { background: color-mix(in srgb, var(--rot) 13%, transparent); color: var(--rot); }
.ok { color: var(--gruen); font-weight: 650; } .falsch { color: var(--rot); font-weight: 650; }
.fuss { text-align: center; color: var(--text2); font-size: 12.5px; padding: 26px 16px 34px; }
.fehler { color: var(--rot); font-weight: 600; }
.zustand { font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text2); }
@media (max-width: 640px) {
  h1 { font-size: 22px; } .balken { display: none; } .punkt form { width: 100%; } .punkt select { flex: 1; min-width: 0; }
  .kopf { margin: 8px; padding: 10px 12px; gap: 10px; } .kopf .zustand { display: none; } .kopf .knopf { padding: 8px 12px; min-height: 38px; font-size: 14px; }
  .kopf .marke { font-size: 15px; min-width: 0; } .kopf .marke small { font-size: 12px; }
  /* Bildpruefung 04.11.: Knoepfe lagen ueber dem Kanzleinamen - am Handy eigene Zeile unter dem Namen */
  .kopf .kopf-wege { width: 100%; margin-left: 0 !important; justify-content: space-between; }
  .kopf .kopf-wege .knopf { flex: 1; justify-content: center; padding: 8px 6px; }
  .kopf .kopf-wege .nutzer { flex: 1; } .kopf .kopf-wege .nutzer summary { width: 100%; }
  .nutzer .nutzer-name { display: none; }        /* am Handy nur das Kuerzel, der volle Name steht im Menue */
  .zaehler a { padding: 10px 6px; } .zaehler b { font-size: 24px; } .zaehler .ampel { font-size: 12px; padding: 4px 8px; gap: 5px; }
  .zeile .zustand { display: none; } main { padding: 4px 12px 32px; }
}