/* Gemeinsames Design: Farb-Tokens (dunkel/hell), Schrift, Kopfzeile, Grundbausteine.
   Die Seiten nutzen teils noch die alten Token-Namen (--ink, --paper, …) – diese sind
   unten auf die neuen Tokens abgebildet, damit alles mit dem Theme umschaltet. */
/* Schrift lokal ausgeliefert (keine Verbindung zu Google beim Seitenaufruf).
   Manrope, SIL Open Font License 1.1 – siehe fonts/OFL.txt. Variable Schrift: eine Datei
   deckt alle Stärken 200–800 ab. */
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C100F;
  --surface:#141918;
  --surface-2:#1A201F;
  --surface-3:#222A28;
  --line:#252D2B;
  --line-strong:#38423F;
  --text:#F1F4F2;
  --text-muted:#A4AEAA;
  --text-dim:#707B77;
  --accent:#63D695;
  --accent-hover:#7BE0A6;
  --accent-ink:#0A1A11;
  --accent-text:#63D695;
  --accent-soft:rgba(99,214,149,0.14);
  --danger:#E0715A;
  --amber:#E2B05A;
  --overlay:rgba(10,14,13,0.72);
  --hero-leaf:rgba(241,244,242,0.20);
  --shadow:0 1px 2px rgba(0,0,0,0.3);
  /* Kartenhintergründe ohne Bild (gedeckte Töne) */
  --tint-1:#1C2A27; --tint-2:#252B1F; --tint-3:#2A2A1E;
  --tint-4:#1B2633; --tint-5:#211D2C; --tint-6:#2B221D;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F5F1;
  --surface:#FFFFFF;
  --surface-2:#F0F2EE;
  --surface-3:#E6EAE5;
  --line:#E1E5DF;
  --line-strong:#C9D0C9;
  --text:#121816;
  --text-muted:#56625D;
  --text-dim:#85908B;
  --accent:#4FCB86;
  --accent-hover:#3FBB76;
  --accent-ink:#0A1A11;
  --accent-text:#14824A;
  --accent-soft:rgba(79,203,134,0.16);
  --danger:#C24E37;
  --amber:#A8741B;
  --overlay:rgba(255,255,255,0.86);
  --hero-leaf:rgba(18,24,22,0.22);
  --shadow:0 1px 2px rgba(16,24,20,0.06), 0 4px 16px rgba(16,24,20,0.04);
  --tint-1:#DCEBE5; --tint-2:#E5EBD9; --tint-3:#EEEAD6;
  --tint-4:#DCE5EF; --tint-5:#E6E0EE; --tint-6:#F0E4DA;
}

:root{
  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm:10px;
  --r:14px;
  --r-lg:22px;

  /* Alte Token-Namen → neue Tokens */
  --ink:var(--text);
  --paper:var(--bg);
  --paper-deep:var(--surface);
  --paper-line:var(--line);
  --pine:var(--surface-2);
  --forest:var(--accent-text);
  --forest-light:var(--text-dim);
  --sage:var(--text-muted);
  --resin:var(--amber);
  --resin-dim:var(--accent-soft);
  --clay:var(--danger);
}

html{background:var(--bg);}
body{
  background:var(--bg) !important;
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease;
}
button, input, select, textarea{font-family:var(--font);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------- Kopfzeile ---------- */
.sv-topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.sv-topbar-inner{
  max-width:1360px; margin:0 auto; padding:0.9rem 2rem;
  display:flex; align-items:center; gap:1.5rem;
}
.sv-brand{
  display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:var(--text);
  font-weight:800; font-size:1.2rem; letter-spacing:-0.01em; flex-shrink:0;
}
.sv-logo{
  width:38px; height:38px; border-radius:10px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sv-logo svg{width:24px; height:24px;}
.sv-search{
  flex:1; max-width:580px; position:relative; margin-left:1.5rem;
}
.sv-search svg{
  position:absolute; left:0.95rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round;
  pointer-events:none;
}
.sv-search input{
  width:100%; padding:0.72rem 1rem 0.72rem 2.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text); font-size:0.95rem; transition:border-color .15s;
}
.sv-search input::placeholder{color:var(--text-dim);}
.sv-search input:focus{outline:none; border-color:var(--accent);}
.sv-top-right{margin-left:auto; display:flex; align-items:center; gap:0.75rem;}

/* Segment-Schalter (Sprache, Theme) */
.sv-seg{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.sv-seg button{
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:0.8rem; font-weight:700; letter-spacing:0.03em;
  padding:0.35rem 0.6rem; border-radius:7px; min-width:34px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .15s, color .15s;
}
.sv-seg button svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.sv-seg button:not(.active):hover{color:var(--text); background:var(--surface-2);}
.sv-seg button.active{background:var(--accent); color:var(--accent-ink);}

/* Konto */
.sv-account{position:relative;}
.sv-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text);
  font-weight:800; font-size:0.95rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.sv-avatar:hover{border-color:var(--accent);}
.sv-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:220px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 12px 32px rgba(0,0,0,0.25); padding:0.4rem; display:none;
}
.sv-menu.open{display:block;}
.sv-menu-head{padding:0.6rem 0.7rem 0.7rem; border-bottom:1px solid var(--line); margin-bottom:0.3rem;}
.sv-menu-name{font-weight:700; color:var(--text);}
.sv-menu-role{font-size:0.8rem; color:var(--text-muted); margin-top:0.1rem;}
.sv-menu a, .sv-menu button{
  display:block; width:100%; text-align:left; padding:0.55rem 0.7rem; border-radius:8px;
  background:none; border:none; color:var(--text); font-size:0.9rem; text-decoration:none; cursor:pointer;
}
.sv-menu a:hover, .sv-menu button:hover{background:var(--surface-2);}
.sv-menu-sep{height:1px; background:var(--line); margin:0.3rem 0.4rem;}
.sv-menu-group{font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); padding:0.4rem 0.7rem 0.2rem;}
.sv-signin{
  padding:0.55rem 1rem; border-radius:var(--r-sm); text-decoration:none; font-weight:700; font-size:0.88rem;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
}
.sv-signin:hover{border-color:var(--accent);}

/* Schalter auf Seiten ohne Kopfzeile (Login) */
.sv-fixed-switches{position:fixed; top:1rem; right:1rem; z-index:50; display:flex; gap:0.5rem;}

/* ---------- Grundbausteine ---------- */
.sv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 1.4rem; border-radius:var(--r); border:1px solid transparent;
  font-weight:700; font-size:0.98rem; text-decoration:none; cursor:pointer;
  transition:background-color .15s, border-color .15s;
}
.sv-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round;}
.sv-btn-primary{background:var(--accent); color:var(--accent-ink);}
.sv-btn-primary:hover{background:var(--accent-hover);}

.sv-btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--text);}
.sv-btn-ghost:hover{background:var(--surface-2);}
.sv-btn:disabled{opacity:0.6; cursor:default;}
.sv-btn-danger{background:var(--danger); color:#fff;}
.sv-btn-danger:hover:not(:disabled){filter:brightness(1.08);}

/* ---------- Dialog ---------- */
.sv-dialog{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:0; width:min(440px, calc(100vw - 32px));
  background:var(--surface); color:var(--text); box-shadow:0 24px 64px rgba(0,0,0,0.35);
}
.sv-dialog::backdrop{background:rgba(5,8,7,0.55); backdrop-filter:blur(2px);}
.sv-dialog-body{padding:1.5rem 1.5rem 1.3rem;}
.sv-dialog h2{margin:0 0 0.5rem; font-size:1.3rem; font-weight:800; letter-spacing:-0.02em;}
.sv-dialog-text{margin:0 0 1rem; color:var(--text-muted); font-size:0.92rem; line-height:1.5;}
.sv-dialog-text b{color:var(--text);}
.sv-choice-list{display:flex; flex-direction:column; gap:0.4rem;}
.sv-choice{
  display:flex; align-items:center; gap:0.7rem; padding:0.7rem 0.85rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .15s, background-color .15s;
}
.sv-choice:hover{border-color:var(--line-strong);}
.sv-choice:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
.sv-choice input{accent-color:var(--accent); margin:0;}
.sv-choice-label{flex:1; font-weight:600;}
.sv-choice-count{color:var(--text-dim); font-size:0.85rem; font-weight:600;}
.sv-dialog-error{color:var(--danger); font-size:0.86rem; min-height:1.2em; margin-top:0.6rem;}
.sv-dialog-actions{display:flex; justify-content:flex-end; gap:0.6rem; margin-top:0.6rem;}
.sv-dialog-actions .sv-btn{padding:0.65rem 1.1rem; font-size:0.92rem;}

.sv-field{display:block; margin-bottom:0.8rem;}
.sv-field span{display:block; font-size:0.84rem; font-weight:600; color:var(--text-muted); margin-bottom:0.3rem;}
.sv-field input{
  width:100%; padding:0.65rem 0.8rem; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--bg); color:var(--text); font-size:0.95rem;
}
.sv-field input:focus{outline:none; border-color:var(--accent);}
.sv-field-hint{font-size:0.8rem; color:var(--text-dim); margin:-0.2rem 0 0;}

/* ---------- Fußzeile ---------- */
.sv-footer{
  max-width:1360px; margin:0 auto; padding:1.5rem 2rem 2rem; text-align:center;
  font-size:0.84rem; color:var(--text-dim);
}
.sv-footer-fixed{position:fixed; left:0; right:0; bottom:0; padding:1rem;}
.sv-footer a{color:var(--text-muted); text-decoration:none;}
.sv-footer a:hover{color:var(--text); text-decoration:underline;}

/* ---------- Hinweis ---------- */
.sv-toast{
  position:fixed; left:50%; bottom:1.5rem; z-index:60; transform:translate(-50%, 20px); opacity:0;
  background:var(--text); color:var(--bg); padding:0.7rem 1.1rem; border-radius:var(--r-sm);
  font-weight:600; font-size:0.92rem; box-shadow:0 8px 24px rgba(0,0,0,0.25);
  transition:opacity .25s, transform .25s; max-width:calc(100vw - 32px);
}
.sv-toast.show{opacity:1; transform:translate(-50%, 0);}

@media (max-width:820px){
  .sv-topbar-inner{flex-wrap:wrap; padding:0.75rem 1rem; gap:0.75rem;}
  .sv-search{order:3; flex-basis:100%; max-width:none; margin-left:0;}
  .sv-brand span{display:none;}
}