/* VorsorgeKompass – gemeinsame Grundlagen (Farben aus dem Logo, Schriften lokal eingebunden) */

@font-face { font-family: 'Nunito Sans'; src: url('/assets/fonts/nunito-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('/assets/fonts/nunito-sans-latin-wght-italic.woff2') format('woff2'); font-weight: 200 1000; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/assets/fonts/source-serif-4-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/assets/fonts/source-serif-4-latin-opsz-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --navy-950: #071730;
  --navy-900: #0a2142;
  --navy-800: #0d2a4d;
  --navy-700: #17396a;
  --navy-600: #24497f;
  --navy-100: #e7ecf4;
  --navy-50: #f2f5fa;
  --gold-700: #8a6a3c;
  --gold-600: #9e7c4a;
  --gold-500: #b08d57;
  --gold-400: #c6a676;
  --gold-200: #e7d8bd;
  --gold-100: #f4ecdd;
  --gold-50: #faf6ee;
  --cream: #f8f5ef;
  --paper: #ffffff;
  --ink: #1b2435;
  --ink-2: #3a4458;
  --muted: #687185;
  --line: #e6e0d4;
  --line-2: #efeae1;
  --green: #2f7a58;
  --green-100: #e3f1ea;
  --red: #b0453a;
  --red-100: #f8e6e3;
  --amber: #b9822b;
  --amber-100: #f8eedb;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(10, 33, 66, .06), 0 1px 1px rgba(10, 33, 66, .04);
  --shadow: 0 6px 24px -8px rgba(10, 33, 66, .18), 0 2px 6px rgba(10, 33, 66, .05);
  --shadow-lg: 0 24px 60px -20px rgba(10, 33, 66, .35);
  --font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--cream); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--navy-700); }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--navy-900); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
::selection { background: var(--gold-200); }

/* Buttons */
.btn { --bg: var(--navy-800); --fg: #fff; --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 15px/1 var(--font-sans); padding: .78em 1.25em; border-radius: 999px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); cursor: pointer; text-decoration: none; transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), color .18s; white-space: nowrap; }
.btn:hover { background: var(--navy-700); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-gold { --bg: var(--gold-500); --fg: #fff; }
.btn-gold:hover { background: var(--gold-600); }
.btn-ghost { --bg: transparent; --fg: var(--navy-800); --bd: var(--line); }
.btn-ghost:hover { background: var(--navy-50); }
.btn-soft { --bg: var(--navy-50); --fg: var(--navy-800); }
.btn-soft:hover { background: var(--navy-100); }
.btn-danger { --bg: transparent; --fg: var(--red); --bd: #ecc9c3; }
.btn-danger:hover { background: var(--red-100); }
.btn-sm { font-size: 13.5px; padding: .6em 1em; }
.btn-xs { font-size: 12.5px; padding: .45em .8em; }
.btn-icon { padding: .55em; border-radius: 10px; }
.btn-link { background: none; border: 0; color: var(--navy-700); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.input, .select, .textarea { width: 100%; font: 400 15.5px/1.4 var(--font-sans); color: var(--ink); background: #fff; border: 1px solid #d9d2c4; border-radius: var(--radius-sm); padding: .68em .85em; transition: border-color .15s, box-shadow .15s; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.input:hover, .select:hover, .textarea:hover { border-color: #c7bda9; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(176, 141, 87, .18); }
.input::placeholder, .textarea::placeholder { color: #a39c8f; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23687185' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9em center; padding-right: 2.4em; }
.hint { font-size: 13.5px; color: var(--muted); }
.error-text { color: var(--red); font-size: 14px; }

/* Karten, Chips */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.chip { display: inline-flex; align-items: center; gap: .35em; font-size: 12.5px; font-weight: 700; padding: .28em .7em; border-radius: 999px; background: var(--navy-50); color: var(--navy-700); white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip.gold { background: var(--gold-100); color: var(--gold-700); }
.chip.green { background: var(--green-100); color: var(--green); }
.chip.red { background: var(--red-100); color: var(--red); }
.chip.amber { background: var(--amber-100); color: #8d6118; }
.chip.gray { background: #eeece8; color: #5f646e; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }