/* ===================================================================== * base.css – Design-System (Appy-Stil): Tokens, Inter, Komponenten. * Dark Mode ist gleichwertig: Klasse .dark auf (Toggle + localStorage), * prefers-color-scheme als Erst-Default. Kein Build-Step, kein CDN. * ===================================================================== */ /* ---- Inter (selbst gehostet, latin + latin-ext für Polnisch) ---- */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-400.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;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-400-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-500.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;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-500-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-600.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;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-600-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/inter-700.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;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/inter-700-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ---- Tokens ---- */ :root{ --primary-50:#eff6ff; --primary-100:#dbeafe; --primary-200:#bfdbfe; --primary-300:#93c5fd; --primary-400:#60a5fa; --primary-500:#3b82f6; --primary-600:#2563eb; --primary-700:#1d4ed8; --primary-800:#1e40af; --primary-900:#1e3a8a; --primary-950:#172554; --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; --gray-950:#030712; --success:#22c55e; --success-bg:#f0fdf4; --danger:#dc2626; --danger-bg:#fef2f2; --warning:#f59e0b; --warning-bg:#fffbeb; --info:#3b82f6; --info-bg:#eff6ff; --bg:var(--gray-50); --surface:#fff; --surface-alt:var(--gray-100); --border:var(--gray-200); --text:var(--gray-900); --text-muted:var(--gray-500); --text-invert:#fff; --ring:var(--primary-500); --radius-sm:.25rem; --radius:.5rem; --radius-md:.375rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px; --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); --shadow-primary:0 10px 15px -3px rgba(37,99,235,.30); --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --t-fast:150ms; --t-base:200ms; --t-slow:300ms; --ease:cubic-bezier(.4,0,.2,1); } .dark{ --bg:var(--gray-950); --surface:var(--gray-800); --surface-alt:var(--gray-900); --border:var(--gray-700); --text:var(--gray-100); --text-muted:var(--gray-400); --ring:var(--primary-400); --success-bg:#052e16; --danger-bg:#450a0a; --warning-bg:#451a03; --info-bg:#172554; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 6px -1px rgba(0,0,0,.5); --shadow-lg:0 10px 15px -3px rgba(0,0,0,.6); --shadow-xl:0 20px 25px -5px rgba(0,0,0,.7); --shadow-primary:0 10px 15px -3px rgba(59,130,246,.25); } @media (prefers-color-scheme: dark){ :root:not(.light):not(.dark){ --bg:var(--gray-950); --surface:var(--gray-800); --surface-alt:var(--gray-900); --border:var(--gray-700); --text:var(--gray-100); --text-muted:var(--gray-400); --ring:var(--primary-400); } } /* ---- Basis ---- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font-sans);color:var(--text);background:var(--bg); line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums; transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)} a{color:var(--primary-600)} .dark a{color:var(--primary-400)} h1{font-size:1.5rem;font-weight:var(--fw-bold);margin:.2rem 0 var(--sp-4)} h2{font-size:1.05rem;font-weight:var(--fw-semibold);margin:0 0 var(--sp-3)} :focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm)} @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}} .container{max-width:1000px;margin:0 auto;padding:0 var(--sp-4)} /* ---- Button ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); padding:var(--sp-2) var(--sp-4);border-radius:var(--radius);font-weight:var(--fw-medium); font-size:.9rem;line-height:1.2;cursor:pointer;border:1px solid transparent; text-decoration:none;min-height:2.5rem;transition:all var(--t-base) var(--ease)} .btn-sm{padding:var(--sp-1) var(--sp-3);min-height:2rem;font-size:.8rem} .btn-lg{padding:var(--sp-3) var(--sp-6);min-height:3rem;font-size:1rem} .btn-primary{background:var(--primary-600);color:var(--text-invert)} .btn-primary:hover{background:var(--primary-700);box-shadow:var(--shadow-primary)} .btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)} .btn-secondary:hover{background:var(--surface-alt)} .btn-danger{background:var(--danger);color:#fff} .btn:disabled{opacity:.5;cursor:not-allowed} /* ---- Card ---- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);padding:var(--sp-6)} .card-hover{transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)} .card-hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} /* ---- Input / Select / Textarea ---- */ .input{width:100%;padding:var(--sp-2) var(--sp-3);background:var(--surface);color:var(--text); border:1px solid var(--gray-300);border-radius:var(--radius);font-size:.95rem; font-family:inherit;transition:all var(--t-base) var(--ease)} .dark .input{border-color:var(--gray-600)} .input:focus{outline:none;border-color:var(--primary-500); box-shadow:0 0 0 4px color-mix(in srgb,var(--ring) 25%,transparent)} select.input{appearance:none;-webkit-appearance:none;background-repeat:no-repeat; background-position:right .6rem center;background-size:1.1em;padding-right:2.2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} /* ---- Badge / Status ---- */ .badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:.125rem .625rem; border-radius:var(--radius-full);font-size:.72rem;font-weight:var(--fw-medium)} .badge-primary{background:var(--primary-100);color:var(--primary-700)} .dark .badge-primary{background:var(--primary-950);color:var(--primary-300)} .badge-success{background:var(--success-bg);color:var(--success)} .badge-danger{background:var(--danger-bg);color:var(--danger)} .status-dot{width:.6rem;height:.6rem;border-radius:var(--radius-full); background:var(--success);border:2px solid var(--surface)} /* ---- Brand-Box (Gradient-Kachel) ---- */ .brand-box{width:2.25rem;height:2.25rem;border-radius:var(--radius-lg);flex:0 0 auto; display:flex;align-items:center;justify-content:center;color:#fff; background:linear-gradient(135deg,var(--primary-500),var(--primary-700)); box-shadow:var(--shadow-primary);transition:transform var(--t-slow) var(--ease)} .brand-box:hover{transform:scale(1.05)} /* ---- Hilfsklassen ---- */ .muted{color:var(--text-muted)} .text-danger{color:var(--danger)}