/* Boosthafen – Theme „Lebende Seekarte“ (Eltern: default). Eigenentwickelt, ohne Fremdcode, ohne externe Schriften.
   Bildsprache einer nautischen Karte: Kartenpapier (hell) bzw. Nachtkarte wie auf der Brücke (dunkel), Tusche-Linien,
   Kartenrahmen mit Gradskala, Serifen-Kursiv für Wasserbeschriftungen, Monospace für Peilungen und Zahlen.
   Farben „Ostsee“: Ostseeblau (Tinte, Schaltflächen), Sandweiß vom Warnemünder Strand (Papier), Dünensand (Land),
   Hanserot als Signalfarbe (rotes Molenfeuer, Peilungen), Molengrün für „live“ (grünes Molenfeuer).
   Bewusst ohne Farbverläufe auf Flächen, ohne Glas-Effekte, ohne Pink/Magenta.
   Heller Modus auf :root (im Admin anpassbar), dunkler Modus auf body – Admin-Anpassungen gelten nur hell. */

:root {
    --umf-bg: #f6f5f0;
    --umf-surface: #fdfcf9;
    --umf-text: #0e2a47;
    --umf-muted: #4f6175;
    --umf-border: #d6dce1;
    --umf-primary: #0e3a66;
    --umf-primary-text: #ffffff;
    --umf-accent: #b8122b;
    --umf-ok: #0a7a4d;
    --umf-ok-bg: #e4f3ec;
    --umf-warn: #8a4b00;
    --umf-error: #b42318;
    --umf-error-bg: #fbeceb;
    --umf-radius: 4px;
    --umf-width: 76rem;
    /* nicht im Core, aber von Plugins mit hellem Ersatzwert genutzt (achievements, tasks, wheel, messages, deposit …) */
    --umf-muted-bg: #ecebe4;
    --umf-surface-alt: #f1f0ea;
    --umf-success: #0a7a4d;
    --umf-danger: #b42318;

    --bh-ink: #0e2a47;
    --bh-signal: #b8122b;
    --bh-signal-soft: rgba(184, 18, 43, .1);
    --bh-live: #0a8f5a;
    --bh-land: #ebe2c8;
    --bh-shallow: #c6dcea;
    --bh-shallow-2: #dde9f0;
    --bh-deep: #f6f5f0;
    --bh-contour: #7b9fbb;
    --bh-coast: #2f4760;
    --bh-sounding: #4d6a86;
    --bh-rule: #0e2a47;
    --bh-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --bh-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
    --bh-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
    body {
        --umf-bg: #08121b;
        --umf-surface: #0d1a25;
        --umf-text: #dbe5ee;
        --umf-muted: #8ea2b5;
        --umf-border: #1f3242;
        --umf-primary: #8cc0ec;
        --umf-primary-text: #08121b;
        --umf-accent: #ff6450;
        --umf-ok: #3fd68a;
        --umf-ok-bg: #0e2419;
        --umf-warn: #f0b85a;
        --umf-error: #ff7a6b;
        --umf-error-bg: #2a1614;
        --umf-muted-bg: #132331;
        --umf-surface-alt: #112030;
        --umf-success: #3fd68a;
        --umf-danger: #ff7a6b;

        --bh-ink: #dbe5ee;
        --bh-signal: #ff6450;
        --bh-signal-soft: rgba(255, 100, 80, .14);
        --bh-live: #3fd68a;
        --bh-land: #1c2127;
        --bh-shallow: #0f2a3d;
        --bh-shallow-2: #0c1f2d;
        --bh-deep: #08121b;
        --bh-contour: #2c5470;
        --bh-coast: #7e9ab0;
        --bh-sounding: #5d7a92;
        --bh-rule: #8ea2b5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bh-rose { animation: none !important; }
}

/* Plugins mit festen hellen Farben: im Theme über die Tokens, damit sie auch auf der Nachtkarte lesbar bleiben */
.bh .qg-ticket-prize--win { background: var(--umf-ok-bg); }
.bh :is(.shoutbox-error, .shoutbox-delete, .memory-rush-message.is-error, .snake-error) { color: var(--umf-error); }

/* ------------------------------------------------------------------ Grundlagen */

body.bh { overflow-x: clip; -webkit-font-smoothing: antialiased; }
.bh h1, .bh h2, .bh h3 { letter-spacing: -.015em; color: var(--umf-text); }
.bh h1 em, .bh h2 em { font-family: var(--bh-serif); font-style: italic; font-weight: 500; color: var(--bh-signal); letter-spacing: -.01em; }
.bh ::selection { background: var(--bh-signal-soft); }
.bh-bleed { margin-inline: calc(50% - 50vw); }
.bh-main { padding-top: 0; }
.bh .umf-main > :first-child:not(.bh-bleed) { margin-top: 2.25rem; }

/* ------------------------------------------------------------------ Live-Leiste (Statuszeile eines Kartenplotters) */

.bh-livebar { background: var(--bh-ink); color: var(--umf-bg); font: 500 .875rem/1.35 var(--bh-mono); letter-spacing: .02em; }
.bh-livebar { border-bottom: 1px solid transparent; }
@media (prefers-color-scheme: dark) {
    body .bh-livebar { background: #0d1a25; color: var(--umf-text); border-bottom-color: var(--umf-border); }
}
.bh-livebar__inner { display: flex; align-items: center; gap: .3rem 1.4rem; min-height: 2rem; flex-wrap: wrap; padding-top: .3rem; padding-bottom: .3rem; }
.bh-livebar__label { font-weight: 700; margin-left: -.9rem; }
.bh-livebar__item { opacity: .92; }
.bh-livebar__item strong { font-weight: 700; margin-left: .35em; }
.bh-livebar__item small { margin-left: .3em; font-size: 1em; font-weight: 500; }

.bh-live-dot { position: relative; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bh-live); color: var(--bh-live); flex: none; vertical-align: middle; }
.bh-livebar .bh-live-dot { background: #3fd68a; color: #3fd68a; }
.bh-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; animation: bh-ping 2.2s var(--bh-ease) infinite; }
@keyframes bh-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* ------------------------------------------------------------------ Kopf */

.bh-header { position: sticky; top: 0; z-index: 20; background: var(--umf-bg); border-bottom: 1px solid var(--bh-rule); }
.bh-header__inner { min-height: 4rem; }
.bh-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--umf-text); }
.bh-logo { width: 2.3rem; height: 2.3rem; flex: none; overflow: visible; }
.bh-logo__ring, .bh-logo__ticks, .bh-logo__wave { stroke: var(--bh-ink); }
.bh-logo__dot { fill: var(--bh-ink); }
.bh-logo__flare { fill: var(--bh-signal); transform-origin: 19.6px 25px; transition: transform .5s var(--bh-ease); }
.bh-brand:hover .bh-logo__flare { transform: rotate(8deg) scale(1.06); }
.bh-brand__word { font-size: 1.35rem; line-height: 1; letter-spacing: -.02em; }
.bh-brand__boost { font-weight: 800; }
.bh-brand__hafen { font-family: var(--bh-serif); font-style: italic; font-weight: 500; color: var(--bh-signal); margin-left: .02em; }

.bh-nav { gap: .25rem 1.5rem; }
.bh-nav a:not(.umf-button) { position: relative; color: var(--umf-text); font-weight: 600; padding: .3rem 0; text-decoration: none; }
.bh-nav a:not(.umf-button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1.5px dashed var(--bh-signal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--bh-ease); }
.bh-nav a:not(.umf-button):hover::after, .bh-nav a[aria-current=page]::after { transform: scaleX(1); }
.bh-nav .umf-linkbutton { color: var(--umf-muted); }

.bh-menu-toggle { display: none; width: 2.75rem; height: 2.75rem; border-radius: var(--umf-radius); border: 1px solid var(--bh-rule); background: transparent; color: var(--umf-text); cursor: pointer; place-items: center; }
.bh-menu-toggle__bars, .bh-menu-toggle__bars::before, .bh-menu-toggle__bars::after { display: block; width: 1.15rem; height: 2px; background: currentColor; transition: transform .25s var(--bh-ease), opacity .2s; }
.bh-menu-toggle__bars { position: relative; }
.bh-menu-toggle__bars::before, .bh-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.bh-menu-toggle__bars::before { top: -6px; }
.bh-menu-toggle__bars::after { top: 6px; }
.bh-menu-toggle[aria-expanded=true] .bh-menu-toggle__bars { background: transparent; }
.bh-menu-toggle[aria-expanded=true] .bh-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); background: var(--umf-text); }
.bh-menu-toggle[aria-expanded=true] .bh-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); background: var(--umf-text); }

/* Mobiles Menü nur mit JavaScript (Klasse bh-js setzt js/early.js im Kopf, daher kein Flackern) */
@media (max-width: 52rem) {
    .bh-js .bh-menu-toggle { display: grid; }
    .bh-js .bh-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1rem; border-top: 1px solid var(--umf-border); }
    .bh-js .bh-nav.is-open { display: flex; }
    .bh-js .bh-nav a:not(.umf-button), .bh-js .bh-nav .umf-linkbutton { padding: .7rem .25rem; border-bottom: 1px dashed var(--umf-border); }
    .bh-js .bh-nav a:not(.umf-button)::after { display: none; }
    .bh-js .bh-nav .umf-button { margin-top: .75rem; text-align: center; }
    .bh-livebar__item--wide { display: none; }
}

/* ------------------------------------------------------------------ Schaltflächen: Tusche auf Papier, roter Versatz */

.bh .umf-button {
    border-radius: var(--umf-radius); background: var(--umf-primary); border-color: var(--umf-primary); color: var(--umf-primary-text);
    padding-left: 1.3rem; padding-right: 1.3rem; letter-spacing: .01em;
    box-shadow: 3px 3px 0 0 var(--bh-signal);
    transition: transform .18s var(--bh-ease), box-shadow .18s var(--bh-ease);
}
.bh .umf-button:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--bh-signal); }
.bh .umf-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--bh-signal); }
.bh .umf-button--secondary { background: transparent; color: var(--umf-text); border-color: var(--bh-rule); box-shadow: none; }
.bh .umf-button--secondary:hover { box-shadow: 3px 3px 0 0 var(--bh-rule); }
.bh .umf-button--danger { background: var(--umf-error); border-color: var(--umf-error); box-shadow: none; }
.bh .umf-button--small { box-shadow: 2px 2px 0 0 var(--bh-signal); }

/* ------------------------------------------------------------------ Seekarte (Hero) */

.bh-chart { position: relative; padding: 1rem clamp(.5rem, 2vw, 1.5rem) 0; }
/* Kartenrahmen: doppelte Linie, oben und unten eine Gradskala aus abwechselnden Feldern wie am Rand echter Seekarten */
.bh-chart__frame {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: clamp(36rem, 82vh, 50rem);
    margin: 7px;
    border: 1px solid var(--bh-rule);
    outline: 1px solid var(--bh-rule); outline-offset: 6px;
    background: var(--bh-deep) radial-gradient(60% 70% at 92% 60%, var(--bh-shallow-2), transparent 70%);
}
.bh-js .bh-chart__frame { background: var(--bh-deep); }
.bh-chart::before, .bh-chart::after {
    content: ""; position: absolute; z-index: 1; height: 4px; pointer-events: none;
    left: calc(clamp(.5rem, 2vw, 1.5rem) + 7px); right: calc(clamp(.5rem, 2vw, 1.5rem) + 7px);
    background: repeating-linear-gradient(90deg, var(--bh-rule) 0 48px, transparent 48px 96px);
}
.bh-chart::before { top: calc(1rem + 3px); }
.bh-chart::after { bottom: 3px; }
.bh-chart__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }

.bh-chart__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; min-height: inherit; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.bh-chartno { margin: 0 0 1.25rem; font: 600 .875rem/1.4 var(--bh-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--umf-muted); }
.bh-chartno::before { content: ""; display: inline-block; width: 2rem; border-top: 1px solid currentColor; vertical-align: middle; margin-right: .75rem; }
.bh-chart h1 { margin: 0 0 1.4rem; font-size: clamp(3rem, 8.4vw, 6.4rem); font-weight: 850; line-height: .95; letter-spacing: -.045em; }
.bh-chart h1 em { display: inline-block; font-size: 1.04em; letter-spacing: -.03em; }
.bh-chart__lead { margin: 0 0 2rem; max-width: 33rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--umf-muted); }
.bh-chart h1, .bh-chart__lead, .bh-chartno { text-shadow: 0 0 14px var(--bh-deep), 0 0 4px var(--bh-deep), 0 0 2px var(--bh-deep); }
.bh-chart__actions { gap: 1rem; }
.bh-chart__actions .umf-button { padding: .8rem 1.5rem; font-size: 1.02rem; }

/* Kompassrose in Signalrot, dreht sich kaum merklich */
.bh-rose { position: absolute; left: 45%; bottom: 1.75rem; width: clamp(10rem, 16vw, 14rem); z-index: -1; animation: bh-rose 180s linear infinite; }
@keyframes bh-rose { to { transform: rotate(360deg); } }
.bh-rose__line { fill: none; stroke: var(--bh-signal); stroke-width: .8; opacity: .5; }
.bh-rose__line--fine { stroke-dasharray: 1 3; }
.bh-rose__scale path { stroke: var(--bh-signal); stroke-width: 1; opacity: .55; }
.bh-rose__star path { fill: none; stroke: var(--bh-signal); stroke-width: .9; opacity: .6; }
.bh-rose__star .bh-rose__north { fill: var(--bh-signal); opacity: .4; }
.bh-rose__star .bh-rose__minor { opacity: .3; }
.bh-rose__n { font: 700 10px var(--bh-mono); fill: var(--bh-signal); opacity: .7; }

/* Titelfeld (Kartusche) mit Live-Kennzahlen */
.bh-cartouche {
    position: relative; justify-self: end; width: min(23rem, 100%); padding: 1.1rem 1.25rem 1rem;
    background: var(--umf-surface); border: 1px solid var(--bh-rule); outline: 1px solid var(--bh-rule); outline-offset: 3px;
}
.bh-cartouche__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: .6rem; margin-bottom: .5rem; border-bottom: 1px solid var(--bh-rule); }
.bh-cartouche__head h2 { margin: 0; font-family: var(--bh-serif); font-style: italic; font-weight: 600; font-size: 1.35rem; letter-spacing: 0; }
.bh-live { display: inline-flex; align-items: center; gap: .5rem; font: 700 .85rem var(--bh-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bh-live); }
.bh-cartouche__stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.bh-cartouche__stats > div { padding: .55rem 0; border-bottom: 1px dashed var(--umf-border); }
.bh-cartouche__stats > div:nth-child(odd) { padding-right: .75rem; }
.bh-cartouche__stats > div:nth-child(even) { padding-left: .75rem; border-left: 1px dashed var(--umf-border); }
.bh-cartouche__stats dt { font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--umf-muted); }
.bh-cartouche__stats dd { margin: .2rem 0 0; font: 700 1.3rem/1.15 var(--bh-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bh-cartouche__stats dd small { white-space: nowrap; font-size: .7em; font-weight: 500; color: var(--umf-muted); margin-left: .25em; letter-spacing: 0; }
.bh-cartouche__sub { margin: 1rem 0 .3rem; font-size: .875rem; font-weight: 700; color: var(--umf-text); }
.bh-cartouche__note { margin: .9rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--umf-muted); }

.bh-feed { list-style: none; margin: 0; padding: 0; counter-reset: peil; }
.bh-feed li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: baseline; gap: .5rem; padding: .4rem .2rem; font-size: 1rem; border-bottom: 1px dotted var(--umf-border); counter-increment: peil; }
.bh-feed li:last-child { border-bottom: 0; }
.bh-feed li::before { content: "P" counter(peil); font: 700 .85rem var(--bh-mono); color: var(--bh-signal); }
.bh-feed li:nth-child(n+5) { display: none; }
.bh-feed li.is-new { animation: bh-feed-in 1.4s var(--bh-ease); }
@keyframes bh-feed-in { from { background: var(--bh-signal-soft); } to { background: transparent; } }
.bh-feed__icon { display: none; }
.bh-feed__area { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.bh-feed__area small { display: block; font-size: .85rem; font-weight: 400; color: var(--umf-muted); }
.bh-feed__amount { font: 700 1rem var(--bh-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Positionsanzeige am Kartenrand (folgt dem Mauszeiger) */
.bh-readout {
    position: absolute; left: 1rem; bottom: .9rem; margin: 0; padding: .3rem .6rem;
    font: 500 .85rem/1.3 var(--bh-mono); letter-spacing: .02em; color: var(--umf-text);
    background: var(--umf-surface); border: 1px solid var(--umf-border); pointer-events: none;
}

/* ------------------------------------------------------------------ Abschnitte */

.bh-section { padding: clamp(3.5rem, 8vw, 6rem) 0 0; }
.bh-section__head { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 1rem 2rem; align-items: baseline; margin-bottom: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--bh-rule); }
.bh-section__head h2 { margin: 0; font-size: clamp(1.8rem, 3.8vw, 2.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.bh-kicker { margin: 0; font: 700 .875rem/1.4 var(--bh-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bh-signal); }

/* Kurslinie mit drei Wegpunkten */
.bh-course { position: relative; list-style: none; margin: 0; padding: 3.25rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.bh-course::before { content: ""; position: absolute; top: 1.1rem; left: .6rem; right: 1.5rem; border-top: 2px dashed var(--bh-signal); }
.bh-course::after { content: ""; position: absolute; top: calc(1.1rem - 6px); right: .9rem; border: 7px solid transparent; border-left: 11px solid var(--bh-signal); border-right: 0; }
.bh-course__wp { position: relative; }
.bh-course__wp::before { content: ""; position: absolute; top: -2.85rem; left: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--bh-signal); background: var(--bh-signal); box-shadow: inset 0 0 0 3px var(--umf-bg); }
.bh-course__mark { display: block; margin-bottom: .4rem; font: 700 .875rem var(--bh-mono); letter-spacing: .06em; color: var(--bh-signal); }
.bh-course h3 { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.bh-course p { margin: 0; color: var(--umf-muted); max-width: 22rem; font-size: 1.05rem; }

/* Zeichenerklärung (Legende) */
.bh-legend { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--umf-border); }
.bh-legend__row { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: 1.4rem 1.5rem 1.4rem 0; border-bottom: 1px solid var(--umf-border); }
.bh-legend__row:nth-child(even) { padding-left: 1.5rem; padding-right: 0; border-left: 1px solid var(--umf-border); }
.bh-legend dt { display: flex; align-items: center; gap: .85rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.bh-legend dd { margin: 0 0 0 3.35rem; color: var(--umf-muted); font-size: 1.05rem; }
.bh-sym { width: 2.5rem; height: 2.5rem; flex: none; padding: .3rem; border: 1px solid var(--bh-rule); transition: transform .4s var(--bh-ease); }
.bh-legend__row:hover .bh-sym { transform: rotate(-6deg); }
.bh-sym__line { fill: none; stroke: var(--bh-ink); stroke-width: 1.8; stroke-linecap: round; }
.bh-sym__fill { fill: var(--bh-ink); }
.bh-sym__accent { fill: var(--bh-signal); }

/* Logbuch */
.bh-log { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--umf-border); }
.bh-log a { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-items: baseline; padding: .95rem 0; text-decoration: none; color: var(--umf-text); border-bottom: 1px solid var(--umf-border); transition: padding .25s var(--bh-ease); }
.bh-log a:hover { padding-left: .75rem; }
.bh-log time { font: 500 .95rem var(--bh-mono); color: var(--umf-muted); min-width: 6.5rem; }
.bh-log span { font-weight: 650; }
.bh-log a:hover span { color: var(--bh-signal); }
.bh-more { font-weight: 700; text-decoration: none; color: var(--umf-text); border-bottom: 1.5px dashed var(--bh-signal); }
.bh-more::after { content: " →"; color: var(--bh-signal); }

/* Abschluss-Aufruf: Kurslinie läuft über die Fläche */
.bh-cta { position: relative; margin: clamp(4rem, 9vw, 7rem) 7px 1rem; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--bh-rule); outline: 1px solid var(--bh-rule); outline-offset: 5px; background: var(--umf-surface); overflow: hidden; }
.bh-cta__course { position: absolute; right: 0; top: 0; width: 55%; height: 100%; }
.bh-cta__course path { fill: none; stroke: var(--bh-signal); stroke-width: 2; stroke-dasharray: 8 7; vector-effect: non-scaling-stroke; }
.bh-js .bh-cta__course path { animation: bh-dash 3s linear infinite; }
@keyframes bh-dash { to { stroke-dashoffset: -30; } }
.bh-cta .bh-kicker, .bh-cta h2, .bh-cta p, .bh-cta .umf-button { position: relative; }
.bh-cta h2 { margin: .5rem 0 .6rem; font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 850; line-height: 1; letter-spacing: -.045em; }
.bh-cta p { margin: 0 0 1.75rem; max-width: 30rem; color: var(--umf-muted); font-size: 1.08rem; }
.bh-cta .umf-button { padding: .8rem 1.6rem; font-size: 1.05rem; }

/* ------------------------------------------------------------------ Einblenden beim Scrollen */

.bh-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--bh-ease), transform .7s var(--bh-ease); }
.bh-reveal.is-visible { opacity: 1; transform: none; }
.bh-course__wp:nth-child(2), .bh-legend__row:nth-child(2) { transition-delay: .1s; }
.bh-course__wp:nth-child(3), .bh-legend__row:nth-child(3) { transition-delay: .2s; }
.bh-legend__row:nth-child(4) { transition-delay: .3s; }

/* ------------------------------------------------------------------ Core-Komponenten im Kartenstil */

.bh .umf-card { border-color: var(--umf-border); border-radius: var(--umf-radius); box-shadow: none; }
/* Rasterzellen dürfen schmaler als breite Tabellen werden (die scrollen dann in ihrem eigenen Rahmen) */
.bh .umf-stack > *, .bh .umf-grid > * { min-width: 0; }
.bh .umf-card h2 { font-family: var(--bh-serif); font-style: italic; font-weight: 600; font-size: 1.3rem; letter-spacing: 0; }
.bh .umf-facts { gap: 0; border-top: 1px solid var(--bh-rule); border-left: 1px solid var(--umf-border); }
.bh .umf-facts > div { border: 0; border-right: 1px solid var(--umf-border); border-bottom: 1px solid var(--umf-border); border-radius: 0; background: var(--umf-surface); }
.bh .umf-facts dt { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.bh .umf-facts dd { font-family: var(--bh-mono); font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.bh .umf-balance__main { position: relative; }
.bh .umf-balance__main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bh-signal); }
.bh .umf-balance__main dd { color: var(--umf-text); font-size: 1.8rem; letter-spacing: -.03em; }

.bh .umf-subnav { gap: 1.5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--bh-rule); }
.bh .umf-subnav a { white-space: nowrap; }
.bh .umf-subnav a { padding: .55rem 0; color: var(--umf-muted); border-bottom: 2px solid transparent; }
.bh .umf-subnav a[aria-current=page] { color: var(--umf-text); border-bottom: 2px dashed var(--bh-signal); }

.bh .umf-steps .umf-card { border-top: 1px solid var(--umf-border); }
.bh .umf-steps h3::before { color: var(--bh-signal); font-family: var(--bh-mono); }
.bh .umf-earn .umf-card { transition: border-color .25s; }
.bh .umf-earn .umf-card:hover { border-color: var(--bh-signal); }

.bh .umf-table-wrap { overflow-x: auto; border: 1px solid var(--umf-border); background: var(--umf-surface); }
.bh .umf-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bh .umf-table th { text-align: left; font-size: .875rem; font-weight: 700; color: var(--umf-text); border-bottom: 1px solid var(--bh-rule); }
.bh .umf-table th, .bh .umf-table td { padding: .6rem .85rem; }
.bh .umf-table td { border-bottom: 1px dotted var(--umf-border); }
.bh .umf-table tbody tr:last-child td { border-bottom: 0; }
.bh .umf-num { font-family: var(--bh-mono); }

/* Eingabefelder als Linie auf dem Kartenpapier – dieselbe Feldauswahl wie die Grundstile des Cores (ab UMF 1.2.2 für
   alle Texttypen). Nur background-color setzen: Auswahllisten zeichnen ihren Pfeil ab 1.2.2 als Hintergrundbild. */
.bh .umf-field :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=button], [type=submit], [type=reset], [type=image]), select, textarea) {
    border: 0; border-bottom: 1.5px solid var(--bh-rule); border-radius: 0; background-color: transparent; padding: .6rem .1rem; transition: border-color .2s;
}
.bh .umf-field select { padding-right: 2.2rem; }
.bh .umf-field textarea { border: 1.5px solid var(--bh-rule); padding: .6rem; }
.bh .umf-field :is(input, select, textarea):focus { outline: none; border-bottom: 2px dashed var(--bh-signal); }
.bh .umf-field :is(input, select):focus { background-color: var(--bh-signal-soft); }
/* Fehlerhafte Felder deutlich markieren (die Linienform oben würde den Fehlerrahmen des Cores sonst überdecken) */
.bh .umf-field [aria-invalid=true] { border-bottom: 2px solid var(--umf-error); background-color: var(--umf-error-bg); }
.bh .umf-field label { font-size: 1rem; }

/* Anmelden/Registrieren: Formular als Kartusche */
.bh .umf-auth { padding: 2rem 2rem 1.5rem; border: 1px solid var(--bh-rule); outline: 1px solid var(--bh-rule); outline-offset: 4px; background: var(--umf-surface); border-radius: 0; box-shadow: none; }
.bh .umf-auth h1 { font-size: 2.2rem; font-weight: 850; letter-spacing: -.035em; padding-bottom: .75rem; border-bottom: 1px solid var(--umf-border); }

.bh .umf-alert { border-radius: var(--umf-radius); }
.bh .umf-badge { background: var(--bh-signal); border-color: transparent; color: var(--umf-bg); font-family: var(--bh-mono); }
.bh-nav .umf-badge { margin-left: .2rem; font-size: .8rem; }
.bh .umf-error__code { font-family: var(--bh-mono); color: var(--bh-signal); font-size: clamp(4rem, 14vw, 8rem); letter-spacing: -.06em; }

/* ------------------------------------------------------------------ Fuß */

.bh-footer { margin-top: 3rem; padding: 0 0 1.5rem; background: var(--umf-bg); border-top: 1px solid var(--bh-rule); }
.bh-footer__wave { height: 4px; margin-bottom: 2.5rem; background: repeating-linear-gradient(90deg, var(--bh-rule) 0 48px, transparent 48px 96px); }
.bh-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.bh-footer__brand p:last-child { max-width: 24rem; margin: .75rem 0 0; }
.bh-brand--footer { margin: 0; }
.bh-footer__title { margin: 0 0 .75rem; font: 700 .875rem var(--bh-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--umf-text); }
.bh-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bh-footer a { text-decoration: none; }
.bh-footer a:hover { color: var(--umf-text); text-decoration: underline dashed var(--bh-signal); }
.bh-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--umf-border); font-size: .9rem; }
/* Core verkleinert und blasst den Link ab (ab UMF 1.4) – hier gut lesbar wie der Rest der Zeile */
.bh .umf-footer__powered { font-size: inherit; opacity: 1; }

/* ------------------------------------------------------------------ Kurslinie unter der Kopfzeile (Lesefortschritt) */

.bh-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.bh-header.has-course .bh-progress { opacity: 1; }
.bh-progress::before { content: ""; position: absolute; left: 0; bottom: 0; width: calc(var(--bh-progress, 0) * 100%); border-bottom: 2px solid var(--bh-signal); }
.bh-progress__ship {
    position: absolute; bottom: -5px; left: calc(var(--bh-progress, 0) * 100%); margin-left: -6px;
    border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid var(--bh-signal);
}

/* ------------------------------------------------------------------ Kartenausschnitt auf Unterseiten */

.bh-band { position: relative; height: clamp(6.5rem, 12vw, 9rem); overflow: hidden; background: var(--bh-deep); border-bottom: 1px solid var(--bh-rule); }
body:has(.bh-chart, .bh-fault) .bh-band { display: none; }
.bh-band__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bh-band__inner { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; pointer-events: none; }
.bh-band__label, .bh-band__pos { padding: .3rem .65rem; font: 600 .875rem/1.3 var(--bh-mono); color: var(--umf-text); background: var(--umf-surface); border: 1px solid var(--bh-rule); }
.bh-band__label strong { color: var(--bh-signal); }
.bh-band__pos:empty { display: none; }

/* ------------------------------------------------------------------ Sonar-Ping auf Schaltflächen */

.bh .umf-button { position: relative; }
.bh-sonar { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--bh-signal); pointer-events: none; animation: bh-sonar .75s ease-out forwards; }
@keyframes bh-sonar { from { transform: scale(1); opacity: .9; } to { transform: scale(9); opacity: 0; } }

/* ------------------------------------------------------------------ Logge: rollende Zählwerke */

.bh-roll { display: inline-flex; align-items: flex-start; white-space: nowrap; line-height: 1.2em; }
.bh-roll__d, .bh-roll__c { display: inline-block; height: 1.2em; line-height: 1.2em; }
.bh-roll__d { overflow: hidden; }
.bh-roll__c { white-space: pre; }
/* Grundzustand zeigt immer den richtigen Wert; die Animation rollt nur von 0 dorthin (fällt sie aus, stimmt die Zahl trotzdem) */
.bh-roll__s { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1.2em)); }
.bh-roll__s > span { display: block; height: 1.2em; line-height: 1.2em; }
.is-rolled .bh-roll__s { animation: bh-roll 1.4s var(--bh-ease) calc(var(--i, 0) * 70ms) backwards; }
@keyframes bh-roll { from { transform: translateY(0); } }

/* ------------------------------------------------------------------ Logbuch: Tabellenzeilen laufen ein */

.bh-rows tr { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--bh-ease), transform .5s var(--bh-ease); transition-delay: calc(var(--i, 0) * 45ms); }
.bh-rows.is-in tr { opacity: 1; transform: none; }
.bh .umf-table tbody tr:hover td { background: var(--bh-signal-soft); }

/* ------------------------------------------------------------------ Kursmarke in der Konto-Navigation */

.bh .umf-subnav.has-mark { position: relative; }
.bh .umf-subnav.has-mark a[aria-current=page] { border-bottom-color: transparent; }
.bh-subnav__mark { position: absolute; left: 0; bottom: -1px; width: var(--w, 0); height: 3px; background: var(--bh-signal); transform: translateX(var(--x, 0)); transition: transform .45s var(--bh-ease), width .45s var(--bh-ease), opacity .2s; pointer-events: none; }
.bh-subnav__mark::after { content: ""; position: absolute; right: -9px; top: -4px; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; border-left: 9px solid var(--bh-signal); }

/* ------------------------------------------------------------------ FAQ: Kompassnadel dreht sich beim Aufklappen */

.bh .umf-faq { gap: 0; }
.bh .umf-faq details, .bh .umf-faq details.umf-card { border: 0; border-bottom: 1px solid var(--umf-border); border-radius: 0; background: transparent; padding: 1rem 0; }
.bh .umf-faq summary { list-style: none; display: flex; align-items: center; gap: .85rem; font-size: 1.1rem; }
.bh .umf-faq summary::-webkit-details-marker { display: none; }
.bh .umf-faq summary::before {
    content: ""; flex: none; width: .7rem; height: 1.6rem;
    background: linear-gradient(var(--bh-signal) 50%, var(--bh-ink) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: rotate(90deg); transition: transform .5s var(--bh-ease);
}
.bh .umf-faq details[open] summary::before { transform: rotate(180deg); }
.bh .umf-faq details[open] > :not(summary) { animation: bh-unroll .45s var(--bh-ease); }
@keyframes bh-unroll { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ Formulare: Passermarken am aktiven Feld */

.bh .umf-field { position: relative; }
.bh .umf-field:focus-within::before, .bh .umf-field:focus-within::after {
    content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; border: 0 solid var(--bh-signal);
}
.bh .umf-field:focus-within::before { left: -8px; top: -4px; border-left-width: 2px; border-top-width: 2px; }
.bh .umf-field:focus-within::after { right: -8px; bottom: -4px; border-right-width: 2px; border-bottom-width: 2px; }
.bh .umf-field--check:focus-within::before, .bh .umf-field--check:focus-within::after { display: none; }

/* ------------------------------------------------------------------ Startseite: Kurslinie zeichnet sich, Schiff fährt die Wegpunkte ab */

.bh-js .bh-course::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--bh-ease) .2s; }
.bh-js .bh-course.is-visible::before { clip-path: inset(0 0 0 0); }
.bh-js .bh-course::after { opacity: 0; transition: opacity .3s 1.9s; }
.bh-js .bh-course.is-visible::after { opacity: 1; }
.bh-js .bh-course__wp::before { transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.bh-js .bh-course.is-visible .bh-course__wp::before { transform: scale(1); }
.bh-js .bh-course.is-visible .bh-course__wp:nth-child(3)::before { transition-delay: .7s; }
.bh-js .bh-course.is-visible .bh-course__wp:nth-child(4)::before { transition-delay: 1.3s; }
.bh-course__ship {
    position: absolute; top: calc(1.1rem - 21px); left: 0; width: 26px; height: 22px; opacity: 0;
    background: var(--bh-ink); clip-path: polygon(0 62%, 100% 62%, 82% 100%, 14% 100%, 0 62%, 46% 62%, 46% 0, 92% 56%, 46% 56%);
}
.bh-js .bh-course.is-visible .bh-course__ship { animation: bh-sail 3.4s var(--bh-ease) .4s forwards; }
@keyframes bh-sail { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 100% { left: calc(100% - 3.6rem); opacity: 1; } }

/* Zeichenerklärung: Symbole zeichnen sich beim Einblenden */
.bh-js .bh-legend__row .bh-sym__line { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--bh-ease) .25s; }
.bh-js .bh-legend__row.is-visible .bh-sym__line { stroke-dashoffset: 0; }
.bh-js .bh-legend__row .bh-sym__fill, .bh-js .bh-legend__row .bh-sym__accent { opacity: 0; transition: opacity .6s 1s; }
.bh-js .bh-legend__row.is-visible .bh-sym__fill, .bh-js .bh-legend__row.is-visible .bh-sym__accent { opacity: 1; }
.bh-legend__row:hover .bh-sym { border-color: var(--bh-signal); }

/* Abschluss-Aufruf: kleines Schiff auf dem Kurs */
.bh-cta__ship path { fill: var(--bh-ink); }

/* ------------------------------------------------------------------ Fuß: Warnemünde mit Leuchtturm und Teepott */

.bh-coastline { display: block; width: 100%; height: clamp(5rem, 9vw, 7.5rem); margin: -1.25rem 0 1rem; overflow: visible; }
.bh-coastline__ink path { fill: none; stroke: var(--bh-ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.bh-coastline__sea { fill: none; stroke: var(--bh-contour); stroke-width: 1.4; }
.bh-coastline__lamp { fill: var(--bh-signal); }
.bh-coastline__ray { fill: var(--bh-ink); opacity: .08; }
@media (prefers-color-scheme: dark) {
    body .bh-coastline__ray { fill: #ffe7a8; opacity: .14; }
}
.bh-coastline__beam { transform-box: view-box; transform-origin: 418px 26px; }
.bh-coastline.is-on .bh-coastline__beam { animation: bh-lighthouse 5s linear infinite; }
.bh-coastline.is-on .bh-coastline__lamp { animation: bh-lamp 5s linear infinite; }
@keyframes bh-lighthouse { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes bh-lamp { 0%, 20%, 30%, 70%, 80%, 100% { opacity: .55; } 25%, 75% { opacity: 1; } }

/* ------------------------------------------------------------------ Fehlerseite: unvermessenes Gebiet im Nebel */

.bh-fault { position: relative; overflow: hidden; display: grid; align-items: center; min-height: clamp(28rem, 72vh, 42rem); border-bottom: 1px solid var(--bh-rule); background: var(--bh-deep); }
.bh-fault__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bh-fault__inner { position: relative; padding-top: 3rem; padding-bottom: 3rem; }
.bh-fault__code { margin: .25rem 0 0; font: 800 clamp(5rem, 16vw, 10rem)/1 var(--bh-mono); letter-spacing: -.06em; color: var(--bh-signal); }
.bh-fault h1 { margin: .5rem 0 .75rem; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 850; letter-spacing: -.03em; }
.bh-fault__text { max-width: 34rem; margin: 0 0 1.75rem; font-size: 1.15rem; color: var(--umf-text); }

/* ------------------------------------------------------------------ Responsiv */

@media (max-width: 60rem) {
    .bh-chart__inner { grid-template-columns: 1fr; align-items: start; }
    .bh-cartouche { justify-self: start; }
    .bh-chart__frame { min-height: 0; }
    .bh-readout { display: none; }
    .bh-rose { left: auto; right: -3rem; bottom: -3rem; width: 14rem; }
    .bh-section__head { grid-template-columns: 1fr; }
    .bh-course { grid-template-columns: 1fr; padding: 0 0 0 2.5rem; gap: 2rem; }
    .bh-course::before { top: .6rem; bottom: 1.5rem; left: .6rem; right: auto; border-top: 0; border-left: 2px dashed var(--bh-signal); }
    .bh-course::after, .bh-course__ship { display: none; }
    .bh-course__wp::before { top: 0; left: -2.5rem; }
    .bh-legend { grid-template-columns: 1fr; }
    .bh-legend__row:nth-child(even) { padding-left: 0; border-left: 0; }
    .bh-footer__cols { grid-template-columns: 1fr 1fr; }
    .bh-footer__brand { grid-column: 1 / -1; }
    .bh-cta__course { width: 100%; opacity: .35; }
}
@media (max-width: 30rem) {
    .bh-cartouche__stats dd { font-size: 1.15rem; }
    .bh-chart__actions .umf-button { width: 100%; text-align: center; }
    .bh-legend dd { margin-left: 0; }
}

@media print {
    .bh-livebar, .bh-chart__canvas, .bh-rose, .bh-readout, .bh-cta__course { display: none !important; }
}