/* Variante «Apple» – SF-Schrift, weiche Ecken, Haarlinien, Systemblau.
   Orientiert an macOS/iOS: gruppierte Listen, ruhige Flächen, viel Weissraum. */

:root{
  --bg:#f5f5f7;
  --fg:#1d1d1f;
  --muted:#6e6e73;
  --line:rgba(0,0,0,.10);
  --linie-stark:rgba(0,0,0,.16);
  --card:#ffffff;
  --accent:#0071e3;
  --accent-weich:#eaf3fe;
  --ok:#1d7a45;      --ok-bg:#e8f6ed;
  --warn:#8a5d00;    --warn-bg:#fdf3e0;
  --err:#c1121f;     --err-bg:#fdedee;
  --radius:18px;
  --radius-klein:11px;
  --schatten:0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000; --fg:#f5f5f7; --muted:#98989d;
    --line:rgba(255,255,255,.12); --linie-stark:rgba(255,255,255,.20);
    --card:#1c1c1e; --accent:#0a84ff; --accent-weich:#12243a;
    --ok:#5fd08a; --ok-bg:#122a1c; --warn:#e5b565; --warn-bg:#2a2417;
    --err:#ff6b6b; --err-bg:#2c1618;
    --schatten:0 1px 2px rgba(0,0,0,.5);
  }
}

body{
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
       "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
}

/* ---------- Kopfzeile: durchscheinend, wie in macOS ---------- */
header{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line);
}
@media (prefers-color-scheme: dark){
  header{background:rgba(22,22,24,.72)}
}
nav{max-width:1240px;padding:0 24px;gap:2px}
nav .marke{font-size:17px;font-weight:600;letter-spacing:-.02em;padding:15px 0;
  margin-right:26px;color:var(--fg)}
nav a{padding:8px 12px;margin:9px 1px;font-size:14px;font-weight:450;border-bottom:none;
  border-radius:9px;transition:background .15s ease,color .15s ease}
nav a:hover{background:rgba(0,0,0,.045);color:var(--fg)}
@media (prefers-color-scheme: dark){nav a:hover{background:rgba(255,255,255,.07)}}
nav a.aktiv{background:var(--accent-weich);color:var(--accent);font-weight:550}
nav .pille{background:var(--accent);color:#fff;font-weight:600;font-size:11.5px;
  padding:1px 7px;min-width:19px;text-align:center}
nav a.aktiv .pille{background:var(--accent);color:#fff}
nav .rechts{font-size:13.5px;gap:12px}

/* ---------- Typografie ---------- */
main{max-width:1240px;padding:40px 24px 100px}
h1{font-size:32px;font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0 0 10px}
h2{font-size:21px;font-weight:600;letter-spacing:-.018em;margin:40px 0 14px}
h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.unter{font-size:16px;line-height:1.5;color:var(--muted);max-width:72ch;margin-bottom:30px}
.klein{font-size:13px;line-height:1.45}

/* ---------- Karten: gruppierte Listen ---------- */
.karte{
  background:var(--card);
  border:none;
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  padding:26px 28px;
  margin-bottom:20px;
}

/* ---------- Tabellen als eingerückte Liste ---------- */
table{font-size:15px}
th{
  font-size:12px;font-weight:590;letter-spacing:.01em;text-transform:none;
  color:var(--muted);padding:16px 16px 10px;border-bottom:.5px solid var(--line);
}
td{padding:15px 16px;border-bottom:.5px solid var(--line)}
.karte[style*="padding:0"] tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:rgba(0,0,0,.022)}
@media (prefers-color-scheme: dark){tbody tr:hover{background:rgba(255,255,255,.04)}}
tfoot td{border-top:.5px solid var(--linie-stark);border-bottom:none;padding-top:16px}

/* ---------- Formulare ---------- */
label{
  font-size:13px;font-weight:500;letter-spacing:-.005em;text-transform:none;
  color:var(--muted);margin-bottom:7px;
}
input,select,textarea{
  font-size:16px;padding:11px 13px;border-radius:var(--radius-klein);
  border:1px solid var(--line);background:var(--card);
  transition:border-color .15s ease,box-shadow .15s ease;
}
input::placeholder{color:#a1a1a6}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 22%,transparent);
}
input[type=checkbox]{width:19px;height:19px;accent-color:var(--accent)}
select{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}

/* ---------- Knöpfe ---------- */
.knopf{
  background:var(--accent);border-radius:var(--radius-klein);
  padding:11px 20px;font-size:15px;font-weight:500;letter-spacing:-.005em;
  box-shadow:none;transition:filter .15s ease,background .15s ease;
}
.knopf:hover{filter:brightness(1.07)}
.knopf:active{filter:brightness(.94)}
.knopf.zweit{
  background:rgba(0,0,0,.045);color:var(--fg);border:none;
}
@media (prefers-color-scheme: dark){.knopf.zweit{background:rgba(255,255,255,.09)}}
.knopf.zweit:hover{background:rgba(0,0,0,.075);filter:none}
.knopf.klein{padding:7px 14px;font-size:13.5px;border-radius:8px}

/* ---------- Marken, Hinweise ---------- */
.tag{
  border-radius:7px;padding:3px 9px;font-size:12.5px;font-weight:500;
  letter-spacing:-.005em;
}
.hinweis{
  border-radius:var(--radius-klein);padding:14px 18px;font-size:15px;
  background:var(--card);box-shadow:var(--schatten);
}
.hinweis.ok{background:var(--ok-bg);box-shadow:none}
.hinweis.warn{background:var(--warn-bg);box-shadow:none}
.hinweis.err{background:var(--err-bg);box-shadow:none}

/* ---------- Raster ---------- */
.raster{gap:18px}
.zeile{gap:12px}
.spalt{gap:26px}

/* ---------- Kontosuche ---------- */
.kontoliste{
  border:none;border-radius:14px;
  box-shadow:0 0 0 .5px var(--line),0 12px 36px rgba(0,0,0,.16);
  padding:6px;
}
.kontozeile{border-radius:9px;padding:9px 11px}
.kontozeile:hover,.kontozeile.aktiv{background:var(--accent-weich)}
.kontonr{color:var(--accent);font-weight:590}
.kontobez{font-size:14.5px}
.kontoliste mark{border-bottom:none;color:var(--accent);font-weight:600}

/* ---------- Fortschrittsbalken ---------- */
.balken{border-radius:99px;height:7px;background:var(--accent)}

/* ---------- Anmeldung ---------- */
.mitte{max-width:400px;margin:14vh auto}
.mitte h1{font-size:36px;text-align:center}
.mitte .unter{text-align:center}
.mitte .karte{padding:30px}
.mitte .knopf{width:100%;padding:13px;font-size:16px}

/* ---------- Dateiauswahl im Systemstil ---------- */
input[type=file]{
  border:none;background:transparent;padding:0;font-size:14px;color:var(--muted);
}
input[type=file]::file-selector-button{
  background:rgba(0,0,0,.05);border:none;border-radius:9px;padding:10px 17px;
  font:inherit;font-size:14.5px;font-weight:500;color:var(--fg);
  margin-right:12px;cursor:pointer;transition:background .15s ease;
}
input[type=file]::file-selector-button:hover{background:rgba(0,0,0,.09)}
@media (prefers-color-scheme: dark){
  input[type=file]::file-selector-button{background:rgba(255,255,255,.11)}
  input[type=file]::file-selector-button:hover{background:rgba(255,255,255,.16)}
}
/* Vorschau des Belegs */
iframe.vorschau,.karte img[src*="vorschau"]{border-radius:10px;border:.5px solid var(--line)}