/* Design-Tokens „Reisen in Europapark“
   Basis: Design-Template mads-klar (hell, Petrol, weiche Karten), angepasst für
   Kontrast (WCAG AA) und die Heatmap des Jahreskalenders.
   Anpassungen gegenüber mads-klar:
     - --color-border dunkler (3,2:1 auf --color-bg) für Eingabefelder/Bedienelemente,
       dekorative Trenner nutzen --color-border-soft
     - --color-success / --color-warning abgedunkelt (Text >= 4,5:1 auch auf --color-bg)
     - zusätzliche Tokens: Heatmap-Stufen (--heat-*), Statusflächen, Skeleton, Fokus
   Zum Ändern der Marke nur den :root-Block anpassen – die Klassen darunter bleiben. */
:root {
  /* ---- Pflicht-Farben (WCAG AA geprüft, Werte siehe design.md) ---- */
  --color-primary: #0F6E7A;          /* Petrol – Hauptaktionen, Links, Rang-Plaketten (5,9:1 auf Weiß) */
  --color-primary-hover: #0B5560;    /* Hover (8,5:1 mit Weiß) */
  --color-on-primary: #FFFFFF;       /* Text auf Petrol */
  --color-secondary: #334155;        /* Schiefer – Sekundär-Text/-Buttons (9,6:1 auf bg) */
  --color-accent: #F2A541;           /* Sonnen-Orange – nur Akzente/Flächen, Text darauf: --color-on-accent */
  --color-bg: #F4F7F8;
  --color-surface: #FFFFFF;
  --color-text: #1E293B;             /* 13,6:1 auf bg */
  --color-text-muted: #5B6B7F;       /* 5,1:1 auf bg, 5,5:1 auf Weiß */
  --color-border: #7C8DA0;           /* Rahmen interaktiver Elemente (3,4:1 auf Weiß, 3,2:1 auf bg) */
  --color-success: #1A7A43;          /* 5,4:1 auf Weiß, 5,0:1 auf bg */
  --color-warning: #8F5B0E;          /* 5,7:1 auf Weiß, 5,3:1 auf bg */
  --color-error: #C53030;            /* 5,5:1 auf Weiß, 5,1:1 auf bg */

  /* ---- Ergänzende Farben ---- */
  --color-border-soft: #D5DDE3;      /* dekorative Trenner, Kartenrand */
  --color-on-accent: #1E293B;        /* dunkle Schrift auf Orange (7,1:1) */
  --color-primary-soft: #E3F1F3;     /* Petrol-Tönung: Auswahl, Hover, „Beste Wahl“ */
  --color-success-soft: #E5F4EB;
  --color-warning-soft: #FBF1DE;
  --color-error-soft: #FCEBEB;
  --color-info-soft: #E3F1F3;

  /* ---- Heatmap (Crowd-Intensität, 6 Stufen, ruhig → Spitze) ----
     Immer zusätzlich zur Farbe: Zahlenwert/Textstufe im Ranking und Tooltip je Tag. */
  --heat-0: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));
  --heat-1: color-mix(in srgb, var(--color-success) 40%, var(--color-surface));
  --heat-2: color-mix(in srgb, var(--color-warning) 38%, var(--color-surface));
  --heat-3: color-mix(in srgb, var(--color-warning) 75%, var(--color-surface));
  --heat-4: color-mix(in srgb, var(--color-error) 60%, var(--color-surface));
  --heat-5: color-mix(in srgb, var(--color-error) 95%, var(--color-text));
  --heat-closed: repeating-linear-gradient(45deg, var(--color-border-soft) 0 2px, var(--color-surface) 2px 5px);
  --heat-top-outline: var(--color-text);   /* Umrandung der Top-10-Zeiträume */
  --heat-own: var(--color-primary);        /* Markierung „eigene Schulferien“ (Unterkante) */

  /* ---- Schrift (System-Fallback, offline-fähig) ---- */
  --font-text: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-text);
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem;
  --fw-normal: 400; --fw-medium: 500; --fw-bold: 700;

  /* ---- Abstände / Radien ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 6px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px;

  /* ---- Schatten, Fokus, Übergänge ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 4px 14px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --focus-ring: 0 0 0 3px rgba(15, 110, 122, .35);
  --focus-outline: 2px solid var(--color-primary);
  --transition: 150ms ease;

  /* ---- Hintergrund: heller Verlauf oben, danach Flächenfarbe (nicht gekachelt) ---- */
  --bg-page: linear-gradient(180deg, #EEF3F5 0%, var(--color-bg) 320px);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-text); font-size: var(--fs-base); line-height: 1.55;
  color: var(--color-text); min-height: 100vh;
  background-color: var(--color-bg); background-image: var(--bg-page); background-repeat: no-repeat;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
a:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: 2px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: var(--fw-medium); cursor: pointer; text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 0 0 1px var(--color-primary); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled:hover { background: var(--color-primary); }
.btn-secondary { background: var(--color-surface); color: var(--color-secondary); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-secondary); }
.btn-secondary:disabled:hover { border-color: var(--color-border); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: rgba(15, 110, 122, .08); box-shadow: none; }

/* ---- Karte ---- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow);
}

/* ---- Eingabefelder (input, select) ---- */
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:hover { border-color: var(--color-secondary); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.input:disabled { opacity: .55; cursor: not-allowed; background: var(--color-bg); }
.input[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(197, 48, 48, .3); }

/* ---- Badge ---- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  background: var(--color-bg); color: var(--color-secondary); border: 1px solid var(--color-border-soft);
}
.badge-primary { background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: var(--color-primary); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.badge-error { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error); }

/* ---- Hinweis / Alert (immer mit Icon + Text, nie nur Farbe) ---- */
.alert {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--color-border-soft); border-left: 4px solid var(--color-primary);
  background: var(--color-surface); color: var(--color-text);
}
.alert-info { background: var(--color-info-soft); border-left-color: var(--color-primary); }
.alert-success { background: var(--color-success-soft); border-left-color: var(--color-success); }
.alert-warning { background: var(--color-warning-soft); border-left-color: var(--color-warning); }
.alert-error { background: var(--color-error-soft); border-left-color: var(--color-error); }

/* ---- Hilfsklassen ---- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skeleton {
  display: block; border-radius: var(--radius-sm); background: var(--color-border-soft);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--color-border-soft); border-top-color: var(--color-primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn:hover { transform: none; }
}