/* Kajüte — Design-Tokens und Grundelemente.
   Einzige Quelle der Wahrheit für Farbe, Schrift und Form. Beschreibung und
   Regeln dazu: design/kajuete/ci.md
   Kontrastwerte in den Kommentaren sind gerechnet, nicht geschätzt. */

:root {
  /* --- Farbe ------------------------------------------------------------ */
  --tiefsee: #0B2534;        /* Text auf hell, Grund für Hero & Footer — 13.8:1 auf Segeltuch */
  --tiefsee-tief: #071923;   /* Vertiefung innerhalb dunkler Flächen */
  --tiefsee-weich: #1B3D50;  /* Flächen und Linien auf dunklem Grund — nie Text */
  --segeltuch: #F2EFE9;      /* Seitengrund */
  --papier: #FBF9F5;         /* erhöhte Karte auf Segeltuch — 15.0:1 zu Tiefsee */
  --messing: #C8922F;        /* Akzentfläche mit Tiefsee-Text — 5.7:1 */
  --messing-hell: #E0AE4E;   /* Hover und Akzenttext auf Tiefsee — 7.8:1 */
  --dunst: #5B6E78;          /* Sekundärtext auf hell — 4.6:1 */
  --dunst-hell: #97A9B2;     /* Sekundärtext auf Tiefsee — 6.5:1 */
  --linie: #DED8CD;          /* Haarlinie auf hell */
  --linie-dunkel: rgba(242, 239, 233, 0.14);
  /* Zustandsfarben — für die App, auf der Website nur der Vollständigkeit halber */
  --seegruen: #276B5C;       /* erledigt, freigegeben — 5.5:1 auf Segeltuch */
  --signal: #B23B2E;         /* Fehler, Absage — 5.1:1 auf Segeltuch */

  /* --- Schrift ---------------------------------------------------------- */
  --schrift: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Form ------------------------------------------------------------- */
  /* Die Kontur ist aus dem Logo abgeleitet: 5 von 64 Einheiten, runde Ecken. */
  --kontur: 2.5px;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 28px;

  /* --- Raum ------------------------------------------------------------- */
  --breite: 68rem;
  --sektion: clamp(4.5rem, 9vw, 7.5rem);
  --rand: clamp(1.25rem, 5vw, 2.5rem);
}

/* Grundlage
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--segeltuch);
  color: var(--tiefsee);
  font-family: var(--schrift);
  font-size: 1.0625rem;      /* 17px — Fließtext */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typografische Stufen. Überschriften laufen eng, Fließtext atmet.
   Die gesperrte Schreibweise der Wortmarke bleibt dem Logo vorbehalten —
   Überschriften sperren wir nie. */
.display {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.titel {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.untertitel {
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0;
}
.lead {
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.55;
  color: var(--dunst);
  margin: 0;
  text-wrap: pretty;
}

/* Mono ist die Mikrotypografie der Marke: Uhrzeiten, Zähler, Marginalien,
   Sektionsmarken. Wer im Dienstplan lebt, liest Spalten. */
.marke {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dunst);
  margin: 0;
}
.zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Auf dunklem Grund kippen die Textfarben mit. */
.dunkel {
  background: var(--tiefsee);
  color: var(--segeltuch);
}
.dunkel .lead, .dunkel .marke { color: var(--dunst-hell); }

/* Schaltflächen
   ------------------------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--messing);
  color: var(--tiefsee);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
/* Messing wird beim Hover heller, nicht dunkler — es fängt Licht.
   Dunkler wäre zu kontrastarm für den Tiefsee-Text darauf. */
.knopf:hover { background: var(--messing-hell); }
.knopf:active { transform: translateY(1px); }

.knopf-still {
  background: transparent;
  color: inherit;
  border: var(--kontur) solid currentColor;
  padding: calc(0.85rem - var(--kontur)) calc(1.5rem - var(--kontur));
}
.knopf-still:hover { background: transparent; color: var(--messing); }
.dunkel .knopf-still:hover { color: var(--messing-hell); }

/* Sichtbarer Fokus, überall, in Markenfarbe. */
:where(a, button, input, textarea, summary):focus-visible {
  outline: var(--kontur) solid var(--messing);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Flächen
   ------------------------------------------------------------------------ */

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.dunkel .karte {
  background: var(--tiefsee-tief);
  border-color: var(--linie-dunkel);
}

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

hr, .linie {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 0;
}
.dunkel hr, .dunkel .linie { border-color: var(--linie-dunkel); }

/* Zeichnungen erben die Textfarbe und die Kontur des Logos. */
.zeichnung {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--kontur);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bewegung
   ------------------------------------------------------------------------ */

/* Einziges Bewegungsmuster: beim Scrollen aufsteigen. Kein Parallax,
   kein Zoom, nichts das ruckelt, wenn jemand mit dem Handy im Lokal steht. */
.auftauchen {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}
.auftauchen.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .auftauchen { opacity: 1; transform: none; }
}