body{
margin:0;
font-family:system-ui;
background:#f3f7fb;
}

.container{
max-width:1100px;
margin:auto;
background:white;
}

/* ⚠️ EINE Breite für alles (2026-08-13). Der Container gibt 1100px, jede Sektion
   (.home/.map/.pegel-page/.calc/.contact/.social-page/.radio/.learning/.legal)
   legt 40px Polster darum — Inhaltsbreite also 1020px, und das Polster IST der
   Abstand zum Rand. Alles darin füllt diese Breite.

   Vorher hatten elf Regeln ihre eigene Deckelung (760px für Fließtext, 720px für
   Kachellisten, 1000px für die Instagram-Beiträge). Sichtbar wurde es dort, wo
   zwei davon aufeinandertrafen: auf fahrregeln.php standen die Kapitel bei 760px
   und der Fundstellen-Balken darunter — der nie eine max-width hatte — bei 1020px.
   Und auf socialmedia.php passten wegen der 760px nur DREI der vier Kanalknöpfe
   nebeneinander (minmax(200px,1fr) + 20px Lücke braucht 860px für vier).

   ⚠️ Wer hier eine max-width ergänzt, macht die Seite wieder ungleich. Ausgenommen
   sind nur ZENTRIERTE KARTEN, die bewusst klein sind und nicht den Textfluss
   tragen: #cookieBanner (440), .ig-consent/.map-consent (560), .login-card (340),
   .no-access (600), .ms-pop (280), .mr-dialog (400). Die sind Dialoge, keine
   Inhaltsspalten — sie mitzuziehen wäre der andere Fehler.
   ⚠️ `.ig-card` stand hier bis 2026-08-13 mit 560px und gehörte NIE dazu: sie ist
   linksbündig und trägt Inhalt. Die Ausnahme wirkte nur plausibel, solange ihre
   Umgebung denselben Fehler hatte. */

.header img{
width:100%;
height:auto;   /* noetig, seit das <img> width/height-Attribute traegt: sonst
                  zieht der Browser das Bild auf die feste Attributhoehe */
display:block;
}

/* Die Kachel-Reihe stand bis 2026-07-30 im Seitenkopf und steht jetzt
 * auf socialmedia.php – die Kacheln selbst sind unverändert. */
.social-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:20px;
}

.social-grid a{
background:#0a3d62;
color:white;
padding:20px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
}

.filters{
display:flex;
gap:15px;
padding:15px 40px;
flex-wrap:wrap;
justify-content:center;
border-top:1px solid #eee;
}

/* ⚠️ Die Karte bleibt RANDLOS — sie ist der einzige Inhalt der Seite, der bis an den
   Containerrand laufen soll. Alles DARÜBER (Suche, Filter, Ausstattung, Tipp) trägt
   dagegen dieselbe 40px-Kante wie jede andere Sektion (2026-08-13). Vorher standen
   dort 0px (`.map-search`) bzw. 15px — die Leiste sass enger am Rand als der Rest
   der Seite, und `.map-page` selbst hat bewusst gar kein Polster. */
#map{
height:600px;
}

.contact{
padding:40px;
}

/* ⚠️ Seitlich 40px wie jede Sektion (2026-08-13), oben/unten weiter 20px: der Fuss
   ist ein schmales Band, 40px Höhe würden ihn zum Block machen. Vorher endete der
   Copyright-Block 20px weiter rechts als jeder Absatz darüber — unauffällig,
   solange er mittig stand, und sofort sichtbar, sobald er rechts angeheftet war. */
.footer{
display:flex;
align-items:center;
gap:12px;
text-align:center;
padding:20px 40px;
font-size:13px;
color:#777;
border-top:1px solid #eee;
}

/* Anmeldeknöpfe links, der Copyright-Block rechts (siehe .footer-text) */
.footer-auth{
flex:0 0 auto;
display:flex;
align-items:center;
gap:8px;
}
/* ⚠️ Rechts angeheftet (2026-08-13): Copyright, Besucherzähler, Impressum und
   Datenschutz bilden einen Block an der rechten Kante, die Anmeldeknöpfe stehen
   links. `text-align:center` erbt sonst von `.footer` und liess den Block mittig
   im Restplatz schweben — er wanderte damit, sobald sich die Knöpfe links änderten
   (angemeldet/abgemeldet). ⚠️ Auf dem Telefon wird der Fuss einspaltig, dort steht
   `text-align:center` wieder in der 600px-Regel. */
.footer-text{
flex:1;
text-align:right;
}
.footer-btn{
display:inline-block;
padding:5px 12px;
background:#0a3d62;
color:#fff;
text-decoration:none;
border-radius:6px;
font-size:12px;
font-weight:bold;
}
.footer-btn:hover{
background:#0c4b78;
}
/* Konto-/Verwaltungsknopf: heller als „Abmelden“, damit die beiden
 * nebeneinander unterscheidbar bleiben. */
.footer-btn.secondary{
background:#fff;
color:#0a3d62;
border:1px solid #0a3d62;
padding:4px 11px;
}
.footer-btn.secondary:hover{
background:#eef4f9;
}
.footer-user{
color:#555;
font-weight:bold;
}

/* Cookie Overlay */
#cookieOverlay{
position:fixed;
top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,0.6);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
}

#cookieBanner{
background:white;
color:#333;
padding:30px;
border-radius:12px;
max-width:440px;
width:90%;
text-align:center;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
}

#cookieBanner h3{
margin:0 0 12px;
color:#0a3d62;
font-size:18px;
}

#cookieBanner p{
font-size:14px;
color:#555;
margin:0 0 20px;
line-height:1.5;
}

#cookieBanner .cookie-buttons{
display:flex;
gap:12px;
justify-content:center;
}

#cookieBanner .btn-accept{
background:#0a3d62;
color:white;
border:none;
padding:10px 24px;
border-radius:6px;
cursor:pointer;
font-size:14px;
font-weight:bold;
}

#cookieBanner .btn-decline{
background:white;
color:#666;
border:1px solid #ccc;
padding:10px 24px;
border-radius:6px;
cursor:pointer;
font-size:14px;
}

button{
margin-top:10px;
padding:10px 15px;
border:none;
background:#0a3d62;
color:white;
border-radius:6px;
cursor:pointer;
box-sizing:border-box;   /* wie bei den Feldern: `.login-card button` und
                            `.ms-pop-btn` setzen width:100% und ragten sonst
                            um ihr eigenes Polster nach rechts hinaus */
}

/* ⚠️ box-sizing gehört HIER hin, nicht in jede Seite einzeln (2026-08-13).
   `width:100%` plus `padding:10px` plus `border:1px` ergibt ohne border-box
   100% + 22px — das Feld ragt genau so weit über den rechten Rand hinaus.
   Auf contact.php war das sichtbar; konto.css, admin.css und `.login-card`
   hatten sich die Zeile jeweils selbst nachgesetzt, die allgemeine Regel nicht.
   Vier Nachbesserungen für einen Fehler sind das Zeichen, dass er eine Ebene
   höher gehört. Die vier Einzelfassungen dürfen bleiben: sie sagen jetzt
   dasselbe und schaden nicht. */
input,textarea,select{
padding:10px;
border-radius:6px;
border:1px solid #ccc;
width:100%;
box-sizing:border-box;
margin-top:10px;
}

/* ⚠️ Ein Ankreuzfeld ist KEIN Textfeld (2026-08-13). Die Regel darüber traf auch
   `type=checkbox`, und `width:100%` bedeutet dort: das Kästchen nimmt die ganze
   Breite seines Etiketts. Sichtbar wurde es zweimal auf map.php:

     · Kategoriereihe — das Kästchen wurde **99 px** breit und stand damit ÜBER
       dem Text statt davor; das Etikett war 47 px hoch statt 19 px.
     · „Nur mit" — im Flex-Etikett schrumpfte das Kästchen zwar, blieb aber
       **50 px**, und der Text daneben brach um. Deutsche Etiketten sind Einwort
       („Gastliegeplätze") und können nicht umbrechen, englische schon:
       **„Guest berths" stand deshalb bei JEDER Fensterbreite zweizeilig.**

   ⚠️ Es sah nach einem Umbruch der REIHE aus und war der des ETIKETTS — der
   Platzbedarf der Reihe zu messen ging deshalb an der Sache vorbei.

   Bewusst als eigene Regel statt `input:not([type=checkbox])`: ein `:not()` hebt
   die Spezifität der Grundregel auf (0,2,1) und würde `.login-card input` und
   `.map-search input[type=search]` überstimmen. Diese Fassung liegt bei (0,1,1) —
   stark genug für `input`, schwach genug für jede Klassenregel.

   Betroffen sind ausschliesslich die elf Kartenfilter: das Panel lädt `admin.css`
   und gar kein `style.css`, sonst hat keine Seite Ankreuzfelder. */
input[type="checkbox"],
input[type="radio"]{
width:auto;
margin-top:0;
padding:0;
}

/* Leaflet Logo/Attribution ausblenden */
.leaflet-control-attribution img,
.leaflet-control-attribution a img {
    display: none !important;
}

/* ─── Symbole (icons.svg statt Font Awesome, seit 2026-08-01) ───────────────
   Die Icon-Schrift brachte eine eigene Größe und Farbe mit; ein <svg> muss beides
   bekommen. 1em folgt der Schriftgröße des Elternelements, currentColor der
   Textfarbe — damit verhalten sich die Symbole wie vorher die <i>-Elemente.
   Die Kategoriefarben stehen seit 2026-08-08 als .ms-marker-* weiter unten;
   map.js setzte sie bis dahin per style-Attribut (§23). */
.ms-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;   /* auf die Grundlinie wie bei einer Schrift */
    flex: 0 0 auto;
}
/* Marker auf der Karte: feste Größe statt 1em, mit demselben weißen Schimmer,
   den die Schrift über text-shadow hatte. */
.ms-marker {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);
}
/* Das Instagram-Ersatzbild setzte die Größe früher über font-size:30px. */
.ig-avatar-fallback .ms-icon { width: 30px; height: 30px; }

/* Cron-Adresse im Panel (§48): sie ist lang und darf die Spalte nicht sprengen. */
.cron-url{
display:inline-block;
max-width:100%;
overflow-wrap:anywhere;
font-size:13px;
background:#f8fafc;
border:1px solid #e3e9f0;
border-radius:6px;
padding:6px 8px;
}

/* ─── Lernbereich: Übersicht mit Kacheln (lernbereich.php) ──────────────── */
/* ⚠️ `.learning` fehlte hier bis 2026-08-09 ganz — und damit auch das Polster, das
   jede andere Sektion hat. Der Inhalt klebte am linken Rand des weißen Containers,
   während radio.php und sbf.php (beide `.radio`) einen Klick weiter 40px Abstand
   hatten. Dieselben 40px wie .home/.radio/.calc/.contact/.social-page, damit der
   Wechsel zwischen Übersicht und Lernbereich keinen Sprung macht.
   ⚠️ Der Wert steht an ZWEI Stellen: hier und in der 600px-Regel weiter unten. Nur
   eine davon zu ändern hieße, dass es auf dem Telefon oder am Rechner falsch bleibt. */
.learning {
    padding: 40px;
}
/* Die Kacheln stehen untereinander, nicht nebeneinander (2026-08-09): mit jeder
   weiteren Lizenz (Funklizenz DE, §34 F) würde eine Spaltenaufteilung enger und
   unruhiger. Eine Liste bleibt lesbar, egal wie viele dazukommen. */
.learn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
}
.learn-card {
    display: block;
    background: #fff;
    border: 1px solid #dde4ea;
    border-radius: 10px;
    padding: 22px 20px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.learn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(10, 61, 98, .12);
    border-color: #0a3d62;
}
.learn-card .ms-icon { width: 26px; height: 26px; color: #0a3d62; }
.learn-card h3 { margin: 10px 0 6px; color: #0a3d62; font-size: 18px; }
.learn-card p  { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.learn-meta    { font-size: 12px; color: #777; }

/* Brotkrume zurück zur Übersicht, auf radio.php */
.crumb { margin: 0 0 4px; font-size: 13px; }
.crumb a { color: #0a3d62; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* Knopf auf der Funklizenz-Seite, der zur Anmeldung führt (login.php) */
.btn-primary {
    display: inline-block;
    background: #0a3d62;
    color: #fff;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
}
.btn-primary:hover { background: #0d4f7c; }

/* Hinweis im Popup, wenn ein Nicht-Angemeldeter einen Spot vorschlagen will
   (seit 2026-07-31, siehe map.js). */
.spot-login-note {
    font-size: 13px;
    line-height: 1.45;
    margin: 6px 0 10px;
    color: #444;
}
.spot-login-links {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
}
.spot-login-links a { color: #0a3d62; }

/* ─── Social hover ─────────────────────────────────────────── */
.social-grid a{
transition:background .2s, transform .2s;
}
.social-grid a:hover{
background:#0c4b78;
transform:translateY(-2px);
}

/* ─── Nav bar + language toggle ────────────────────────────── */
.nav-bar{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
padding:12px 20px;
background:#0a3d62;
}

.nav-links{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.nav-links a{
display:inline-block;
background:transparent;
color:#cfe0f0;
text-decoration:none;
padding:10px 16px;
border-radius:6px;
cursor:pointer;
font-size:15px;
font-weight:bold;
}

.nav-links a:hover{
background:rgba(255,255,255,0.12);
color:#fff;
}

.nav-links a.active{
background:#fff;
color:#0a3d62;
}

#lang-toggle{
display:flex;
border:1px solid rgba(255,255,255,0.4);
border-radius:6px;
overflow:hidden;
}

#lang-toggle button{
margin-top:0;
background:transparent;
color:#cfe0f0;
border:none;
border-radius:0;
padding:8px 12px;
cursor:pointer;
font-size:13px;
font-weight:bold;
}

#lang-toggle button.active{
background:#fff;
color:#0a3d62;
}

/* ─── Page sections ────────────────────────────────────────── */
.home{
padding:40px;
}
.home h2{
margin-top:0;
color:#0a3d62;
}
.home h3{
margin-bottom:6px;
color:#0a3d62;
}
.home p{
line-height:1.6;
color:#333;
}

.home-link{
color:#0a3d62;
font-weight:bold;
text-decoration:none;
}
.home-link:hover{
text-decoration:underline;
}

.map-hint{
text-align:center;
color:#777;
font-size:13px;
margin:0;
padding:0 40px 10px;
}

.contact h2{
margin-top:0;
color:#0a3d62;
}

/* ─── Social-Media-Seite ───────────────────────────────────── */
.social-page{
padding:40px;
}
.social-page h2{
margin-top:0;
color:#0a3d62;
}
.social-page h3{
margin-bottom:6px;
color:#0a3d62;
}
.social-page p{
line-height:1.6;
color:#333;
}
/* Die Kanal-Kacheln stehen jetzt hier statt im Seitenkopf */
.social-page .social-grid{
margin-top:16px;
}
.social-page .social-grid a{
text-align:center;
}

/* ─── Instagram-Vorschau (statisch, ohne fremde Skripte) ───── */
/* ⚠️ Seit 2026-08-13 OHNE max-width. Sie stand auf 560px und galt als „zentrierte
   Karte" — ist aber linksbündig und trägt Inhalt. Solange der obere Teil der Seite
   auch schmal war, fiel es nicht auf; nach §66 stand sie als einziges Element kürzer
   da. Eine Ausnahme, die nur deshalb plausibel wirkt, weil ihre Umgebung denselben
   Fehler hat, ist keine. */
.ig-card{
margin:16px 0 0;
padding:18px;
background:#fff;
border:1px solid #e3e9f0;
border-radius:12px;
}

.ig-head{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
}
.ig-avatar{
width:64px;
height:64px;
border-radius:50%;
object-fit:cover;
display:block;
flex:0 0 auto;
}
.ig-avatar-fallback{
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#fff;
background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
.ig-names{
display:flex;
flex-direction:column;
}
.ig-handle{
color:#0a3d62;
font-weight:bold;
font-size:16px;
}
.ig-sub{
color:#888;
font-size:13px;
}

.ig-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
margin-top:16px;
}
.ig-thumb{
display:block;
aspect-ratio:1/1;
overflow:hidden;
border-radius:6px;
}
.ig-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .2s;
}
.ig-thumb:hover img{
transform:scale(1.05);
}

.ig-follow{
display:inline-block;
margin-top:16px;
padding:10px 18px;
background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
color:#fff;
text-decoration:none;
border-radius:8px;
font-weight:bold;
font-size:14px;
}
.ig-follow:hover{
opacity:.9;
}

/* Eingebettete Instagram-Beiträge (embed.js von Meta) und der Hinweis,
 * der an ihrer Stelle steht, solange dem Cookie-Hinweis nicht zugestimmt wurde. */
.ig-embeds{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:16px;
align-items:start;
margin-top:20px;
}
.ig-embeds .instagram-media{
margin:0 !important;
min-width:0 !important;
max-width:100% !important;
}

/* ⚠️ display:none stand bis 2026-08-08 als style="…" im Markup. Seit style-src
   ohne 'unsafe-inline' (§23) wäre das Attribut wirkungslos — der Kasten stünde
   dann von Anfang an offen da. consent.js schaltet ihn weiterhin über
   element.style.display; das ist CSSOM und von der CSP nicht betroffen. */
.ig-consent{
display:none;
max-width:560px;
margin:20px 0 0;
padding:16px 20px;
background:#f8fafc;
border:1px solid #e3e9f0;
border-radius:10px;
}

/* Honeypot in login.php und contact.php: ein Feld, das Menschen nie sehen und
   Bots gern ausfüllen. Muss unsichtbar sein, ohne dass ein Attribut es tut. */
.ms-hp{
display:none;
}
.ig-consent h4{
margin:0 0 6px;
color:#0a3d62;
font-size:16px;
}
.ig-consent p{
margin:0;
color:#555;
font-size:14px;
line-height:1.5;
}
.ig-consent button{
background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
font-weight:bold;
}

/* Kartenvorbehalt (§57). Sieht aus wie der Instagram-Vorbehalt darüber, ist aber
   ⚠️ NICHT display:none: dieser Block wird serverseitig gesetzt, wenn die Zustimmung
   fehlt, und muss sofort sichtbar sein. Beim Instagram-Block blendet ihn erst
   consent.js ein — wer das hier abschriebe, bekäme eine leere Kartenseite. */
.map-consent{
max-width:560px;
margin:20px auto;
padding:20px 24px;
background:#f8fafc;
border:1px solid #e3e9f0;
border-radius:10px;
text-align:center;
}
.map-consent h3{
margin:0 0 8px;
color:#0a3d62;
font-size:18px;
}
.map-consent p{
margin:0 0 16px;
color:#555;
font-size:14px;
line-height:1.5;
}
.map-consent-alt{
margin:16px 0 0;
padding-top:14px;
border-top:1px solid #e3e9f0;
font-size:14px;
}

/* ─── Revierkunde (§58) ────────────────────────────────────────
   ⚠️ Ein NACHSCHLAGEWERK, kein Trainer: keine Karten, keine Knöpfe, keine Punkte —
   Fliesstext zum Lesen. Deshalb bewusst NICHT aus learn.css bedient: dessen Tokens
   beschreiben Übungsoberflächen (Fragegrösse, Antwortkasten, Fortschrittsbalken), und
   nichts davon kommt hier vor. Wer hier `--lern-*` einsetzt, koppelt eine Lesestrecke
   an das Aussehen der Trainer und muss sie bei jeder Trainer-Änderung mitpflegen. */
.revier-kapitel{
margin:24px 0 0;
/* ⚠️ §122: ohne diesen Abstand klebt die Überschrift beim Sprung aus dem
   Kapitelverzeichnis am oberen Fensterrand. Und ⚠️ die Zeile gehört in DIESEN
   Block: ein ZWEITER gleichnamiger Regelblock machte den Ansatzpunkt des
   Selbsttests von check_breiten.py mehrdeutig (dieselbe Falle wie §112). Der
   Selektorname darf hier auch als Wort nicht noch einmal auftauchen — die Probe
   zählt Vorkommen im Text, nicht Regeln. */
scroll-margin-top:14px;
}
.revier-kapitel h3{
margin:0 0 12px;
color:#0a3d62;
font-size:20px;
}
.revier-kapitel h4{
margin:22px 0 6px;
color:#0a3d62;
font-size:16px;
}
.revier-kapitel p{
margin:0 0 12px;
line-height:1.65;
}
/* ─── Kapitelverzeichnis oben auf den langen Seiten (§122) ──────────────────
   ⚠️ Vorschlag des Betreibers ANSTELLE einer Teilung: die Seite bleibt ganz, oben
   steht ein Block mit den Kapitelüberschriften. Damit wandert kein Kapitel auf eine
   andere Seite, kein Bereichsschlüssel ändert sich (§35) und kein Verweis von aussen
   bricht.
   ⚠️ Die Kennungen tragen ein SPRACHPRÄFIX (de-/en-): beide Sprachfassungen stehen im
   selben Dokument, ohne Präfix gäbe es jede Kennung zweimal und der Sprung landete
   immer im versteckten deutschen Block.
   ⚠️ KEINE max-width hier — check_breiten.py verbietet eigene Deckelungen (§85). */
.kapitelindex{
margin:18px 0 4px;
padding:14px 18px 16px;
background:#f8fafc;
border:1px solid #e3e9f0;
border-radius:6px;
}
.kapitelindex b{
display:block;
margin:0 0 8px;
color:#0a3d62;
font-size:15px;
}
.kapitelindex ol{
margin:0;
padding-left:24px;
line-height:1.7;
}
.kapitelindex a{
color:#1a4b8c;
text-decoration:none;
}
/* ⚠️ Der Eintrag ist ZWEIGETEILT: der Name vor dem Doppelpunkt und der Rest der
   Überschrift. Am Rechner steht beides, auf dem Telefon nur der Name — gemessen war
   das Verzeichnis der Segelkunde bei 390px sonst 432px hoch und damit der halbe
   erste Bildschirm. ⚠️ Zusammen ergeben beide Teile WÖRTLICH die Überschrift;
   check_index.py vergleicht sie ohne Auszeichnung, also darf hier nichts anderes
   hineingeschrieben werden als das, was unten auch steht. */
.kapitel-kurz{ font-weight:600; }
.kapitelindex a:hover,
.kapitelindex a:focus{
text-decoration:underline;
}
.revier-warnung{
padding:12px 16px;
background:#fdf6e3;
border-left:3px solid #b7950b;
border-radius:0 6px 6px 0;
}
.revier-stand{
padding:12px 16px;
background:#f8fafc;
border:1px solid #e3e9f0;
border-radius:6px;
font-size:14px;
}
.revier-liste{
margin:0 0 12px;
padding-left:22px;
line-height:1.65;
}
.revier-liste li{
margin:0 0 6px;
}
.revier-mehr{
margin:28px 0 0;
padding-top:16px;
border-top:1px solid #e3e9f0;
font-size:14px;
color:#555;
}

/* ─── Funk / Radio ─────────────────────────────────────────── */
.radio{
padding:40px;
}
.radio h2{
margin-top:0;
color:#0a3d62;
}
.radio > p{
line-height:1.6;
color:#333;
}

.login-card{
max-width:340px;
margin:24px 0;
padding:24px;
background:#fff;
border:1px solid #dde5ec;
border-radius:10px;
box-shadow:0 2px 10px rgba(10,61,98,.08);
}
.login-card h3{
margin:0 0 16px;
color:#0a3d62;
}
.login-card input{
width:100%;
padding:10px;
margin-bottom:12px;
border:1px solid #ccc;
border-radius:6px;
box-sizing:border-box;
font-size:15px;
}
.login-card button{
width:100%;
padding:10px;
background:#0a3d62;
color:#fff;
border:none;
border-radius:6px;
font-size:15px;
cursor:pointer;
}
.login-card button:hover{
background:#0d4f7c;
}
.login-error{
margin:0 0 12px;
padding:8px 10px;
background:#f8d7da;
color:#842029;
border-radius:6px;
font-size:13px;
}
.login-hint{
margin:14px 0 0;
font-size:12px;
color:#777;
}

/* .login-bar / .login-bar-actions entfielen am 2026-07-31 zusammen mit der
 * Anmelde-Zeile auf radio.php – sie wurden nur dort verwendet. */

/* ─── Neues aus der Community (Startseite) ────────────────────────────────── */
.activity{
margin:22px 0;
padding:16px 18px;
background:#f8fafc;
border-radius:10px;
}
.act-title{
margin:0 0 12px;
font-size:16px;
color:#0a3d62;
}
.act-photos{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:12px;
}
.act-photos img{
width:84px;
height:64px;
object-fit:cover;
border-radius:6px;
display:block;
}
.act-list{
list-style:none;
margin:0;
padding:0;
font-size:14px;
}
.act-list li{
padding:7px 0;
border-bottom:1px solid #e9eef4;
line-height:1.5;
}
.act-list li:last-child{ border-bottom:none; }
.act-tag{
display:inline-block;
padding:1px 8px;
margin-right:6px;
border-radius:10px;
background:#0a3d62;
color:#fff;
font-size:11px;
text-transform:uppercase;
letter-spacing:.03em;
}
.act-comment .act-tag{ background:#b7950b; }
.act-meta{ color:#999; font-size:13px; }
.act-cta{
margin:12px 0 0;
font-size:13px;
color:#666;
}

/* ─── Pegel (pegel.php + Auszug auf der Startseite) ───────────────────────── */
/* ⚠️ Diese Regel fehlte, und nur hier: .home, .calc, .contact, .radio und
 * .social-page tragen alle padding:40px, .pegel-page trug gar nichts — der
 * Inhalt klebte links und rechts am Rand. Wer eine neue Seite anlegt, muss den
 * Namen an ZWEI Stellen eintragen: hier und in der @media-Regel am Dateiende. */
.pegel-page{
padding:40px;
}
.pegel-page h3{
margin:24px 0 8px;
font-size:17px;
color:#0a3d62;
}
.pegel-status{
margin:14px 0;
padding:9px 14px;
background:#f8fafc;
border-radius:8px;
font-size:13px;
color:#666;
}
.pegel-warn{
background:#fbe3e2;
border:1px solid #f5c6c4;
color:#842029;
font-weight:bold;
}
/* Breite Tabellen scrollen in sich selbst, damit die Seite auf dem Handy
   nicht seitlich wandert. */
.pegel-scroll{
overflow-x:auto;
}
.pegel-table{
width:100%;
border-collapse:collapse;
font-size:14px;
}
.pegel-table th{
text-align:left;
padding:8px 10px;
border-bottom:2px solid #e3e9f0;
font-size:12px;
text-transform:uppercase;
letter-spacing:.03em;
color:#777;
font-weight:600;
}
.pegel-table td{
padding:8px 10px;
border-bottom:1px solid #f1f5f9;
white-space:nowrap;
}
.pegel-table tr:hover td{
background:#f8fafc;
}
.pegel-name{ font-weight:600; color:#0a3d62; }
.pegel-km,
.pegel-ts{ color:#999; font-size:13px; }
.pegel-cm{ font-variant-numeric:tabular-nums; }
.pegel-trend{ font-size:16px; color:#0a3d62; }
.pegel-badge span,
.pegel-nav span{
display:inline-block;
padding:1px 9px;
border-radius:10px;
font-size:12px;
}
/* ⚠️ Die Spalte „Schifffahrt" trägt NSW/HSW und ist eine andere Aussage als
 * „Lage" (MNW/MHW) daneben — siehe pegel_api.php. Sie steht in Versalien und
 * enger, damit die beiden Abzeichen nicht wie zwei Fassungen desselben Werts
 * aussehen. */
.pegel-nav span{
font-weight:600;
letter-spacing:.04em;
}
.pegel-nav-unknown{ color:#bbb; }
.pegel-state-normal{ background:#e3f2e4; color:#2e7d32; }
.pegel-state-high{   background:#fbe3e2; color:#c62828; }
.pegel-state-low{    background:#fdf3d8; color:#8a6d1b; }
.pegel-state-unknown{ background:none; }
/* Pegel, die seit Stunden nichts gemeldet haben: sichtbar lassen, aber klar
   als alt kennzeichnen – sonst liest man 37 cm als aktuellen Wasserstand. */
.pegel-state-stale{ background:#eceff3; color:#666; }
.pegel-stale td{ color:#999; }
.pegel-stale .pegel-name{ color:#888; font-weight:normal; }
.pegel-stale .pegel-cm b{ font-weight:normal; }
/* Wassertemperatur (§87): eine Zeile unter den Tabellen, weil sie nur EIN Pegel
   misst (Ruwer). Als Spalte wäre sie 51-mal leer und läse sich wie ein Ausfall. */
.pegel-temp{
margin-top:14px;
font-size:14px;
color:#555;
}
.pegel-temp-item{
display:inline-block;
margin-left:8px;
padding:2px 8px;
border-radius:10px;
background:#eef4f8;
}
.pegel-temp-item.pegel-stale{ background:#eceff3; color:#999; }
.pegel-hint{
margin-top:22px;
font-size:13px;
color:#777;
line-height:1.6;
}

.pegel-teaser{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px 16px;
margin:18px 0;
padding:12px 16px;
background:#f8fafc;
border-left:3px solid #0a3d62;
border-radius:8px;
font-size:14px;
}
.pegel-teaser-title{
font-weight:bold;
color:#0a3d62;
}
.pegel-teaser-item{ font-variant-numeric:tabular-nums; }
.pegel-teaser-link{ margin-left:auto; color:#0a3d62; }

/* ─── Kartensuche ─────────────────────────────────────────────────────────── */
.map-search{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
margin:0 0 10px;
padding:40px 40px 0;
}
.map-search input[type="search"]{
flex:1 1 260px;
min-width:0;
padding:9px 12px;
border:1px solid #e3e9f0;
border-radius:8px;
font-size:14px;
font-family:inherit;
}
.map-search input[type="search"]:focus{
outline:none;
border-color:#0a3d62;
}
.map-search button{
padding:9px 14px;
border:1px solid #e3e9f0;
border-radius:8px;
background:#f8fafc;
color:#0a3d62;
font-size:14px;
font-family:inherit;
cursor:pointer;
}
.map-search button:hover{
background:#eef4f9;
}
/* Der GPX-Download sitzt in derselben Zeile und sieht aus wie der Knopf daneben –
   er IST aber ein Anker, weil er eine Datei holt und kein JavaScript braucht (§29). */
.map-gpx{
padding:9px 14px;
border:1px solid #e3e9f0;
border-radius:8px;
background:#f8fafc;
color:#0a3d62;
font-size:14px;
text-decoration:none;
white-space:nowrap;
}
.map-gpx:hover{
background:#eef4f9;
text-decoration:underline;
}
.map-count{
font-size:13px;
color:#777;
}

/* ─── Rechtstexte (impressum.php / datenschutz.php) ───────────────────────── */
/* ⚠️ `.legal` hatte NIE ein Polster — bis 2026-08-13 hat das die max-width:760px
   verdeckt: der Text stand links am Rand und hörte rechts früh auf, was wie eine
   Absicht aussah. Ohne die Deckelung lief er an beiden Rändern an. Dieselben 40px
   wie jede andere Sektion; derselbe Fehler wie bei `.pegel-page` (§60 a) und
   `.learning` (2026-08-09) — beide Male fiel er erst auf, als etwas anderes ihn
   freilegte. ⚠️ Der Wert steht an ZWEI Stellen: hier und in der 600px-Regel. */
.legal{
padding:40px;
}
.legal h3{
margin:26px 0 8px;
font-size:17px;
color:#0a3d62;
}
.legal p,
.legal li{
line-height:1.65;
color:#333;
}
.legal ul{
margin:8px 0 8px 20px;
}
.legal li{
margin-bottom:6px;
}
.legal code{
background:#f1f5f9;
padding:1px 5px;
border-radius:4px;
font-size:13px;
}
.legal-note{
padding:10px 14px;
background:#f8fafc;
border-left:3px solid #b7950b;
font-size:14px;
color:#555;
}
.legal-more{
margin-top:30px;
padding-top:14px;
border-top:1px solid #e3e9f0;
}
.cookie-more{
margin:6px 0 0;
font-size:13px;
}
.cookie-more a{
color:#0a3d62;
}

.no-access{
max-width:600px;
margin:16px 0;
padding:16px 20px;
background:#fff3cd;
border:1px solid #ffe69c;
border-radius:8px;
}
.no-access h3{
margin:0 0 6px;
color:#856404;
font-size:16px;
}
.no-access p{
margin:0;
color:#856404;
font-size:14px;
}

.radio-hint{
margin:0 0 20px;
font-size:13px;
line-height:1.5;
color:#777;
}

/* ─── Funk-Lern-App an das Seiten-Layout angleichen ─────────
 * radio/styles.css kommt aus dem MarineRadio-Projekt und bringt einen eigenen
 * Material-Look samt @media (prefers-color-scheme: dark) mit – deshalb sah die
 * Seite auf einem dunkel eingestellten Rechner schwarz aus und auf einem hellen
 * nicht. Hier wird beides überschrieben: alle Regeln stehen unter .radio-embed,
 * also mit zwei Klassen (0,2,0). Media Queries erhöhen die Spezifität nicht, die
 * Dark-Regeln der App (0,1,0 bzw. 0,2,0) verlieren damit unabhängig von der
 * Ladereihenfolge. Die App selbst wird nicht angefasst und behält standalone
 * ihr eigenes Aussehen. */

/* Eingebettete Lern-App: darf die Seite nicht auf volle Fensterhöhe strecken
 * und sitzt wie das Rechner-Raster innerhalb der Sektion. */
.radio-embed{
margin:0;
}
.radio-embed .mr-app,
.radio-embed .mr-shell{
min-height:0;
}

/* Farben der App auf die Seitenpalette – gilt auch im Dark-Mode des Betriebssystems.
 * ⚠️ Seit §45 stehen hier KEINE Farben mehr, sondern nur die Übersetzung der
 * App-eigenen Namen auf das gemeinsame Profil in learn.css. Wer eine Farbe ändern
 * will, ändert sie DORT — sonst laufen die Lernbereiche wieder auseinander.
 * Die Dark-Mode-Regeln der App verlieren weiterhin über die Spezifität (§4b). */
.radio-embed .mr-app{
--mr-navy:var(--lern-akzent);
--mr-navy-2:var(--lern-akzent-stark);
--mr-aqua:var(--lern-akzent-stark);
--mr-primary-container:var(--lern-flaeche-2);
--mr-on-primary-container:var(--lern-akzent);
--mr-bg:var(--lern-flaeche);
--mr-surface:var(--lern-flaeche);
--mr-surface-variant:var(--lern-flaeche-2);
--mr-on-surface:var(--lern-text);
--mr-on-surface-variant:var(--lern-text-leise);
--mr-outline:var(--lern-linie);
--mr-correct:var(--lern-richtig);
--mr-correct-bg:var(--lern-richtig-flaeche);
--mr-wrong:var(--lern-falsch);
--mr-wrong-bg:var(--lern-falsch-flaeche);
--mr-error-container:var(--lern-gefahr-flaeche);
--mr-on-error-container:var(--lern-gefahr-text);
--mr-radius:var(--lern-radius);
display:block;
background:var(--lern-flaeche);
font-family:var(--lern-schrift);
}

/* Die App sitzt im Textfluss der Seite, genau wie der Sportbootführerschein (§37).
 * ⚠️ Seit §42 OHNE Breitenbegrenzung: die Shell war auf 720px gedeckelt, der SBF
 * dagegen nutzt die ganze Sektion — nebeneinander sahen die beiden Lernbereiche
 * deshalb verschieden breit aus.
 * ⚠️ Seit 2026-08-13 begrenzt hier gar nichts mehr: auch die Auswahlkarten laufen
 * über die volle Sektionsbreite, wie `.sbf-karten` und `.sks-karten`. Die Breite
 * macht überall nur noch das 40px-Polster der Sektion. */
.radio-embed .mr-shell{
max-width:none;
margin-left:0;
margin-right:0;
background:transparent;
}

/* Die Dark-Regeln der App setzen an diesen Stellen feste Farben statt Variablen */
.radio-embed .mr-answer.correct{ color:var(--lern-richtig-text); }
.radio-embed .mr-answer.wrong{ color:var(--lern-falsch-text); }
.radio-embed .mr-call-name{ color:var(--lern-akzent); }
.radio-embed .mr-langblock .mr-lbl{ color:var(--lern-akzent); }
.radio-embed .mr-link{ color:var(--lern-akzent); }
.radio-embed .mr-cat-a{ color:var(--lern-richtig); }
.radio-embed .mr-textbtn,
.radio-embed .mr-btn{ color:var(--lern-akzent); }

/* Kopfzeile: seit 2026-08-09 (§37) OHNE den blauen Balken.
 *
 * Vorher sah die Funklizenz aus wie eine fremde App, die in die Seite geklebt wurde:
 * eigener navyfarbener Kopf mit App-Namen, darunter erst der Seiteninhalt. Der
 * Sportbootführerschein ist dagegen Teil der Seite. Beide sollen gleich aussehen —
 * also fällt der Balken weg, und was gebraucht wird (Zurück, Sprachschalter) steht
 * als schlichte Zeile darin.
 * ⚠️ Die Zeile bleibt bestehen, sie wird nur unsichtbar gemacht: sie trägt den
 * Zurück-Knopf und den FR|DE-Schalter der App. Sie zu entfernen hieße, in
 * radio/app.js einzugreifen — die Datei stammt aus dem MarineRadio-Projekt. */
.radio-embed .mr-topbar{
position:static;
padding:0 0 10px;
border-radius:0;
background:transparent;
color:var(--lern-akzent);
border-bottom:1px solid var(--lern-linie-zart);
}
.radio-embed .mr-topbar .mr-title{
font-size:16px;
font-weight:bold;
color:var(--lern-akzent);
}
.radio-embed .mr-iconbtn{
background:var(--lern-flaeche);
color:var(--lern-akzent);
border:1px solid var(--lern-linie);
border-radius:8px;
}
.radio-embed .mr-iconbtn:hover{
background:var(--lern-hover);
}
/* Zurück-Knopf mit Text „← Übersicht" wie im Sportbootführerschein (§42).
 * ⚠️ `.mr-iconbtn` ist fest 40×40 — mit Text würde er abgeschnitten. Die Freigabe steht
 * hier und nicht in radio/styles.css: jene Datei stammt aus dem MarineRadio-Projekt,
 * und je weniger dort steht, desto weniger ist beim nächsten Abgleich nachzuziehen.
 * ⚠️ Drei Klassen (0,3,0), damit die Regel `.radio-embed .mr-iconbtn` (0,2,0) darüber
 * verliert — dieselbe Falle wie bei `.sbf-app button` in §37 c. */
.radio-embed .mr-topbar .mr-backbtn{
width:auto;
height:auto;
gap:6px;
padding:8px 14px;
font-size:14px;
font-weight:bold;
}
/* Sprachschalter wie der DE|EN-Schalter der Seite, nur in Navy statt auf Navy */
.radio-embed .mr-langtoggle{
border:1px solid var(--lern-linie);
border-radius:6px;
background:var(--lern-flaeche);
padding:0;
overflow:hidden;
}
.radio-embed .mr-langtoggle span{
border-radius:0;
padding:8px 12px;
font-size:13px;
color:var(--lern-akzent);
}
.radio-embed .mr-langtoggle span.active{
background:var(--lern-akzent);
color:var(--lern-flaeche);
}

.radio-embed .mr-content{
padding:16px 0 0;
}

/* Karten wie die Rechner-Karten */
/* Karten weiß wie die SBF-Karten (§37) — vorher hellblau hinterlegt (#f8fafc), was
   sie gegenüber dem Sportbootführerschein wie ein fremdes Element wirken ließ.
   Die Katalog-Einträge behalten den leichten Grund: dort sind es viele Blöcke
   hintereinander, und die brauchen eine Abgrenzung. */
.radio-embed .mr-card,
.radio-embed .mr-statrow,
.radio-embed .mr-langblock{
background:var(--lern-flaeche);
border:1px solid var(--lern-linie);
border-radius:10px;
}
.radio-embed .mr-cat-item{
background:var(--lern-flaeche-2);
border:1px solid var(--lern-linie);
border-radius:10px;
}
.radio-embed .mr-card{
padding:18px;
}
.radio-embed .mr-card .mr-card-title,
.radio-embed .mr-statrow .mr-card-title{
color:var(--lern-akzent);
font-size:16px;
font-weight:bold;
}
.radio-embed .mr-card .mr-card-sub{
color:var(--lern-text-leise);
font-size:13px;
}
/* ⚠️ Kein Hover mehr auf den Lizenzkarten (§37): seit die Aktionen als eigene Knöpfe
   darauf stehen, ist die Karte selbst nicht mehr anklickbar. Ein Hover-Effekt würde
   eine Klickfläche versprechen, die es nicht gibt. */
.radio-embed .mr-card:hover{
filter:none;
border-color:var(--lern-linie);
}
.radio-embed .mr-chev{
color:var(--lern-gold);
}
/* Gesperrte Lizenz (seit 2026-08-07): sichtbar, aber erkennbar zu.
   ⚠️ Muss hier stehen und nicht nur in radio/styles.css – .radio-embed .mr-card ist
   spezifischer als das .mr-card-locked der App und würde es sonst überschreiben. */
.radio-embed .mr-card-locked{
background:var(--lern-gesperrt-flaeche);
border-color:var(--lern-linie);
border-style:dashed;
}
.radio-embed .mr-card-locked .mr-card-title{
color:var(--lern-gesperrt-text);
}
.radio-embed .mr-card-locked .mr-chev{
color:var(--lern-gesperrt-text);
}
.radio-embed .mr-card-locked:hover{
border-color:var(--lern-gesperrt-linie);
}
.radio-embed .mr-locked{
background:var(--lern-flaeche);
border:1px solid var(--lern-linie);
border-radius:10px;
padding:18px;
}
.radio-embed .mr-locked h3{
color:var(--lern-akzent);
font-size:16px;
margin:0 0 8px;
}
.radio-embed .mr-locked p{
color:var(--lern-text-leise);
margin:0;
}

/* Schaltflächen wie .footer-btn / die Rechner-Buttons: eckiger, Navy statt Pille */
.radio-embed .mr-btn{
width:auto;
min-width:200px;
padding:10px 18px;
border-radius:6px;
border:1px solid var(--lern-akzent);
font-size:14px;
font-weight:bold;
}
.radio-embed .mr-btn:hover{
background:var(--lern-hover);
}
.radio-embed .mr-btn.filled{
background:var(--lern-akzent);
border-color:var(--lern-akzent);
color:var(--lern-flaeche);
}
.radio-embed .mr-btn.filled:hover{
background:var(--lern-akzent-stark);
}
.radio-embed .mr-btn.danger{
background:var(--lern-gefahr-flaeche);
border:1px solid var(--lern-gefahr-linie);
color:var(--lern-gefahr-text);
}
/* ⚠️ „OK" / „Weiter" so schmal wie im Sportbootführerschein (§42). Die Grundregel
 * setzt `min-width:200px`, damit die Knöpfe AUF den Karten eine gemeinsame Breite
 * haben — für den Einsende-Knopf unter den Antworten ist das zu breit. Deshalb nur
 * `.mr-actionbar`, nicht die Grundregel: sonst schrumpften auch die Kartenknöpfe. */
.radio-embed .mr-actionbar .mr-btn{
min-width:0;
}
.radio-embed .mr-nav .mr-btn{
min-width:0;
flex:1;
}

/* Fortschrittsbalken und Antworten */
.radio-embed .mr-progressbar{
background:var(--lern-linie);
border-radius:3px;
}
.radio-embed .mr-progressbar > i{
background:var(--lern-gold);
}
.radio-embed .mr-statrow .mr-progressbar{
background:var(--lern-linie);
}
.radio-embed .mr-answer{
border-radius:var(--lern-radius-feld);
border-width:1px;
/* ⚠️ Die Schrift der Antworten ausdrücklich aus dem Profil — in BEIDEN Bereichen.
 * Vorher stand sie hier gar nicht: die Funk-Antworten nahmen, was der Browser für
 * <button> vorgibt, der SBF setzte eigene Werte. „Nicht gesetzt" ist eben kein
 * gemeinsamer Wert, sondern nur eine Stelle, an der niemand hinsieht (§45 h). */
font-size:var(--lern-antwort-groesse);
font-weight:var(--lern-antwort-gewicht);
line-height:var(--lern-antwort-zeile);
}
.radio-embed .mr-answer.selected{
border-color:var(--lern-gold);
box-shadow:inset 0 0 0 1px var(--lern-gold);
}
.radio-embed .mr-question{
color:var(--lern-frage-farbe);
}
.radio-embed .mr-dot.on{
background:var(--lern-gold);
}
.radio-embed .mr-dialog{
border-radius:12px;
}
.radio-embed .mr-dialog h3{
color:var(--lern-akzent);
}

/* ─── Calculators ──────────────────────────────────────────── */
.calc{
padding:40px;
}
.calc h2{
margin-top:0;
color:#0a3d62;
}

.calc-group{
margin-top:30px;
}
.calc-group h3{
color:#0a3d62;
border-bottom:2px solid #b7950b;
padding-bottom:6px;
margin-bottom:2px;
}
.calc-group-sub{
color:#777;
font-size:14px;
margin:0 0 16px;
}

.calc-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:20px;
}

.calc-card{
background:#f8fafc;
border:1px solid #e3e9f0;
border-radius:10px;
padding:18px;
}
.calc-card-title{
margin:0 0 14px;
color:#0a3d62;
font-size:16px;
}

.calc-field{
margin-bottom:10px;
}
.calc-field label{
display:block;
font-size:13px;
font-weight:600;
color:#555;
}
.calc-field input{
margin-top:4px;
}

.calc-swap{
text-align:center;
color:#b7950b;
font-size:18px;
margin:2px 0;
}

.calc-inline{
display:flex;
gap:8px;
align-items:stretch;
margin-top:4px;
}
.calc-inline input{
flex:1;
margin-top:0;
}
.calc-now{
margin-top:0;
white-space:nowrap;
background:#b7950b;
}

.calc-hint{
font-size:12px;
color:#777;
margin-top:8px;
}

.calc-result{
margin-top:12px;
background:#fff;
border:1px solid #e3e9f0;
border-radius:8px;
padding:12px;
}
.calc-result-title{
font-weight:bold;
color:#0a3d62;
border-bottom:1px solid #eee;
padding-bottom:6px;
margin-bottom:8px;
font-size:14px;
}
.calc-result-row{
display:flex;
justify-content:space-between;
gap:10px;
padding:3px 0;
font-size:14px;
}
.calc-result-value{
font-weight:bold;
color:#0a3d62;
}


/* ─── Karten-Popups (ehemals style="…" in map.js, §23) ──────────
   Werte 1:1 aus den früheren Inline-Angaben übernommen. Die allgemeinen
   button{} / input{} -Regeln oben sind Element-Selektoren und damit schwächer
   als diese Klassen — was sie zusätzlich setzen (z. B. button{margin-top}),
   galt vorher genauso, weil das Inline-Attribut es auch nicht überschrieb. */
.ms-pop{ min-width:220px; max-width:280px; }
.ms-pop-name{ font-size:14px; }
.ms-pop-cat{ color:#666; }
.ms-pop-link{ border:none; background:none; padding:0; color:#0a3d62; cursor:pointer; font-size:12px; text-decoration:underline; }
.ms-pop-desc{ font-size:13px; }
/* Betriebszeiten (§30): abgesetzt, damit sie nicht als weiterer Satz Beschreibung
   gelesen werden — an einer Schleuse ist das die Angabe, wegen der man klickt. */
.ms-pop-hours{ margin-top:6px; font-size:13px; line-height:1.35; }
.ms-pop-hours-src{ color:#777; font-size:11px; }
.ms-pop-photos{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.ms-pop-thumb{ width:80px; height:60px; object-fit:cover; border-radius:4px; }
.ms-pop-sect{ margin-top:10px; border-top:1px solid #eee; padding-top:8px; }
.ms-pop-head{ color:#666; font-weight:bold; }
.ms-pop-file{ font-size:11px; margin-top:4px; width:100%; }
.ms-pop-btn{ margin-top:5px; padding:4px 10px; background:#0a3d62; color:white; border:none; border-radius:4px; cursor:pointer; font-size:12px; width:100%; }
.ms-pop-msg{ font-size:11px; margin-top:3px; }
.ms-pop-c{ margin-top:6px; background:#f8f9fa; border-radius:4px; padding:6px 8px; }
.ms-pop-c-name{ font-weight:bold; color:#0a3d62; }
.ms-pop-c-date{ color:#999; float:right; }
.ms-pop-none{ color:#999; }
.ms-pop-write{ margin-top:8px; }
.ms-pop-input{ width:100%; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px; box-sizing:border-box; margin-bottom:4px; }
.ms-pop-text{ width:100%; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px; box-sizing:border-box; height:60px; resize:none; }

/* ⚠️ Der „Kommentar senden“-Knopf stand ohne margin-top im Markup, der
   „Einreichen“-Knopf mit margin-top:5px. .ms-pop-btn trägt die 5px; im
   Schreibblock wird sie wie vorher zurückgenommen. */
.ms-pop-write .ms-pop-btn{ margin-top:0; }

/* Markerfarbe je Kategorie — currentColor im <use>-Symbol (map.js icon()). */
.ms-marker-hafen{ color:#0a3d62; }
.ms-marker-slipstelle{ color:#b7950b; }
.ms-marker-tankstelle{ color:#c0392b; }
.ms-marker-ankerplatz{ color:#1a7a4a; }
.ms-marker-anlegestelle{ color:#6c3483; }
.ms-marker-schleuse{ color:#0e7c86; }
.ms-marker-default{ color:#333; }

/* ─── Ausstattungsfilter und -anzeige (§31) ───────────────────────────────── */
.fac-filters{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
padding:0 40px 8px;
font-size:13px;
color:#0a3d62;
}
.fac-filters label{ display:flex; align-items:center; gap:4px; cursor:pointer; }
.fac-label{ font-weight:bold; }
/* Der Hinweis nimmt die ganze Zeile, damit er nicht zwischen die Häkchen rutscht. */
.fac-hint{ flex-basis:100%; color:#777; font-size:12px; }
.ms-pop-fac{ margin-top:6px; font-size:13px; line-height:1.35; }
.ms-pop-fac-no{ color:#a33; }
.ms-pop-fac-note{ color:#555; }

/* Hilfsfeld fürs Kopieren des Spot-Links (§33). Nicht display:none — daraus lässt
   sich nicht selektieren, und genau das braucht execCommand('copy'). */
.ms-offscreen{
position:fixed;
top:-1000px;
left:-1000px;
opacity:0;
width:1px;
height:1px;
}

/* Lizenzkarten mit Aktionen darauf (§37) — Aufbau wie die SBF-Karten:
   untereinander, Fortschrittsbalken, darunter die Knöpfe nebeneinander. */
.radio-embed .mr-card-open{
display:block;
cursor:default;
}
.radio-embed .mr-cardbtns{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:14px;
}
.radio-embed .mr-cardbtns .mr-btn{
min-width:0;
margin-top:0;
}

/* ── Zurück nach oben (2026-08-13, §71) ───────────────────────────────────────
   Ein fester Knopf am rechten Rand, der beim Scrollen mitwandert.

   ⚠️ Er erscheint erst nach 300px Scrollhöhe (.is-on, gesetzt von app.js): ganz
   oben hätte er nichts zu tun und läge nur über dem Kopfbild. Ohne JavaScript
   bleibt er unsichtbar — das ist gewollt, denn ohne JavaScript tut er auch nichts.

   ⚠️ Der Zwilling dieser Regel steht in admin.css. Das Panel lädt style.css NICHT
   (es hat sein eigenes Stylesheet), also muss dort dieselbe Regel stehen. Wer hier
   etwas ändert, ändert es dort mit — check_totop.py hält beide zusammen. */
.ms-top{
position:fixed;
right:24px;
bottom:24px;
/* ⚠️ 650, nicht 9000: unten rechts auf der Karte sitzt die OSM-Nennung
   (`.leaflet-control-attribution`, ODbL-Pflicht, §16). Leaflets Bedienelemente
   liegen bei 800-1000, die Kacheln und Marker bei 200-600. Bei 650 steht der Knopf
   also ÜBER dem Kartenbild, aber UNTER der Nennung und den Bedienelementen — eine
   Zuschreibung, die ein Knopf verdeckt, ist keine Zuschreibung mehr.
   ⚠️ Der Zustimmungsbanner (9999) bleibt darüber, wie er muss. */
z-index:650;
width:44px;
height:44px;
border:none;
border-radius:50%;
background:#0a3d62;
color:white;
cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,0.25);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:opacity .2s, visibility .2s;
}
.ms-top.is-on{
opacity:.85;
visibility:visible;
}
.ms-top:hover{
opacity:1;
background:#0d4d7a;
}
.ms-top svg{
width:20px;
height:20px;
display:block;
}

/* Text, der nur der Vorlesesoftware gilt. ⚠️ Nicht display:none und nicht
   hidden — beides nähme ihn auch dem Screenreader weg, und der Knopf hieße
   dann gar nichts. */
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}


/* ── Tonnen-Zeichnungen im Informationsbereich (2026-08-13, §72) ──────────────
   Inline-SVG statt <img>: unter der CSP (§20) unbedenklich, ohne Auslieferungsweg
   und ohne Datei, die verlorengehen kann. Jede Zeichnung trägt ein <title>.
   ⚠️ Die Reihe darf umbrechen — auf dem Telefon stehen sonst vier Tonnen
   nebeneinander in Streichholzbreite. */
.tonnen-reihe{
display:flex;
flex-wrap:wrap;
gap:18px;
margin:14px 0 18px;
}
.tonne{
width:110px;
text-align:center;
font-size:12px;
line-height:1.3;
color:#555;
}
.tonne svg{
width:56px;
height:96px;
display:block;
margin:0 auto 4px;
}
.tonne b{
display:block;
color:#0a3d62;
font-size:12.5px;
}

/* ── Pegel-Legende (2026-08-16, §114) ────────────────────────────────────────
   Die vier Kürzel standen bis dahin nur in EINEM Satz über der Tabelle und sonst
   nirgends — und in zwei Dritteln der Zellen stand gar nichts. Ein <details> hält die
   Erklärung bereit, ohne die Tabelle nach unten zu drücken. */
.pegel-legende{
margin:14px 0 6px;
font-size:13.5px;
line-height:1.6;
color:#444;
}
.pegel-legende summary{
cursor:pointer;
color:#0a3d62;
font-weight:600;
}
.pegel-legende dl{ margin:10px 0 6px; }
.pegel-legende dt{
color:#0a3d62;
font-weight:600;
margin-top:8px;
}
.pegel-legende dd{ margin:2px 0 0 18px; }
.pegel-legende p{ margin:8px 0 0; }

/* ── Tafelzeichen (2026-08-15, §108) ─────────────────────────────────────────
   Machart wie die Tonnen: Inline-SVG, ein <title> je Zeichen, die Reihe bricht um.
   ⚠️ Quadratisch, nicht hochkant — ein Tafelzeichen IST quadratisch, und wer es
   verzerrt, macht aus dem roten Rand ein anderes Verhältnis, als auf dem Wasser
   steht. Die Bildunterschrift trägt die Bedeutung; ohne sie wäre die Reihe eine
   Bildergalerie ohne Aussage. */
.tafel-reihe{
display:flex;
flex-wrap:wrap;
gap:16px;
margin:14px 0 20px;
}
.tafel{
width:132px;
margin:0;
text-align:center;
font-size:11.5px;
line-height:1.35;
color:#555;
}
/* ⚠️ Seit §112 amtliche BILDER statt eigener Zeichnungen. Sie haben verschiedene
   Seitenverhältnisse (rechteckige und quadratische Tafeln, liegende Brückenbilder) —
   deshalb max-width/max-height statt fester Grösse, sonst wird gestaucht. */
.tafel img{
max-width:78px;
max-height:78px;
width:auto;
height:auto;
display:block;
margin:0 auto 5px;
}
.tafel.breit img{ max-width:150px; }
.tafel b{
display:block;
color:#0a3d62;
font-size:12.5px;
margin-bottom:2px;
}

/* Die Gegenüberstellung Fluss/See (§109). ⚠️ Schmal halten: drei Spalten, von denen
   zwei nur eine Kennung tragen — über die volle Breite gezogen stünden die Zahlen
   einsam am rechten Rand. Sie darf trotzdem NICHT gedeckelt werden (check_breiten),
   also begrenzt die Spaltenbreite, nicht die Tabelle. */
/* ⚠️ Der Kasten drumherum ist kein Schmuck: auf 390px ist die dritte Spalte („See")
   sonst ABGESCHNITTEN — und sie ist die wichtigere von beiden. Dieselbe Lösung wie bei
   der Beaufort-Tabelle: der Inhalt scrollt in seiner eigenen Box, die Seite nicht. */
.tafel-tab{
overflow-x:auto;
margin:12px 0 18px;
}
.tafel-vergleich{
border-collapse:collapse;
margin:0;
font-size:13.5px;
}
.tafel-vergleich th,
.tafel-vergleich td{
border:1px solid #dde4ea;
padding:6px 14px;
text-align:left;
}
.tafel-vergleich th{
background:#f4f7fa;
color:#0a3d62;
font-weight:600;
}
.tafel-vergleich td:first-child{ min-width:230px; }
.tafel-vergleich td+td{ text-align:center; }

/* ── Lichter-Sektoren (2026-08-14, §90) ───────────────────────────────────────
   Dieselbe Machart wie die Tonnen: Inline-SVG, ein <title> je Bild, die Reihe
   darf umbrechen. Nur grösser, weil hier Winkel abzulesen sind und nicht Farben.
   ⚠️ Die Zeichnung ist eine DRAUFSICHT mit dem Bug nach oben — grün liegt damit
   rechts. Wer sie spiegelt, dreht Steuerbord und Backbord um (§73). */
.lichter-reihe,
.regel-reihe{
display:flex;
flex-wrap:wrap;
gap:22px;
margin:14px 0 8px;
}
.lichtbild,
.regelbild{
width:180px;
text-align:center;
font-size:12px;
line-height:1.35;
color:#555;
}
.lichtbild svg{
width:160px;
height:160px;
display:block;
margin:0 auto 4px;
}
/* ⚠️ Der Kopf steht als eigener Block, die Zahlen IN den Zeilen nicht. Beim ersten
   Anlauf war beides ein <b> und `.lichtbild > b{display:block}` traf alle — jede Zahl
   bekam eine eigene Zeile, und die Unterschrift zerfiel in elf Zeilen. Keine Prüfung
   konnte das sehen; sichtbar wurde es erst auf dem Bildschirmfoto (§90 d). */
.lichtbild > b{
display:block;
color:#0a3d62;
font-size:12.5px;
margin-bottom:6px;
}
.lichtbild strong,
.regelbild strong{
color:#0a3d62;
}
/* Die Ausweich-Schemata (§91) sind breiter als hoch — 200×160 statt 160×160. */
.regelbild{
width:200px;
}
.regelbild svg{
width:200px;
height:160px;
display:block;
margin:0 auto 4px;
}
.regelbild > b{
display:block;
color:#0a3d62;
font-size:12.5px;
}
.regelbild em{
color:#8a94a0;
font-style:normal;
font-size:11.5px;
}
.bild-quelle{
font-size:12.5px;
color:#777;
line-height:1.6;
margin:0 0 18px;
}

/* ── Breite Zeichnungen mit Zeitachse (2026-08-15, §104) ─────────────────────
   Für die Tonlängen-Diagramme (schall.php) und die Lichterstufen (signale.php).
   ⚠️ Anders als .lichtbild NICHT feste Pixel, sondern volle Breite mit `height:auto`:
   in den Bildern steht SCHRIFT, und die muss mitwachsen. Deshalb tragen alle
   Diagramme denselben viewBox-Rahmen (640 breit) — ein schmaleres Bild würde sonst
   stärker hochskaliert und bekäme eine grössere Schrift als das Bild darüber. */
.tonbild{
margin:16px 0 18px;
}
.tonbild svg{
width:100%;
height:auto;
max-width:640px;
display:block;
margin:2px 0 6px;
}
.tonbild > b{
display:block;
color:#0a3d62;
font-size:12.5px;
margin-bottom:4px;
}
/* ⚠️ Die Unterschrift bekommt KEINE Deckelung. Sie ist Textfluss wie jeder andere
   Absatz, und eine max-width darauf ist genau das, wovor check_breiten.py warnt —
   sie kann ein fehlendes Polster verdecken. Nur die ZEICHNUNG ist gedeckelt: in ihr
   steckt Schrift in fester Größe, die beim Hochskalieren riesig würde. */
.tonbild figcaption{
display:block;
font-size:12px;
line-height:1.5;
color:#555;
}

/* Warnstufen-Spalte und ihre Fussnote (§101) */
.bft .klein{ font-size:11px; color:#7a8590; }
.wetter-fussnote{
font-size:12.5px;
color:#777;
line-height:1.6;
margin:8px 0 14px;
}

/* ── Die 45 Positionen der Mindestausrüstung (2026-08-15, §98) ───────────────
   ⚠️ Zwei Spalten, sonst sind es 45 Zeilen am Stück. Auf dem Telefon EINE — die
   600px-Regel setzt `columns:1`, sonst stünden dort zwei Spalten von je 12 Zeichen.
   `break-inside:avoid` hält eine Position samt ihrer Bemerkung zusammen. */
.ausruestungsliste{
columns:2;
column-gap:34px;
font-size:14px;
line-height:1.55;
}
.ausruestungsliste li{
break-inside:avoid;
margin-bottom:3px;
}
.ausruestungsliste em{
color:#7a8590;
font-style:normal;
font-size:12.5px;
}

/* ── Knotenbilder (2026-08-15, §92/§93) ──────────────────────────────────────
   ⚠️ Fremde Bilder, gemeinfrei, SELBST ausgeliefert aus page/img/ — die CSP lässt
   `img-src 'self'` und sonst nichts (§20). Ein Link auf Wikimedia wäre ein Ladefehler.
   Die Reihenfolge Bild → Text ist Absicht: erst der Weg, dann wofür er taugt. */
.knotenbild{
margin:10px 0 14px;
}
.knotenbild img{
/* ⚠️ KEIN width:350px — der Kreuzknoten ist im Original nur 200 px breit und wurde
   dadurch hochgerechnet und unscharf. Jedes Bild steht in seiner echten Grösse
   (Attribute width/height am <img>), gedeckelt auf 350 und schrumpfend auf dem
   Telefon. Sichtbar wurde das auf dem Bildschirmfoto, nicht in einer Prüfung. */
/* ⚠️ box-sizing:CONTENT-box, und das ist hier der ganze Punkt (§93 c).
   Das <img> trägt seine echte Breite als Attribut (width="350"). Mit border-box
   wird daraus die AUSSENkante: 350 minus 2×6 Polster minus 2×1 Rahmen = 336, das
   Bild wird auf 96 % gerechnet und Strichzeichnungen werden weich. Mit content-box
   sind die 350 das Bild selbst, Polster und Rahmen kommen darum herum.
   ⚠️ Zwei Anläufe zuvor hatten die falsche Ursache behandelt (erst `width:350px`
   für alle, dann die max-width-Deckelung) — die Ursache war immer diese Zeile.
   Nachgemessen im Browser: Bildfläche 350 = naturalWidth, bei 390 px Fenster
   364 gesamt und kein Überlauf.
   Die Klammer `box-sizing` global steht wegen der Eingabefelder weiter oben; ein
   Bild ist kein Eingabefeld. */
max-width:100%;
height:auto;
display:block;
background:#fff;
border:1px solid #e3e9ee;
border-radius:6px;
padding:6px;
box-sizing:content-box;
}

/* ── Windtabelle in der Wetterkunde (2026-08-13, §78) ─────────────────────────
   ⚠️ §64 hat es angesagt: „eine breite Tabelle wäre auf dem Telefon der erste
   Kandidat für seitlichen Überlauf". Deshalb scrollt sie IN SICH — der Kasten
   trägt overflow-x, nicht die Seite. Ohne das wäre die 1020er-Breite aus §66
   auf einer Seite gebrochen. */
.wetter-tab{
overflow-x:auto;
margin:12px 0 16px;
}
.wetter-tab table.bft{
border-collapse:collapse;
font-size:13.5px;
min-width:640px;
width:100%;
}
.wetter-tab table.bft th{
background:#eef4f9;
color:#0a3d62;
text-align:left;
padding:6px 10px;
border-bottom:2px solid #dbe5ee;
white-space:nowrap;
}
.wetter-tab table.bft td{
padding:6px 10px;
border-bottom:1px solid #e3e9f0;
vertical-align:top;
}
.wetter-tab table.bft td:first-child{
font-weight:bold;
color:#0a3d62;
text-align:right;
}
.wetter-tab table.bft tr:nth-child(even) td{
background:#f8fafc;
}

/* ── Rückweg als Knopf (2026-08-13, §79) ──────────────────────────────────────
   ⚠️ `.learn-back` hatte seit §59 **gar kein** CSS: der Rückweg stand als
   Standardlink da, klein, unterstrichen, im Besucht-Violett — der Betreiber hat ihn
   zweimal gesucht und nicht gefunden, und beim zweiten Mal war schon die Zieladresse
   berichtigt (§75). Der Fehler lag also nie dort, wo er gesucht wurde: **der Link war
   richtig und unsichtbar.**

   Bewusst als Umriss und nicht gefüllt wie `.footer-btn`: er steht direkt über der
   Überschrift und soll ihr nicht die Aufmerksamkeit nehmen. */
.learn-back{
margin:0 0 14px;
}
.learn-back a{
display:inline-block;
padding:6px 14px;
border:1.5px solid #0a3d62;
border-radius:6px;
color:#0a3d62;
background:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
.learn-back a:hover{
background:#0a3d62;
color:#fff;
}
/* Am Fuss langer Kapitelseiten steht derselbe Knopf noch einmal — dort, wo man
   ankommt, wenn man zu Ende gelesen hat. */
.learn-back-end{
margin:22px 0 0;
padding-top:16px;
border-top:1px solid #e3e9f0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALLE MEDIENABFRAGEN STEHEN AB HIER — und nur hier.

   ⚠️ Sie mussten ans Dateiende (2026-08-19, §129). Vorher standen sie mitten in
   der Datei, und alles, was DANACH unbedingt notiert wurde, hat sie ausgehebelt:
   eine Medienabfrage erhöht die Spezifität nicht, bei gleichem Selektor gewinnt
   allein die spätere Regel. Acht Deklarationen waren dadurch wirkungslos, darunter
   zwei, deren Kommentar ausdrücklich das Gegenteil beschrieb:

     .tonbild svg{width:640px}      — die Zeichnungen schrumpften auf dem Telefon
                                      auf Massstab 0,56 statt in ihrer Box zu scrollen
     .ausruestungsliste{columns:1}  — die 45 Positionen standen in zwei Spalten
                                      von je etwa zwölf Zeichen

   ⚠️ Neue Regeln für kleine Schirme gehören deshalb HIERHER, ans Ende, nicht an
   die Stelle des Bauteils. `scripts/check_mobil.py` misst das und nennt Selektor,
   Eigenschaft und beide Zeilennummern.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:600px){
/* §122: auf dem Telefon nur der Name, sonst füllt das Verzeichnis den Bildschirm. */
.kapitel-rest{ display:none; }

/* §122: das Verzeichnis darf auf dem Telefon nicht die halbe erste Seite füllen. */
.kapitelindex{
padding:11px 13px 12px;
font-size:14px;
}
.kapitelindex ol{ padding-left:20px; line-height:1.6; }

/* §98: die Ausrüstungsliste einspaltig — zwei Spalten wären auf dem Telefon
   Wortsalat. */
.ausruestungsliste{ columns:1; }

.map-count{ flex-basis:100%; }
}
/* ─── Mobile ───────────────────────────────────────────────── */
@media (max-width:600px){
/* Die Vergleichstabelle darf auf dem Telefon enger stehen — gescrollt wird trotzdem,
   aber weniger weit. */
.tafel-vergleich{font-size:12.5px;}
.tafel-vergleich th,.tafel-vergleich td{padding:5px 9px;}
.tafel-vergleich td:first-child{min-width:170px;}

/* ⚠️ Die Zeichnungen mit Zeitachse NICHT mitschrumpfen lassen (§104 b). Auf 358px
   Spaltenbreite wäre der Maßstab 0,56 — die kleinste Schrift im Bild stünde bei
   5 Bildpunkten und wäre unlesbar. Live nachgemessen, nicht geschätzt. Deshalb
   dieselbe Lösung wie bei den breiten Tabellen: das Bild behält seine 640px und
   SCROLLT IN SEINER EIGENEN BOX, die Seite nicht. Die Unterschrift darunter läuft
   weiter über die volle Spaltenbreite. */
.tonbild{overflow-x:auto;}
.tonbild svg{width:640px;max-width:none;}

.ig-embeds{ grid-template-columns:1fr; }
.home, .calc, .contact, .radio, .social-page, .learning, .pegel-page, .legal{ padding:24px 16px; }
.map-search{ padding:24px 16px 0; }
.filters{ padding:15px 16px; }
.fac-filters{ padding:0 16px 8px; }
.map-hint{ padding:0 16px 10px; }
.footer-text{ text-align:center; }
.footer{ padding:20px 16px; }
.radio-embed .mr-btn{ min-width:0; width:100%; }
.nav-bar{ padding:10px 12px; }
.nav-links a{ padding:8px 12px; font-size:14px; }
#map{ height:70vh; }
.calc-grid{ grid-template-columns:1fr; }
.footer{ flex-direction:column; gap:10px; }
}
@media (max-width:600px){
.ms-top{
right:12px;
bottom:12px;
width:40px;
height:40px;
}
}