/* Capital Core — gemeinsame Basis für Spiel und Verwaltung. Thema: Tinte & Gold. */

/* Schriften (lokal, web/assets/fonts/) */
@font-face{font-family:fraunces;src:url("../fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans.woff2") format("woff2");font-weight:400 600;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap;}

/* Design-Tokens */
:root{--ink-0:#0a0d14;--ink-1:#0f1420;--ink-2:#161d2e;--line:#242e47;--line-soft:#1a2236;--paper:#eae4d3;--muted:#9aa2b8;--faint:#69728c;--gold:#d9a441;--gold-bright:#f2c66d;--gold-dim:#8a6a2f;--ok:#79c489;--err:#e5705f;--warn:#e0b354;--font-display:fraunces,georgia,serif;--font-ui:"IBM Plex Sans",system-ui,sans-serif;--font-mono:"IBM Plex Mono",monospace;}

/* Basis */
*{box-sizing:border-box;}
html{height:100%;}
body{margin:0;min-height:100vh;background:var(--ink-0);color:var(--paper);font-family:var(--font-ui);font-size:15px;line-height:1.55;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:0.01em;margin:0;}
h1{font-size:1.9rem;}
h2{font-size:1.2rem;}
p{margin:0 0 0.75rem;}
a{color:var(--gold-bright);text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:var(--font-mono);font-size:0.9em;color:var(--gold-bright);}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#1c1608;padding:0.5rem 1rem;z-index:20;}
.skip-link:focus{left:0.5rem;top:0.5rem;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* Typo-Hilfen */
.eyebrow{font-family:var(--font-mono);font-size:0.7rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--faint);}
.mono{font-family:var(--font-mono);}
.hint{color:var(--muted);font-size:0.85rem;}

/* Türme-Signet */
.towers{display:block;}
.towers-gold{fill:var(--gold);}
.towers-dim{fill:var(--gold-dim);}
.tower-light{fill:var(--gold-bright);animation:window-light 3.2s ease-in-out infinite;}

/* Seitenkopf */
.page-head{margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line-soft);position:relative;}
.page-head::after{content:"";position:absolute;left:0;bottom:-1px;width:72px;height:2px;background:var(--gold);}
.page-lead{color:var(--muted);margin:0.6rem 0 0;}

/* Karten */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;}
.card{background:var(--ink-1);border:1px solid var(--line-soft);padding:1.25rem 1.4rem;animation:rise 0.45s ease both;}
.card:nth-child(2){animation-delay:0.07s;}
.card:nth-child(3){animation-delay:0.14s;}
.card:nth-child(4){animation-delay:0.21s;}
.stat-label{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);margin-bottom:0.7rem;display:flex;align-items:center;gap:0.5rem;}
.stat-value{font-family:var(--font-display);font-size:1.35rem;line-height:1.25;overflow-wrap:anywhere;}
.stat-note{color:var(--muted);font-size:0.8rem;margin-top:0.4rem;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;}
.dot-ok{background:var(--ok);box-shadow:0 0 6px rgb(121 196 137 / 60%);}
.dot-err{background:var(--err);box-shadow:0 0 6px rgb(229 112 95 / 60%);}
.dot-off{background:var(--faint);}

/* Formulare */
.form{max-width:560px;display:flex;flex-direction:column;gap:1.15rem;}
.form-section{margin-top:2.5rem;}
.form-section-title{margin-bottom:1rem;}
.field{display:flex;flex-direction:column;gap:0.35rem;}
.field-row{display:grid;grid-template-columns:2fr 1fr;gap:1rem;}
.field-label{font-size:0.85rem;font-weight:500;color:var(--paper);}
.field-input{background:var(--ink-2);border:1px solid var(--line);color:var(--paper);padding:0.55rem 0.75rem;font-family:var(--font-ui);font-size:0.95rem;border-radius:3px;width:100%;}
.field-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgb(217 164 65 / 18%);}
.field-mono{font-family:var(--font-mono);font-size:0.9rem;}
.field-hint{color:var(--faint);font-size:0.78rem;margin:0;}
select.field-input{appearance:none;}
.form-actions{display:flex;align-items:center;gap:1rem;margin-top:0.5rem;}
.check{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.9rem;color:var(--muted);}
.check input{margin-top:0.25rem;accent-color:var(--gold);width:16px;height:16px;flex:none;}

/* Schaltflächen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;border:1px solid transparent;border-radius:3px;padding:0.6rem 1.3rem;font-family:var(--font-ui);font-size:0.9rem;font-weight:600;line-height:1.2;cursor:pointer;transition:transform 0.06s ease,background 0.15s ease;}
.btn-icon{width:1rem;height:1rem;flex:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold);color:#1c1608;}
.btn-gold:hover{background:var(--gold-bright);text-decoration:none;}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line);}
.btn-ghost:hover{color:var(--paper);border-color:var(--muted);text-decoration:none;}
.btn-block{width:100%;text-align:center;}

/* Meldungen */
.flash{padding:0.8rem 1.1rem;border:1px solid var(--line-soft);border-left:3px solid var(--faint);background:var(--ink-1);margin-bottom:1.5rem;font-size:0.9rem;animation:rise 0.35s ease both;}
.flash-ok{border-left-color:var(--ok);}
.flash-error{border-left-color:var(--err);}
.flash-warn{border-left-color:var(--warn);}

/* Anmelde-/Fehlerkarten */
.auth{display:grid;place-items:center;padding:2rem 1rem;}
.auth-backdrop{background-image:repeating-linear-gradient(90deg,rgb(217 164 65 / 3%) 0 1px,transparent 1px 96px),radial-gradient(60% 40% at 50% 110%,rgb(217 164 65 / 12%),transparent 70%);}
.auth-card{width:100%;max-width:400px;background:var(--ink-1);border:1px solid var(--line-soft);border-top:2px solid var(--gold-dim);padding:2.5rem 2.25rem 2rem;animation:rise 0.5s ease both;}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:0.9rem;text-align:center;margin-bottom:2rem;}
.auth-title{font-size:1.7rem;color:var(--paper);}
.auth-sub{margin-top:0.4rem;}
.auth-foot{margin-top:1.5rem;text-align:center;}
.auth-note{margin-top:2rem;text-align:center;color:var(--faint);font-size:0.75rem;font-family:var(--font-mono);letter-spacing:0.08em;}

/* Bewegung */
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes window-light{0%,35%,100%{opacity:1;}55%{opacity:0.25;}70%{opacity:0.8;}}

/* Breakpoints (gesammelt am Ende) */
@media (width <= 560px){.field-row{grid-template-columns:1fr;}.auth-card{padding:1.75rem 1.25rem 1.5rem;}.form-actions{flex-direction:column;align-items:stretch;}}
@media (prefers-reduced-motion: reduce){.card{animation:none;}.auth-card{animation:none;}.flash{animation:none;}.tower-light{animation:none;}.btn{transition:none;}}