/* ============================================================
   base.css – Farben, Schriften, Grundelemente
   Design: AI-ZY Design-System (web/html2.0/style.css) – hell, klar, Royal Blue #006FEE, Inter.
   Die Variablennamen (--terra, --olive …) stammen aus dem Prototyp und bleiben aus
   Kompatibilitätsgründen bestehen – ihre WERTE sind jetzt die AI-ZY-Farben:
     --terra = Markenfarbe (Blau) · --olive = Erfolg (Grün) · --sun = Hinweis/„bitte prüfen“ (Bernstein)
   Übersicht: DESIGN.md
   ============================================================ */
:root{
  /* Flächen (AI-ZY: --bg-base / --bg-surface) */
  --paper:#fafafa; --paper-2:#f1f5f9; --card:#ffffff; --white:#ffffff;
  /* Text (AI-ZY: --text-primary / -secondary; tertiär auf Slate 500 angehoben, damit AA-Kontrast erfüllt ist) */
  --ink:#0f172a; --ink-2:#475569; --ink-3:#64748b;
  /* Linien (AI-ZY: --border-subtle / --border-hover als feste Farben) */
  --line:#e2e8f0; --line-2:#cbd5e1;
  /* Markenfarbe (AI-ZY: --brand-primary / -hover / -secondary) */
  --terra:#006FEE; --terra-d:#005bc4; --terra-soft:#e0f2fe;
  --brand-accent:#0ea5e9; --gradient-brand:linear-gradient(135deg,#006FEE,#0ea5e9);
  /* Status */
  --olive:#15803d; --olive-soft:#dcfce7;
  --sun:#b45309; --sun-soft:#fffbeb; --sun-line:#fde68a;
  --online:#16a34a;
  /* Radien (AI-ZY: --radius-lg / --radius-md) + Schatten (--shadow-md / --shadow-lg) */
  --r:16px; --r-sm:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 12px 24px -4px rgba(15,23,42,.06);
  --focus:0 0 0 3px rgba(0,111,238,.25);
  /* Schrift (AI-ZY: Inter für alles) */
  --f-head:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background-color:var(--paper);background-image:radial-gradient(rgba(15,23,42,.04) 1px,transparent 1px);background-size:32px 32px;color:var(--ink);font-family:var(--f-body);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default;opacity:.45}
a{color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:6px}
svg{flex-shrink:0}
[hidden]{display:none!important}

h1{font-family:var(--f-head);font-size:clamp(28px,3.6vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:0 0 10px}
h2{font-family:var(--f-head);font-size:23px;font-weight:700;letter-spacing:-.025em;margin:0 0 6px;line-height:1.2}
h3{font-family:var(--f-head);font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0}
.lead{font-size:19px;color:var(--ink-2);margin:0 0 30px;max-width:640px}
.sub{color:var(--ink-2);margin:0 0 20px}
.muted{color:var(--ink-3);font-size:14px}
.center{text-align:center}
.sp{flex:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-sm);font-weight:600;font-size:15.5px;border:1px solid transparent;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:background .15s,transform .15s,border-color .15s,box-shadow .15s;white-space:nowrap;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--terra);color:#fff;border-color:rgba(0,0,0,.08)}
.btn-primary:hover{background:var(--terra-d);transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(15,23,42,.06),0 0 15px rgba(0,111,238,.2)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:#f8fafc;border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(15,23,42,.06)}
.btn-olive{background:var(--olive);color:#fff}
.btn-olive:hover{background:#166534}
.btn-text{min-height:44px;padding:0 10px;color:var(--ink-2);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.btn-text:hover{color:var(--ink)}
.btn-text.danger{color:var(--terra)}
.btn-lg{min-height:58px;font-size:18px;padding:0 28px}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.icon-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .15s,color .15s}
.icon-btn:hover{background:var(--paper-2);color:var(--ink)}
.icon-btn.danger:hover{background:var(--terra-soft);color:var(--terra)}

/* ---------- Karten / Felder ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.field{margin-bottom:20px}
.field label,.label{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.field .hint{font-size:14px;color:var(--ink-3);margin-top:6px}
input[type=text],input[type=search],input[type=date],textarea,select{width:100%;font-size:17px;padding:13px 16px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--white);box-shadow:0 1px 2px rgba(15,23,42,.03);transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:110px;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--terra);box-shadow:var(--focus)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- Schalter ---------- */
.switch{position:relative;width:66px;height:38px;border-radius:19px;background:var(--line-2);transition:background .2s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch[aria-checked=true]{background:var(--terra)}
.switch[aria-checked=true]::after{transform:translateX(28px)}
.switch.sm{width:50px;height:30px}
.switch.sm::after{width:22px;height:22px}
.switch.sm[aria-checked=true]::after{transform:translateX(20px)}

/* ---------- Eigenschaften (Tags) – Farbtöne ---------- */
.tag{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.tone-olive{background:#dcfce7;color:#15803d}
.tone-green{background:#d1fae5;color:#047857}
.tone-sand{background:#fef3c7;color:#b45309}
.tone-blue{background:#dbeafe;color:#1d4ed8}
.tone-terra{background:#ffe4e6;color:#be123c}
.tone-plum{background:#ede9fe;color:#6d28d9}
.tone-teal{background:#ccfbf1;color:#0f766e}
.tone-grey{background:#f1f5f9;color:#475569}

@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:860px){
  .lead{font-size:17px;margin-bottom:22px}
  .card{padding:20px}
  .row2{grid-template-columns:1fr}
}