/* Boddenblick — Hafen-Detailseiten (public/hafen/<id>.html) und das
 * Hafenverzeichnis (public/haefen.html)
 *
 * Eigene Datei statt Inline-Style: die Seiten werden erzeugt und committet,
 * ein gemeinsames Stylesheet hält die vier Dateien klein und die Farbwelt an
 * einer Stelle. Palette wie public/index.html.
 *
 * Das Verzeichnis liest dieselbe Datei, statt eine eigene Palette mitzubringen:
 * Es ist dieselbe Seitenfamilie — Kopf, Disclaimer, Rumpf, Fuß sind hier schon
 * beschrieben, und eine zweite Farbwelt für einundzwanzig Zeilen liefe von
 * dieser weg, sobald eine von beiden angefasst wird.
 *
 * Einspaltig und mobil zuerst — gelesen wird die Seite im Cockpit auf dem
 * Handy, nicht am Schreibtisch.
 */

:root {
  --tinte: #0b2233;        /* tiefes Fahrwasser */
  --tinte-hell: #14374f;
  --schaum: #f4f7f9;
  --signal: #ffb100;       /* Kardinal-Gelb für den Disclaimer */
  --tonne-rot: #d33f2e;    /* Backbord */
  --tonne-gruen: #1d7a4f;  /* Steuerbord */
  --linie: #d4dde3;
  --grau: #5a7182;
  --grau-hell: #7a8a96;
  --link: #14508a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinte);
  background: var(--schaum);
  line-height: 1.5;
}

a { color: var(--link); }

header {
  background: var(--tinte);
  color: #fff;
  padding: .55rem 1rem;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
header h1 { margin: 0; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
header h1 a { color: #fff; text-decoration: none; }
header .revier { color: #9db8ca; font-size: .85rem; }

.disclaimer {
  background: var(--signal);
  color: #33260a;
  padding: .45rem 1rem;
  font-size: .85rem;
  line-height: 1.35;
  border-bottom: 1px solid #d99a00;
}
.disclaimer strong { text-transform: uppercase; letter-spacing: .04em; }

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: .9rem 1rem 2.5rem;
}

/* Seitenwechsel — zurück zur Karte, hinüber ins Verzeichnis.
 *
 * **44 px Mindesthöhe, dieselbe Zahl wie bei der Auswahlliste der Karte
 * (public/index.html) und aus demselben Grund:** gelesen wird an Bord auf dem
 * Telefon. Die Zeile trug bis hierher einen einzigen Verweis in Fließtexthöhe;
 * seit ein zweiter daneben steht, ist sie eine Navigation und kein Nachsatz
 * mehr. Ein zu kleines Ziel neben einem fingergerechten wäre die schlechtere
 * Hälfte von beidem.
 *
 * `flex-wrap`, damit auf schmalen Schirmen der zweite Verweis umbricht, statt
 * den ersten zu quetschen. */
.zurueck {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  font-size: .85rem;
  margin: 0 0 .8rem;
}
.zurueck a { display: inline-flex; align-items: center; min-height: 44px; }
.zurueck-unten { margin-top: 1.6rem; }

.steckbrief { margin: 0; color: var(--grau); font-size: .9rem; }
.beschreibung { margin: .7rem 0 0; }

section {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .8rem .9rem;
  margin-top: 1rem;
}
section h3 {
  margin: 0 0 .55rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grau);
}

/* Lage-Antwort — der Grund, warum die Seite überhaupt geöffnet wird */
section.lage { border-color: #b9c9d4; }
.lage-antwort {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.4;
}
.lage-antwort.offen { font-size: 1rem; color: var(--grau); }
.lage-antwort small { display: block; font-size: .78rem; color: var(--grau-hell); }
.lage-aus { margin: 0; color: var(--grau); }
.lage-ampel { margin: .5rem 0 0; }
.ampel-status {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: #fff;
}
.ampel-gruen { background: var(--tonne-gruen); }
.ampel-gelb { background: var(--signal); color: #33260a; }
.ampel-rot { background: var(--tonne-rot); }
.ampel-unbekannt { background: var(--grau); }

label.tiefgang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--grau);
}
label.tiefgang input {
  width: 6rem;
  padding: .4rem .45rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: 4px;
}
.lage-hinweis { margin: .5rem 0 0; font-size: .78rem; color: var(--grau-hell); line-height: 1.4; }

/* Zweite bindende Beschränkung der Zufahrt (einfahrt.beschraenkung).
 *
 * Bewusst **ohne** Farbe aus der Ampel-Palette: Der Block sagt nichts über die
 * Tiefe und darf nicht wie eine zweite Ampel gelesen werden. Er steht neben
 * der Ampelaussage, nicht an ihrer Stelle — abgesetzt durch eine Kante und
 * eine Tönung, nicht durch Rot, Gelb oder Grün. */
.beschraenkung {
  margin: .9rem 0 0;
  padding: .6rem .7rem;
  border-left: 3px solid var(--grau);
  background: #eef2f5;
  border-radius: 0 4px 4px 0;
}
.beschraenkung p { margin: 0 0 .45rem; font-size: .88rem; line-height: 1.45; }
.beschraenkung dl.werte { margin: 0; font-size: .85rem; }

/* „Gut zu wissen" — was vor Ort zählt (data/SCHEMA.md, Feld `hinweise`).
 *
 * Steht oben, vor der Karte: Sätze für die Ansteuerung, nicht fürs Nachlesen.
 * Bewusst **ohne** Farbe aus der Ampel-Palette, aus demselben Grund wie
 * .beschraenkung — die Hinweise sagen nichts über die Tiefe und dürfen nicht
 * wie eine zweite Ampel gelesen werden.
 *
 * Ein Eintrag ist ein Sachverhalt und bekommt deshalb eine eigene Zeile mit
 * eigener Marke. Der durchlaufende Absatz war genau der Fehler des alten
 * Notiz-Blocks: Bei kloster standen vier Sachverhalte in einem. */
ul.hinweise { list-style: none; margin: 0; padding: 0; }
ul.hinweise li {
  position: relative;
  padding: .3rem 0 .3rem 1.1rem;
  border-bottom: 1px solid var(--schaum);
  line-height: 1.45;
}
ul.hinweise li:last-child { border-bottom: 0; }
ul.hinweise li::before {
  /* ▸ als CSS-Escape: `content` ist die einzige Stelle, an der ein Zeichen
     aus dem Stylesheet gerendert wird — ohne @charset hinge es an der
     Kodierungsannahme des Browsers, Kommentare hängen an gar nichts. */
  content: "\25B8";
  position: absolute;
  left: .15rem;
  color: var(--grau);
}

/* Vogelperspektive — Luftbild, Seezeichen, Umschalter, Beschriftung */
section.karte { padding-bottom: .7rem; }
#hafenkarte {
  height: 22rem;
  max-height: 60vh;
  border-radius: 4px;
  overflow: hidden;
  background: #dfe7ec;
}
.karte-schalter {
  display: flex;
  gap: 1rem;
  margin-top: .6rem;
  font-size: .88rem;
}
.karte-schalter label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.karte-hinweis {
  margin: .5rem 0 0;
  font-size: .78rem;
  color: var(--grau);
  line-height: 1.45;
}
/* Die Attribution der Kartendienste ist Lizenzbedingung — sie bleibt lesbar */
#hafenkarte .maplibregl-ctrl-attrib { font-size: .68rem; }

/* Wind — der zweite Live-Wert der Seite, neben der Lage-Antwort.
 *
 * **Bewusst ohne eigene Farbskala.** Warnstufen und ihre Farben kommen
 * ausschließlich vom DWD (public/js/warnungen.js); eine Einfärbung nach
 * Windstärke wäre eine zweite Skala neben der amtlichen und läse sich wie
 * eine Warnung, die niemand ausgesprochen hat.
 *
 * Die Rollen sind dieselben wie im Popup der Übersichtskarte (`.wind-quelle`
 * grau, `.wind-fehler` grau-hell); nur die Schriftgröße ist die dieser Seite —
 * das Popup drängt sich auf .82rem, hier ist Platz.
 */
.wind-wert { margin: 0; line-height: 1.45; }
.wind-quelle {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--grau);
  line-height: 1.45;
}
.wind-fehler { color: var(--grau-hell); }

/* Wert-Listen: Label über Wert, damit auf schmalen Schirmen nichts umbricht */
dl.werte { margin: 0; }
dl.werte dt { font-size: .78rem; color: var(--grau); }
dl.werte dd { margin: 0 0 .55rem; font-size: 1rem; }
dl.werte dd:last-child { margin-bottom: 0; }

.fehlt { color: var(--grau-hell); font-style: italic; font-size: .92rem; }

/* Ausstattung — Zustand steht als Wort da, nicht nur als Zeichen */
ul.ausstattung { list-style: none; margin: 0; padding: 0; }
ul.ausstattung li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .22rem 0;
  border-bottom: 1px solid var(--schaum);
}
ul.ausstattung li:last-child { border-bottom: 0; }
ul.ausstattung .zeichen { width: 1.1rem; flex-shrink: 0; text-align: center; font-weight: 700; }
ul.ausstattung .ja .zeichen { color: var(--tonne-gruen); }
ul.ausstattung .nein .zeichen { color: var(--tonne-rot); }
ul.ausstattung .unbekannt .zeichen { color: var(--grau-hell); }
ul.ausstattung .sache { flex: 1; }
ul.ausstattung .zustand { font-size: .8rem; color: var(--grau); }
ul.ausstattung .unbekannt .sache { color: var(--grau); }

/* Telefonnummer und E-Mail: auf dem Handy ein Ziel zum Tippen, kein
 * Kleingedrucktes. Die Adresse bricht auf schmalen Schirmen um, statt die
 * Wertspalte zu sprengen. */
a.email { word-break: break-word; }
a.telefon {
  display: inline-block;
  font-size: 1.05rem;
  padding: .15rem 0;
  min-height: 2.2rem;
  line-height: 1.9;
}

details.beleg {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .6rem .9rem;
}
details.beleg summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--link);
  font-weight: 600;
}
details.beleg > *:not(summary) { font-size: .86rem; }
details.beleg h4 {
  margin: .9rem 0 .3rem;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grau);
}
details.beleg p { margin: .3rem 0; }
details.beleg ul.quellen { margin: .3rem 0; padding-left: 1.1rem; }
details.beleg ul.quellen li { margin-bottom: .35rem; word-break: break-word; }
details.beleg ul.quellen .abgerufen { color: var(--grau); font-size: .8rem; }
details.beleg .bezug { color: var(--grau); }
/* Unterhaltung der Zufahrt — dieselbe Rolle wie .bezug: eine benannte
 * Unsicherheit unter der Tiefenangabe, kein verrechneter Zuschlag. */
details.beleg .unterhaltung { color: var(--grau); }
details.beleg .offen { color: var(--grau-hell); }
details.beleg dl.werte dd { font-size: .92rem; }
details.beleg dl.werte dd small { color: var(--grau); }

/* Meldeknopf — der Rückweg von Bord (scripts/build_seiten.py, MELDE_ADRESSE).
 *
 * Steht unten, vor dem Zurück-Link, und ist der einzige Handlungsknopf der
 * Seite: also ein Ziel zum Tippen, kein Kleingedrucktes. Farbe aus der
 * Link-Palette und nicht aus der Ampel-Palette — er sagt nichts über die Lage. */
section.melden { background: #eef2f5; border-color: #c6d3dc; }
.melden p { margin: 0; line-height: 1.45; }
.melden p.melden-knopf { margin-top: .7rem; }
.melden-knopf a {
  display: inline-block;
  padding: .5rem .9rem;
  min-height: 2.4rem;
  background: var(--link);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: .95rem;
}

footer {
  background: var(--tinte);
  color: #9db8ca;
  font-size: .74rem;
  padding: .6rem 1rem;
  line-height: 1.5;
}
footer a { color: #cfe0eb; }

/* ---------- Hafenverzeichnis (public/haefen.html) ---------- */

/* Der Seitentitel des Verzeichnisses. Eigener Name statt `.hafenname`
 * mitbenutzt: Dort steht der Name eines Hafens, hier der Titel einer Seite —
 * eine Klasse, die beides heißt, sagt beim nächsten Lesen keines von beidem.
 * Die Werte sind dieselben, und das darf man sehen. */
.hafenname, .seitentitel { margin: 0 0 .2rem; font-size: 1.5rem; line-height: 1.25; }

.verzeichnis-hinweis { margin: .8rem 0 0; font-size: .9rem; line-height: 1.5; }

/* Die Liste selbst.
 *
 * **44 px Mindesthöhe je Zeile, und die Zahl ist nicht gerundet** — dieselbe
 * Vorgabe wie bei der Auswahlliste im Popup der Karte (public/index.html), aus
 * demselben Grund: Der Atlas wird an Bord am Telefon benutzt.
 *
 * **Die ganze Zeile ist der Verweis, nicht nur der Name.** Ein `<a>` um beide
 * Angaben herum ist von Haus aus mit der Tabulatortaste erreichbar und mit
 * Enter auslösbar, und die Vorlesehilfe liest ihn als einen Verweis mit Namen
 * und Art des Hafens — nicht als zwei Bruchstücke, von denen eines klickbar
 * ist. Das Ziel wird dadurch so breit wie die Zeile.
 *
 * Keine Farbe aus der Ampel-Palette: Die Liste sagt nichts über die Lage an
 * einem der Häfen. */
ul.verzeichnis {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 6px;
}
ul.verzeichnis li + li { border-top: 1px solid var(--linie); }
ul.verzeichnis a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0 .7rem;
  min-height: 44px;
  padding: .5rem .9rem;
  text-decoration: none;
  color: var(--tinte);
}
ul.verzeichnis a:hover { background: var(--schaum); }
/* Nach innen versetzt, damit der Rahmen der Liste den Fokusring nicht
 * beschneidet — Breite und Farbe wie bei der Auswahlliste der Karte. */
ul.verzeichnis a:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
ul.verzeichnis .vname { font-weight: 600; color: var(--link); text-decoration: underline; }
ul.verzeichnis .vart { font-size: .8rem; color: var(--grau); }
ul.verzeichnis .fehlt { font-size: .8rem; }

@media (min-width: 40rem) {
  dl.werte { display: grid; grid-template-columns: 15rem 1fr; gap: 0 1rem; }
  dl.werte dt { align-self: baseline; font-size: .85rem; }
}