/* =========================================================
   Bauteile des Designentwurfs
   Sturm und Gewitterjagd Tirol

   Das ist die Übersetzung des abgenommenen Entwurfs
   (Artifact „Besucheransicht – Designentwurf“) in Projekt-CSS.
   Der Entwurf benutzt kurze, generische Klassennamen (.hero,
   .section, .card, .btn). Die kollidieren mit dem gewachsenen
   Bestand in frontend.css und kunde-*.css, deshalb tragen sie
   hier alle das Kürzel `sg-`.

   Farben, Abstände, Tippziele und Schriftskalierung kommen aus
   m3.css und m3-tokens.css — hier steht kein einziger Hex-Wert,
   damit Dunkelmodus, Kontrastmodus und der Design-Editor
   automatisch mitziehen.

   Reihenfolge wie im Entwurf:
     1. Grundbausteine   Abschnitt, Überschriften, Knöpfe, Karte
     2. Wetter-Beispiel  Kopf, Jetzt-Wert, Messwerte, Tage
     3. Gesperrtes       Vorschau auf Nichtgebuchtes
     4. Inhaltsblöcke    Vorteile, Aufnahmen, Pakete, Zitate,
                         Zahlen, Beiträge
   ========================================================= */

/* =========================================================
   1. GRUNDBAUSTEINE
   ========================================================= */

/* ---- Abschnitt ----
   Jeder Inhaltsblock der Seite ist ein Abschnitt mit gleichem
   Innenabstand und gleichem Abstand zwischen seinen Kindern.
   Vorher brachte jeder Block seine eigenen Werte mit. */
.sg-section {
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Jeder zweite Abschnitt bekommt einen leicht abgesetzten Grund.
   Das ist die einzige Trennung zwischen den Blöcken — keine Linien,
   keine Kästen. */
.sg-section--tint {
  background: var(--md-sys-color-surface-container-low);
}

.sg-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* ---- Überschriften ---- */
.sg-eyebrow {
  font-size: calc(11px * var(--font-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-sys-color-tertiary);
}

.sg-h-display {
  margin: 0;
  font-size: calc(30px * var(--font-scale));
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.sg-h-section {
  margin: 0;
  font-size: calc(21px * var(--font-scale));
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.sg-lead {
  margin: 0;
  font-size: calc(15px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
}

.sg-small {
  margin: 0;
  font-size: calc(12.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
}

/* ---- Knöpfe ----
   Am Handy stehen sie über die volle Breite untereinander
   (--block). Zwei nebeneinander sind auf 360 Pixel zu schmal
   für einen Daumen. */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  padding: 0 var(--sp-5);
  border-radius: 9999px;
  border: 0;
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
}
.sg-btn--fill {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.sg-btn--lime {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.sg-btn--out {
  background: none;
  color: var(--md-sys-color-on-surface);
  border: var(--hairline) solid var(--md-sys-color-outline);
}
.sg-btn--block { width: 100%; }

/* Im Hero steht der Umriss-Knopf auf dunklem Grund. */
.sg-hero .sg-btn--out {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

/* ---- Karte ---- */
.sg-card {
  background: var(--md-sys-color-surface-container-lowest);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---- Hero ----
   Dunkelblau mit einem grünen Schimmer rechts oben. Die Farbe
   kommt aus dem Token, damit der Design-Editor sie weiter
   bestimmt; nur der Verlauf ist fest. */
.sg-hero {
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--md-sys-color-tertiary) 30%, transparent), transparent 62%),
    linear-gradient(170deg, var(--md-sys-color-primary), color-mix(in srgb, var(--md-sys-color-primary) 78%, #000));
  color: #fff;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.sg-hero .sg-eyebrow {
  color: var(--md-sys-color-tertiary-container);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sg-hero .sg-lead { color: rgba(255, 255, 255, .82); }

.sg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--md-sys-color-tertiary-container);
  display: inline-block;
  flex: none;
}

/* Im Dunkelmodus ist primary ein helles Blau — als Hero-Grund
   wäre das eine Leuchtfläche. Deshalb dort ein eigener Verlauf. */
:root[data-theme="dark"] .sg-hero {
  background: linear-gradient(170deg,
    var(--md-sys-color-surface-container-high),
    var(--md-sys-color-surface-container-lowest));
  color: var(--md-sys-color-on-surface);
}
:root[data-theme="dark"] .sg-hero .sg-lead { color: var(--md-sys-color-on-surface-variant); }
:root[data-theme="dark"] .sg-hero .sg-eyebrow { color: var(--md-sys-color-tertiary); }
:root[data-theme="dark"] .sg-dot { background: var(--md-sys-color-tertiary); }
:root[data-theme="dark"] .sg-hero .sg-btn--out {
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .sg-hero {
    background: linear-gradient(170deg,
      var(--md-sys-color-surface-container-high),
      var(--md-sys-color-surface-container-lowest));
    color: var(--md-sys-color-on-surface);
  }
  :root[data-theme="auto"] .sg-hero .sg-lead { color: var(--md-sys-color-on-surface-variant); }
  :root[data-theme="auto"] .sg-hero .sg-eyebrow { color: var(--md-sys-color-tertiary); }
  :root[data-theme="auto"] .sg-dot { background: var(--md-sys-color-tertiary); }
  :root[data-theme="auto"] .sg-hero .sg-btn--out {
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline);
  }
}

/* =========================================================
   2. WETTER-BEISPIEL

   Der Gast sieht einen echten, aber zufälligen Datensatz aus
   dem Zwischenspeicher — keine freie Ortssuche. Die Plakette
   „Beispieldatensatz von …“ sagt das offen; ohne sie wirkte
   die Anzeige wie „dein Wetter“.
   ========================================================= */
.sg-wx {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.sg-wx__head {
  padding: var(--sp-4);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-wx__place {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sg-wx__name {
  font-size: calc(18px * var(--font-scale));
  font-weight: 750;
  letter-spacing: -.02em;
}

.sg-sample {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: var(--sp-1);
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.sg-sample .material-symbols-outlined { font-size: calc(15px * var(--font-scale)); }

.sg-wx__now {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
}
.sg-wx__temp {
  font-size: calc(52px * var(--font-scale));
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-primary);
}
:root[data-theme="dark"] .sg-wx__temp { color: var(--md-sys-color-on-surface); }
.sg-wx__cond { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---- Messwerte ----
   Drei Spalten, getrennt durch Haarlinien statt durch Kästen mit
   Rand und Abstand. Die Einheit steht klein hinter dem Wert, nicht
   in jeder Zeile ausgeschrieben. */
.sg-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hairline);
  background: var(--md-sys-color-outline-variant);
  border-block: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-metric {
  background: var(--md-sys-color-surface-container-lowest);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sg-metric__label {
  font-size: calc(10.5px * var(--font-scale));
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  overflow-wrap: anywhere;
}

/* Im großen Schriftmodus passt „HÖCHSTWERT“ in Versalien nicht mehr in
   ein Drittel von 390 Pixeln. Statt es abzuschneiden fällt das Raster
   auf zwei, dann auf eine Spalte. */
:root[data-fontscale="gross"] .sg-metrics { grid-template-columns: repeat(2, 1fr); }
:root[data-fontscale="xgross"] .sg-metrics {
  grid-template-columns: repeat(2, 1fr);
  letter-spacing: .04em;
}
@media (max-width: 360px) {
  :root[data-fontscale="xgross"] .sg-metrics { grid-template-columns: 1fr; }
}
.sg-metric__value {
  font-size: calc(19px * var(--font-scale));
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.sg-metric__value span {
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
}

/* ---- Warnzeile ----
   Farbe ist nie der einzige Träger: die Stufe steht als Zahl und
   als Wort im Text. */
.sg-warnrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--wx-warn-3-bg);
  border-left: 4px solid var(--wx-warn-3-fg);
}
.sg-warnrow__txt {
  flex: 1;
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 600;
}

/* ---- Tageszeilen ----
   Wochentag, Symbol, Temperaturbalken auf gemeinsamer Skala,
   Höchst- und Tiefstwert. Dieselbe Sprache wie im Kundenbereich.  */
.sg-days { display: flex; flex-direction: column; }
.sg-day {
  display: grid;
  grid-template-columns: 4.2em 34px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-day:last-child { border-bottom: 0; }
.sg-day__name { font-weight: 650; font-size: calc(14px * var(--font-scale)); }
.sg-day__icon { width: 30px; height: 30px; justify-self: center; }

/* Die Spur ist die gemeinsame Skala, die Füllung der Bereich dieses
   Tages darin. Vorher war der Balken ein durchgehender Verlauf — er
   sah nach Messwert aus, zeigte aber für jeden Tag dasselbe. */
.sg-day__bar {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
.sg-day__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg,
    var(--md-sys-color-primary),
    var(--wx-warn-2-fg),
    var(--wx-warn-3-fg));
}
.sg-day__t {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: calc(14.5px * var(--font-scale));
}
.sg-day__t i {
  font-style: normal;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600;
}

/* =========================================================
   3. GESPERRTES

   Nicht Gebuchtes wird gezeigt, nicht versteckt — als
   abgeblendete Andeutung mit Klartext, was fehlt und was es
   kostet. Wer nichts sieht, weiß auch nicht, was ihm entgeht.
   ========================================================= */
.sg-locked {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--md-sys-color-surface-container-low);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-locked__note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 650;
  font-size: calc(14px * var(--font-scale));
}

/* =========================================================
   4. INHALTSBLÖCKE
   ========================================================= */

/* ---- Vorteil: Symbolkachel, Titel, ein Satz ---- */
.sg-benefit { display: flex; gap: var(--sp-3); align-items: flex-start; }
.sg-benefit__ic {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.sg-benefit__t {
  font-weight: 700;
  font-size: calc(15.5px * var(--font-scale));
  letter-spacing: -.01em;
}
.sg-benefit__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---- Aufnahmen aus der App ----
   Solange die Screenshots fehlen, stehen hier gestrichelte
   Platzhalter. Sie sind als solche beschriftet — kein Blindtext,
   der später übersehen wird. */
.sg-shots {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  /* Als Flex-Kind hat der Streifen von Haus aus min-width:auto und
     wüchse damit auf Inhaltsbreite — die Seite scrollte seitlich,
     statt dass der Streifen für sich scrollt. */
  min-width: 0;
  max-width: 100%;
  padding-bottom: var(--sp-2);
  margin-inline: calc(-1 * var(--sp-4));
  padding-inline: var(--sp-4);
  scroll-snap-type: x mandatory;
}
.sg-shot {
  flex: none;
  width: 168px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: var(--sp-3);
  overflow: hidden;
}
.sg-shot--leer {
  border: 2px dashed var(--md-sys-color-outline);
  background: repeating-linear-gradient(135deg,
    transparent 0 10px,
    color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent) 10px 20px);
}
/* Mit Aufnahme: Das Bild steht im Fluss, die Beschriftung darunter.
   Bewusst nicht als Hintergrund mit Text darüber — die Bildschirmfotos
   sind selbst voller Text und Zahlen, eine Überschrift darauf wäre in
   beiden Themes irgendwo unlesbar. Die Bilder liegen im Format 4:5;
   `aspect-ratio` am Bild hält den Platz frei, bevor es geladen ist. */
.sg-shot--bild {
  aspect-ratio: auto;
  /* Der Streifen dehnt alle Karten auf die Höhe der höchsten. Ohne das
     hier drückte `justify-content: flex-end` das Bild nach unten, und
     die Bildkanten lägen je nach Länge der Beschriftung versetzt. */
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.sg-shot--bild > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.sg-shot__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
}
.sg-shot__t { font-weight: 700; font-size: calc(13.5px * var(--font-scale)); }
.sg-shot__n { font-size: calc(11px * var(--font-scale)); color: var(--md-sys-color-on-surface-variant); }

/* Platzhalter-Marke — überall gleich, damit Fehlendes auffällt. */
.sg-ph {
  display: inline-block;
  align-self: flex-start;
  font-size: calc(10.5px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px dashed var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
}

/* ---- Paket-Teaser ----
   Ganze Zeile, nicht Karte: Name links, Preis rechts, die
   Empfehlung mit kräftigem Rand. */
.sg-plan-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest);
  min-height: var(--target-min);
  color: inherit;
  text-decoration: none;
}
.sg-plan-row--rec { border: 2px solid var(--md-sys-color-tertiary); }
.sg-plan-row__n { flex: 1; font-weight: 700; font-size: calc(15px * var(--font-scale)); }
.sg-plan-row__p {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: calc(15px * var(--font-scale));
  white-space: nowrap;
}
.sg-plan-row__p i {
  font-style: normal;
  font-weight: 600;
  font-size: calc(12px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
}

.sg-tag {
  font-size: calc(10.5px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  white-space: nowrap;
}

/* ---- Bewertung ---- */
.sg-quote {
  border-left: 3px solid var(--md-sys-color-tertiary);
  padding-left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sg-quote__txt { font-size: calc(15px * var(--font-scale)); line-height: 1.45; }
.sg-quote__who {
  font-size: calc(12.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600;
}

/* ---- Zahlen ---- */
.sg-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.sg-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-fact__v {
  font-size: calc(22px * var(--font-scale));
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.sg-fact__l {
  font-size: calc(11.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.3;
}

/* ---- Beitrag (Blog und Community) ---- */
.sg-post {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  color: inherit;
  text-decoration: none;
}
.sg-post:last-of-type { border-bottom: 0; }
/* Fester Rahmen um das Bild.
   Der image()-Helfer schreibt style="width:100%" direkt ins <img> —
   das schlägt jede Klasse. Ohne diesen Rahmen wächst das Vorschaubild
   auf volle Breite und sprengt die Zeile. */
.sg-post__media {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-high);
}
.sg-post__media img,
.sg-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sg-post__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sg-post__d {
  font-size: calc(11.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.sg-post__t {
  font-weight: 700;
  font-size: calc(14.5px * var(--font-scale));
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* ---- Umbruchschutz ----
   Überall dort, wo redaktioneller Text landet, den niemand auf
   Zeilenlänge prüft: ein einziges langes Wort in einem Blogtitel
   (deutsche Zusammensetzungen, eine URL) macht sonst die ganze
   Seite seitlich scrollbar. */
.sg-h-display,
.sg-h-section,
.sg-post__t,
.sg-benefit__t,
.sg-plan-row__n,
.sg-wx__name,
.sg-quote__txt,
.sg-fact__l,
.sg-lead,
.sg-small {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ---- Hinweiszeile mit Symbol ---- */
.sg-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: calc(12.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
}

/* Mehrere Hinweise am Stück: ein ruhiger Block über dem Inhalt, statt
   drei loser Zeilen. Steht bewusst oben — unter fünfzig Kacheln liest
   sie am Handy niemand. */
.sg-hinweise {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-low);
}
/* Hier sind die Texte mehrzeilig: oben bündig, sonst stünde das Symbol
   in der Mitte des Absatzes. Nur in diesem Block — anderswo ist
   „sg-hint" einzeilig und mittig richtig. */
.sg-hinweise .sg-hint { align-items: flex-start; line-height: 1.45; }
.sg-hinweise .sg-hint > .material-symbols-outlined {
  flex: none;
  font-size: calc(18px * var(--font-scale));
  margin-top: 1px;
}
/* Der Text MUSS in diesem einen Kasten stehen. Roh im Flex-Behälter
   wurde jedes <b> zu einem eigenen Flex-Element und riss den Satz in
   Spalten auseinander — genau das war zu sehen. */
.sg-hint__t { flex: 1 1 auto; min-width: 0; }

/* =========================================================
   AB TABLET

   Der Entwurf zeigt am Rechner dieselben Bauteile, nur breiter
   angeordnet — kein zweites Layout und keine zweite Vorlage.
   ========================================================= */
@media (min-width: 768px) {
  .sg-section {
    padding: var(--sp-7) var(--sp-6);
    max-width: 68rem;
    margin-inline: auto;
    width: 100%;
  }
  .sg-section--tint {
    max-width: none;
    padding-inline: max(var(--sp-6), calc((100% - 68rem) / 2 + var(--sp-6)));
  }

  .sg-hero {
    padding: var(--sp-8) var(--sp-6);
    align-items: flex-start;
  }
  .sg-hero > * { max-width: 42rem; }
  .sg-hero .sg-btn--block { width: auto; min-width: 15rem; }

  .sg-h-display { font-size: calc(44px * var(--font-scale)); }
  .sg-h-section { font-size: calc(26px * var(--font-scale)); }

  /* Vorteile und Beiträge nebeneinander statt untereinander */
  .sg-benefits-grid,
  .sg-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .sg-post {
    border-bottom: 0;
    border: var(--hairline) solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    padding: var(--sp-3);
  }

  /* Wetter-Beispiel: Messwerte rechts neben den Jetzt-Wert */
  .sg-wx {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
  .sg-wx__head,
  .sg-wx__now { grid-column: 1; }
  .sg-metrics {
    grid-column: 2;
    grid-row: 1 / span 2;
    border: var(--hairline) solid var(--md-sys-color-outline-variant);
    height: 100%;
  }
  .sg-warnrow,
  .sg-days,
  .sg-locked { grid-column: 1 / -1; }

  .sg-shots { margin-inline: 0; padding-inline: 0; }
  .sg-shot { width: 200px; }
}

/* ---- Breites Inhaltsbild (Team, Amazon-Shop) ---- */
.sg-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}
.sg-bild--breit { aspect-ratio: 16 / 9; }

/* =========================================================
   5. PAKETVERGLEICH   (Entwurf 02)

   Am Handy nie seitlich scrollen: zwei Paketspalten nebeneinander,
   die rechte über Reiter wählbar. Vorher war es eine vierspaltige
   Tabelle, von der nur der rote Rahmen nach rechts lief.
   ========================================================= */
.sg-pk-all { display: flex; flex-direction: column; gap: var(--sp-2); }

.sg-pk-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.sg-pk-tab {
  min-height: var(--target-min);
  padding: var(--sp-2) var(--sp-1);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font-size: calc(13px * var(--font-scale));
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}
.sg-pk-tab[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
  font-weight: 750;
}

.sg-pk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
}
.sg-pk-h {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--sp-3) var(--sp-2);
  background: var(--md-sys-color-surface-container);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
}
.sg-pk-h--rec { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 55%, var(--md-sys-color-surface-container)); }
.sg-pk-l {
  padding: var(--sp-3);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  font-size: calc(13px * var(--font-scale));
  font-weight: 650;
  line-height: 1.25;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}
.sg-pk-c {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-left: var(--hairline) solid var(--md-sys-color-outline-variant);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sg-pk-c--rec { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 24%, transparent); font-weight: 700; }
.sg-pk-grid > :nth-last-child(-n+3) { border-bottom: 0; }
.sg-pk-cta { padding: var(--sp-3) var(--sp-2); }

.sg-cmp__name { font-weight: 750; font-size: calc(14px * var(--font-scale)); letter-spacing: -.01em; display: block; }
.sg-cmp__price { font-variant-numeric: tabular-nums; font-weight: 800; font-size: calc(17px * var(--font-scale)); letter-spacing: -.02em; display: block; }
.sg-cmp__per { font-size: calc(11px * var(--font-scale)); color: var(--md-sys-color-on-surface-variant); display: block; }
.sg-yes { color: var(--md-sys-color-tertiary); font-weight: 800; font-size: calc(17px * var(--font-scale)); }
.sg-no { color: var(--md-sys-color-outline); }

/* ---- Umschalter (Monat/Jahr) ---- */
.sg-switcher {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 9999px;
}
.sg-switcher__lbl { flex: 1; font-weight: 650; font-size: calc(14px * var(--font-scale)); }
.sg-sw {
  width: 52px; height: 30px; border-radius: 99px; flex: none; border: 0;
  background: var(--md-sys-color-outline-variant);
  position: relative; cursor: pointer;
}
.sg-sw::after {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--md-sys-color-surface-container-lowest);
  transition: transform .18s;
}
.sg-sw[aria-pressed="true"] { background: var(--md-sys-color-tertiary); }
.sg-sw[aria-pressed="true"]::after { transform: translateX(22px); }

/* ---- Aufklappbar ---- */
.sg-acc {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  overflow: hidden;
}
.sg-acc > summary {
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--target-min);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: calc(14.5px * var(--font-scale));
  cursor: pointer;
  background: var(--md-sys-color-surface-container-low);
  list-style: none;
}
.sg-acc > summary::-webkit-details-marker { display: none; }
.sg-acc > summary::after { content: "＋"; margin-left: auto; font-weight: 700; }
.sg-acc[open] > summary::after { content: "－"; }
.sg-acc__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }

.sg-addon-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-addon-row:last-child { border-bottom: 0; }
.sg-addon-row__n { flex: 1; font-weight: 650; font-size: calc(14px * var(--font-scale)); overflow-wrap: anywhere; }
.sg-addon-row__p { font-variant-numeric: tabular-nums; font-weight: 700; font-size: calc(14px * var(--font-scale)); white-space: nowrap; }

/* =========================================================
   6. KUNDEN-ÜBERSICHT   (Entwurf 05)
   ========================================================= */

/* ---- Ortswechsler in der Kopfzeile ---- */
.sg-ortmenu { position: relative; flex: 1; min-width: 0; }
.sg-ortmenu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: calc(17px * var(--font-scale));
  font-weight: 700;
  letter-spacing: -.015em;
  min-height: var(--target-min);
}
.sg-ortmenu > summary::-webkit-details-marker { display: none; }
.sg-ortmenu > summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.sg-ortmenu[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.sg-ortpop {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: -8px; min-width: 250px;
  background: var(--md-sys-color-surface-container-lowest);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  box-shadow: var(--md-sys-elevation-level3, 0 8px 24px rgba(0,0,0,.28));
  overflow: hidden;
}
.sg-ortpop__i {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--target-min); padding: var(--sp-2) var(--sp-3);
  background: none; border: 0; text-align: left;
  color: var(--md-sys-color-on-surface);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  font-size: calc(14.5px * var(--font-scale)); font-weight: 650;
  text-decoration: none;
}
.sg-ortpop__i:last-child { border-bottom: 0; }
.sg-ortpop__i[aria-current="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.sg-ortpop__t { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--md-sys-color-on-surface-variant); }
.sg-ortpop__i--add { color: var(--md-sys-color-tertiary); font-weight: 750; }

/* ---- Jetzt-Block ---- */
.sg-now { display: flex; align-items: center; gap: var(--sp-4); }
.sg-now__t {
  font-size: calc(56px * var(--font-scale));
  font-weight: 800; letter-spacing: -.05em; line-height: .92;
  font-variant-numeric: tabular-nums;
}
.sg-now__c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---- Kachelraster ---- */
.sg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.sg-tile {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-width: 0;
}
.sg-tile__l { font-size: calc(11px * var(--font-scale)); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--md-sys-color-on-surface-variant); overflow-wrap: anywhere; }
.sg-tile__v { font-size: calc(22px * var(--font-scale)); font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sg-tile__v span { font-size: calc(12px * var(--font-scale)); font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.sg-tile__n { font-size: calc(12px * var(--font-scale)); color: var(--md-sys-color-on-surface-variant); }
.sg-tile--wide { grid-column: 1 / -1; }

/* ---- Tage als Akkordeon ----
   Immer nur ein Tag offen. Ersetzt Slider und Stundentabelle. */
.sg-days-acc { display: flex; flex-direction: column; gap: var(--sp-2); }
.sg-dacc {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
}
.sg-dacc[open] { border-color: var(--md-sys-color-primary); box-shadow: 0 6px 18px -10px rgba(0,0,0,.4); }
/* Die erste Spalte trägt den längsten Text der Zeile: „Donnerstag“ ist
   fett gesetzt rund 95 Pixel breit, und darunter steht „20. August“.
   Mit 1fr blieben davon am Handy knapp 87 Pixel — der Name lief aus
   seiner Spalte und verschwand unter dem Wettersymbol, das als
   nächste Spalte darüber gezeichnet wird. Das Datum wurde zu
   „20. Aug…“ gekürzt. Auf Android fiel es zuerst auf, weil die
   Systemschrift dort oft größer steht.

   Der Name bekommt deshalb den größeren Anteil, der Balken den
   kleineren — er ist ein Vergleichsbild und braucht keine bestimmte
   Breite, der Name schon. */
.sg-dacc__sum {
  display: grid;
  /* Spalte 1 `auto`: Der Name nimmt, was er braucht — vorher bekam er
     einen festen Bruchteil und lief bei „Donnerstag“ darüber hinaus.
     Die Temperaturspalten waren in `em` bemessen, wachsen aber mit
     `--font-scale`; deshalb hier in Pixeln mal derselben Skala, sonst
     rutscht im Winter „-10°“ heraus (37px statt der gemessenen 34px
     Mindestbreite, damit Geräteschriften Luft haben). Der Balken nimmt
     den Rest: Er ist ein Vergleichsbild und braucht keine feste
     Breite — der Text schon. */
  grid-template-columns:
    auto 28px calc(37px * var(--font-scale))
    minmax(28px, 1fr) calc(37px * var(--font-scale)) 12px;
  align-items: center; gap: 6px;
  padding: var(--sp-3); min-height: var(--target-min);
  cursor: pointer; list-style: none;
}
.sg-dacc__sum::-webkit-details-marker { display: none; }
.sg-dacc[open] .sg-dacc__sum {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.sg-dacc__day { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* Reißleine für sehr große Systemschrift: Lieber „Donnersta…“ als ein
   Name, der unter dem Symbol verschwindet. Mit der Spaltenbreite oben
   greift das im Normalfall nicht. */
.sg-dacc__day b {
  font-size: calc(15px * var(--font-scale));
  font-weight: 750;
  letter-spacing: -.01em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-dacc__day i {
  font-style: normal; font-size: calc(11.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-dacc[open] .sg-dacc__day i { color: inherit; opacity: .8; }
.sg-dacc__min, .sg-dacc__max {
  font-size: calc(14px * var(--font-scale)); font-weight: 750;
  font-variant-numeric: tabular-nums; text-align: right;
}
.sg-dacc__min { color: var(--md-sys-color-on-surface-variant); }
.sg-dacc[open] .sg-dacc__min { color: inherit; opacity: .8; }
.sg-dacc__track {
  position: relative; height: 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 13%, transparent);
}
.sg-dacc__fill {
  position: absolute; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--md-sys-color-primary), var(--wx-warn-2-fg) 55%, var(--wx-warn-3-fg));
}
.sg-dacc__chev {
  width: 9px; height: 9px; justify-self: center;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .55;
  transition: transform .2s ease;
}
.sg-dacc[open] .sg-dacc__chev { transform: rotate(-135deg) translate(-3px, -3px); opacity: 1; }
.sg-dacc__body {
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
}

/* Eckwerte des Tages als Plaketten */
.sg-dsum { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sg-dsum__i {
  font-size: calc(12px * var(--font-scale)); font-weight: 650;
  padding: 5px 10px; border-radius: 9999px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.sg-dsum__warn {
  font-size: calc(12px * var(--font-scale)); font-weight: 750;
  padding: 5px 10px; border-radius: 9999px;
  background: var(--wx-warn-3-bg);
  color: var(--md-sys-color-on-surface);
  box-shadow: inset 0 0 0 1.5px var(--wx-warn-3-fg);
}
.sg-dsum__warn--2 { background: var(--wx-warn-2-bg); box-shadow: inset 0 0 0 1.5px var(--wx-warn-2-fg); }
.sg-dsum__step {
  font-size: calc(10.5px * var(--font-scale)); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 750;
  color: var(--md-sys-color-on-surface-variant);
}

/* ---- Stundenzeilen — dieselbe Sprache wie die Tageszeilen ---- */
.sg-hrs-list {
  display: flex; flex-direction: column;
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px; overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
}
/* Nur Rahmen und Farbe der Zeile — das Innenleben (Kopfzeile plus
   Detailraster) steht weiter unten bei „Stundenzeile mit allen Werten".
   Hier stand früher ein zweites, längst überschriebenes Raster; sein
   `align-items: center` hat die Zeileninhalte auf ihre Inhaltsbreite
   zusammengezogen und rechts eine tote Fläche gelassen. */
.sg-hr {
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-hr:last-child { border-bottom: 0; }
.sg-hr[hidden] { display: none; }
.sg-hr--now {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: inset 3px 0 0 var(--md-sys-color-primary);
}
.sg-hr__z { font-size: calc(13px * var(--font-scale)); font-weight: 650; font-variant-numeric: tabular-nums; }
.sg-hr__i { width: 24px; height: 24px; }
.sg-hr__t { font-size: calc(16px * var(--font-scale)); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; }
.sg-hr__r { font-size: calc(12.5px * var(--font-scale)); font-weight: 650; color: var(--md-sys-color-primary); font-variant-numeric: tabular-nums; text-align: right; }
.sg-hr__r--dry { color: var(--md-sys-color-outline); font-weight: 500; }
.sg-hr__w {
  font-size: calc(12.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.sg-hr--now .sg-hr__w, .sg-hr--now .sg-hr__r { color: inherit; }

.sg-mehr {
  align-self: flex-start; min-height: var(--target-min); padding: 0 var(--sp-3);
  background: none; border: 0; color: var(--md-sys-color-primary);
  font-size: calc(13.5px * var(--font-scale)); font-weight: 700;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer;
}
.sg-mehr::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.sg-mehr[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }

/* ---- Zusatzmodul-Tafel im Tag ---- */
.sg-mod {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px; overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
}
.sg-mod > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); min-height: var(--target-min); cursor: pointer; list-style: none;
  font-size: calc(14px * var(--font-scale)); font-weight: 750;
  background: var(--md-sys-color-surface-container-low);
}
.sg-mod > summary::-webkit-details-marker { display: none; }
.sg-mod > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; opacity: .6;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.sg-mod[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); opacity: 1; }
.sg-mod__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--md-sys-color-tertiary); }
/* ---- Zusatzmodule: am Handy Kacheln, ab Tablet eine Tabelle ----

   Die Tafeln der Zusatzmodule (Solar, Luftqualität, Schnee, Agrar …)
   waren am Handy eine waagrecht scrollende Tabelle. Beim Scrollen lief
   die Kopfzeile mit den Bezeichnungen aus dem Blick, übrig blieben
   nackte Zahlenspalten — dieselbe Schwäche wie bei den Stundenzeilen,
   nur schlimmer, weil hier je nach Modul bis zu fünf Messgrößen
   nebeneinanderstehen.

   Deshalb dieselbe Lösung wie dort: je Zeitpunkt eine Zeitangabe und
   darunter Kacheln, jede mit ihrer Beschriftung über dem Wert.

   Flexbox statt Raster — und das ist der Punkt, an dem es vorher unschön
   war: Ein Raster mit fester Spaltenzahl lässt in der letzten Reihe
   Lücken stehen. Bei sieben Werten und drei Spalten stand die letzte
   Kachel allein und schmal neben zwei Löchern. Im Flexlayout dehnen
   sich die Kacheln der angebrochenen Reihe auf die volle Breite; es
   bleibt nie ein Rest übrig, egal ob ein Modul drei Werte hat oder
   sieben. */
.sg-mrow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
}
/* Die Zeit ist die Überschrift des Blocks, kein Wert unter vielen. */
.sg-mrow__z {
  flex: 1 0 100%;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sg-mrow__v {
  /* Grundbreite 92 px: Darunter passen die Beschriftungen nicht mehr in
     zwei Zeilen. Wachsen dürfen die Kacheln beliebig — davon lebt die
     lückenlose letzte Reihe. */
  flex: 1 1 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 5px 6px;
  border-radius: 10px;
  /* Wie bei den Stundenkacheln aus der Textfarbe gemischt, damit die
     Kachel in Hell, Dunkel und auf dem Grund der Jetzt-Zeile trägt. */
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 var(--hairline) color-mix(in srgb, currentColor 12%, transparent);
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.sg-mrow__l {
  font-style: normal;
  font-size: calc(10.5px * var(--font-scale));
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  /* Umbruch an Wortgrenzen und an weichen Trennstellen, NICHT mitten im
     Wort: „SCHNEEFALLGRE / NZE" sieht aus wie ein Fehler. Wo ein Wort
     allein zu lang ist, steht ein weiches Trennzeichen im Text
     (KURZ in tagesdetail.js), dann bricht es als „SCHNEEFALL-GRENZE". */
  overflow-wrap: break-word;
  hyphens: auto;
}
.sg-mrow--now .sg-mrow__l { color: inherit; opacity: .8; }
/* Umbruch erlaubt: In den Modultafeln stehen auch Wörter als Wert
   („überw. Schnee") und Zahlen mit Vorsatz („ca. 1.200 m"). Die passen
   nicht in eine Kachelzeile und sollen umbrechen statt überzulaufen. */
.sg-mrow__w { line-height: 1.25; text-align: center; }
/* Am Handy steht die Einheit auf der Kachel, in der Tabelle einmal
   oben in der Kopfzeile. */
.sg-mrow__u {
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  font-weight: 600;
  opacity: .75;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 2px;
}
.sg-mrow--head { display: none; }
/* `hidden` allein reicht nicht: `display: grid` aus der Regel oben
   schlägt die Voreinstellung des Browsers. Ohne das hier stünden die
   Zeitpunkte hinter „Alle Zeiten zeigen" von Anfang an sichtbar da. */
.sg-mrow[hidden] { display: none; }
.sg-mod__scroll { min-width: 0; max-width: 100%; }

/* Der Block, in dem wir gerade sind. */
.sg-mrow--now {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: inset 3px 0 0 var(--md-sys-color-primary);
}

@media (min-width: 760px) {
  /* Ab hier die Tabelle: eine Zeile je Zeitpunkt, Bezeichnungen einmal
     oben. Die Spaltenfolge kommt aus --mod-spalten, das baueModul()
     setzt — je Modul verschieden viele Messgrößen. */
  .sg-mrow {
    /* Am Handy ist die Zeile ein Flexlayout aus Kacheln, hier wieder ein
       Raster mit fester Spaltenfolge. */
    display: grid;
    grid-template-columns: var(--mod-spalten, 5.4em repeat(3, minmax(0, 1fr)));
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    min-height: 44px;
  }
  .sg-mrow__z { flex: none; font-size: calc(12.5px * var(--font-scale)); font-weight: 650; }
  /* Die Kachel wird wieder zur Tabellenzelle. */
  .sg-mrow__v {
    flex: none;
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: calc(14.5px * var(--font-scale));
  }
  .sg-mrow__l { display: none; }
  .sg-mrow__w { text-align: right; }
  .sg-mrow__v .sg-mrow__u { display: none; }

  .sg-mrow--head {
    display: grid;
    border-top: 0;
    background: var(--md-sys-color-surface-container);
    font-size: calc(10.5px * var(--font-scale));
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 750;
    color: var(--md-sys-color-on-surface-variant);
    align-items: end;
  }
  /* Spaltenköpfe dürfen umbrechen statt sich zu überlagern. */
  .sg-mrow--head > span {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.15;
  }
  /* Zahlen rechtsbündig — nur so lassen sich Spalten vergleichen. */
  .sg-mrow--head span:not(:first-child),
  .sg-mrow > span:not(:first-child) { text-align: right; }

  /* Module mit vier oder fünf Messgrößen passen auch hier nicht immer
     nebeneinander. Dann scrollt die Tafel für sich — nicht die ganze
     Seite. Die Zeitspalte bleibt beim Scrollen stehen, sonst weiß man
     nicht mehr, welcher Block gemeint ist. */
  .sg-mod__scroll { overflow-x: auto; }
  .sg-mod__scroll .sg-mrow { min-width: max-content; }
  .sg-mod__scroll .sg-mrow > * { min-width: 4.4em; }
  .sg-mod__scroll .sg-mrow__z {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
  }
  .sg-mod__scroll .sg-mrow--head .sg-mrow__z,
  .sg-mod__scroll .sg-mrow:not(.sg-mrow--head) { background: var(--md-sys-color-surface-container-lowest); }
  .sg-mod__scroll .sg-mrow--head { background: var(--md-sys-color-surface-container); }
  .sg-mod__scroll .sg-mrow--now { background: var(--md-sys-color-secondary-container); }
}

/* Spitzenwerte treten hervor. Farbe ist dabei nicht der einzige Träger:
   der Satz unter der Tafel nennt den Höchstwert im Klartext. */
.sg-mhi { color: var(--wx-warn-3-fg); }
.sg-mmax { color: var(--wx-warn-4-fg); }

.sg-mod__note {
  margin: 0;
  padding: var(--sp-3);
  font-size: calc(12px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
}

/* ---- Sonnen- und Mondbogen ---- */
.sg-arc {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 150% at 50% 120%, color-mix(in srgb, var(--md-sys-color-tertiary) 12%, transparent), transparent 62%),
    var(--md-sys-color-surface-container-lowest);
}
.sg-arc__svg { display: block; width: 100%; height: auto; }
.sg-arc__feet { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-3); }
.sg-arc__foot { display: flex; flex-direction: column; gap: 1px; }
.sg-arc__foot--r { text-align: right; }
.sg-arc__l { font-size: calc(10.5px * var(--font-scale)); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--md-sys-color-on-surface-variant); }
.sg-arc__v { font-size: calc(17px * var(--font-scale)); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sg-arc__mond {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}
.sg-arc__mondtxt { flex: 1; min-width: 0; }
.sg-arc__mondname { font-size: calc(14px * var(--font-scale)); font-weight: 700; }

/* =========================================================
   7. WARNUNGEN   (Entwurf 08)

   Farbe ist nie der einzige Träger: jede Karte nennt die Stufe
   als Zahl UND als Wort.
   ========================================================= */
.sg-wcard {
  border-radius: 16px; overflow: hidden;
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-left: 6px solid var(--sg-wl);
  background: var(--md-sys-color-surface-container-lowest);
}
.sg-wcard--1 { --sg-wl: var(--wx-warn-1-fg); --sg-won: var(--wx-warn-1-on); }
.sg-wcard--2 { --sg-wl: var(--wx-warn-2-fg); --sg-won: var(--wx-warn-2-on); }
.sg-wcard--3 { --sg-wl: var(--wx-warn-3-fg); --sg-won: var(--wx-warn-3-on); }
.sg-wcard--4 { --sg-wl: var(--wx-warn-4-fg); --sg-won: var(--wx-warn-4-on); }
.sg-wcard--5 { --sg-wl: var(--wx-warn-5-fg); --sg-won: var(--wx-warn-5-on); }
.sg-wcard__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: color-mix(in srgb, var(--sg-wl) 14%, var(--md-sys-color-surface-container-lowest));
}
.sg-wcard__ic {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sg-wl); color: var(--sg-won);
}
.sg-wcard__ti { flex: 1; min-width: 0; }
.sg-wcard__t { font-size: calc(15.5px * var(--font-scale)); font-weight: 750; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.sg-wcard__lvl {
  display: inline-block; margin-top: 3px;
  font-size: calc(11px * var(--font-scale)); font-weight: 800; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 9999px;
  background: var(--sg-wl); color: var(--sg-won);
}
.sg-wcard__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.sg-wcard__zeit {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: calc(13.5px * var(--font-scale)); font-weight: 700; font-variant-numeric: tabular-nums;
}
.sg-wcard__rest {
  font-size: calc(11px * var(--font-scale)); font-weight: 800; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 9999px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.sg-wleer {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4); text-align: center;
  border: var(--hairline) dashed var(--md-sys-color-outline-variant);
  border-radius: 16px;
  color: var(--md-sys-color-on-surface-variant);
}
.sg-wleer__ic { width: 44px; height: 44px; font-size: calc(44px * var(--font-scale)); color: var(--md-sys-color-tertiary); }

.sg-gebiet {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); min-height: var(--target-min);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-gebiet:last-child { border-bottom: 0; }
.sg-gebiet__n { flex: 1; font-size: calc(14.5px * var(--font-scale)); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.sg-gebiet__s { font-size: calc(12px * var(--font-scale)); color: var(--md-sys-color-on-surface-variant); }

.sg-kanal {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-kanal:last-of-type { border-bottom: 0; }
.sg-kanal__n { flex: 1; font-size: calc(14.5px * var(--font-scale)); font-weight: 650; }

.sg-stufe { display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; }
.sg-stufe__b {
  height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: calc(12px * var(--font-scale)); font-weight: 800;
}
.sg-stufe__t { font-size: calc(13px * var(--font-scale)); }
.sg-stufe__t b { font-weight: 750; }

/* =========================================================
   8. KARTENAUSWAHL   (Entwurf 06)

   Bildraster statt Textliste. Nicht gebuchte Karten bleiben
   sichtbar — ausgegraut, mit Modulname und Preis.
   ========================================================= */
.sg-mapgroup {
  font-size: calc(11px * var(--font-scale)); letter-spacing: .12em;
  text-transform: uppercase; font-weight: 750;
  color: var(--md-sys-color-on-surface-variant);
}
.sg-maptiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.sg-maptile {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.sg-maptile[aria-pressed="true"] { border: 2px solid var(--md-sys-color-primary); }
.sg-maptile__img {
  aspect-ratio: 4 / 3;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--md-sys-color-surface-container);
  overflow: hidden;
}
.sg-maptile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-maptile__cap { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
/* Deutsche Zusammensetzungen wie „Niederschlagswahrscheinlichkeit“ passen
   nie in eine halbe Handybreite. `break-word` trennt erst, wenn es sein
   muss, und `hyphens` setzt dabei einen Bindestrich — `anywhere` hätte
   mitten im Wort ohne Trennzeichen umgebrochen. */
.sg-maptile__t {
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sg-maptile__n { font-size: calc(11.5px * var(--font-scale)); color: var(--md-sys-color-on-surface-variant); }
/* Ein Satz, was die Karte zeigt. Zwei Zeilen sind das Maximum — sonst
   wachsen die Kacheln unterschiedlich hoch und das Raster franst aus. */
.sg-maptile__b {
  font-size: calc(11.5px * var(--font-scale));
  line-height: 1.35;
  color: var(--md-sys-color-on-surface-variant);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Nicht gebucht: sichtbar, aber gedämpft. Das Schloss sitzt oben
   rechts — unten hätte es das mittige Kartensymbol überdeckt.

   Bewusst KEINE Graustufe mehr: Bei Wetterkarten ist die Farbe die
   Aussage. Grau sah eine Niederschlagskarte aus wie eine Bodenkarte,
   und gerade die gesperrten Kacheln sollen ja Lust auf mehr machen —
   niemand bucht ein graues Feld dazu. Stattdessen leicht entsättigt und
   aufgehellt: erkennbar zurückgenommen, aber die Karte bleibt lesbar.
   Dass sie gesperrt ist, sagt ohnehin das Schloss samt Beschriftung —
   Farbe allein trägt die Aussage nicht. */
.sg-maptile--zu .sg-maptile__img > img,
.sg-maptile--zu .sg-maptile__img > .sg-maptile__leer,
.sg-maptile--zu .sg-maptile__img > .material-symbols-outlined {
  filter: saturate(.7) contrast(.92) brightness(1.06);
  opacity: .72;
}

/* ---------------------------------------------------------
   Platzhalter für Karten ohne Vorschaubild

   Ein Vorschaubild ist ein Ausschnitt der echten Karte — im
   August gibt es davon keinen für die Schneekarten. Vorher
   stand dort dasselbe graue `map`-Symbol wie bei einem Fehler,
   die Kachel wirkte defekt. Jetzt: getönte Fläche, das Symbol
   der Karte und ein Wort dazu, warum nichts zu sehen ist.

   Gezeichnet aus Farbverläufen statt aus einer Bilddatei — die
   Auswahl zeigt über 50 Kacheln, jede weitere Anfrage fällt am
   Handy auf. Alle Farben kommen aus den M3-Tokens, damit der
   Platzhalter Hell und Dunkel mitmacht.
   --------------------------------------------------------- */
.sg-maptile__leer {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent) 0 6px,
      transparent 6px 14px
    ),
    linear-gradient(
      160deg,
      var(--md-sys-color-surface-container-high),
      var(--md-sys-color-surface-container)
    );
  color: var(--md-sys-color-on-surface-variant);
}
.sg-maptile__leer .material-symbols-outlined {
  font-size: calc(30px * var(--font-scale));
  line-height: 1;
  color: var(--md-sys-color-primary);
  opacity: .85;
}
.sg-maptile__leer-text {
  font-size: calc(10.5px * var(--font-scale));
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.sg-maptile--zu .sg-maptile__t { color: var(--md-sys-color-on-surface-variant); }
.sg-maptile__lock {
  position: absolute;
  inset: var(--sp-2) var(--sp-2) auto auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 9999px;
  background: rgba(16, 22, 29, .88);
  color: #fff;
  font-size: calc(11px * var(--font-scale));
  font-weight: 750;
  /* Nicht mitdämpfen, sonst wäre auch das Schloss blass. */
  filter: none;
  opacity: 1;
}
.sg-maptile__lock .material-symbols-outlined { font-size: calc(14px * var(--font-scale)); }

/* =========================================================
   9. KARTE UND ZEITRAFFER   (Entwurf 07)

   Der Zeitraffer ist eine eigene dunkle Leiste unter der Karte.
   Wird sie eingeklappt, verschwinden Legende und Ansichtswahl
   mit — die Karte wächst.
   ========================================================= */
.sg-karte {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  transition: height .28s ease;
}
.sg-karte--frei { height: 470px; }
.sg-karte__legende { transition: opacity .2s ease, transform .2s ease; }
.sg-karte--frei .sg-karte__legende { opacity: 0; transform: translateY(6px); pointer-events: none; }
.sg-karte--frei .sg-karte__tr { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sg-karte--frei .sg-ebbtn { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

.sg-karte__tl { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; flex-direction: column; gap: 1px; z-index: 4; }
.sg-kbtn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface); border: 0;
  font-size: calc(20px * var(--font-scale)); font-weight: 600; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sg-kbtn:first-child { border-radius: 8px 8px 0 0; }
.sg-kbtn:last-child { border-radius: 0 0 8px 8px; }

.sg-karte__tr { position: absolute; top: var(--sp-3); right: var(--sp-3); display: flex; gap: var(--sp-2); z-index: 4; }
.sg-kseg { display: flex; background: rgba(16,22,29,.86); border-radius: 8px; padding: 3px; }
.sg-kseg__b {
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: none;
  color: rgba(255,255,255,.72); font-size: calc(12.5px * var(--font-scale)); font-weight: 700;
  cursor: pointer;
}
.sg-kseg__b[aria-pressed="true"] { background: var(--md-sys-color-tertiary); color: #fff; }

.sg-karte__legende {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3); z-index: 4;
  background: rgba(16,22,29,.86); border-radius: 8px; overflow: hidden; min-width: 92px;
}
.sg-klg__t { display: block; padding: 5px 8px; font-size: calc(10.5px * var(--font-scale)); font-weight: 800; letter-spacing: .05em; color: #fff; text-align: center; text-transform: uppercase; }
.sg-klg__s { display: block; padding: 3px 8px; font-size: calc(10.5px * var(--font-scale)); font-weight: 700; text-align: center; }

/* ---- Ebenen-Schaltfläche und Blatt von unten ---- */
.sg-ebbtn {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3); z-index: 4;
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-3); border-radius: 9999px; border: 0;
  background: rgba(16,22,29,.9); color: #fff;
  font-size: calc(13px * var(--font-scale)); font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.sg-ebbtn__z {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  font-size: calc(11.5px * var(--font-scale)); font-weight: 800;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

.sg-blatt {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sg-blatt[hidden] { display: none; }
.sg-blatt__schirm { position: absolute; inset: 0; background: rgba(0,0,0,.45); border: 0; }
.sg-blatt__inhalt {
  position: relative;
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: 28px 28px 0 0;
  max-height: 82%; overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: 0 -8px 28px rgba(0,0,0,.35);
}
.sg-blatt__griff { align-self: center; width: 42px; height: 4px; border-radius: 99px; background: var(--md-sys-color-outline-variant); }
.sg-blatt__t { font-size: calc(18px * var(--font-scale)); font-weight: 800; letter-spacing: -.02em; }

/* ---- Ebenen-Zeile ---- */
.sg-eb {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--target-min); padding: var(--sp-2) var(--sp-3);
  border-radius: 12px;
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  text-align: left; cursor: pointer;
}
.sg-eb[aria-pressed="true"] {
  border: 2px solid var(--md-sys-color-primary);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.sg-eb__f { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.sg-eb__n { flex: 1; font-size: calc(14px * var(--font-scale)); font-weight: 650; min-width: 0; }
.sg-eb__n i {
  display: block; font-style: normal; font-weight: 500;
  font-size: calc(11.5px * var(--font-scale)); color: var(--md-sys-color-on-surface-variant);
}
.sg-eb[aria-pressed="true"] .sg-eb__n i { color: inherit; opacity: .8; }
.sg-eb__s {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  border: 2px solid var(--md-sys-color-outline);
  display: grid; place-items: center; font-size: calc(14px * var(--font-scale)); font-weight: 800; color: transparent;
}
.sg-eb[aria-pressed="true"] .sg-eb__s {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.sg-eb__lock { font-size: calc(11px * var(--font-scale)); font-weight: 700; color: var(--md-sys-color-on-surface-variant); }

/* ---- Zeitraffer-Leiste ---- */
.sg-player {
  background: #101820; color: #fff;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.sg-player--zu > *:not(.sg-player__griff):not(.sg-player__kopf) { display: none; }
.sg-player__griff {
  align-self: center; width: 72px; height: 24px; background: none; border: 0;
  display: grid; place-items: center; padding: 0; cursor: pointer;
}
.sg-player__griff::after { content: ""; width: 42px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.4); }
.sg-player__griff:hover::after { background: rgba(255,255,255,.7); }
.sg-player__kopf { display: flex; align-items: baseline; gap: var(--sp-2); }
.sg-player__zeit { font-size: calc(21px * var(--font-scale)); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sg-player__tag { font-size: calc(13px * var(--font-scale)); color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.sg-player__jetzt {
  margin-left: auto; font-size: calc(10.5px * var(--font-scale)); font-weight: 800; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 99px;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
}
.sg-player__reihe { display: flex; align-items: center; gap: var(--sp-3); }
.sg-player__l { font-size: calc(10.5px * var(--font-scale)); letter-spacing: .1em; text-transform: uppercase; font-weight: 750; color: rgba(255,255,255,.55); }

/* Zeitstrahl mit beschrifteter Skala — vorher klebte
   „−2hjetzt+12h“ ohne Trennung aneinander. */
.sg-spur { position: relative; height: 40px; display: flex; align-items: center; }
.sg-spur__bahn { position: absolute; left: 0; right: 0; height: 6px; border-radius: 99px; background: rgba(255,255,255,.2); }
.sg-spur__ist { position: absolute; left: 0; height: 6px; border-radius: 99px; background: var(--md-sys-color-tertiary-container); }
.sg-spur__marke { position: absolute; width: 2px; height: 22px; background: rgba(255,255,255,.5); transform: translateX(-50%); }
.sg-spur__knopf {
  position: absolute; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--md-sys-color-tertiary-container);
  border: 3px solid #101820; box-shadow: 0 2px 6px rgba(0,0,0,.5);
  cursor: pointer;
}
.sg-spur__skala {
  display: flex; justify-content: space-between;
  font-size: calc(11px * var(--font-scale)); color: rgba(255,255,255,.6);
  font-variant-numeric: tabular-nums;
}

.sg-play {
  width: 56px; height: 56px; flex: none; border-radius: 50%; border: 0;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  display: grid; place-items: center; cursor: pointer;
}
.sg-nav2 { display: flex; gap: var(--sp-2); margin-left: auto; }
.sg-nav2__b {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}

/* Schrittweiten in EINER Zeile, Einheit in der Überschrift */
.sg-schritte { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.sg-schritt {
  min-height: 44px; padding: 0 2px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.24); background: none; color: rgba(255,255,255,.8);
  font-size: calc(15px * var(--font-scale)); font-weight: 750; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.sg-schritt[aria-pressed="true"] { background: #fff; color: #101820; border-color: #fff; }

/* Rechenmodelle mit Klartext-Erklärung */
.sg-modelle { display: flex; flex-direction: column; gap: var(--sp-2); }
.sg-modell {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--target-min); padding: var(--sp-2) var(--sp-3);
  border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: #fff; text-align: left; cursor: pointer;
}
.sg-modell[aria-pressed="true"] { border-color: var(--md-sys-color-tertiary-container); background: rgba(207,233,138,.16); }
.sg-modell__n { flex: 1; font-size: calc(14px * var(--font-scale)); font-weight: 700; min-width: 0; }
.sg-modell__n i {
  display: block; font-style: normal; font-weight: 500;
  font-size: calc(11.5px * var(--font-scale)); color: rgba(255,255,255,.62);
}
.sg-modell__p {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); flex: none;
}
.sg-modell[aria-pressed="true"] .sg-modell__p {
  border-color: var(--md-sys-color-tertiary-container);
  background: var(--md-sys-color-tertiary-container);
  box-shadow: inset 0 0 0 3px #101820;
}

/* =========================================================
   10. ABO   (Entwurf 09 und 10)
   ========================================================= */
.sg-abo__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.sg-abo__name { flex: 1; font-size: calc(19px * var(--font-scale)); font-weight: 800; letter-spacing: -.02em; min-width: 0; }
.sg-badge-ok {
  font-size: calc(11px * var(--font-scale)); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 9999px;
  background: var(--wx-warn-1-bg); color: var(--md-sys-color-on-surface);
  box-shadow: inset 0 0 0 1.5px var(--wx-warn-1-fg);
  white-space: nowrap;
}
.sg-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.sg-field__l {
  font-size: calc(11px * var(--font-scale)); letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
}
.sg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 9999px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font-size: calc(12.5px * var(--font-scale)); font-weight: 650;
}

/* ---- Mitlaufende Summe am unteren Rand ---- */
.sg-summe {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--md-sys-color-surface-container-high);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-summe__zeile { display: flex; align-items: baseline; gap: var(--sp-2); }
.sg-summe__l { flex: 1; font-size: calc(13px * var(--font-scale)); color: var(--md-sys-color-on-surface-variant); }
.sg-summe__v { font-size: calc(17px * var(--font-scale)); font-weight: 800; font-variant-numeric: tabular-nums; }
.sg-summe__v--heute { color: var(--md-sys-color-tertiary); }

/* =========================================================
   AB TABLET — Ergänzungen für die neuen Bauteile
   ========================================================= */
@media (min-width: 768px) {
  .sg-maptiles { grid-template-columns: repeat(3, 1fr); }
  .sg-tiles { grid-template-columns: repeat(4, 1fr); }
  .sg-pk-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .sg-pk-tabs { display: none; }
  .sg-karte { height: 62vh; min-height: 420px; }
  .sg-karte--frei { height: 74vh; }
}

/* ---- Spaltenwahl am Handy ----
   Sichtbar sind nur die Empfehlung und das gewählte Gegenüber.
   Ab Tablet gewinnt die Media Query und zeigt alle. */
@media (max-width: 767px) {
  .sg-pk-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .sg-pk-grid [data-pk-spalte]:not(.is-sichtbar) { display: none; }
}
@media (min-width: 768px) {
  .sg-pk-grid [data-pk-spalte] { display: flex !important; }
}

/* Nur für Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Liste der Zusatzmodule beim Dazubuchen — ganze Zeilen zum Antippen.
   Die Zeilen selbst kommen aus dem Formular-Macro pick_row. */
.sg-modul-liste { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---- Ergänzungen für die Tagesliste im Kundenbereich ---- */
.sg-days-acc-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}
.sg-dacc__icon { width: 30px; height: 30px; justify-self: center; }
/* Trend-Tage sind erkennbar schwächer belegt — ohne dass Farbe der
   einzige Träger wäre: der Eckwert nennt „Tag 12 · Trend“ im Klartext. */
.sg-dacc--trend .sg-dacc__day i { opacity: .8; }
.sg-dacc__stunden { display: flex; flex-direction: column; gap: var(--sp-3); }

/* =========================================================
   11. BLOG

   Die Beitragskarte ist dieselbe wie auf der Startseite, nur als
   Kachel statt als Zeile. Die Seitenspalte mit den Kategorien
   steht am Handy unter der Liste, ab Tablet daneben.
   ========================================================= */
.sg-blog-layout { display: flex; flex-direction: column; gap: var(--sp-6); }
.sg-blog-layout__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.sg-blog-seite { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Beitrag als Kachel: Bild oben, Text darunter. */
.sg-post--karte {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
}
.sg-post--karte .sg-post__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); gap: var(--sp-2); }
.sg-post__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--md-sys-color-surface-container);
  overflow: hidden;
}
.sg-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-post__leer {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--md-sys-color-on-surface-variant);
}
.sg-post--karte .sg-post__t { font-size: calc(17px * var(--font-scale)); }

/* Kategorien */
.sg-blog-kats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sg-blog-kat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  padding: var(--sp-2) 0;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  color: inherit;
  text-decoration: none;
  font-size: calc(14px * var(--font-scale));
  font-weight: 650;
}
.sg-blog-kat > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sg-blog-kats li:last-child .sg-blog-kat { border-bottom: 0; }
.sg-blog-kat.is-active { color: var(--md-sys-color-primary); }

/* Seitenzahlen */
.sg-pager__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.sg-pager__aus { opacity: .45; pointer-events: none; }
.sg-pager__punkte { padding: 0 var(--sp-1); color: var(--md-sys-color-on-surface-variant); }

@media (min-width: 900px) {
  .sg-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: var(--sp-6);
  }
  .sg-blog-seite { position: sticky; top: var(--sp-4); }
  /* Der erste Beitrag darf breiter stehen — er ist der Aufmacher. */
  .sg-post--gross { grid-column: 1 / -1; }
  .sg-post--gross .sg-post__media { aspect-ratio: 21 / 9; }
}

/* =========================================================
   12. FORMULARSEITEN (Anmelden, Registrieren, Passwort)

   Schmale Spalte, Beschriftung immer ÜBER dem Feld. Vorher
   brachte jede dieser Seiten ihr eigenes fe-auth-Raster mit.
   ========================================================= */
.sg-section--schmal { max-width: 32rem; margin-inline: auto; width: 100%; }

.sg-formular { display: flex; flex-direction: column; gap: var(--sp-4); }

.sg-feld { display: flex; flex-direction: column; gap: 6px; position: relative; }
.sg-feld > label {
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
}
.sg-feld input:not([type="checkbox"]):not([type="radio"]),
.sg-feld select,
.sg-feld textarea {
  width: 100%;
  min-height: var(--target-min);
  padding: 0 var(--sp-3);
  border: var(--hairline) solid var(--md-sys-color-outline);
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: calc(15px * var(--font-scale));
}
.sg-feld textarea { padding: var(--sp-3); min-height: 7rem; }
.sg-feld input:focus-visible,
.sg-feld select:focus-visible,
.sg-feld textarea:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}

/* Auge zum Aufdecken des Passworts — im Feld, aber als eigenes
   Tippziel groß genug. */
.sg-password-wrap { position: relative; }
.sg-password-wrap .fe-password-toggle,
.sg-password-wrap .sg-password-toggle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

/* Meldungen über dem Formular */
.sg-meldung {
  padding: var(--sp-3);
  border-radius: 12px;
  border-left: 5px solid var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container);
  font-size: calc(14px * var(--font-scale));
}
.sg-meldung--fehler {
  border-left-color: var(--md-sys-color-error);
  background: color-mix(in srgb, var(--md-sys-color-error) 12%, var(--md-sys-color-surface-container-lowest));
}
.sg-meldung--ok {
  border-left-color: var(--wx-warn-1-fg);
  background: var(--wx-warn-1-bg);
}

/* Fließtext für Artikel, Impressum, Datenschutz */
.sg-fliesstext { font-size: calc(15px * var(--font-scale)); line-height: 1.65; }
.sg-fliesstext > * + * { margin-top: var(--sp-4); }
.sg-fliesstext h2 { font-size: calc(21px * var(--font-scale)); font-weight: 750; letter-spacing: -.02em; }
.sg-fliesstext h3 { font-size: calc(17px * var(--font-scale)); font-weight: 700; }
.sg-fliesstext ul, .sg-fliesstext ol { padding-left: var(--sp-5); }
.sg-fliesstext li + li { margin-top: var(--sp-2); }
.sg-fliesstext img { max-width: 100%; height: auto; border-radius: 12px; }
.sg-fliesstext a { color: var(--md-sys-color-primary); }

/* Artikel */
.sg-artikel { display: flex; flex-direction: column; gap: var(--sp-4); }
.sg-artikel__bild { border-radius: 16px; overflow: hidden; }
.sg-artikel__bild img { display: block; width: 100%; height: auto; }
.sg-artikel__krume { color: var(--md-sys-color-primary); text-decoration: none; }
.sg-artikel__krume-trenner { opacity: .5; }
.sg-artikel__fuss {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
}

/* Kartenrahmen (Markus-Seite) */
.sg-karte-rahmen {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  overflow: hidden;
  min-height: 320px;
}

/* =========================================================
   13. KONTO — Stammdaten, Buchungen, Rechnungen

   Vorher standen die drei Bereiche ohne Trennung untereinander,
   und Buchungen wie Rechnungen wurden doppelt gepflegt (Tabelle
   für Desktop, Karten fürs Handy). Jetzt je ein Bauteil, das in
   beiden Breiten funktioniert.
   ========================================================= */

/* Zweispaltiges Formular ab Tablet; einzelne Felder dürfen
   ausbrechen (Straße breit, Postleitzahl schmal). */
.sg-formular__wege { display: flex; flex-direction: column; gap: var(--sp-2); }
.sg-formular__wege .sg-btn { width: 100%; }

/* Symfony rendert Feldfehler als Liste — an das Feld angleichen. */
.sg-feld ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(12px * var(--font-scale));
  color: var(--md-sys-color-error);
  font-weight: 650;
}
.sg-feld__label {
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
}
.sg-feld__rahmen { display: block; }
.sg-feld__eingabe {
  width: 100%;
  min-height: var(--target-min);
  padding: 0 var(--sp-3);
  border: var(--hairline) solid var(--md-sys-color-outline);
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: calc(15px * var(--font-scale));
}
.sg-feld__eingabe:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 1px; }

/* Zeile für Buchung und Rechnung — am Handy gestapelt,
   ab Tablet als Spalten. EINE Vorlage für beides. */
.sg-kn-zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.sg-kn-zeile:last-child { border-bottom: 0; }
.sg-kn-zeile__haupt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sg-kn-zeile__name {
  font-size: calc(15px * var(--font-scale));
  font-weight: 750;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.sg-kn-zeile__feld { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
.sg-kn-zeile__feld .sg-field__l { min-width: 5.5em; }
.sg-kn-zeile__wert {
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.sg-kn-zeile__wege { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

@media (min-width: 768px) {
  .sg-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-feld--breit { grid-column: 1 / -1; }
  .sg-feld--schmal { max-width: 12rem; }
  .sg-formular__wege { grid-column: 1 / -1; flex-direction: row; }
  .sg-formular__wege .sg-btn { width: auto; }

  /* Aus der Karte wird eine Zeile — ohne zweite Vorlage. */
  .sg-kn-zeile {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
    gap: var(--sp-3);
  }
  .sg-kn-zeile__feld { flex-direction: column; align-items: flex-start; gap: 1px; }
  .sg-kn-zeile__feld .sg-field__l {
    min-width: 0;
    font-size: calc(10.5px * var(--font-scale));
  }
}

/* Inhalt einer Kachel — Rest der alten .tile-Struktur, die in
   Benachrichtigungen und den Abo-Nebenseiten noch steckt. */
.sg-kachel__inhalt { display: flex; flex-direction: column; gap: var(--sp-3); }
.sg-warn-matrix { display: flex; flex-direction: column; gap: var(--sp-3); overflow-x: auto; min-width: 0; }

/* Kleine Schaltfläche — nur in der Kaufstrecke, wo mehrere
   Nebenaktionen in einer Zeile stehen. */
.sg-btn--klein {
  min-height: 40px;
  padding: 0 var(--sp-3);
  font-size: calc(13.5px * var(--font-scale));
}

/* =========================================================
   14. ADMIN

   Der Adminbereich trug noch Bootstrap-Reste (btn, form-control,
   table-striped, container) aus der Zeit vor dem M3-Umbau. Die
   Klassen sind ersetzt; hier steht, was zusätzlich nötig ist:
   die Datentabelle.
   ========================================================= */
.sg-btn--gefahr {
  color: var(--md-sys-color-error);
  border-color: var(--md-sys-color-error);
}

/* Datentabelle — scrollt für sich, nicht die Seite. Am Handy
   sind Verwaltungstabellen ohnehin nur zum Nachschlagen da. */
.sg-tabelle-rahmen { overflow-x: auto; min-width: 0; max-width: 100%; }
.sg-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13.5px * var(--font-scale));
}
.sg-tabelle th,
.sg-tabelle td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  text-align: left;
  vertical-align: middle;
}
.sg-tabelle th {
  font-size: calc(11px * var(--font-scale));
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}
.sg-tabelle tbody tr:nth-child(even) { background: var(--md-sys-color-surface-container-low); }
.sg-tabelle tbody tr:hover { background: var(--md-sys-color-surface-container); }
.sg-tabelle td:last-child { white-space: nowrap; }

/* ---- Kartengruppen als Akkordeon ----
   78 Kacheln in zehn Gruppen sind am Stück eine Wand. Zugeklappt
   passt die Übersicht auf einen Schirm; offen ist, was man braucht. */
.sg-mapgruppe {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
}
.sg-mapgruppe > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: calc(13px * var(--font-scale));
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-low);
}
.sg-mapgruppe > summary::-webkit-details-marker { display: none; }
.sg-mapgruppe > summary::after {
  content: "";
  margin-left: var(--sp-2);
  width: 9px; height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .6;
  transition: transform .2s ease;
}
.sg-mapgruppe[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); opacity: 1; }
.sg-mapgruppe[open] > summary { color: var(--md-sys-color-on-surface); }
.sg-mapgruppe__zahl {
  margin-left: auto;
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0;
  text-transform: none;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.sg-mapgruppe__stern { color: var(--md-sys-color-tertiary); font-size: calc(19px * var(--font-scale)); }
.sg-mapgruppe .sg-maptiles { padding: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .sg-mapgruppe > summary::after { transition: none; }
}

/* ---- Stern an der Kachel ----
   Liegt NEBEN dem Verweis, nicht darin: ein Knopf in einem Link ist mit
   der Tastatur nicht sauber erreichbar. */
.sg-maptile-huelle { position: relative; display: flex; min-width: 0; }
.sg-maptile-huelle > .sg-maptile { flex: 1; min-width: 0; }

.sg-maptile__stern {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 22, 29, .55);
  color: #fff;
  cursor: pointer;
  /* Über dem Bild, aber unter dem Schloss rechts oben. */
  z-index: 2;
}
.sg-maptile__stern:hover { background: rgba(16, 22, 29, .78); }
.sg-maptile__stern.is-favorit { color: var(--md-sys-color-tertiary-container); }
.sg-maptile__stern:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.sg-maptile__stern[disabled] { opacity: .5; cursor: progress; }
.sg-maptile__stern .material-symbols-outlined { font-size: calc(20px * var(--font-scale)); }

/* ---- Rückmeldung nach dem Merken ---- */
.sg-favorit-hinweis {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  z-index: 80;
  max-width: min(32rem, calc(100vw - 2 * var(--sp-4)));
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.sg-favorit-hinweis.is-sichtbar { opacity: 1; transform: translate(-50%, 0); }
.sg-favorit-hinweis.is-fehler {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
@media (prefers-reduced-motion: reduce) {
  .sg-favorit-hinweis { transition: none; }
}

/* Ohne Vorschaubild sitzt der Stern auf hellem Grund — der dunkle
   Kreis, der auf einem Foto nötig ist, wirkt dort als Klotz. Sobald
   die Bilder da sind, greift wieder die dunkle Fassung. */
.sg-maptile-huelle--ohne-bild .sg-maptile__stern {
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface-variant);
  box-shadow: inset 0 0 0 var(--hairline) var(--md-sys-color-outline-variant);
}
.sg-maptile-huelle--ohne-bild .sg-maptile__stern:hover {
  background: var(--md-sys-color-surface-container);
}
.sg-maptile-huelle--ohne-bild .sg-maptile__stern.is-favorit {
  color: var(--md-sys-color-tertiary);
  box-shadow: inset 0 0 0 1.5px var(--md-sys-color-tertiary);
}

/* =========================================================
   Stundenzeile mit allen Werten

   Beim ersten Umbau auf Zeilen hatte ich fünf der neun Werte
   weggelassen — Gefühlt, Windrichtung, Niederschlagsmenge,
   Umkreis und UV-Index — und dazu die Farbcodierung. Das war
   ein Verlust, kein Entwurf.

   Jetzt trägt jede Zeile alle neun. Vier stehen in der
   Hauptzeile, die man beim Überfliegen braucht; der Rest
   beschriftet darunter. Neun Werte nebeneinander sind auf
   390 Pixel nicht lesbar.
   ========================================================= */
.sg-hr {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  min-height: 0;
}

/* Kopfzeile der Stunde: Zeit, Wetterbild, Temperatur — und rechts die
   gefühlte Temperatur samt UV-Index. Die vierte Spalte dehnt sich,
   damit „Gefühlt" und „UV" an denselben Kanten stehen wie in der
   Stunde darüber und darunter.

   Die Spalten sind knapp bemessen: mit den beiden Beschriftungen steht
   hier mehr Text als vorher, und die Zeile muss auch auf 360 Pixern
   ohne Umbruch durchgehen. */
.sg-hr__haupt {
  display: grid;
  grid-template-columns: 3.7em 30px minmax(0, 3.2em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.sg-hr__w--feel,
.sg-hr__w--uv { text-align: right; }

/* Die übrigen Werte als Kacheln.

   Zwei Anläufe davor waren falsch. Erst eine umbrechende Flex-Reihe:
   jede Stunde brach an einer anderen Stelle um, weil „–" ein Zeichen
   breit ist und „1,2 mm" sechs. Dann Paare mit Beschriftung links und
   Wert am rechten Zellenrand — da lag zwischen beiden so viel Luft,
   dass das Auge den Wert mit der nächsten Beschriftung rechts davon
   zusammenlas („RICHTUNG" neben der 29 der gefühlten Temperatur).

   Kacheln beenden beides: eigener Rahmen, Beschriftung unmittelbar
   über dem Wert. Am Handy gibt es kein Hover — was ein Wert bedeutet,
   muss sichtbar dranstehen, nicht im title-Attribut.

   Vier Werte (Regen, Wind, Richtung, Menge) in zwei Spalten und zwei
   Zeilen, die Umkreis-Leinwand als eigene Kachel rechts über beide
   Zeilen. Keine freie Stelle im Raster, und die Beschriftungen haben
   bei ~100 px je Kachel Platz in normaler Größe. */
.sg-hr__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sp-1);
  align-items: stretch;
}
.sg-hr__paar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 40px;
  padding: 4px 6px;
  border-radius: 10px;
  /* Fläche und Kante aus der Textfarbe statt aus festen Tokens: so
     tragen sie im hellen wie im dunklen Thema und auch auf dem
     eingefärbten Grund der Jetzt-Zeile. */
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 var(--hairline) color-mix(in srgb, currentColor 12%, transparent);
}
/* Nur die Umkreis-Kachel bekommt einen festen Platz. Die übrigen vier
   füllen danach von selbst 1/1, 1/2, 2/1, 2/2 — die Automatik
   überspringt die belegte dritte Spalte. Damit hängt die Anordnung
   nicht an den Namen der Werte, und ein Umsortieren von HAUPT/DETAIL
   im JS bleibt hier folgenlos. */
.sg-hr__paar--rainspot { grid-area: 1 / 3 / span 2 / auto; }
.sg-hr__l {
  font-size: calc(10.5px * var(--font-scale));
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}
.sg-hr__v {
  font-size: calc(15px * var(--font-scale));
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* „9 km/h" darf in der Kachel nicht hinter der Zahl umbrechen. */
  white-space: nowrap;
}
.sg-hr--now .sg-hr__l { color: inherit; opacity: .75; }

/* Die Werte selbst kommen aus renderCell() und bringen ihre eigenen
   Klassen mit — Temperaturpille, UV-Plakette, Umkreis-Leinwand. */
.sg-hr .wf-temp-pill {
  display: inline-grid;
  place-items: center;
  min-width: 2.6em;
  padding: 3px 7px;
  border-radius: 9999px;
  color: #1A1A1A;
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sg-hr .wf-uv {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 800;
}
.sg-hr .wf-uv--low  { background: var(--wx-warn-1-bg); color: var(--md-sys-color-on-surface); }
.sg-hr .wf-uv--mid  { background: var(--wx-warn-2-voll); color: var(--wx-warn-2-auf-voll); }
.sg-hr .wf-uv--high { background: var(--wx-warn-3-voll); color: var(--wx-warn-3-auf-voll); }

.sg-hr .wf-rainspot {
  display: block;
  /* 49 Pixel = 1:1 mit der Zeichenauflösung der Leinwand (7 × 7 Zellen à
     7 Pixel, siehe forecastTableCore.js). Vorher stand hier 38 gegen eine
     48er Leinwand: Der Browser hat das Bild auf 79 % gestaucht — kleiner
     als nötig und unscharf, weil jeder Bildpunkt auf 0,79 Pixel fiel.
     Wer die Fläche größer will, muss beide Zahlen ändern, sonst wird
     sie weich. */
  width: 49px;
  height: 49px;
  border-radius: 6px;
  /* Grund für den Fall, dass noch nichts gezeichnet ist. */
  background: var(--md-sys-color-surface-container-lowest);
  /* Rahmen als outline und nicht als inset-Schatten: Der Schatten liegt
     UNTER dem Bild der Leinwand. Solange das Raster die Fläche nicht
     ausfüllte, blitzte er an den leeren Rändern hervor; seit das Bild
     bündig sitzt, wäre er vollständig verdeckt. Eine outline zeichnet
     über den Inhalt, folgt der Rundung und braucht keinen Platz im
     Layout — mit negativem Versatz liegt sie sauber auf der Kante statt
     außen herum. */
  outline: var(--hairline) solid var(--md-sys-color-outline-variant);
  outline-offset: calc(-1 * var(--hairline));
  cursor: zoom-in;
}

.sg-hr .wf-picto { width: 30px; height: 30px; display: block; }
.sg-hr .wf-wind-txt { font-weight: 700; }

/* Einheit klein hinter dem Wert — nicht in jeder Zeile ausgeschrieben,
   aber vorhanden, damit „13" eindeutig bleibt. */
.sg-hr__e {
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  margin-left: 2px;
}
/* Beschriftung vor dem Wert („Regen 0 %") — gehört auf die andere
   Seite als die Einheit. */
.sg-hr__e--vor {
  margin-left: 0;
  margin-right: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sg-hr--now .sg-hr__e { color: inherit; opacity: .75; }

/* Warnschwellen färben EINZELNE Werte, nicht die ganze Zeile — wer
   alles einfärbt, sagt nichts mehr aus. */
.sg-hr .wf-warn--2 { color: var(--wx-warn-2-fg); }
.sg-hr .wf-warn--3 { color: var(--wx-warn-3-fg); }
.sg-hr .wf-warn--4 { color: var(--wx-warn-4-fg); }
.sg-hr .wf-warn--5 { color: var(--wx-warn-5-fg); }
.sg-hr .wf-warn--2,
.sg-hr .wf-warn--3,
.sg-hr .wf-warn--4,
.sg-hr .wf-warn--5 { font-weight: 800; }

/* Die Kopfzeile gibt es nur ab Tablet. */
.sg-hrs-head { display: none; }

@media (min-width: 760px) {
  /*
    Ab Tablet wird die Zeile zu einer echten Tabellenzeile: elf Spalten,
    die Beschriftungen stehen EINMAL oben statt in jeder der 24 Zeilen.
    Vorher wiederholten sich „GEFÜHLT · RICHTUNG · MENGE · UV · UMKREIS"
    überall — in der früheren Tabelle standen diese Wörter einmal links.

    display: contents löst die beiden Teilzeilen auf, sodass ihre Kinder
    direkt im Raster der Zeile liegen und mit der Kopfzeile fluchten.
  */
  .sg-hrs-head,
  .sg-hr {
    display: grid;
    /* Elf Spalten: Zeit, Symbol, dann die acht Werte — und zuletzt eine
       leere Spalte, die einen etwaigen Rest schluckt.

       Die acht Wertespalten sind bewusst gleich breit (1fr). Vorher hatte
       jede ihre eigene px-Breite; die Werte standen dadurch in einem
       unruhigen Zickzack statt in einem Raster. Gleich breit heißt: die
       Zahlen fluchten mit ihrer Überschrift und untereinander.

       Zeit und Symbol bleiben fest. Die Zeitspalte steht bewusst NICHT in
       em: die Kopfzeile ist kleiner gesetzt als die Datenzeilen, und em
       rechnet gegen die eigene Schriftgröße — beide Raster bekämen sonst
       verschiedene Spalten. px mal --font-scale ergibt in beiden Rastern
       dieselbe Zahl und wächst im Großschrift-Modus trotzdem mit. */
    grid-template-columns:
      calc(78px * var(--font-scale)) 34px
      repeat(8, minmax(calc(58px * var(--font-scale)), 1fr))
      auto;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }

  .sg-hrs-head {
    border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container);
    font-size: calc(10.5px * var(--font-scale));
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 750;
    color: var(--md-sys-color-on-surface-variant);
  }
  .sg-hrs-head > span {
    text-align: right;
    line-height: 1.15;
    /* Nicht umbrechen: „RICHTUN/G" über zwei Zeilen sieht aus wie ein
       Fehler. Lieber leicht kleiner und einzeilig. */
    white-space: nowrap;
    letter-spacing: .02em;
    font-size: calc(10px * var(--font-scale));
  }
  .sg-hrs-head > span:first-child { text-align: left; }

  .sg-hr__haupt,
  .sg-hr__detail { display: contents; }
  /* In der Zeile selbst sind die Wörter jetzt überflüssig — die
     Kopfzeile der Tabelle sagt bereits, was in welcher Spalte steht. */
  .sg-hr__l { display: none; }
  .sg-hr__e--vor { display: none; }
  /* Die Handy-Fassung macht aus jedem Wertepaar eine Kachel mit festem
     Platz im 2×2-Raster. Hier ist die Tabelle selbst das Raster — die
     Kachel muss also restlos zurückgebaut werden, sonst sitzen die
     Werte in den falschen Spalten und tragen doppelte Rahmen. */
  .sg-hr__paar {
    grid-area: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .sg-hr__v { font-size: calc(12.5px * var(--font-scale)); }
  .sg-hr__w,
  .sg-hr__v { text-align: right; }
  .sg-hr__w--weather { text-align: center; }
  /* Umkreis-Leinwand ausrichten.

     Sie steckt in zwei Hüllen: .sg-hr__paar--rainspot (die Zelle) und
     darin .sg-hr__v (der Wert). Solange beide auf Inhaltsbreite stehen,
     hat ein `margin-left: auto` an der Leinwand nichts zu verteilen —
     die Lage entstand allein aus der Flexbox der Zelle. Deshalb machen
     beide Hüllen hier Blöcke über die volle Spaltenbreite; dann schiebt
     `auto` die Fläche verlässlich an die rechte Kante, so wie
     `text-align: right` es mit den Zahlen daneben tut.

     Eine zusätzliche Feinverschiebung steht hier bewusst NICHT mehr:
     Der schiefe Eindruck kam nicht von der Position der Leinwand,
     sondern von ihrem Inhalt — das Raster füllte sie nicht aus und
     ließ rechts und unten Platz. Das ist an der Quelle behoben. */
  .sg-hr__paar--rainspot,
  .sg-hr__paar--rainspot .sg-hr__v {
    display: block;
    width: 100%;
  }
  .sg-hr .wf-rainspot {
    margin-left: auto;
    margin-right: 0;
  }

  /* Spaltenfolge der Tabelle.

     Am Handy teilt das Markup die Werte in Kopfzeile und Kacheln — dort
     stehen Gefühlt und UV oben, Regen und Wind unten. Diese Gruppierung
     ist eine Handy-Entscheidung; in der Tabelle stünden Gefühlt und UV
     dadurch mitten zwischen Temperatur und Regen. `order` stellt hier
     die gewohnte Reihenfolge her, ohne dass das Markup zwei Fassungen
     braucht. Die Zahlen müssen zur Folge in KOPF (tagesdetail.js)
     passen — sonst stehen die Überschriften über den falschen Werten. */
  .sg-hr__z             { order: 1; }
  .sg-hr__w--weather    { order: 2; }
  .sg-hr__w--temp       { order: 3; }
  .sg-hr__paar--prob    { order: 4; }
  .sg-hr__paar--wind    { order: 5; }
  .sg-hr__w--feel       { order: 6; }
  .sg-hr__paar--windDir { order: 7; }
  .sg-hr__paar--prec    { order: 8; }
  .sg-hr__w--uv         { order: 9; }
  .sg-hr__paar--rainspot { order: 10; }
}

/* ==================================================================
   Fußzeile — Social Media, Rechtliches, Urheberzeile
   ==================================================================

   Am Handy nimmt die untere Navigationsleiste den Platz am Seitenende
   ein. Die Fußzeile bekommt deshalb unten Luft in ihrer Höhe, sonst
   liegt die letzte Zeile darunter und ist nicht zu lesen.

   Die vier Kanäle stehen als Kachelreihe mit Namen, nicht als nackte
   Symbolreihe: Ein TikTok- oder Instagram-Logo erkennt nicht jeder, und
   die Zielgruppe ist nicht die jüngste. Der Name kostet eine Zeile und
   spart das Raten.
   ================================================================== */

.sg-fuss {
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-4);
  /* Bis unter die Bottom-Nav, damit die Urheberzeile frei bleibt. */
  padding-bottom: calc(var(--sp-6) + 72px + env(safe-area-inset-bottom, 0px));
  background: var(--md-sys-color-surface-container);
  border-top: var(--hairline) solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.sg-fuss__innen {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.sg-fuss__titel {
  margin: 0 0 var(--sp-3);
  font-size: calc(12px * var(--font-scale));
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.sg-fuss__kanaele {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.sg-fuss__kanal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Mindestens --target-min hoch — das ist die Regel für alles
     Antippbare, und mit Handschuhen im Gelände erst recht. */
  min-height: var(--target-min);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-weight: 650;
  font-size: calc(14px * var(--font-scale));
  transition: background-color .15s, border-color .15s;
}

.sg-fuss__kanal:hover,
.sg-fuss__kanal:focus-visible {
  background: var(--md-sys-color-secondary-container);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-secondary-container);
}

.sg-fuss__logo {
  display: flex;
  flex: 0 0 auto;
  color: var(--md-sys-color-primary);
}
.sg-fuss__kanal:hover .sg-fuss__logo,
.sg-fuss__kanal:focus-visible .sg-fuss__logo { color: inherit; }

.sg-fuss__logo svg { display: block; width: 22px; height: 22px; }

.sg-fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.sg-fuss__recht a {
  /* Auch das sind Tippziele, nicht bloß Text. */
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--md-sys-color-on-surface);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: calc(15px * var(--font-scale));
}

.sg-fuss__zeile {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
}

@media (min-width: 760px) {
  /* Am Desktop gibt es keine Bottom-Nav — die Reserve unten entfällt. */
  .sg-fuss { padding-bottom: var(--sp-6); }
  .sg-fuss__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--sp-6);
  }
  .sg-fuss__social { grid-row: 1; grid-column: 1; }
  .sg-fuss__recht  { grid-row: 1; grid-column: 2; align-self: center; }
  .sg-fuss__zeile  { grid-row: 2; grid-column: 1 / -1; }
}