/*
 * Karrida Urlaubsplaner — dieselbe Designsprache wie Portal und
 * Unterportale: Nachtblau und Stein, ein Goldakzent, Karten mit
 * ruhigen Rändern. Vier Zustandsfarben trägt nur der Kalender:
 * Gold für Feiertage, gedämpft für Wochenenden, Nachtblau für
 * empfohlene Urlaubstage, ein Goldrand für Brückentage.
 */
:root {
  --night-950: #060f1d;
  --night-900: #0b1526;
  --stone-50: #fafaf9;
  --stone-200: #e7e5e4;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --gold-400: #e5b45f;
  --gold-600: #b9862e;
  --card-radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--stone-50);
  color: var(--night-950);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
.shell { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }

/* ── Header / Footer (Familienmuster) ───────────────────────── */
header.site { border-bottom: 1px solid var(--stone-200); background: #fff; }
.site-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.wordmark { display: flex; align-items: baseline; gap: 0.55rem; font-weight: 700; letter-spacing: -0.03em; font-size: 1.25rem; white-space: nowrap; }
.wordmark .k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; background: var(--night-900);
  color: var(--gold-400); font-size: 1rem; font-weight: 800; transform: translateY(4px);
}
.wordmark small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); }
nav.top { display: flex; gap: 1.3rem; font-size: 0.85rem; font-weight: 600; color: var(--stone-600); }
nav.top a:hover { color: var(--night-950); }
@media (max-width: 640px) { nav.top { display: none; } }

footer.site { background: var(--night-950); color: rgba(255,255,255,0.65); font-size: 0.82rem; margin-top: auto; }
.foot-row { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; align-items: center; justify-content: space-between; padding-block: 1.4rem; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot-row a:hover { color: #fff; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { padding-block: 2.8rem 0.6rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--gold-600); }
.hero .lead { margin-top: 0.9rem; max-width: 60ch; font-size: 1rem; line-height: 1.7; color: var(--stone-600); }

/* ── Eingaben ────────────────────────────────────────────────── */
.controls {
  margin-top: 1.6rem;
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-500); }
.field select, .field input {
  font: inherit; padding: 0.55rem 0.7rem;
  border: 1px solid var(--stone-200); border-radius: 10px; background: #fff;
  color: inherit;
}
.field select:focus-visible, .field input:focus-visible { outline: 2px solid var(--night-900); outline-offset: 1px; }
.state-note { margin-top: 0.6rem; font-size: 0.82rem; color: var(--gold-600); }

/* ── Jahresplan ─────────────────────────────────────────────── */
.plan { margin-top: 2.4rem; }
h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.plan-stats {
  margin-top: 1rem;
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
  background: #fff; border: 1px solid var(--stone-200); border-radius: var(--card-radius);
  padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.stat strong { font-size: 1.7rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.78rem; color: var(--stone-500); }
.stat.gold { background: var(--night-900); border-color: var(--night-900); color: #fff; }
.stat.gold strong { color: var(--gold-400); }
.stat.gold span { color: rgba(255,255,255,0.6); }
.plan-note { margin-top: 0.9rem; font-size: 0.92rem; color: var(--stone-600); max-width: 64ch; }
.plan-list { margin-top: 0.9rem; list-style: none; display: flex; flex-direction: column; }
.plan-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.2rem;
  padding: 0.55rem 0.2rem; font-size: 0.9rem;
  border-bottom: 1px solid var(--stone-200);
}
.plan-list li:last-child { border-bottom: 0; }
.plan-range { font-weight: 600; }
.plan-numbers { color: var(--stone-600); font-variant-numeric: tabular-nums; }

/* ── Empfehlungen ────────────────────────────────────────────── */
section[aria-labelledby="suggestions-title"],
section[aria-labelledby="calendar-title"] { margin-top: 2.6rem; }
.section-hint { margin-top: 0.35rem; font-size: 0.88rem; color: var(--stone-500); }
.s-list { margin-top: 1.1rem; list-style: none; display: flex; flex-direction: column; }
.s-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--stone-200);
}
.s-row:last-child { border-bottom: 0; }
.s-eff {
  display: inline-flex; align-items: center; flex-shrink: 0;
  background: var(--night-900); color: var(--gold-400);
  font-weight: 700; font-size: 0.8rem; border-radius: 999px; padding: 0.2rem 0.55rem;
  font-variant-numeric: tabular-nums;
}
.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.s-main strong { font-size: 0.95rem; letter-spacing: -0.01em; }
.s-main small { font-size: 0.8rem; color: var(--stone-500); }
.empty { font-size: 0.92rem; color: var(--stone-500); padding-block: 0.6rem; }

/* ── Kalender ────────────────────────────────────────────────── */
.legend { margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.8rem; color: var(--stone-600); }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid transparent; }
.sw.is-holiday { background: var(--gold-400); }
.sw.is-weekend { background: var(--stone-200); }
.sw.is-vacation { background: var(--night-900); }
.sw.is-bridge { background: #fff; border-color: var(--gold-600); }

.calendar {
  margin-top: 1.1rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.month { background: #fff; border: 1px solid var(--stone-200); border-radius: var(--card-radius); padding: 0.9rem; }
.month h3 { font-size: 0.9rem; margin-bottom: 0.6rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dow { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: var(--stone-500); text-align: center; padding-block: 0.15rem; }
.day {
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.74rem; border-radius: 7px; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.day.is-weekend { background: var(--stone-200); color: var(--stone-600); }
.day.is-holiday { background: var(--gold-400); color: var(--night-950); font-weight: 700; }
.day.is-vacation { background: var(--night-900); color: #fff; font-weight: 700; }
.day.in-plan:not(.is-vacation) { box-shadow: inset 0 0 0 2px rgba(11,21,38,0.25); }
.day.is-bridge:not(.is-vacation) { border-color: var(--gold-600); }

/* ── Kleingedrucktes ─────────────────────────────────────────── */
.fineprint { margin-block: 2.6rem; font-size: 0.78rem; color: var(--stone-500); max-width: 70ch; line-height: 1.6; }

/* ── Dark theme ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body { background: var(--night-950); color: #fff; }
  header.site { background: var(--night-900); border-color: rgba(255,255,255,0.08); }
  nav.top { color: rgba(255,255,255,0.65); }
  nav.top a:hover { color: #fff; }
  .hero .lead, .plan-note, .s-line, .section-hint, .plan-numbers, .legend, .fineprint, .empty { color: rgba(255,255,255,0.6); }
  .hero h1 em { color: var(--gold-400); }
  .field select, .field input, .stat, .s-card, .month { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
  .field select, .field input { color: #fff; }
  .field label, .stat span, .s-facts dt, .dow { color: rgba(255,255,255,0.45); }
  .s-line strong { color: #fff; }
  .s-facts dd { color: rgba(255,255,255,0.65); }
  .plan-list li { border-color: rgba(255,255,255,0.1); }
  .stat.gold { background: var(--gold-400); border-color: var(--gold-400); }
  .stat.gold strong { color: var(--night-950); }
  .stat.gold span { color: rgba(6,15,29,0.7); }
  .day.is-weekend { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
  .day.is-vacation { background: var(--gold-400); color: var(--night-950); }
  .sw.is-vacation { background: var(--gold-400); }
  .day.in-plan:not(.is-vacation) { box-shadow: inset 0 0 0 2px rgba(229,180,95,0.4); }
  .state-note { color: var(--gold-400); }
}


/* ── Planung / Buttons ──────────────────────────────────────── */
.selection { margin-top: 2.2rem; }
.selection-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }
.selection-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  background: var(--night-900); color: #fff; border: 0; border-radius: 10px;
  padding: 0.55rem 1rem; transition: background 0.2s ease;
}
.btn-primary:hover { background: #16233d; }
.btn-ghost {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--stone-600);
  border: 1px solid var(--stone-200); border-radius: 10px; padding: 0.5rem 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover { background: var(--stone-200); color: var(--night-950); }
.btn-ghost:disabled, .btn-ghost.is-taken { cursor: default; opacity: 0.55; }
.stat.over strong { color: #b91c1c; }

/* Klickbare Kalendertage */
button.day { font: inherit; cursor: pointer; border: 1px solid transparent; background: transparent; }
button.day.is-work:hover { background: var(--stone-200); }
button.day.is-vacation { background: var(--night-900); color: #fff; font-weight: 700; }
button.day.is-vacation:hover { background: #16233d; }
.day.is-suggest { box-shadow: inset 0 0 0 2px rgba(11,21,38,0.35); }
.sw.is-suggest { background: #fff; box-shadow: inset 0 0 0 2px rgba(11,21,38,0.35); }

/* ── Promo ──────────────────────────────────────────────────── */
.promo {
  margin-top: 2.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.3rem 1.4rem;
  background: var(--night-900); color: #fff; border-radius: var(--card-radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.promo:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(6,15,29,0.25); }
.promo-text { display: flex; flex-direction: column; gap: 0.25rem; max-width: 46rem; }
.promo-text strong { font-size: 1.15rem; letter-spacing: -0.02em; }
.promo-text span { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.55; }
.promo .btn-primary { background: var(--gold-400); color: var(--night-950); flex-shrink: 0; }
.promo:hover .btn-primary { background: #edc57a; }

/* ── Werbespalten ───────────────────────────────────────────── */
.rail { display: none; }
@media (min-width: 1560px) {
  body.has-rails .rail {
    display: block; position: fixed; top: 90px; width: 300px; min-height: 600px;
  }
  .rail-left { left: calc(50% - 36rem - 320px); }
  .rail-right { right: calc(50% - 36rem - 320px); }
}

@media (prefers-color-scheme: dark) {
  .s-row { border-color: rgba(255,255,255,0.1); }
  .s-main small { color: rgba(255,255,255,0.5); }
  .btn-ghost { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
  .btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
  button.day.is-work:hover { background: rgba(255,255,255,0.12); }
  button.day.is-vacation { background: var(--gold-400); color: var(--night-950); }
  .day.is-suggest, .sw.is-suggest { box-shadow: inset 0 0 0 2px rgba(229,180,95,0.45); }
  .promo { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
}