/* Design "Seeblick" – Fishing App (final, vom Nutzer gewählt: Neues Design)
   Ruhiges Seetiefen-Petrol als Primärfarbe, Dämmerungs-Bernstein als Akzent
   (Zander = Dämmerungsjäger). Helle, sachliche Oberfläche, weiche Karten.
   Zum Anpassen NUR den :root-Block ändern – die Klassen darunter bleiben. */
:root {
  /* ---- Pflicht-Farben (WCAG AA geprüft, siehe design.md) ---- */
  --color-primary: #0B5563;          /* Seetiefe – Hauptaktionen, Links, Marker, beste Beißzeit */
  --color-primary-hover: #073B46;
  --color-on-primary: #FFFFFF;       /* Text auf Primär */
  --color-secondary: #2F4858;        /* Schiefer – Sekundäraktionen, Rahmen */
  --color-accent: #E8A23A;           /* Dämmerungs-Bernstein – Akzent, Sonnenauf-/untergang (nie als Text auf Weiß) */
  --color-bg: #F1F6F7;
  --color-surface: #FFFFFF;
  --color-text: #14232B;
  --color-text-muted: #4B606B;
  --color-border: #738B96;           /* Rahmen interaktiver Elemente (≥ 3:1) */
  --color-success: #197040;
  --color-warning: #8A5A00;
  --color-error: #B7322A;

  /* ---- Ergänzende Farben ---- */
  --color-primary-soft: #E0EEF1;     /* Auswahl-/Hover-Tönung */
  --color-accent-soft: #FCEFD6;      /* Tönung für Dämmerungsfenster */
  --color-on-accent: #3B2600;        /* Text auf Akzent */
  --color-border-soft: #D3DFE3;      /* dekorative Trenner, Kartenrahmen */

  /* ---- Schrift (System-Fallback, offline-fähig) ---- */
  --font-heading: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --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; --fs-score: 3rem;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --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: 10px; --radius-lg: 16px; --radius-pill: 999px;

  /* ---- Schatten / Übergänge / Fokus ---- */
  --shadow-sm: 0 1px 2px rgba(20, 35, 43, .07);
  --shadow: 0 4px 16px rgba(20, 35, 43, .09);
  --shadow-lg: 0 14px 36px rgba(20, 35, 43, .16);
  --transition: 160ms ease;
  --focus-ring: 0 0 0 3px rgba(11, 85, 99, .40);

  /* ---- Hintergrund: sanfter Wasser-Verlauf oben, nicht gekachelt ---- */
  --bg-page: linear-gradient(180deg, #DCEBEE 0%, #F1F6F7 340px);
}

* { 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-semibold); }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px 20px; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: var(--fw-semibold); cursor: pointer; text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.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-secondary { background: var(--color-surface); color: var(--color-secondary); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-secondary); background: var(--color-primary-soft); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary-soft); 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);
}

/* ---- Eingabefeld ---- */
.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::placeholder { color: var(--color-text-muted); }
.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); }

/* ---- Badge ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid transparent;
}
.badge-success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); }
.badge-warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface)); }
.badge-error   { color: var(--color-error);   background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface)); }

.badge-dusk    { color: var(--color-on-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }

/* ---- Hinweis ---- */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  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-success { border-left-color: var(--color-success); }
.alert-warning { border-left-color: var(--color-warning); }
.alert-error   { border-left-color: var(--color-error); }

/* ---- Lade- und Hilfsklassen (Fishing App) ---- */
.spinner {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--color-border-soft); border-top-color: var(--color-primary);
  animation: fa-spin 800ms linear infinite; vertical-align: -4px;
}
.skeleton {
  display: block; border-radius: var(--radius-sm); min-height: 14px;
  background: linear-gradient(90deg, var(--color-primary-soft) 0%, var(--color-border-soft) 50%, var(--color-primary-soft) 100%);
  background-size: 200% 100%; animation: fa-shimmer 1.4s ease-in-out infinite;
}
.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;
}
@keyframes fa-spin { to { transform: rotate(360deg); } }
@keyframes fa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .skeleton { animation: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}