/* =====================================================================
   Nautikarta — Gestaltung
   Stand: 04.09.2026 (Gestaltungsdurchgang)

   FARBEN
   Rostrot auf Sand, dazu Anthrazit. Rostrot ist die Farbe der
   Rostschutzfarbe und des Antifoulings — also die Farbe der Arbeit am
   Boot, nicht die des Wassers; das Blau-Tuerkis von Keellog und das
   Gruen-Orange von Womolo sind damit sicher vermieden.

   Neu und Absicht: Das Rostrot ist ab jetzt der AKZENT, nicht die
   Flaeche. Vorher lag es als breites Band ueber dem Seitenkopf und war
   damit das Lauteste auf der Seite, obwohl es nichts sagte. Jetzt traegt
   der Kopf Anthrazit, und Rostrot bleibt dem vorbehalten, was man
   anfassen soll: Knoepfen, Verweisen, der Entfernung.

   SCHRIFT
   Keine geladene Schrift. Zwei Gruende: Gesucht wird im Hafen mit
   schlechtem Netz, und bei Womolo sind Schriftdateien schon einmal aus
   der Hochladeliste gefallen und tagelang gefehlt. Die Wortmarke und die
   grosse Zeile stehen deshalb in einer Serifenschrift, die auf jedem
   Geraet vorhanden ist (Georgia/Palatino) — sie gibt der Seite ein
   Gesicht, ohne dass eine einzige Datei dazukommt.

   KONTRAST
   Jede Schriftfarbe ist auf ihrem Untergrund nachgerechnet, hell und
   dunkel. Der auffaelligste Fund: Im dunklen Modus stand helle Schrift
   auf dem hellen Rostrot (#E0704F) — 2,97:1, also unterhalb jeder
   Lesbarkeitsschwelle. Deshalb gibt es --knopf-schrift, die im dunklen
   Modus dunkel ist (5,1:1).
   ===================================================================== */

:root {
  --sand:        #F4F0E6;
  --papier:      #FFFFFF;
  --tinte:       #23201C;
  --tinte-leise: #6A6358;   /* 5,9:1 auf Papier · 5,2:1 auf Sand */
  --rost:        #B4462B;   /* 5,5:1 auf Papier · 4,8:1 auf Sand */
  --rost-dunkel: #8E3520;
  --rost-blass:  #F6E4DE;
  --linie:       #DFD8C8;
  --linie-kraeftig: #C9C0AC;

  --balken:        #23201C; /* Kopfleiste */
  --balken-schrift:#F4F0E6; /* 14:1 auf --balken */
  --balken-leise:  #A79E8E; /* 6,0:1 auf --balken */
  --knopf-schrift: #FFF6F0; /* 5,1:1 auf --rost */
  --chip:          #EFEADC; /* 13,5:1 mit --tinte */
  --chip-linie:    #DDD5C4;
  --schatten:      0 1px 2px rgba(35,32,28,.06), 0 4px 14px rgba(35,32,28,.05);
  --schatten-fest: 0 1px 2px rgba(35,32,28,.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sand:        #1B1917;
    --papier:      #242120;
    --tinte:       #EDE7DA;
    --tinte-leise: #A79E8E;   /* 6,0:1 auf Papier · 6,6:1 auf Sand */
    --rost:        #E0704F;   /* 5,5:1 auf Sand */
    --rost-dunkel: #F0906F;
    --rost-blass:  #3A2620;
    --linie:       #3A3530;
    --linie-kraeftig: #4C453E;

    --balken:        #131110;
    --balken-schrift:#EDE7DA;
    --balken-leise:  #A79E8E;
    --knopf-schrift: #221A16; /* dunkel auf hellem Rost — 5,1:1 */
    --chip:          #2E2A26; /* 11,6:1 mit --tinte */
    --chip-linie:    #403A34;
    --schatten:      none;
    --schatten-fest: none;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* Die Serifenschrift ist ausschliesslich fuer Wortmarke und grosse Zeile.
   Nie fuer Fliesstext — auf kleinen Bildschirmen liest sie sich schlechter. */
.serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
}

.huelle { max-width: 720px; margin: 0 auto; padding: 0 16px 72px; }

/* Sichtbare Tastaturfuehrung. Vorher gab es keine — wer mit der Tabtaste
   durch das Eintragsformular geht, sah nicht, wo er ist. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rost);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   Kopfleiste — auf jeder Seite gleich
   ===================================================================== */
header.kopf {
  background: var(--balken);
  color: var(--balken-schrift);
}
header.kopf .huelle {
  padding-top: 12px; padding-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wortmarke {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--balken-schrift); text-decoration: none;
  font-size: 21px; font-weight: 600; letter-spacing: .2px; line-height: 1;
}
.wortmarke svg { display: block; color: var(--rost); flex: none; }
.kopf-link {
  color: var(--balken-leise); text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--balken-leise); border-radius: 999px;
  padding: 7px 12px;
}
.kopf-link:hover { color: var(--balken-schrift); border-color: var(--balken-schrift); }

/* Bei 320 px darf die Marke nicht mit dem Verweis kollidieren. */
@media (max-width: 359px) {
  .wortmarke { font-size: 19px; gap: 7px; }
  .kopf-link { font-size: 12px; padding: 6px 9px; }
}

/* =====================================================================
   Aufmacher — nur auf der Startseite
   Die Aufgabe dieses Blocks: in fuenf Sekunden sagen, was das ist.
   ===================================================================== */
.aufmacher { padding-top: 26px; }
.aufmacher h1 {
  margin: 0 0 10px;
  font-size: 31px; line-height: 1.15; font-weight: 600;
  letter-spacing: -.4px; color: var(--tinte);
}
.aufmacher-satz {
  margin: 0; font-size: 16px; line-height: 1.5; color: var(--tinte-leise);
  max-width: 34em;
}
.aufmacher-satz strong { color: var(--tinte); font-weight: 600; }
@media (max-width: 359px) { .aufmacher h1 { font-size: 27px; } }
@media (min-width: 700px) { .aufmacher h1 { font-size: 38px; } }

/* =====================================================================
   Suchformular und Formulare allgemein
   ===================================================================== */
form.suche {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 16px;
  margin: 20px 0 14px;
  box-shadow: var(--schatten);
}
form.suche > label:first-of-type { margin-top: 0; }

label {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  margin: 16px 0 6px; color: var(--tinte);
}
label .leise { font-weight: 400; color: var(--tinte-leise); letter-spacing: 0; }

select, input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%; padding: 12px 12px; font-size: 16px; line-height: 1.3;
  font-family: inherit;
  border: 1px solid var(--linie-kraeftig); border-radius: 9px;
  background: var(--papier); color: var(--tinte);
  min-height: 46px;
}
select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte-leise) 50%),
                    linear-gradient(135deg, var(--tinte-leise) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: var(--tinte-leise); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--rost); }
textarea { min-height: 96px; resize: vertical; }

button, .knopf {
  display: block; width: 100%; margin-top: 18px;
  padding: 14px 16px; font-size: 16px; font-weight: 600; line-height: 1.2;
  font-family: inherit;
  background: var(--rost); color: var(--knopf-schrift);
  border: 1px solid var(--rost); border-radius: 9px;
  cursor: pointer; text-align: center; text-decoration: none;
  min-height: 48px;
}
button:hover, .knopf:hover { background: var(--rost-dunkel); border-color: var(--rost-dunkel); }
button:active, .knopf:active { transform: translateY(1px); }
.knopf.leise {
  background: transparent; color: var(--rost); border: 1px solid var(--rost);
}
.knopf.leise:hover { background: var(--rost-blass); }

/* Der Knopf, der etwas endgueltig entfernt. Er sieht anders aus als alle
   anderen — nicht zur Zierde: Wer den Eintrag eines Betriebs loescht,
   soll vorher sehen, dass dieser Knopf nicht die uebliche Handlung ist. */
button.knopf-gefahr, .knopf-gefahr {
  background: transparent; color: var(--rost-dunkel);
  border: 1px solid var(--rost-dunkel);
  width: auto; display: inline-block; padding: 11px 16px; font-size: 15px;
}

/* Ankreuzfelder als ganze Zeilen. Vorher waren es nackte Kaestchen mit
   Text daneben — auf dem Handy ein Ziel von zwoelf Pixeln. */
.kreuzliste { display: grid; gap: 0; margin-top: 6px;
  border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.kreuzliste label,
label.kreuz {
  display: flex; align-items: center; gap: 11px;
  margin: 0; padding: 12px 13px; min-height: 46px;
  font-size: 15px; font-weight: 400; letter-spacing: 0; cursor: pointer;
}
.kreuzliste label + label { border-top: 1px solid var(--linie); }
.kreuzliste label:hover, label.kreuz:hover { background: var(--chip); }
.kreuzliste input[type=checkbox], label.kreuz input[type=checkbox] {
  width: 19px; height: 19px; flex: none; accent-color: var(--rost); margin: 0;
}
label.kreuz {
  margin-top: 14px; border: 1px solid var(--linie); border-radius: 10px;
}

/* =====================================================================
   Standort
   Steht direkt unter der Suche. Erscheint nur, wenn der Browser Ortung
   kann; ohne ihn bleibt das Ortsfeld der volle Weg.
   ===================================================================== */
form.standort {
  background: none; border: 0; padding: 0;
  margin: 0 0 20px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 14px;
}
form.standort button {
  width: auto; margin: 0; padding: 12px 18px; font-size: 15px;
  background: transparent; color: var(--rost); border: 1px solid var(--rost);
}
form.standort button:hover { background: var(--rost-blass); }
form.standort button[disabled] { opacity: .55; }
.standort-sagt {
  font-size: 12.5px; line-height: 1.45; color: var(--tinte-leise);
  flex: 1 1 190px; min-width: 0;
}

/* =====================================================================
   Karte
   ===================================================================== */
#karte {
  position: relative; height: 240px; overflow: hidden;
  border: 1px solid var(--linie-kraeftig); border-radius: 14px;
  background: var(--chip); margin-bottom: 8px; touch-action: none;
  box-shadow: var(--schatten-fest);
}
#karte .kacheln, #karte .punkte { position: absolute; inset: 0; }
#karte img.kachel { position: absolute; width: 256px; height: 256px; user-select: none; }
#karte .punkt {
  position: absolute; width: 15px; height: 15px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Der eigene Standort. Bewusst ein Ring statt eines Punktes — er ist
   ungefaehr, nicht genau (auf zwei Nachkommastellen gerundet). */
#karte .ich {
  position: absolute; width: 20px; height: 20px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 3px solid var(--tinte);
  background: rgba(255,255,255,.35); box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
#karte .zoom { position: absolute; right: 8px; top: 8px; display: grid; gap: 5px; }
#karte .zoom button {
  width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0;
  font-size: 20px; line-height: 1;
  border-radius: 8px; border: 1px solid rgba(35,32,28,.15);
  background: rgba(255,255,255,.95); color: #23201C;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#karte .leer {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--tinte-leise); font-size: 13.5px; text-align: center; padding: 22px;
}
.kartenhinweis {
  font-size: 12.5px; line-height: 1.45; color: var(--tinte-leise); margin: 0 0 24px;
}

/* =====================================================================
   Trefferliste
   ===================================================================== */
.zahl {
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--tinte-leise);
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--linie);
}
.karte-eintrag {
  display: block; background: var(--papier); color: inherit; text-decoration: none;
  border: 1px solid var(--linie); border-radius: 14px;
  padding: 15px 16px; margin-bottom: 12px;
  box-shadow: var(--schatten-fest);
}
.karte-eintrag:hover { border-color: var(--rost); }
.karte-eintrag h2 {
  margin: 0 0 4px; font-size: 18px; line-height: 1.25;
  font-weight: 600; letter-spacing: -.15px; color: var(--tinte);
}
.zeile-ort { font-size: 14.5px; line-height: 1.45; color: var(--tinte-leise); }
.entfernung {
  float: right; margin: 2px 0 4px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--rost); white-space: nowrap;
}

/* Gewerke als ruhige Plaketten.
   Vorher hatte jedes Gewerk eine eigene Farbe — elf Stueck, darunter ein
   Blau, das genau die Farbe von Keellog ist. Ein Eintrag mit sieben
   Gewerken war damit ein Farbkasten, und die Farben behaupteten eine
   Bedeutung, die es nicht gibt: Es gibt keine Legende und keine Rangfolge.
   Der Name des Gewerks steht ohnehin im Text.
   Die Farbe kommt als style="background:…" direkt aus index.php, deshalb
   braucht es hier !important. Die Farbwerte selbst stehen in daten.php
   und bleiben unangetastet — die Kartenpunkte leben davon. */
.marken { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.marke {
  display: inline-block; font-size: 12.5px; line-height: 1.3;
  padding: 4px 10px; margin: 0; border-radius: 999px;
  background: var(--chip) !important;
  color: var(--tinte) !important;
  border: 1px solid var(--chip-linie);
}
/* „kommt zum Boot" ist kein Gewerk, sondern eine Eigenschaft — und im
   Hafen die Angabe, auf die es ankommt. Sie hebt sich deshalb ab.
   Bewusst NICHT in Rostrot: Auf der Einzelseite trägt dieselbe Plakette
   auch den umgekehrten Satz „Boot muss hin". Eine Auszeichnungsfarbe
   würde dort so aussehen, als sei das eine Empfehlung — und Empfehlungen
   gibt diese Seite nicht ab. */
.marke.grau {
  background: var(--papier) !important;
  color: var(--tinte) !important;
  border-color: var(--tinte-leise);
  font-weight: 600;
}

.herkunft {
  font-size: 12.5px; line-height: 1.45; color: var(--tinte-leise);
  margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 10px;
}
.herkunft strong { color: var(--tinte); }

/* =====================================================================
   Einzelseite
   ===================================================================== */
h1.titel {
  font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.3px;
  margin: 18px 0 8px;
}
@media (max-width: 359px) { h1.titel { font-size: 23px; } }

.zurueck {
  display: inline-block; font-size: 14px; font-weight: 600; color: var(--rost);
  text-decoration: none; margin: 18px 0 0;
}
.zurueck:hover { text-decoration: underline; }

.kontakt { margin-top: 20px; }
.kontakt a {
  display: block; padding: 14px 16px; margin-bottom: 10px;
  background: var(--papier); border: 1px solid var(--linie-kraeftig);
  border-radius: 11px; text-decoration: none; color: var(--tinte);
  font-weight: 600; font-size: 16.5px; min-height: 52px;
  box-shadow: var(--schatten-fest);
}
.kontakt a:hover { border-color: var(--rost); }
.kontakt a span {
  display: block; font-weight: 400; font-size: 13px; color: var(--tinte-leise);
  margin-top: 2px;
}

/* =====================================================================
   Hinweiskaesten
   ===================================================================== */
.nichts {
  background: var(--papier); border: 1px solid var(--linie);
  border-left: 4px solid var(--rost);
  border-radius: 12px; padding: 16px; margin-bottom: 18px;
  box-shadow: var(--schatten-fest);
}
.nichts h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.nichts ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; }
.nichts p { font-size: 14.5px; line-height: 1.55; margin: 0 0 8px; }
.nichts p:last-child { margin-bottom: 0; }

.hinweis-oben {
  background: var(--papier);
  border: 1px solid var(--linie); border-left: 4px solid var(--rost);
  border-radius: 10px;
  padding: 13px 15px; font-size: 14px; line-height: 1.55; margin: 18px 0;
}
.hinweis-oben strong { color: var(--tinte); }

/* Die Wegewahl im Eintrags- und Meldeformular: zwei Moeglichkeiten, und
   man muss auf einen Blick sehen, auf welcher man steht. Vorher waren es
   zwei Verweise in einer Zeile und darunter der Satz „Gerade gewaehlt: …". */
.wege { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.wege a {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  padding: 11px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--linie-kraeftig);
  background: var(--papier); color: var(--tinte-leise);
  min-height: 46px; display: flex; align-items: center; justify-content: center;
}
.wege a:hover { border-color: var(--rost); color: var(--tinte); }
/* Der gewählte Weg ist getönt und rostrot umrandet — nicht voll gefüllt.
   Voll gefüllt sah er aus wie der Absendeknopf und zog den Blick vom
   eigentlichen Formular weg. */
.wege a[aria-current="page"] {
  background: var(--rost-blass); border-color: var(--rost); color: var(--rost-dunkel);
  box-shadow: inset 0 0 0 1px var(--rost);
}

/* =====================================================================
   Fuss
   ===================================================================== */
footer.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 40px; padding: 22px 0 40px;
  background: var(--papier);
  font-size: 13px; line-height: 1.6; color: var(--tinte-leise);
}
footer.fuss .huelle { padding-bottom: 0; }
footer.fuss p { margin: 0 0 12px; }
footer.fuss p:last-child { margin-bottom: 0; }
footer.fuss a { color: var(--rost); }
.fuss-wege {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--linie);
  font-size: 14px; font-weight: 600;
}
.fuss-wege a { text-decoration: none; }
.fuss-wege a:hover { text-decoration: underline; }

/* Verweise im Fliesstext: nie das Browser-Blau, das passt zu keiner Farbe hier. */
.huelle a { color: var(--rost); }
.huelle a.karte-eintrag, .huelle .kontakt a, .huelle .wege a { color: var(--tinte); }
.huelle .wege a[aria-current="page"] { color: var(--rost-dunkel); }
.huelle .kopf-link { color: var(--balken-leise); }
.huelle a.knopf { color: var(--knopf-schrift); }
.huelle a.knopf.leise { color: var(--rost); }
.huelle .wege a:not([aria-current="page"]) { color: var(--tinte-leise); }

/* Zwei Knoepfe nebeneinander, sobald Platz ist. */
.knopfpaar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.knopfpaar .knopf { margin-top: 0; flex: 1 1 200px; }

/* =====================================================================
   Standort festlegen und festhalten  (04.09.2026)

   Dieser Block steht bewusst am Ende: Er kam aus einem anderen Durchgang
   als der Gestaltungsdurchgang darueber, und am Ende laesst er sich lesen,
   ohne dass zwei Faesser gleichzeitig aufgemacht werden.
   ===================================================================== */

/* Gemessen am 04.09.2026: "hidden" wirkt nur, solange kein eigenes
   display-Regelwerk daraufliegt. Das Suchformular ist ein flex-Kasten und
   die Knoepfe sind block — beide blieben deshalb sichtbar, obwohl sie
   versteckt waren. Das war keine Feinheit: Der Standort-Kasten stand so
   auch in Browsern da, die gar nicht orten koennen. Diese eine Zeile
   raeumt es fuer alle Faelle auf. */
[hidden] { display: none !important; }

/* „Standort löschen" — leiser als der Hauptknopf, weil man ihn selten
   braucht, aber immer finden muss. Er ist die Gegenrichtung zum Merken
   im Browser: Was gemerkt wird, muss man auch loswerden koennen. */
form.standort button.knopf-klein {
  padding: 9px 13px; font-size: 13px;
  color: var(--tinte-leise); border-color: var(--linie);
}
form.standort button.knopf-klein:hover { background: transparent; border-color: var(--tinte-leise); }

/* Die Nadel in Worten. Steht unmittelbar ueber der Karte, damit man
   Nadel und Wort in einem Blick hat. Eine Nadel ohne Wort daneben sagt
   niemandem, worauf sie zeigt. */
.nadel-sagt {
  margin: 0 0 10px; font-size: 14px; line-height: 1.45;
  background: var(--rost-blass); border-radius: 12px; padding: 10px 13px;
}
.nadel-sagt span { color: var(--tinte-leise); font-size: 13px; }

/* Die Nadel selbst. Groesser als ein Betriebspunkt und in Rost statt in
   dessen Gewerksfarbe, damit sie niemand fuer einen Treffer haelt. Der
   blasse Ring darum zeigt die Unschaerfe: Auf zwei Nachkommastellen
   gerundet behauptet sie keinen Meter. */
#karte .ich {
  width: 16px; height: 16px; margin: -9px 0 0 -9px;
  border: 3px solid #fff;
  background: var(--rost); box-shadow: 0 1px 4px rgba(0,0,0,.55);
  pointer-events: none;
}
#karte .ich::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -26px 0 0 -26px;
  border-radius: 50%; border: 2px solid var(--rost);
  opacity: .45;
}