/*
 * Gestaltung - nachgebaut nach der Wetterseite im Mitgliederbereich.
 *
 * Die Bloecke fuer Achensee-Uhr, Drehanzeige, Boeigkeit, Boeen-Schocker und
 * Trockenanzug-Indikator sind aus dem Portal (site.css) uebernommen, damit beide Seiten gleich
 * aussehen. Alles Uebrige erledigt Bootstrap - genau wie im Portal.
 *
 * Die Farbwerte stehen hier noch einmal, weil das Portal sie global setzt und ein fremdes
 * WordPress-Theme sie nicht kennt.
 */

.yka-wetter {
    --yka-blue: #2f6690;
    --yka-gold: #c9922b;
    --yka-muted: #5c5c5c;

    /* Neutraler Ton fuer Bloecke, die weder gemessen noch vorhergesagt sind - die
       Windstaerkentabelle ist ein Nachschlagewerk und aendert sich nie. */
    --yka-grau: #b7c4ce;
}

.yka-wetter-titel {
    margin-bottom: 1rem;
}

/* Der Akzentstreifen oben an der Kachel - im Portal heisst die Klasse yka-stat-tile.
 *
 * Der Selektor nennt .card mit, und das ist kein Zufall: Weiter unten steht
 * ".yka-wetter .card { border: 1px solid ... }", damit die Karten auch in einem Theme ohne
 * Bootstrap-Rahmen einen bekommen. Diese Regel hat zwei Klassen und schlug damit den
 * Akzentstreifen mit seiner einen - der Rand war auf der Homepage weg, waehrend er im Portal
 * stand. Nicht das fremde Theme hat ihn genommen, sondern die eigene Zeile daneben.
 *
 * --tile-accent kommt aus dem style-Attribut der jeweiligen Kachel (gold beim Ausblick,
 * sonst blau).
 */
.yka-wetter .card.yka-wetter-kachel {
    border-top: 3px solid var(--tile-accent, var(--yka-blue));
    transition: box-shadow .15s ease;
}

.yka-wetter .card.yka-wetter-kachel:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.yka-wetter-gold {
    color: var(--yka-gold);
}

/* ---------- Boeigkeit: Verhaeltnis Boe zu Mittelwind je Abschnitt ---------- */
.yka-boe-liste { list-style: none; padding: 0; margin: 0; }

.yka-boe-zeile {
    padding: .5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.yka-boe-zeile:last-child { border-bottom: 0; }

.yka-boe-kopf,
.yka-boe-fuss {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.yka-boe-zeit { font-weight: 600; }

.yka-boe-werte,
.yka-boe-faktor {
    color: var(--yka-muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.yka-boe-balken {
    height: 7px;
    border-radius: 4px;
    background: #edeeef;
    margin: .3rem 0 .25rem;
    overflow: hidden;
}

.yka-boe-fuellung { height: 100%; border-radius: 4px; }

/* Die Stufen laufen von gruen nach rot. Bewusst nicht durchgehend rot ab "boeig": Wer jede
   Zeile rot sieht, liest die Farbe irgendwann gar nicht mehr. */
.yka-boe-still  { background: #c9c9c9; }
.yka-boe-ruhig  { background: #2e7d32; }
.yka-boe-leicht { background: #94a300; }
.yka-boe-boeig  { background: #e07b00; }
.yka-boe-stark  { background: #c8102e; }

.yka-boe-text { font-size: .85rem; }
.yka-boe-text-still  { color: var(--yka-muted); }
.yka-boe-text-ruhig  { color: #2e7d32; }
.yka-boe-text-leicht { color: #6d7800; }
.yka-boe-text-boeig  { color: #b06000; font-weight: 600; }
.yka-boe-text-stark  { color: #c8102e; font-weight: 600; }

.yka-boe-warnung {
    margin-top: .3rem;
    padding: .35rem .5rem;
    border-left: 3px solid #c8102e;
    background: rgba(200, 16, 46, .06);
    font-size: .78rem;
}

/* ---------- Winddreher: Spur der letzten Stunden auf der Rose ---------- */
.yka-dreher { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.yka-dreher-rose { flex: 0 0 auto; }
.yka-dreher-text { flex: 1 1 180px; min-width: 0; }

.yka-dreher-aussage {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2f6690;
    margin-bottom: .4rem;
}

.yka-dreher-wechsel {
    padding: .35rem .5rem;
    border-left: 3px solid #e07b00;
    background: rgba(224, 123, 0, .07);
}

/* ---------- Die Achensee-Uhr: Tage oder Monate gegen die Uhrzeit ---------- */
/* Beide Ansichten benutzen dieselbe Tabelle und dieselbe Farbskala. Waeren es zwei Skalen,
   muesste beim Umschalten auch die Bedeutung der Farben neu gelesen werden. */
.yka-uhr {
    border-collapse: separate;
    border-spacing: 1px;
    font-size: .78rem;
}

.yka-uhr th { font-weight: 500; text-align: left; padding: 0 2px; }

.yka-uhr-unterzeile {
    margin-top: -.35rem;
    margin-bottom: .75rem;
    font-size: 1.05rem;
    color: var(--yka-muted);
}

.yka-uhr-zeile {
    white-space: nowrap;
    padding-right: .5rem;
    color: var(--yka-muted);
    font-variant-numeric: tabular-nums;
}

.yka-uhr-feld {
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 2px;
}

.yka-uhr-hinweis {
    white-space: nowrap;
    padding-left: .6rem;
    color: var(--yka-muted);
    font-size: .72rem;
}

.yka-uhr-legende { display: flex; flex-wrap: wrap; gap: 1rem; }

.yka-uhr-punkt {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    margin-right: .1rem;
    vertical-align: -1px;
}

.yka-uhr-legende span > .yka-uhr-punkt:last-of-type { margin-right: .25rem; }

/* Der Farbton traegt die Richtung, die Saettigung die Staerke - zwei Angaben in einer Zelle.
   Die Stufen bleiben je Haelfte eine Farbfamilie, damit "welche Richtung" auch dann auf einen
   Blick lesbar ist, wenn die Staerken durcheinandergehen. */
.yka-wf-nord.yka-wf-s1 { background: #cfe0ec; }
.yka-wf-nord.yka-wf-s2 { background: #8fb4d0; }
.yka-wf-nord.yka-wf-s3 { background: #4d81a8; }
.yka-wf-nord.yka-wf-s4 { background: #1f4f75; }

.yka-wf-sued.yka-wf-s1 { background: #f6d2d6; }
.yka-wf-sued.yka-wf-s2 { background: #e69aa2; }
.yka-wf-sued.yka-wf-s3 { background: #d1515f; }
.yka-wf-sued.yka-wf-s4 { background: #97001a; }

.yka-wf-quer.yka-wf-s1 { background: #e8e8e8; }
.yka-wf-quer.yka-wf-s2 { background: #cfcfcf; }
.yka-wf-quer.yka-wf-s3 { background: #a8a8a8; }
.yka-wf-quer.yka-wf-s4 { background: #7a7a7a; }

/* Gemischt bekommt beide Farben schraeg gestreift statt eines dritten Grautons: Sonst waere es
   von "quer" nicht zu unterscheiden, und die beiden bedeuten voellig Verschiedenes - quer heisst
   der Wind kam aus Ost oder West, gemischt heisst mal Nord und mal Sued. Nur die Saisonansicht
   kennt diesen Zustand; in der Tagesansicht steht in jeder Zelle eine einzelne Stunde. */
.yka-wf-gemischt.yka-wf-s1,
.yka-wf-gemischt.yka-wf-s2,
.yka-wf-gemischt.yka-wf-s3,
.yka-wf-gemischt.yka-wf-s4 {
    background: repeating-linear-gradient(45deg, #8fb4d0 0 3px, #e69aa2 3px 6px);
}

/* Zwei Sorten von "hier steht keine Richtung", und sie bedeuten Verschiedenes.
   still: gemessen, aber unter der Mindeststaerke - der See lag ruhig.
   leer:  kein Messpunkt - ueber diese Stunde wissen wir nichts.
   Vorher trugen beide dieselbe Farbe, und die Legende nannte nur den ersten Fall. Genau daran
   ist am 03.09.2026 eine Fehldiagnose entstanden: Flaute sah aus wie ein ausgefallener Takt. */
.yka-wf-still.yka-wf-s0 { background: #dde3e8; }
.yka-wf-leer.yka-wf-s0  { background: #fafafa; box-shadow: inset 0 0 0 1px #eceff1; }

/* ---------- Boeen-Schocker und Trockenanzug-Indikator ---------- */
.yka-schocker { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.yka-schocker-wert {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .2rem;
    font-variant-numeric: tabular-nums;
}

.yka-schocker-zeit {
    font-size: 1rem;
    color: var(--yka-muted);
    margin-bottom: .4rem;
}

/* Dieselben Stufenfarben wie bei der Boeigkeit daneben - zwei Skalen mit denselben Woertern in
   verschiedenen Farben waeren schlimmer als gar keine Farbe. */
.yka-kenter-ruhig  { color: #2e7d32; }
.yka-kenter-leicht { color: #6d7800; }
.yka-kenter-boeig  { color: #b06000; }
.yka-kenter-stark  { color: #c8102e; }

/* Beide Ansichten der Uhr liegen uebereinander in derselben Rasterzelle, und die inaktive wird
   mit visibility statt hidden ausgeblendet: Sie belegt weiter ihren Platz, damit die hoehere
   der beiden die Hoehe bestimmt und beim Umschalten nichts springt. Eine feste Mindesthoehe in
   Pixeln taete dasselbe, waere aber falsch, sobald jemand die Zahl der Tage aendert. */
/* Die Bühne trägt beide Fassungen der Uhr übereinander in derselben Rasterzelle - so bestimmt
   die höhere die Höhe, und die Seite springt beim Umschalten nicht.
 *
 * overflow-x: auto kam am 03.09.2026 dazu. Auf dem Telefon (375 px) ist die Uhr 620 px breit
 * und ragte aus ihrer Karte heraus: kein Scrollrahmen, nur überstehender Inhalt. Gemessen wurde
 * das nicht an der Breite des Elements - die lag brav innerhalb der Karte -, sondern daran, dass
 * scrollLeft sich nicht bewegen liess. Ein Scrollrahmen und ein Uebersteher sehen in scrollWidth
 * gleich aus; nur der Versuch, tatsaechlich zu scrollen, trennt sie. */
.yka-uhr-buehne {
    display: grid;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.yka-uhr-buehne > [data-uhr-block] { grid-area: 1 / 1; }
.yka-uhr-aus { visibility: hidden; }

/* Die Uhr steht allein in ihrer Zeile. Statt fester Zellbreiten laeuft die Tafel jetzt ueber
   die volle Breite und teilt sie auf die 24 Stunden auf - mit festen 26 px blieb rechts ein
   Drittel der Karte leer. Eine Mindestbreite haelt sie auf schmalen Schirmen lesbar; darunter
   faengt table-responsive das Scrollen ab. */
.yka-uhr { width: 100%; min-width: 620px; table-layout: fixed; }
.yka-uhr-feld { height: 19px; }

/* In einer Viertelspalte brechen die Ueberschriften zwangslaeufig um; balance verteilt die
   Woerter gleichmaessig statt ein einzelnes in die zweite Zeile zu haengen. */
.card > .card-body > h4 { text-wrap: balance; font-size: 1.25rem; }

/* Bei table-layout:fixed zaehlt allein die ERSTE Zeile fuer die Spaltenbreiten - eine Angabe
   an den td greift nicht. Die Hinweisspalte bekam so 48 px, der Text "Drehung gegen 11 Uhr"
   braucht mit nowrap 127 und schob die Tabelle in den waagrechten Bildlauf. Die Breiten stehen
   deshalb an den th des Kopfes. */
.yka-uhr thead th:first-child { width: 88px; }
/* Die Wachablöse-Spalte trägt seit 2.13.0 nur noch "15 Uhr" statt "Drehung gegen 15 Uhr" - 150 px
   waren dafür zu viel. Die frei werdende Breite geht an die Stundenfelder, und die sind das
   Eigentliche an dieser Tafel. */
.yka-uhr thead th:last-child { width: 92px; }

/* Der Indexwert traegt seine Karte allein: mittig, gross, mit Luft darum. Zahl und Stufenname
   bilden eine Einheit und ruecken deshalb eng zusammen; der Abstand entsteht erst DANACH. */
.yka-kenter-wert {
    text-align: center;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 1.25rem 0 0;
}

.yka-kenter-wert .yka-kenter-stufe {
    display: block;
    margin-top: .3rem;
    font-size: 1.15rem;
    font-weight: 600;
}

/* Deutung: was die Zahl ist und wofuer sie nicht taugt. Als eigener Block mit Linie abgesetzt,
   damit sie nicht als Bildunterschrift der Zahl gelesen wird - der Hinweis muss auffallen. */
.yka-kenter-deutung {
    margin: 1.5rem 0 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    text-align: center;
}

.yka-kenter-formel {
    font-size: .95rem;
    margin-bottom: .35rem;
}

.yka-kenter-hinweis {
    font-size: .85rem;
    font-weight: 600;
    color: var(--yka-muted);
    margin-bottom: 0;
}

/* Kopf der Uhr-Karte: Titel links, Vorfuehrhinweis rechts oben. Auf schmalen Schirmen rutscht
   der Hinweis unter den Titel statt ihn zu quetschen. */
.yka-uhr-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
}

.yka-uhr-kopf > div { min-width: 0; }

/* ---------- Typografie gegen das Theme festnageln ----------
 *
 * Das WordPress-Theme setzt eigene Groessen und Gewichte fuer Ueberschriften und gewinnt gegen
 * Bootstrap - gemessen auf yka.at kamen die h4 mit 18 px und Gewicht 300 an statt mit 20 px und
 * 500 wie im Portal. Der Block sah dadurch duenner und kleiner aus als die Vorlage.
 *
 * Deshalb hier ausdruecklich, und nur INNERHALB von .yka-wetter: Der Rest der Website behaelt
 * die Schrift des Themes.
 */
.yka-wetter h2,
.yka-wetter h3,
.yka-wetter h4,
.yka-wetter h5 {
    font-family: inherit;
    line-height: 1.2;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.yka-wetter-titel {
    font-size: 1.75rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* 1.25rem statt Bootstraps 1.5rem: Bei vier Karten nebeneinander bricht "Der Böen-Schocker des
   Tages" sonst in drei Zeilen um. Dieselbe Groesse wie im Portal. */
.yka-wetter h4 {
    font-size: 1.25rem;
    font-weight: 500;
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: .75rem;
}

.yka-wetter .card-title,
.yka-wetter h5 {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Die grossen Messwerte: 1.75rem, wie .h3 im Portal. */
.yka-wetter .h3 {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.yka-wetter .h4 {
    font-size: 1.35rem;
    font-weight: 500;
}

/* Das Theme gibt Tabellen oft eigene Raender und Streifen - im Portal sind sie schlicht. */
.yka-wetter .table {
    margin-bottom: 0;
    background: transparent;
}

.yka-wetter .table > :not(caption) > * > * {
    padding: .3rem .4rem;
    background: transparent;
}

.yka-wetter .table td,
.yka-wetter .table th {
    border-top: 0;
    vertical-align: middle;
}

/* Karten: der feine Rahmen des Portals, keine Theme-Schatten. */
.yka-wetter .card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .375rem;
    box-shadow: none;
}

.yka-wetter .card-body {
    padding: 1rem 1.25rem;
}

/* Die Umschaltknöpfe: Das Theme faerbt Buttons gern eigenwillig ein. */
.yka-wetter .btn {
    font-size: .8125rem;
    line-height: 1.5;
    border-radius: .25rem;
    text-transform: none;
    letter-spacing: normal;
}

.yka-wetter .btn-primary {
    background-color: var(--yka-blue);
    border-color: var(--yka-blue);
    color: #fff;
}

.yka-wetter .btn-outline-secondary {
    color: var(--yka-muted);
    border-color: rgba(0, 0, 0, .2);
    background: transparent;
}

.yka-wetter p {
    margin-bottom: .5rem;
}

.yka-wetter .text-muted {
    color: var(--yka-muted) !important;
}

/* ---- Tagesverlauf ------------------------------------------------------- */
/* Das Diagramm ist auf 760 px gezeichnet und hat eine viewBox - es kann also skalieren.
 *
 * min-width verhinderte das: Bei einem 730 px breiten Rahmen blieb das SVG bei 760 und erzeugte
 * einen waagrechten Scrollbalken um 30 px. Auf dem Telefon ist der Balken richtig (gestaucht
 * waeren Achsen und Pfeile unlesbar), auf dem Desktop stoert er.
 *
 * width: 100% laesst es mitwachsen und mitschrumpfen, min-width: 600px setzt die Grenze, ab der
 * lieber gescrollt als gestaucht wird. Bei 730 px Rahmen greift 100% und der Balken ist weg. */
.yka-wetter .yka-wetter-chart svg {
    width: 100%;
    min-width: 600px;
    max-width: 760px;
    height: auto;
}

.yka-wetter .yka-wetter-farbtupfer {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 2px;
    vertical-align: -1px;
}

/* Wettersymbole kommen als SVG ohne feste Groesse - im Quelltext steht viewBox="0 0 150 150",
   also waeren sie ohne Vorgabe 150 px gross. Die gewuenschte Groesse steht als Inline-Stil am
   Bild selbst, damit sie gegen Theme-Regeln gewinnt.

   Hier stand einmal "width: auto", um ein "img { width: 100% }" des Themes auszuhebeln. Das hat
   aber auch das width-Attribut des Bildes ausgehebelt: Aus einem 22-px-Symbol wurden 132 px,
   und die Tageskarten standen voller riesiger Sonnen. Eine Regel, die eine fremde Vorgabe
   abwehren soll, trifft die eigene genauso. */
.yka-wetter .yka-wetter-symbol {
    display: inline-block;
    max-width: none;
    vertical-align: middle;
}

/* ---- Titelzeile mit Quellenvermerk -------------------------------------- */

/* Überschrift links, Quellenvermerk rechts auf derselben Grundlinie. flex-wrap sorgt dafür,
   dass der Vermerk auf schmalen Bildschirmen unter die Überschrift rutscht statt sie zu
   quetschen - er muss lesbar bleiben, das ist vertraglich zugesagt. */
.yka-wetter .yka-wetter-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.yka-wetter .yka-wetter-kopf .yka-wetter-titel {
    margin: 0;
}

/* Ohne dieses Feld rutscht der Vermerk bei leerer Überschrift nach links. Die leere h2 nimmt
   dann keine Breite ein, und space-between hat nichts, wovon es trennen könnte. */
.yka-wetter .yka-wetter-kopf-quelle {
    margin-left: auto;
}

/* ---- Blocküberschriften ------------------------------------------------- */

/* Die Blöcke standen als gleichförmige Folge untereinander: acht Überschriften in derselben
   Größe, derselben Farbe und demselben Gewicht wie jeder andere Text auf der Seite. Wer die
   Seite überfliegt, findet so nicht, wonach er sucht.
   
   Zurückhaltend gelöst, damit das Gesamtbild ruhig bleibt: die Vereinsfarbe statt Schwarz, ein
   halber Schritt mehr Gewicht, dazu ein kurzer goldener Strich. Keine größere Schrift — die
   Blöcke stehen teils nebeneinander in schmalen Spalten, dort würde jede Vergrößerung sofort
   umbrechen. */
.yka-wetter h4 {
    color: var(--yka-blue);
    font-weight: 600;
    padding-bottom: .45rem;
    margin-bottom: .9rem;
    position: relative;
}

.yka-wetter h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.25rem;
    height: 3px;
    border-radius: 2px;
    background: var(--yka-gold);
}

/* Die Kachelüberschriften bekommen dieselbe Farbe, aber keinen Strich: Sie stehen als card-title
   dicht über ihrem eigenen Text, und ein zweiter Trenner auf so engem Raum wirkt wie ein Fehler. */
.yka-wetter .card-title {
    color: var(--yka-blue);
    font-weight: 600;
}

/* Rücklink über der Überschrift: klein und unaufdringlich, aber als Link erkennbar. Er steht
   über dem Titel und darf ihn nicht überstrahlen. */
.yka-wetter .yka-wetter-zurueck {
    margin: 0 0 .35rem;
    font-size: .875rem;
}

.yka-wetter .yka-wetter-zurueck a {
    color: var(--yka-muted);
    text-decoration: none;
}

.yka-wetter .yka-wetter-zurueck a:hover,
.yka-wetter .yka-wetter-zurueck a:focus {
    color: var(--yka-blue);
    text-decoration: underline;
}

/* ---- kleines Widget für die Startseite ---------------------------------- */

/* Es steht dort zwischen Vereinsnachrichten und darf nicht wie ein Fremdkörper wirken: eine
   Karte in derselben Sprache wie die Wetterseite, nur auf das Nötige eingedampft. */
.yka-wetter .yka-wetter-klein .card-body {
    padding: 1rem 1.15rem .85rem;
}

.yka-wetter .yka-wetter-klein-nadel svg {
    width: 58px;
    height: 58px;
}

.yka-wetter .yka-wetter-klein-wind {
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--yka-blue);
}

.yka-wetter .yka-wetter-klein-wind small {
    font-size: .95rem;
    font-weight: 400;
    color: var(--yka-muted);
}

.yka-wetter .yka-wetter-klein-richtung {
    font-size: .95rem;
    font-weight: 400;
    color: var(--yka-muted);
    margin-left: .25rem;
}

.yka-wetter .yka-wetter-klein-zeile {
    font-size: .9rem;
    color: var(--yka-muted);
}

/* Fußzeile des Widgets: Link, Alter der Messung und Quellenvermerk.
 *
 * flex-wrap ist hier kein Schönheitsmittel, sondern notwendig. Bei 375 px (iPhone) brauchen die
 * drei Elemente 322 px, verfügbar sind 276 - ohne Umbruch ragte der Quellenvermerk 46 px aus
 * der Karte hinaus. Genau er darf das nicht: Er ist vertraglich vorgeschrieben und muss lesbar
 * bleiben.
 *
 * Im schmalen Desktop-Fenster war der Fehler nicht zu sehen. Das Theme (Avada) erkennt Geräte
 * am User-Agent und liefert dem Telefon ein anderes Layout als dem verkleinerten Browser -
 * eine schmale Fensterbreite ist deshalb kein Ersatz für die Messung mit mobiler Kennung. */
.yka-wetter .yka-wetter-klein-fuss {
    flex-wrap: wrap;
    margin-top: .7rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
    gap: .2rem .75rem;
}

/* Der Quellenvermerk steht immer rechts - in einer Zeile mit Link und Alter am rechten Rand,
   und wenn die Fußzeile umbricht, in seiner eigenen Zeile ebenfalls rechts.
 *
 * margin-left: auto statt einer Media Query: Die Fußzeile bricht nicht bei einer bestimmten
 * Bildschirmbreite um, sondern wenn ihr Platz ausgeht - das Widget kann auch auf einem breiten
 * Schirm in einer schmalen Spalte stehen. Eine Regel an der Fensterbreite hätte genau diesen
 * Fall verfehlt. */
.yka-wetter .yka-wetter-klein-fuss .yka-wetter-quelle {
    margin-left: auto;
    text-align: right;
}

.yka-wetter .yka-wetter-klein-link {
    color: var(--yka-blue);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.yka-wetter .yka-wetter-klein-link:hover,
.yka-wetter .yka-wetter-klein-link:focus {
    text-decoration: underline;
}

/* Auf dem Telefon steht das Symbol im Weg: Windnadel, Zahlen und Symbol nebeneinander drängen
   die Richtung in die zweite Zeile. Die Zahlen sind wichtiger als das Wölkchen. */
@media (max-width: 420px) {
    .yka-wetter .yka-wetter-klein-symbol {
        display: none;
    }
}

/* Ausblick im kleinen Widget: steht auf einer breiten Seite rechts neben den aktuellen Werten,
   auf einer schmalen Spalte darunter. Das regelt flex-wrap in der Zeile darüber - hier steht
   nur, wie die beiden Abschnitte selbst aussehen.

   Grund für den Umbau: Auf der Startseite lief das Widget über 1130 px, davon standen gut 800
   leer. Eine Karte, die so viel Platz einnimmt und so wenig sagt, wirkt wie ein Platzhalter. */
.yka-wetter .yka-wetter-klein-ausblick {
    display: flex;
    gap: 1.5rem;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(0, 0, 0, .08);
    flex-shrink: 0;
}

.yka-wetter .yka-wetter-klein-abschnitt {
    min-width: 6.5rem;
}

.yka-wetter .yka-wetter-klein-wann {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--yka-muted);
}

.yka-wetter .yka-wetter-klein-laeuft {
    background: var(--yka-blue);
    color: #fff;
    border-radius: 3px;
    padding: 0 .3rem;
    font-size: .7rem;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: 1px;
}

.yka-wetter .yka-wetter-klein-werte {
    font-size: 1.05rem;
    line-height: 1.3;
}

.yka-wetter .yka-wetter-klein-werte .yka-wetter-gold {
    font-size: .9rem;
}

.yka-wetter .yka-wetter-klein-einschaetzung {
    font-size: .85rem;
    color: var(--yka-muted);
}

.yka-wetter .yka-wetter-klein-alter {
    font-size: .8rem;
    color: var(--yka-muted);
}

/* Schmale Spalte: Der Ausblick rutscht unter die aktuellen Werte, die senkrechte Trennlinie
   wäre dort sinnlos. */
@media (max-width: 780px) {
    .yka-wetter .yka-wetter-klein-ausblick {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, .08);
        padding-top: .6rem;
        margin-top: .2rem;
        width: 100%;
    }
}

/* Der Böen-Schocker im Widget: dieselbe Anordnung wie der Ausblick, damit beide austauschbar
   sind - eine große Zahl, darüber die Beschriftung, darunter die Einordnung. */
.yka-wetter .yka-wetter-klein-schocker {
    padding-left: 1.25rem;
    border-left: 1px solid rgba(0, 0, 0, .08);
    flex-shrink: 0;
    min-width: 9rem;
}

.yka-wetter .yka-wetter-klein-boee {
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--yka-gold);
}

.yka-wetter .yka-wetter-klein-boee small {
    font-size: .95rem;
    font-weight: 400;
    color: var(--yka-muted);
}

@media (max-width: 780px) {
    .yka-wetter .yka-wetter-klein-schocker {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, .08);
        padding-top: .6rem;
        margin-top: .2rem;
        width: 100%;
    }
}

/* ---- Telefon: Wörter nicht mitten durchbrechen ------------------------- */

/* Das Theme setzt overflow-wrap: break-word. Auf dem Telefon zerreißt das die Beschriftungen
   mitten im Wort: aus "Temperatur" wurde "Temper / atur", aus "Beaufort" ein "Beaufor / t".
   Gemessen an der Höhe der Beschriftung - 42 px statt 21 - war das eindeutig.
   
   Ein Wort, das nicht passt, soll lieber überstehen oder die Spalte breiter machen, als
   unlesbar zu werden. Deshalb hier zurück auf das übliche Verhalten. */
.yka-wetter,
.yka-wetter * {
    overflow-wrap: normal;
    word-break: normal;
}

/* Zahlen und ihre Einheit gehören zusammen: "18,3 kn" brach nach dem Komma in "18," und "3 kn"
   um - zwei Zeilen, in denen zwei verschiedene Zahlen zu stehen scheinen. */
.yka-wetter .h3,
.yka-wetter .yka-wetter-klein-wind,
.yka-wetter .yka-wetter-klein-boee {
    white-space: nowrap;
}

/* Tabellenzellen ebenso. Die Windstärkentabelle stauchte sich auf 273 px und brach dabei
   "unter 1" in zwei Zeilen; jetzt wird sie 325 px breit und scrollt in ihrem Rahmen - der war
   die ganze Zeit da und wurde nur nie gebraucht. */
.yka-wetter .table td,
.yka-wetter .table th {
    white-space: nowrap;
}

/* Die Uhr ist die Ausnahme: Ihre Hinweisspalte trägt ganze Sätze ("Drehung gegen 15 Uhr") und
   soll umbrechen dürfen. */
.yka-wetter .yka-uhr td,
.yka-wetter .yka-uhr th {
    white-space: normal;
}

/* ---- Telefon: Anordnung und Abstände ------------------------------------ */

/* Diese Regeln hängen wirklich an der Bildschirmbreite: Sie gelten für die Kachel der aktuellen
   Lage, die bis 576 px Windnadel und Werte untereinander stellt (siehe das Markup in
   Anzeige::jetzt). Was dagegen vom verfügbaren Platz abhängt und nicht vom Gerät - die
   Zentrierung von Rose und Tacho, der Quellenvermerk im Widget - steht weiter unten ohne Media
   Query. */
@media (max-width: 575.98px) {

    /* Die Kachel hat auf dem Telefon Windnadel und Symbol mittig, die vier Werte darunter aber
       linksbündig - zwei Achsen in einer Karte. Auf einem breiten Schirm stehen sie nebeneinander
       und das ist richtig so; hier stehen sie untereinander und sollen fluchten. */
    .yka-wetter .yka-wetter-kachel .col-6 {
        text-align: center;
    }

    /* Luft zwischen dem Nadelblock und den Werten. Ohne sie stossen Symbolbeschriftung und
       erste Zahl aufeinander - auf dem Bildschirm zwei Zeilen ohne Trennung. */
    .yka-wetter .yka-wetter-kachel .col-12.col-sm-auto {
        margin-bottom: 1rem;
    }

    /* Der Fliesstext unter den Werten ("Wind 4,7 Knoten · 9 km/h …") beginnt sonst unmittelbar
       unter der letzten Zahl. */
    .yka-wetter .yka-wetter-kachel .small.mb-1 {
        margin-top: .35rem;
    }
}

/* Die Umschalter der Uhr und der Drehanzeige stehen auf dem Telefon dicht über ihrer Grafik. */
@media (max-width: 575.98px) {
    .yka-wetter .btn-group,
    .yka-wetter [data-uhr-knopf],
    .yka-wetter [data-dreher-knopf] {
        margin-bottom: .35rem;
    }
}

/* ---- Uhr: die Datumsspalte bleibt stehen ------------------------------- */

/* Beim Scrollen nach rechts wanderte die Datumsspalte mit hinaus (gemessen: 88 px breit, stand
   bei -244 px). Uebrig blieben graue Felder, zu denen niemand mehr sagen konnte, welcher Tag
   sie sind - die Tafel war damit unlesbar, gerade weil sie richtig positioniert war.
   
   sticky haelt sie am linken Rand. Der Hintergrund muss dabei gesetzt sein, sonst scheinen die
   farbigen Stundenfelder durch, und z-index hebt sie ueber diese. */
.yka-wetter .yka-uhr td.yka-uhr-zeile,
.yka-wetter .yka-uhr thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}

/* Eine feine Kante macht sichtbar, dass die Spalte steht und der Rest darunter durchlaeuft. */
.yka-wetter .yka-uhr td.yka-uhr-zeile {
    box-shadow: 1px 0 0 rgba(0, 0, 0, .08);
}

/* Der Tabellenrahmen innerhalb der Bühne darf keinen eigenen Scrollkontext aufmachen.
 *
 * Bootstrap gibt .table-responsive ein overflow-x: auto. Ein sticky-Element klebt aber immer am
 * NÄCHSTEN scrollenden Vorfahren - das wäre dieser Rahmen, und der hat gar keinen Überhang, weil
 * die Bühne darüber die Breite vorgibt. Die Datumsspalte blieb deshalb einfach stehen wie zuvor
 * (gemessen: -244 px, also außerhalb) und die neue Regel schien wirkungslos.
 *
 * Mit overflow: visible ist die Bühne der einzige Scrollcontainer, und die Spalte klebt an ihr
 * (gemessen: 0 px, sichtbar). Die anderen Tabellen der Seite behalten ihren eigenen Rahmen. */
.yka-wetter .yka-uhr-buehne .table-responsive {
    overflow: visible;
}

/* ---- Grafiken zentrieren, wenn ihre Zeile umbricht ---------------------- */

/* Windrose und Tacho stehen jeweils in einer Flex-Zeile neben ihrem Text. Reicht die Breite
   nicht, bricht der Text darunter - und die Grafik blieb links stehen (gemessen bei 390 px:
   20 px links, 78 px rechts).
 *
 * justify-content: center richtet sie mittig aus. In einer Zeile, in der der Text den Rest
 * füllt, ändert das nichts: Es bleibt bei 20 px links wie bisher. Beim Schocker musste der
 * Textblock dafür erst flex-grow bekommen - ohne das rückte der Tacho auch auf dem breiten
 * Schirm in die Mitte (20 -> 104 px), und das war nicht gemeint.
 *
 * Keine Media Query: Beide Blöcke stehen in Spalten, die auch auf einem breiten Bildschirm
 * schmal sein können. Eine Regel an der Fensterbreite hätte genau den Fall verfehlt, der hier
 * gemeldet wurde. */
.yka-wetter .yka-dreher,
.yka-wetter .yka-schocker {
    justify-content: center;
}

/* Beim Schocker auch der Text: Er steht in einer schmalen Spalte (col-xl-3) und bricht damit
   praktisch immer unter den Tacho. Linksbuendig unter einer mittigen Grafik ergaebe wieder zwei
   Achsen - denselben Eindruck, der bei der Kachel schon stoerte. */
.yka-wetter .yka-schocker {
    text-align: center;
}

.yka-wetter .yka-schocker > div {
    flex: 1 1 180px;
    min-width: 0;
}

/* ---- Fußzeile der Achensee-Uhr ----------------------------------------- */

/* Erklärung links, Tagesspruch rechts - zwei Blöcke in einer Zeile, die auf schmalen Schirmen
   untereinander rutschen. Beide behalten ihre Zeilenlänge: Fließtext über die volle Breite einer
   1130 px breiten Karte ist mühsam zu lesen, das Auge findet den Zeilenanfang nicht wieder. */
.yka-wetter .yka-uhr-fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 2rem;
    margin-top: .9rem;
}

.yka-wetter .yka-uhr-geschichte {
    flex: 1 1 32ch;
    max-width: 62ch;
    line-height: 1.55;
    color: var(--yka-muted);
}

/* Der Tagesspruch hebt sich ab, ohne laut zu werden: kursiv, in der Vereinsfarbe, mit einer
   Kante links. So ist auf den ersten Blick klar, dass hier etwas anderes steht als nebenan -
   ein Kommentar zum heutigen Tag, keine Regel. */
.yka-wetter .yka-uhr-spruch {
    flex: 0 1 34ch;
    border-left: 3px solid var(--yka-gold);
    padding-left: .8rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--yka-blue);
}

.yka-wetter .yka-uhr-spruch-kopf {
    display: block;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .78rem;
    color: var(--yka-muted);
}

/* ================= Die Meldung des Kapitäns =================

   Die Kachel steht ganz oben und soll auf den ersten Blick anders aussehen als alles darunter:
   Sie zeigt keine Messtabelle, sondern erzählt, was heute mit dem Wind los ist. Deshalb kein
   Kachel-Titel im üblichen h4-Format, sondern eine kleine Marke über einem großen Satz. */

.yka-wetter .yka-kapitaen .card-body {
    padding: 1.25rem 1.4rem 1rem;
}

/* Die Marke nimmt die Akzentfarbe der Kachel auf - blau, wenn der Tag entschieden ist, gold,
   solange die Ablöse offen ist. So trägt schon das Wort über der Meldung ihre Stimmung. */
.yka-wetter .yka-kapitaen-marke {
    margin-bottom: .35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .78rem;
    color: var(--tile-accent, var(--yka-blue));
}

.yka-wetter .yka-kapitaen-kopf {
    margin-bottom: .35rem;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--yka-blue);
    text-wrap: balance;
}

.yka-wetter .yka-kapitaen-text {
    margin-bottom: .5rem;
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 62ch;
    color: #333;
}

/* Das Barometer ist ein Nachsatz, kein zweiter Hauptsatz: kleiner, mit einer goldenen Kante
   links, damit man es beim Überfliegen trotzdem findet. */
.yka-wetter .yka-kapitaen-barometer {
    margin-bottom: .5rem;
    padding-left: .8rem;
    border-left: 3px solid var(--yka-gold);
    font-size: .95rem;
    line-height: 1.5;
    max-width: 62ch;
    color: var(--yka-muted);
}

.yka-wetter .yka-kapitaen-signatur {
    margin-bottom: 0;
    text-align: right;
    font-style: italic;
    font-size: .9rem;
    color: var(--yka-muted);
}

/* Auf dem Telefon ist die Kachel das Erste, was ankommt - sie darf dort nicht so viel Höhe
   fressen, dass die aktuellen Werte darunter aus dem Bild rutschen. */
@media (max-width: 575.98px) {
    .yka-wetter .yka-kapitaen .card-body {
        padding: 1rem 1rem .85rem;
    }

    .yka-wetter .yka-kapitaen-kopf {
        font-size: 1.2rem;

        /* balance verteilt den Satz gleichmäßig auf beide Zeilen - auf 390 px bleibt die erste
           dadurch halb leer. Hier zählt der gefüllte Zeilenanfang mehr als die schöne Waage. */
        text-wrap: pretty;
    }

    .yka-wetter .yka-kapitaen-text {
        font-size: 1rem;
    }
}

/* Der Tagesspruch kommt vom selben Kapitän wie die Kachel oben. Die Unterschrift stellt den
   Bezug her - ohne sie liest sich der Satz wie eine Systemmeldung. */
.yka-wetter .yka-uhr-spruch-signatur {
    display: block;
    margin-top: .35rem;
    font-style: normal;
    text-align: right;
    color: var(--yka-muted);
}

/* Der Ausblick steht als einzige Tabelle OHNE scrollenden Rahmen im Kachelkörper. Mit dem
   allgemeinen nowrap für Tabellenzellen wurde er dadurch breiter als die Kachel und ragte auf
   dem Telefon 18 px über deren Rand hinaus — sichtbar an "NNW (341 Grad)" und "OSO (115 Grad)".
   Hier darf umgebrochen werden; die Zelle ist über ihr <br> ohnehin zweizeilig. */
.yka-wetter .yka-ausblick-tabelle td,
.yka-wetter .yka-ausblick-tabelle th {
    white-space: normal;
}