/* ============================================================
kitenamsalzhaff.de – Gestaltung
Farben stammen direkt aus dem Logo. Keine externen Schriften
und keine fremden Server: alles liegt auf dem eigenen Webspace.
============================================================ */
:root {
--petrol: #005d75;
--petrol-tief: #00475a;
--tiefsee: #067e90;
--tuerkis: #6cbbc4;
--tuerkis-blass:#d4ebee;
--orange: #e46912; /* Markenfarbe aus dem Logo, für Flächen */
--orange-text: #bf580f; /* abgedunkelt: weisse Schrift darauf erreicht 4,55:1 */
--sonne: #feaa33;
--creme: #f7f0e4;
--grund: #ffffff;
--grund-warm: var(--creme);
--flaeche: #ffffff;
--schrift: #16323c;
--schrift-mild:#5b7078;
--linie: #dfe6e4;
--gut: #2b8347; /* dunkler als das Logo-Grün: 4,73:1 auf Weiss */
--geht: var(--sonne);
--schlecht: #c0553a;
--radius: 14px;
--radius-gross:22px;
--schatten: 0 1px 2px rgba(0,60,75,.06), 0 8px 24px -12px rgba(0,60,75,.28);
--bahn: 960px;
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--grund: #0e1f26;
--grund-warm: #12262e;
--flaeche: #16303a;
--schrift: #e8f1f2;
--schrift-mild:#9db4bb;
--linie: #24444f;
--tuerkis-blass:#12333c;
--schatten: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
font-family: var(--sans);
font-size: 18px;
line-height: 1.68;
color: var(--schrift);
background: var(--grund);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 750; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem); margin-top: 2.2em; }
h3 { font-size: 1.2rem; margin-top: 1.8em; }
p { margin: 0 0 1.1em; }
a { color: var(--tiefsee); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--orange-text); }
@media (prefers-color-scheme: dark) { a { color: var(--tuerkis); } }
img, svg { max-width: 100%; height: auto; }
.bahn { width: min(100% - 2.5rem, var(--bahn)); margin-inline: auto; }
.bahn.schmal { width: min(100% - 2.5rem, 720px); }
.sprung {
position: absolute; left: -9999px; top: 0; z-index: 99;
background: var(--petrol); color: #fff; padding: .7em 1.2em; border-radius: 0 0 var(--radius) 0;
}
.sprung:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
/* ---------------------------------------------------- Kopf */
.kopf {
background: var(--flaeche);
border-bottom: 1px solid var(--linie);
position: sticky; top: 0; z-index: 20;
backdrop-filter: saturate(180%) blur(12px);
}
.kopf-innen { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.marke { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; margin-right: auto; }
.marke img { border-radius: 9px; display: block; }
.marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.marke-text strong { font-size: 1.02rem; letter-spacing: -.02em; }
.marke-text small { font-size: .76rem; color: var(--schrift-mild); }
.kopf-live {
display: flex; flex-direction: column; align-items: flex-end;
text-decoration: none; color: inherit;
background: var(--tuerkis-blass); border-radius: var(--radius);
padding: .35rem .75rem; line-height: 1.15;
min-width: 4.5rem; min-height: 2.8125rem; /* gemessen 07.09.2026: 72×45 px */
}
/* Layout-Sprung vermeiden (gemessen 06.09.2026: CLS 0,135 Start, 0,186 Live):
Der Kurzstand erscheint erst mit den Live-Werten. Bis dahin hält er seinen
Platz unsichtbar frei, statt beim Auftauchen die Kopfzeile zu verschieben. */
.kopf-live[hidden] { display: flex !important; visibility: hidden; }
.kopf-live-wert { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kopf-live-txt { font-size: .72rem; color: var(--schrift-mild); }
.nav { border-top: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-innen { display: flex; gap: .25rem; white-space: nowrap; }
.nav a {
padding: .8rem .85rem; text-decoration: none; color: var(--schrift-mild);
font-size: .93rem; font-weight: 600; border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--petrol); }
.nav a[aria-current="page"] { color: var(--petrol); border-bottom-color: var(--orange); }
@media (prefers-color-scheme: dark) {
.nav a:hover, .nav a[aria-current="page"] { color: var(--tuerkis); }
}
/* ---------------------------------------------------- Held */
.held {
background:
radial-gradient(120% 100% at 80% 0%, rgba(108,187,196,.55) 0%, transparent 60%),
linear-gradient(160deg, var(--petrol) 0%, var(--tiefsee) 55%, #0a94a4 100%);
color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
position: relative; overflow: hidden;
}
.held::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
background: var(--grund);
mask: url('data:image/svg+xml,') no-repeat center/100% 100%;
-webkit-mask: url('data:image/svg+xml,') no-repeat center/100% 100%;
}
/* Keine eigene max-width: die würde als zweites zentriertes Kästchen
innerhalb der Bahn wirken und den Hero-Text gegenüber dem Live-Panel
einrücken. Die Zeilenlänge begrenzen stattdessen die Kinder. */
.held-innen { max-width: none; }
.held-innen > * { margin-inline: 0; }
.held h1 { margin: .1em 0 .3em; text-wrap: balance; max-width: 16ch; }
.held-ort {
text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
font-weight: 700; color: var(--sonne); margin: 0;
}
.held-claim { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); opacity: .93; margin: 0; text-wrap: pretty; max-width: 58ch; }
/* ---------------------------------------------------- Live-Panel */
.live-panel {
margin-top: 1.6rem; position: relative; z-index: 5;
background: var(--flaeche); border: 1px solid var(--linie);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: clamp(1.1rem, 3vw, 1.8rem);
}
/* Nur direkt nach dem Hero ragt das Panel bewusst nach oben hinein. */
.held + .live-panel { margin-top: -2.2rem; }
.live-kopf { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.live-kopf h2 { margin: 0; font-size: 1.15rem; }
.live-stand { font-size: .8rem; color: var(--schrift-mild); margin-left: auto; font-variant-numeric: tabular-nums; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.kachel {
background: var(--grund-warm); border-radius: var(--radius);
padding: .9rem .95rem; display: flex; flex-direction: column; gap: .15rem;
border: 1px solid transparent; transition: border-color .2s;
}
.kachel-titel { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--schrift-mild); }
.kachel-wert { display: flex; align-items: baseline; gap: .18rem; }
.kachel-wert b { font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.05; }
.kachel-wert i { font-style: normal; font-size: .95rem; font-weight: 600; color: var(--schrift-mild); }
.kachel-zusatz { font-size: .82rem; color: var(--schrift-mild); font-variant-numeric: tabular-nums; }
.kachel-wind.stufe-gut { border-color: var(--gut); background: color-mix(in srgb, var(--gut) 9%, var(--grund-warm)); }
.kachel-wind.stufe-geht { border-color: var(--sonne); background: color-mix(in srgb, var(--sonne) 13%, var(--grund-warm)); }
.kachel-wind.stufe-schwach { border-color: var(--linie); }
.kachel-wind.stufe-stark { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 11%, var(--grund-warm)); }
.kachel-wind.stufe-sturm { border-color: var(--schlecht); background: color-mix(in srgb, var(--schlecht) 13%, var(--grund-warm)); }
.kachel-pfeil svg { width: 46px; height: 46px; transition: transform .5s cubic-bezier(.34,1.4,.5,1); }
.kachel-pfeil svg path { fill: var(--petrol); }
@media (prefers-color-scheme: dark) { .kachel-pfeil svg path { fill: var(--tuerkis); } }
.live-urteil {
margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius);
background: var(--tuerkis-blass); font-weight: 600; font-size: .96rem;
}
/* Leer hält das Urteil seine Höhe frei — sonst wächst die Sektion, sobald die
Werte da sind, und alles darunter rutscht (CLS). */
.live-urteil:empty { visibility: hidden; min-height: calc(1.7em + 1.6rem); } /* 1 Zeile + Innenabstand (border-box) */
.sonne-zeile[hidden] { display: block !important; visibility: hidden; min-height: 1.7em; }
.kachel-wert b { min-width: 2ch; }
.kachel-zusatz { min-height: 1.7em; }
.vorhersage-block { min-height: 2800px; } /* 7 Tage × 8 Zeilen, gemessen 2943 px Desktop */
/* Schmale Breiten: die Werte brauchen mehr Zeilen (gemessen 07.09.2026 bei 412 px:
Stand 2 Zeilen, Zusatz 2, Urteil 3, Sonne 2, Vorhersage 4313 px). */
@media (max-width: 900px) {
.kachel-zusatz { min-height: 3.4em; }
.live-urteil:empty { min-height: calc(3.4em + 1.6rem); }
}
@media (max-width: 680px) {
.live-stand { flex-basis: 100%; margin-left: 0; min-height: 1.7em; }
}
@media (max-width: 480px) {
.live-stand { min-height: 3.4em; }
.live-urteil:empty { min-height: calc(5.1em + 1.6rem); }
.sonne-zeile[hidden] { min-height: 3.4em; }
.vorhersage-block { min-height: 4200px; }
}
.live-fuss { margin: .9rem 0 0; font-size: .92rem; }
.live-fuss a { font-weight: 650; text-decoration: none; }
.live-fuss a:hover { text-decoration: underline; }
/* ---------------------------------------------------- Saison-Band */
.saison-band {
display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
margin: 2.2rem 0 0; padding: .85rem 1.1rem;
border-radius: var(--radius); border: 1px solid var(--linie);
background: var(--grund-warm); font-size: .93rem;
}
.saison-band p { margin: 0; flex: 1 1 16rem; }
.saison-band a { font-weight: 650; white-space: nowrap; }
.saison-punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--schrift-mild); flex: none; }
.saison-band.offen .saison-punkt { background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 22%, transparent); }
.saison-band.gesperrt .saison-punkt { background: var(--schlecht); box-shadow: 0 0 0 4px color-mix(in srgb, var(--schlecht) 22%, transparent); }
.saison-band.bald .saison-punkt { background: var(--sonne); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sonne) 25%, transparent); }
/* ---------------------------------------------------- Kompass */
.kompass-block {
display: grid; gap: 2rem; align-items: center; margin: 3.5rem auto;
grid-template-columns: 1fr;
}
@media (min-width: 780px) { .kompass-block { grid-template-columns: 1.15fr .85fr; } }
.kompass-text h2 { margin-top: 0; }
.kompass { width: 100%; max-width: 340px; margin-inline: auto; display: block; }
.sek { stroke: var(--flaeche); stroke-width: 2; }
.sek-gut { fill: var(--gut); }
.sek-geht { fill: var(--sonne); }
.sek-schlecht { fill: color-mix(in srgb, var(--schlecht) 45%, var(--linie)); }
.sek-txt { font: 700 11px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: middle; letter-spacing: .04em; }
.kompass-mitte { fill: var(--flaeche); stroke: var(--linie); stroke-width: 1.5; }
.nadel path { fill: var(--petrol); }
@media (prefers-color-scheme: dark) { .nadel path { fill: var(--tuerkis); } }
.nadel { transition: transform .6s cubic-bezier(.34,1.3,.5,1); transform-origin: 100px 100px; }
.nadel-wert { font: 800 30px var(--sans); fill: var(--schrift); text-anchor: middle; font-variant-numeric: tabular-nums; }
.nadel-einheit { font: 600 9px var(--sans); fill: var(--schrift-mild); text-anchor: middle; text-transform: uppercase; letter-spacing: .12em; }
.legende { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
/* Kein Flex: der Textknoten hinter würde sonst zu einem eigenen
Flex-Item und stünde als zweite Spalte neben der Beschriftung,
statt als Satz weiterzulaufen. Der Punkt hängt stattdessen aus. */
.legende li { position: relative; padding-left: 1.5em; font-size: .97rem; }
.pkt { position: absolute; left: 0; top: .55em; width: 11px; height: 11px; border-radius: 3px; }
.pkt.gut { background: var(--gut); } .pkt.geht { background: var(--sonne); }
.pkt.schlecht { background: color-mix(in srgb, var(--schlecht) 45%, var(--linie)); }
/* ---------------------------------------------------- Inhalt */
.seite { padding: 2.5rem 0 3.5rem; }
.seite h1 { text-wrap: balance; }
.vorspann { font-size: 1.15rem; color: var(--schrift-mild); text-wrap: pretty; margin-bottom: 1.8em; }
.seite ul, .seite ol { padding-left: 1.3em; }
.seite li { margin-bottom: .4em; }
.seite blockquote {
margin: 1.6em 0; padding: .2em 0 .2em 1.2em;
border-left: 4px solid var(--tuerkis); color: var(--schrift-mild); font-style: italic;
}
.seite table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
.seite th, .seite td { text-align: left; padding: .62em .7em; border-bottom: 1px solid var(--linie); }
.seite th { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--schrift-mild); }
.seite tbody tr:hover { background: var(--grund-warm); }
.tabelle-rahmen { overflow-x: auto; margin: 1.6em 0; }
.hinweis {
background: var(--tuerkis-blass); border-radius: var(--radius);
padding: 1rem 1.15rem; margin: 1.7em 0; font-size: .95rem;
}
.hinweis :last-child { margin-bottom: 0; }
.hinweis.warnung { background: color-mix(in srgb, var(--schlecht) 11%, var(--grund-warm)); border-left: 4px solid var(--schlecht); }
.hinweis.wichtig { background: color-mix(in srgb, var(--sonne) 16%, var(--grund-warm)); border-left: 4px solid var(--sonne); }
/* ---------------------------------------------------- Teaser & Knöpfe */
.teaser {
display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
background: linear-gradient(135deg, var(--petrol), var(--tiefsee));
color: #fff; border-radius: var(--radius-gross);
padding: clamp(1.4rem, 4vw, 2.2rem); margin: 3rem 0;
}
.teaser h2 { margin: 0 0 .4em; font-size: 1.35rem; }
.teaser p { margin: 0; opacity: .92; max-width: 52ch; }
.teaser > div { flex: 1 1 22rem; }
.knopf {
display: inline-block; background: var(--orange-text); color: #fff;
padding: .78em 1.5em; border-radius: 100px; text-decoration: none;
font-weight: 700; white-space: nowrap;
box-shadow: 0 4px 14px -4px rgba(191,88,15,.55);
transition: transform .18s, box-shadow .18s, background .18s;
}
.knopf:hover { background: #a44a0b; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px -6px rgba(228,105,18,.7); }
.knopf:active { transform: translateY(0); }
/* ---------------------------------------------------- Fuß */
.fuss { background: var(--grund-warm); border-top: 1px solid var(--linie); margin-top: 4rem; padding: 2.5rem 0 1.5rem; }
.fuss-innen { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fuss-block { display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; }
.fuss-block strong { margin-bottom: .3rem; }
.fuss-block p { margin: 0; color: var(--schrift-mild); }
.fuss-block a { color: var(--schrift-mild); text-decoration: none; }
.fuss-block a:hover { color: var(--orange-text); text-decoration: underline; }
.fuss-fein { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--schrift-mild); }
.fuss-fein p { margin: 0 0 .35em; }
.fuss-fein a { color: inherit; }
.hinweis-klein { opacity: .8; }
/* Teilen im Fuss - in der ersten Spalte unter dem Claim, auf Hoehe von
"Seiten" und "Weiteres" (Wunsch David, 09.09.2026). visibility statt
display: die Zeile steht von Anfang an im Layout und haelt ihren Platz,
live.js schaltet sie nur sichtbar - so verschiebt das Einschalten nichts
und es braucht keine geratene min-height. */
.fuss-teilen {
visibility: hidden; margin-top: 1.2rem;
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
}
.fuss-teilen.bereit { visibility: visible; }
.teilen-frage { color: var(--schrift-mild); }
.teilen-knopf {
font: inherit; font-weight: 700; color: var(--petrol);
background: transparent; border: 1.5px solid var(--petrol);
border-radius: 100px; padding: .5em 1.3em; min-height: 44px;
cursor: pointer; white-space: nowrap;
transition: background .18s, color .18s, transform .18s;
}
.teilen-knopf:hover { background: var(--petrol); color: #fff; }
.teilen-knopf:active { transform: translateY(1px); }
/* Nicht --gut: das Logo-Gruen erreicht auf Creme nur 4,18:1 (gerechnet
09.09.2026), Petrol-tief 9,05:1. */
.teilen-rueck:not(:empty) { color: var(--petrol-tief); font-weight: 600; }
/* ---------------------------------------------------- Vorhersage */
.vorhersage-block { margin: 3rem auto 1rem; }
.vorhersage { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vorhersage th, .vorhersage td { padding: .5em .7em; text-align: left; border-bottom: 1px solid var(--linie); }
.vorhersage thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--schrift-mild); }
.vorhersage td { font-variant-numeric: tabular-nums; }
.vorhersage td b { font-size: 1.05rem; }
.vorhersage .tag-trenner th {
background: var(--grund-warm); font-size: .82rem; text-transform: none;
letter-spacing: 0; color: var(--schrift); padding-top: .8em; padding-bottom: .8em;
}
.vorhersage .nacht { opacity: .42; }
.vorhersage tr.stufe-gut td:nth-child(2) { color: var(--gut); font-weight: 700; }
.vorhersage tr.stufe-stark td:nth-child(2) { color: var(--orange-text); font-weight: 700; }
.vorhersage tr.stufe-sturm td:nth-child(2) { color: var(--schlecht); font-weight: 800; }
.vorhersage .leer { color: var(--schrift-mild); font-style: italic; }
.mini-pfeil { display: inline-block; color: var(--tiefsee); font-weight: 700; }
@media (prefers-color-scheme: dark) { .mini-pfeil { color: var(--tuerkis); } }
.quelle-hinweis { font-size: .82rem; color: var(--schrift-mild); margin-top: .8rem; }
.quelle-hinweis a { color: inherit; }
/* ---------------------------------------------------- Häuserliste */
.haeuser ul { list-style: none; padding: 0; display: grid; gap: .7rem; margin: 1.4em 0; }
.haeuser li {
background: var(--grund-warm); border-radius: var(--radius);
padding: .9rem 1.1rem; border-left: 4px solid var(--tuerkis); margin: 0;
}
.haeuser a { font-weight: 700; text-decoration: none; }
.haeuser a:hover { text-decoration: underline; }
.seite .knopf { margin: 1.6em 0; }
/* ---------------------------------------------------- Maßverhältnisse
Eine linke Kante für alles. Fließtext ist schmaler als Tabellen und
Panels – das ist gewollt, denn 90 Zeichen pro Zeile liest niemand
gern. Der Unterschied muss aber klein genug bleiben, um als Rand zu
wirken und nicht als vergessene Spalte. */
.seiten-kopf { padding: 2.5rem 0 1.6rem; }
.seiten-kopf h1 { max-width: 20ch; }
.seiten-kopf .vorspann { max-width: 84ch; margin-bottom: 0; }
/* Fließtext: begrenzt. Alles Übrige: volle Bahn. */
/* Fließtext nutzt die ganze Bahn. Bei 960 px und 18 px Schrift sind das
rund 95 Zeichen je Zeile - mehr als das typografische Ideal, deshalb
trägt der Textkörper unten eine grosszügigere Zeilenhöhe. */
.lesetext > p,
.lesetext > ul,
.lesetext > ol,
.lesetext > blockquote { max-width: 100%; }
.lesetext > p { line-height: 1.75; }
.lesetext > h1,
.lesetext > h2,
.lesetext > h3 { max-width: 34ch; }
/* ---------------------------------------------------- Spot-Wahl */
.spotwahl-block { margin: 3.5rem auto; }
.spotwahl-satz { font-size: 1.05rem; }
.spotwahl-fuss { font-size: .87rem; color: var(--schrift-mild); margin-top: 1.2rem; }
.spotliste {
list-style: none; padding: 0; margin: 1.5rem 0 0;
display: grid; gap: .8rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.spot-karte {
background: var(--flaeche); border: 1px solid var(--linie);
border-radius: var(--radius); padding: 1rem 1.1rem;
display: flex; flex-direction: column; gap: .2rem;
border-left: 4px solid var(--linie);
}
.spot-karte p { margin: .4rem 0 0; font-size: .92rem; color: var(--schrift-mild); }
.spot-kopf { display: flex; align-items: center; gap: .6rem; justify-content: space-between; }
.spot-kopf b { font-size: 1.05rem; letter-spacing: -.01em; }
.spot-lage { font-size: .78rem; color: var(--schrift-mild); }
.spot-note {
font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
padding: .2em .6em; border-radius: 100px; white-space: nowrap;
background: var(--linie); color: var(--schrift-mild);
}
.note-gut { border-left-color: var(--gut); }
.note-gut .spot-note { background: var(--gut); color: #fff; }
.note-geht { border-left-color: var(--sonne); }
.note-geht .spot-note { background: var(--sonne); color: #4a3000; }
.note-schlecht { opacity: .62; }
.note-gut.erste {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--gut) 35%, transparent), var(--schatten);
}
.spot-warnung {
font-size: .86rem !important; color: var(--schlecht) !important;
background: color-mix(in srgb, var(--schlecht) 9%, transparent);
padding: .5em .7em; border-radius: 8px; margin-top: .6rem !important;
}
@media (prefers-color-scheme: dark) {
.spot-warnung { color: #ff9b7d !important; }
.note-geht .spot-note { color: #2a1c00; }
}
/* ---------------------------------------------------- Windstatistik */
.statistik-block { margin: 3.5rem auto; }
.statistik-satz { color: var(--schrift-mild); }
.monatsliste { list-style: none; padding: 0; margin: 1.6rem 0 1.4rem; display: grid; gap: .3rem; }
.monat {
display: grid; align-items: center; gap: .3rem .9rem;
grid-template-columns: 6.2rem 1fr 3rem;
grid-template-areas: "name balken wert" ". rest rest";
padding: .42rem .6rem; border-radius: 9px;
}
.monat:hover { background: var(--grund-warm); }
.monat-name { grid-area: name; font-size: .93rem; font-weight: 600; }
.monat-balken { grid-area: balken; background: var(--linie); border-radius: 100px; height: 12px; overflow: hidden; }
.monat-balken i { display: block; height: 100%; background: var(--tuerkis); border-radius: 100px; }
.monat-wert { grid-area: wert; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; }
.monat-rest { grid-area: rest; font-size: .76rem; color: var(--schrift-mild); font-variant-numeric: tabular-nums; }
.monat.stark .monat-balken i { background: var(--gut); }
.monat.stark .monat-wert { color: var(--gut); }
.monat.schwach .monat-balken i { background: color-mix(in srgb, var(--schlecht) 42%, var(--linie)); }
.monat.schwach .monat-name,
.monat.schwach .monat-wert { color: var(--schrift-mild); }
@media (max-width: 520px) {
.monat { grid-template-columns: 5rem 1fr 2.7rem; }
.monat-rest { font-size: .72rem; }
}
/* ---------------------------------------------------- Modellvergleich */
.modelle { margin: 3rem auto 1rem; }
.modelle-satz { color: var(--schrift-mild); margin-bottom: .9rem; }
.modelle-liste {
list-style: none; padding: 0; margin: 0 0 1rem;
display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.modelle-liste li {
background: var(--grund-warm); border-radius: var(--radius);
padding: .75rem .9rem; display: flex; flex-direction: column; gap: .15rem;
}
.modelle-liste span { font-size: .78rem; color: var(--schrift-mild); font-weight: 600; }
.modelle-liste b { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.modelle-urteil {
font-size: 1.02rem; line-height: 1.55;
padding: 1rem 1.2rem; border-radius: var(--radius);
background: var(--grund-warm); border-left: 4px solid var(--linie);
max-width: 100%;
}
.modelle.einig .modelle-urteil { border-left-color: var(--gut); }
.modelle.mittel .modelle-urteil { border-left-color: var(--sonne); }
.modelle.uneinig .modelle-urteil { border-left-color: var(--schlecht); }
/* ---------------------------------------------------- Häuser */
.haeuser-block { margin: 1rem auto 3rem; }
.haeuser-satz { color: var(--schrift-mild); }
.haeuser-fuss { font-size: .9rem; color: var(--schrift-mild); margin-top: 1.4rem; }
.hausliste {
list-style: none; padding: 0; margin: 1.6rem 0 0;
display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.haus {
background: var(--flaeche); border: 1px solid var(--linie);
border-left: 4px solid var(--tuerkis);
border-radius: var(--radius); padding: 1.1rem 1.2rem;
display: flex; flex-direction: column; gap: .1rem;
}
.haus-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.haus h3 { margin: 0; font-size: 1.15rem; }
.haus h3 a { text-decoration: none; }
.haus h3 a:hover { text-decoration: underline; }
.haus-eck { font-size: .76rem; color: var(--schrift-mild); white-space: nowrap; }
.haus-wege { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .4rem; }
.haus-wege li {
display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem;
grid-template-areas: "mass spot" ". wind";
padding: .5rem .65rem; border-radius: 9px; background: var(--grund-warm);
}
.haus-wege li.naechster { background: color-mix(in srgb, var(--gut) 10%, var(--grund-warm)); }
.weg-mass { grid-area: mass; font-size: .95rem; white-space: nowrap; }
.weg-mass b { font-variant-numeric: tabular-nums; }
.weg-spot { grid-area: spot; font-size: .95rem; font-weight: 600; }
.weg-wind { grid-area: wind; font-size: .78rem; color: var(--schrift-mild); }
.haus-dafuer { margin: .7rem 0 0; font-size: .93rem; }
.haus-link { margin-top: auto; padding-top: .8rem; font-size: .9rem; font-weight: 650; text-decoration: none; }
.haus-link:hover { text-decoration: underline; }
/* ---------------------------------------------------- Pfadleiste
Bewusst zurückhaltend: klein, grau, ohne Rahmen. Sie soll die
Einordnung zeigen, nicht um Aufmerksamkeit werben. */
.pfad {
display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
padding: 1.1rem 0 0; font-size: .8rem; color: var(--schrift-mild);
}
.pfad a { color: inherit; text-decoration: none; }
.pfad a:hover { color: var(--orange-text); text-decoration: underline; }
.pfad span[aria-hidden] { opacity: .5; }
.pfad [aria-current] { color: var(--schrift); }
/* Der Seitenkopf folgt direkt darunter und braucht dann weniger Luft */
.pfad + .seiten-kopf,
.pfad + .seite { padding-top: 1.2rem; }
/* ---------------------------------------------------- Fragen
Die H3 sind echte Fragen und werden als solche gesetzt: etwas
kleiner als sonst, dafür mit klarer Abgrenzung nach oben. */
.lesetext h3 {
font-size: 1.12rem;
margin-top: 2em;
padding-top: 1.2em;
border-top: 1px solid var(--linie);
}
.lesetext h2 + h3 { border-top: 0; padding-top: 0; margin-top: 1.2em; }
.weg-merkmal {
display: inline-block; font-style: normal; margin-left: .4em;
padding: .05em .5em; border-radius: 4px; font-size: .93em;
background: color-mix(in srgb, var(--tiefsee) 12%, transparent);
color: var(--tiefsee);
}
@media (prefers-color-scheme: dark) {
.weg-merkmal { color: var(--tuerkis); background: color-mix(in srgb, var(--tuerkis) 15%, transparent); }
}
/* ---------------------------------------------------- Ausblick
Eine Zeile, die die Tabelle darunter vorwegnimmt. Farbe zeigt die
Aussicht, ohne dass man sie lesen muss. */
.ausblick {
margin: 1.6rem auto 0;
padding: .9rem 1.1rem;
border-radius: var(--radius);
border-left: 4px solid var(--linie);
background: var(--grund-warm);
font-size: .98rem; line-height: 1.55;
}
.ausblick b { font-weight: 700; }
.ausblick.gut { border-left-color: var(--gut);
background: color-mix(in srgb, var(--gut) 8%, var(--grund-warm)); }
.ausblick.kraeftig { border-left-color: var(--orange);
background: color-mix(in srgb, var(--orange) 8%, var(--grund-warm)); }
.ausblick.flau { border-left-color: var(--schrift-mild); }
.ausblick-rest { color: var(--schrift-mild); font-size: .93em; }
/* ---------------------------------------------------- Revier-Tabelle */
.revier-tabelle { margin: 1rem auto 2.5rem; }
.reviere { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; }
.reviere th, .reviere td { padding: .6em .7em; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.reviere thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--schrift-mild); }
.reviere tbody th { font-weight: 700; white-space: nowrap; }
.reviere tbody th em { display: block; font-style: normal; font-weight: 500; font-size: .8rem; color: var(--tiefsee); }
.reviere tbody tr:hover { background: var(--grund-warm); }
.reviere td { font-variant-numeric: tabular-nums; }
.r-gut { color: var(--gut); font-weight: 650; }
.r-geht { color: var(--schrift); }
.r-schlecht { color: var(--schrift-mild); }
@media (prefers-color-scheme: dark) {
.reviere tbody th em { color: var(--tuerkis); }
.r-gut { color: #6fd48f; }
}
.pruefbar {
font-size: .92rem; color: var(--schrift-mild);
border-left: 3px solid var(--linie); padding-left: 1rem;
}
/* --- Kitegrössen-Rechner ---------------------------------------
Nur neue Klassen, keine bestehende Regel geändert. Die Eingaben
sind bewusst gross genug für Bedienung am Strand mit nassen
Fingern (44 px Zielfläche). Nichts wird gespeichert - kein
localStorage, kein Cookie: die Datenschutzerklärung sagt das zu,
und der Tagescheck prüft es. */
.rechner-form {
display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem;
background: var(--tuerkis-blass); border-radius: var(--radius);
padding: 1.1rem 1.2rem; margin: 0 0 1.4rem;
}
/* Alle vier Spalten gleich breit. Vorher richteten sich die Auswahlfelder
nach ihrem laengsten Eintrag - "Foil" wurde schmal, "Fortgeschritten"
breit, und die Zeile sah ausgefranst aus. */
.rechner-feld {
display: flex; flex-direction: column; gap: .3rem; margin: 0;
flex: 1 1 11rem; max-width: 14rem; min-width: 0;
}
.rechner-feld label, .rechner-label-platz {
font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
color: var(--schrift-mild); min-height: 1.1em;
}
.rechner-feld input, .rechner-feld select {
font: inherit; font-size: 1.05rem; min-height: 44px; height: 44px;
padding: .35em .5em; border: 1px solid var(--linie);
border-radius: 8px; background: #fff; color: var(--schrift);
width: 100%; min-width: 0;
}
/* Safari ignoriert Hoehenangaben an einem