/* Modulkarten — EIN Aussehen für App und Website (Aufgabe 56): die Saisonkarte („Jetzt aktuell“)
   und die kompakte Bildkarte der Zusatzmodule. Die App bindet die Datei in ModulHervor.vue,
   ModulFlaeche.vue und ModulAngebot.vue ein (Vite bündelt sie), die Website per <link> auf
   /zusatzmodule. Änderungen hier wirken auf beiden Seiten — bitte in beiden prüfen.

   - Bilder nie hier eintragen: das Markup setzt sie per <img src> (App unter /app/ bzw. in der
     Store-App unter /, Website unter /app/module/…).
   - Größen folgen der Schriftgröße der App (--s); die Website kennt --s nicht (dort 1).
   - Hoher Kontrast: in der App per <html data-kontrast="hoch">, auf der Website per
     prefers-contrast (dort gibt es kein data-kontrast). Beide Blöcke unten gleich halten.
   - Die Zuordnung Modul → Bild und Symbol steht zweimal: frontend/src/modulmotiv.ts (App) und
     crates/server/src/seiten/modulmotiv.rs (Website). Der Bildausschnitt steht nur hier
     (zm-motiv--<kennung>). */

/* ---------- Bildausschnitt je Modul (CSS object-position) ----------
   Das Wesentliche (Blitz, Mond, Felsen, Gleitschirm, Blüten) bleibt sichtbar — für das Foto
   rechts der kompakten Karte wie für die ganze Saisonkarte. */
.zm-motiv--meer { object-position: 78% 55%; }
.zm-motiv--solar { object-position: 35% 80%; }
.zm-motiv--wind { object-position: 62% 42%; }
.zm-motiv--mondlicht { object-position: 72% 50%; }
.zm-motiv--luftqualitaet { object-position: 55% 55%; }
.zm-motiv--schnee-eis { object-position: center 45%; }
.zm-motiv--gewitter-blitz { object-position: 62% 45%; }
.zm-motiv--agrar { object-position: center 50%; }

/* ======================================================================================
   Saisonkarte (App: ModulHervor.vue): „Schnee & Glätte“ bzw. „Gewitter/Blitz“ groß vorn
   ====================================================================================== */

/* Farben je Saison: Schnee eisblau, Gewitter violett — beide dezent */
.zm-saison {
  --zm-rand: #7CC4FF; --zm-glow: rgba(96, 178, 255, .45); --zm-glow-innen: rgba(150, 210, 255, .35); --zm-ring: rgba(124, 196, 255, .35);
  --zm-grund: 5, 16, 32; --zm-badge: #1A63C7; --zm-hell: #8CCBFF; --zm-sym: #9CD3FF;
  --zm-knopf-1: #2E7FE6; --zm-knopf-2: #1A63C7; --zm-knopf-h1: #3D8CF0; --zm-knopf-h2: #2270D6; --zm-knopf-schatten: rgba(46, 127, 230, .8);
  --zm-hk: #0B4A9E;
}
.zm-saison--gewitter-blitz {
  --zm-rand: #A99BFF; --zm-glow: rgba(140, 118, 255, .42); --zm-glow-innen: rgba(176, 160, 255, .32); --zm-ring: rgba(169, 155, 255, .35);
  --zm-grund: 12, 10, 34; --zm-badge: #5B3FD0; --zm-hell: #BDB0FF; --zm-sym: #C9BEFF;
  --zm-knopf-1: #6A50E6; --zm-knopf-2: #5236C6; --zm-knopf-h1: #7860F0; --zm-knopf-h2: #5E43D2; --zm-knopf-schatten: rgba(106, 80, 230, .8);
  --zm-hk: #3B23A0;
}
/* Immer dunkel (Foto mit Abdunklung) — im hellen wie im dunklen Design weiße Schrift */
.zm-saison {
  grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-l); border: 2px solid var(--zm-rand); background: rgb(var(--zm-grund)); color: #fff;
  box-shadow: 0 0 0 1px var(--zm-ring), 0 0 18px 2px var(--zm-glow), var(--schatten);
}
/* sanftes Leuchten — nur ohne „Bewegung reduzieren“ */
.zm-saison::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 22px var(--zm-glow-innen); opacity: .5;
  animation: zm-leuchten 4s ease-in-out infinite alternate;
}
@keyframes zm-leuchten { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zm-saison::after { animation: none; opacity: .8; } }

/* Foto deutlich sichtbar (Aufgabe 53): etwas aufgehellt, rechts und oben frei */
.zm-saison__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.16) saturate(1.12); }
/* Verlauf nur hinter dem Text: links (Name, Beschreibung, Preis) und unten (Merkmale, Knopf) */
.zm-saison__inhalt::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--zm-grund), .74) 0%, rgba(var(--zm-grund), .46) 36%, rgba(var(--zm-grund), .1) 62%, rgba(var(--zm-grund), 0) 78%),
    linear-gradient(0deg, rgba(var(--zm-grund), .8) 0%, rgba(var(--zm-grund), .42) 26%, rgba(var(--zm-grund), 0) 46%);
}
.zm-saison__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8px * var(--s, 1)); padding: calc(16px * var(--s, 1)) 16px 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

.zm-saison__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 99px;
  background: var(--zm-badge); color: #fff; border: 1px solid var(--zm-hell);
  font-weight: 700; font-size: calc(14.5px * var(--s, 1)); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.zm-saison__badge, .zm-saison__knopf { text-shadow: none; }
.zm-saison__badge svg { width: 20px; height: 20px; flex: none; }
.zm-saison__titel { margin: 2px 0 0; font-family: var(--f-disp); font-weight: 700; font-size: calc(30px * var(--s, 1)); line-height: 1.15; color: #fff; }
.zm-saison__text { margin: 0; max-width: min(34em, 72%); font-size: calc(17px * var(--s, 1)); line-height: 1.4; color: #E4EEF9; }
.zm-saison__preis { margin: 2px 0 0; font-family: var(--f-disp); font-weight: 700; font-size: calc(23px * var(--s, 1)); color: #fff; }
/* Website: Jahrespreis unter dem Monatspreis */
.zm-saison__jahr { display: block; font-family: var(--f-text, inherit); font-weight: 400; font-size: calc(16px * var(--s, 1)); color: #E4EEF9; }

.zm-saison__merkmale { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; padding: 0; list-style: none; }
.zm-saison__merkmale li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 99px;
  background: rgba(var(--zm-grund), .72); border: 1px solid var(--zm-hell); color: #fff;
  font-size: calc(15px * var(--s, 1)); line-height: 1.25;
}
.zm-saison__merkmale svg { width: 20px; height: 20px; flex: none; color: var(--zm-sym); }

.zm-saison__knopf {
  display: flex; align-items: center; justify-content: center; gap: 8px; align-self: stretch;
  min-height: var(--ziel); margin-top: 6px; padding: 0 20px; border-radius: 99px;
  background: linear-gradient(180deg, var(--zm-knopf-1) 0%, var(--zm-knopf-2) 100%); color: #fff; border: 2px solid var(--zm-hell);
  font-weight: 700; font-size: calc(19px * var(--s, 1)); text-decoration: none; text-align: center;
  box-shadow: 0 6px 18px -6px var(--zm-knopf-schatten);
}
.zm-saison__knopf svg { width: 22px; height: 22px; flex: none; }
.zm-saison__knopf:hover { background: linear-gradient(180deg, var(--zm-knopf-h1) 0%, var(--zm-knopf-h2) 100%); }
.zm-saison__knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 99px; }

/* Warnschild rechts — erst ab Tablet-Breite, auf dem Handy bräuchte der Text den Platz */
.zm-saison__schild { display: none; }
@media (min-width: 640px) {
  .zm-saison__schild {
    display: block; position: absolute; z-index: 1; right: 7%; top: 50%; transform: translateY(-72%) rotate(4deg);
    width: clamp(110px, 14vw, 170px); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
  }
}

/* breiter: Text bleibt links, das Foto zeigt rechts mehr */
@media (min-width: 720px) {
  .zm-saison__inhalt { padding: 22px 26px; }
  .zm-saison__text { max-width: min(34em, 60%); }
  /* breite Karte: großer Knopf unter dem Text statt über die ganze Breite */
  .zm-saison__knopf { align-self: flex-start; min-width: min(100%, 460px); }
  .zm-saison__titel { font-size: calc(34px * var(--s, 1)); }
}
/* sehr breite, flache Karte: beim Schnee den Bildausschnitt mit den Gipfeln zeigen */
@media (min-width: 1100px) { .zm-saison--schnee-eis .zm-saison__bild { object-position: center 28%; } }

/* ======================================================================================
   Kompakte Bildkarte (App: ModulFlaeche.vue): dunkler Kartengrund, links ein rundes
   Themen-Symbol, rechts das Foto des Moduls — hell, nach links in den Kartengrund auslaufend.
   Immer dunkel — im hellen wie im dunklen Design weiße Schrift.
   ====================================================================================== */
.zm-flaeche {
  --zm-f-grund: 9, 18, 32;
  --zm-f-symbol: 48px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  /* die Karten richten die Textbreite nach ihrer eigenen Breite (Text bleibt auf dem dunklen Teil) */
  container: zm-flaeche / inline-size;
  border-radius: var(--r-m); border: 1px solid rgba(170, 200, 235, .3);
  background: rgb(var(--zm-f-grund)); color: #fff; text-decoration: none;
  box-shadow: var(--schatten);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
/* Platz links für das runde Symbol — stärker als das Padding der Karten, die die Fläche nutzen
   (ModulAktiv, Shop): darum die doppelte Klasse */
.zm-flaeche.zm-flaeche--symbol.zm-flaeche--symbol { padding-left: calc(var(--zm-f-symbol) + 26px); }

/* Foto rechts (gut die Hälfte der Breite), läuft nach links weich in den Kartengrund aus */
.zm-flaeche__bild {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -2;
  width: 62%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .6) 22%, #000 50%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .6) 22%, #000 50%);
  filter: brightness(1.06) saturate(1.08);
  transition: filter .2s;
}
/* Schutz hinter dem Text: links dunkel, ab der Kartenmitte frei — das Foto bleibt hell */
.zm-flaeche__schutz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--zm-f-grund), .9) 0%, rgba(var(--zm-f-grund), .74) 44%, rgba(var(--zm-f-grund), .36) 64%, rgba(var(--zm-f-grund), 0) 88%);
}
/* App: die ganze Karte ist ein Link; Website: der Knopf „dazubuchen“ deckt die Karte ab */
a.zm-flaeche:hover .zm-flaeche__bild, .zm-flaeche:has(a.zm-angebot__aktion:hover) .zm-flaeche__bild { filter: brightness(1.14) saturate(1.12); }
a.zm-flaeche:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* Themen-Symbol: dunkler Kreis, weißes Symbol, senkrecht mittig */
.zm-flaeche__symbol {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: var(--zm-f-symbol); height: var(--zm-f-symbol); border-radius: 50%;
  background: #03080F; border: 1px solid rgba(190, 214, 240, .22); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.zm-flaeche__symbol svg { width: 24px; height: 24px; }

/* schmale Handys: kleineres Symbol, mehr Platz für den Text (Preis und Knopf in einer Zeile) */
@media (max-width: 380px) {
  .zm-flaeche { --zm-f-symbol: 38px; }
  .zm-flaeche.zm-flaeche--symbol.zm-flaeche--symbol { padding-left: calc(var(--zm-f-symbol) + 19px); }
  .zm-flaeche__symbol { left: 9px; }
  .zm-flaeche__symbol svg { width: 21px; height: 21px; }
}
@media (max-width: 400px) {
  :root[data-schrift="sehr"] .zm-flaeche { --zm-f-symbol: 36px; }
  :root[data-schrift="sehr"] .zm-flaeche.zm-flaeche--symbol { padding-left: calc(var(--zm-f-symbol) + 18px); }
  :root[data-schrift="sehr"] .zm-flaeche__symbol { left: 9px; }
  :root[data-schrift="sehr"] .zm-flaeche__symbol svg { width: 19px; height: 19px; }
}

/* ======================================================================================
   Angebot auf der kompakten Karte (App: ModulAngebot.vue): Name, Kurzbeschreibung (höchstens
   zwei Zeilen), Preis und „dazubuchen“
   ====================================================================================== */
.zm-angebot { gap: 3px; min-height: calc(124px * var(--s, 1)); padding: calc(11px * var(--s, 1)) 12px calc(11px * var(--s, 1)) 16px; }
.zm-angebot__name { margin: 0; font-family: var(--f-disp); font-weight: 700; font-size: calc(19px * var(--s, 1)); line-height: 1.2; color: #fff; }
/* Kurzbeschreibung: höchstens zwei Zeilen (bei sehr großer Schrift drei) — die Karte bleibt flach;
   Bildschirmleser lesen den ganzen Text */
.zm-angebot__text {
  margin: 0; max-width: 30em; font-size: calc(15px * var(--s, 1)); line-height: 1.35; color: #DCE7F3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
:root[data-schrift="sehr"] .zm-angebot__text { -webkit-line-clamp: 3; line-clamp: 3; }
/* Preis und Knopf in einer Zeile, unten; bei wenig Platz rutscht der Knopf darunter */
.zm-angebot__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: auto; padding-top: 4px; }
.zm-angebot__preis { font-weight: 700; font-size: calc(15px * var(--s, 1)); color: #fff; }
/* Website: Jahrespreis klein unter dem Monatspreis; auf schmalen Handys bricht er um, damit der
   Knopf neben dem Preis bleibt */
.zm-angebot__preis:has(.zm-angebot__jahr) { flex: 1 1 0; min-width: 0; margin: 0; }
.zm-angebot__jahr { display: block; font-weight: 400; font-size: calc(14px * var(--s, 1)); color: #DCE7F3; }
/* die ganze Karte ist die Tippfläche — der Knopf darf kleiner sein; dunkler Grund, auch über dem Foto lesbar */
.zm-angebot__aktion {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-height: 40px; padding: 0 10px 0 14px;
  border-radius: 99px; border: 2px solid rgba(220, 234, 250, .85); background: rgba(3, 8, 15, .82); color: #fff;
  font-weight: 700; font-size: calc(15px * var(--s, 1)); white-space: nowrap; text-shadow: none; text-decoration: none;
}
.zm-angebot__aktion svg { width: 18px; height: 18px; }
.zm-angebot:hover .zm-angebot__aktion { background: rgba(24, 44, 72, .92); }
/* Website: der Knopf ist der Link und deckt die ganze Karte ab */
a.zm-angebot__aktion::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
a.zm-angebot__aktion:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 99px; }
/* breite Karten (Tablet, PC): Text nur über dem dunklen Teil, das Foto rechts bleibt frei */
@container zm-flaeche (min-width: 480px) { .zm-angebot__name, .zm-angebot__text { max-width: 62%; } }
/* schmale Handys: Preis bzw. Status und Knopf passen noch in eine Zeile */
@media (max-width: 380px) {
  .zm-angebot { padding-right: 10px; }
  .zm-angebot__fuss { column-gap: 6px; }
  .zm-angebot__aktion { padding: 0 8px 0 12px; }
}

/* Website: Hinweis „Saison“ beim Namen */
.zm-marke {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 99px; vertical-align: .15em;
  background: rgba(255, 255, 255, .92); color: #0B2440; text-shadow: none;
  font-family: var(--f-text, inherit); font-weight: 700; font-size: calc(13px * var(--s, 1)); line-height: 1.5; letter-spacing: .02em;
}

/* Website: Raster der Modulkarten — wie .wk-module der App: einspaltig, ab 900 px zweispaltig */
.zm-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 900px) { .zm-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================================================
   Hoher Kontrast: kein Leuchten, kein Foto hinter dem Text, durchgehend helle Ränder.
   App (data-kontrast="hoch") — der Block für die Website folgt darunter und ist gleich.
   ====================================================================================== */
:root[data-kontrast="hoch"] .zm-saison { border-color: #fff; box-shadow: none; }
:root[data-kontrast="hoch"] .zm-saison::after, :root[data-kontrast="hoch"] .zm-saison__schild { display: none; }
:root[data-kontrast="hoch"] .zm-saison__inhalt::before { background: rgba(0, 0, 0, .78); }
:root[data-kontrast="hoch"] :is(.zm-saison__text, .zm-saison__jahr, .zm-angebot__text, .zm-angebot__jahr) { color: #fff; }
:root[data-kontrast="hoch"] .zm-saison__merkmale li { background: #000; border-color: #fff; }
:root[data-kontrast="hoch"] .zm-saison__merkmale svg { color: #fff; }
:root[data-kontrast="hoch"] :is(.zm-saison__knopf, .zm-saison__badge) { background: var(--zm-hk); border-color: #fff; box-shadow: none; }
:root[data-kontrast="hoch"] .zm-flaeche { border: 2px solid #fff; box-shadow: none; background: #000; text-shadow: none; }
/* am Handy reicht der Text über die ganze Karte — dort ohne Foto */
:root[data-kontrast="hoch"] :is(.zm-flaeche__bild, .zm-flaeche__schutz) { display: none; }
:root[data-kontrast="hoch"] .zm-flaeche__symbol { border-color: #fff; box-shadow: none; }
:root[data-kontrast="hoch"] .zm-angebot__aktion { border-color: #fff; background: #000; }
/* ab 1280 px steht der Text sicher links: dort schwarz, rechts bleibt das Foto sichtbar */
@media (min-width: 1280px) {
  :root[data-kontrast="hoch"] .zm-saison__inhalt::before { background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .88) 50%, rgba(0, 0, 0, .25) 80%); }
  :root[data-kontrast="hoch"] .zm-flaeche__bild {
    display: block;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, #000 72%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, #000 72%);
  }
  :root[data-kontrast="hoch"] .zm-flaeche__schutz { display: block; background: linear-gradient(90deg, #000 0%, #000 48%, rgba(0, 0, 0, 0) 72%); }
}

/* Website (kein data-kontrast): derselbe Block über prefers-contrast */
@media (prefers-contrast: more) {
  :root:not([data-kontrast]) .zm-saison { border-color: #fff; box-shadow: none; }
  :root:not([data-kontrast]) .zm-saison::after, :root:not([data-kontrast]) .zm-saison__schild { display: none; }
  :root:not([data-kontrast]) .zm-saison__inhalt::before { background: rgba(0, 0, 0, .78); }
  :root:not([data-kontrast]) :is(.zm-saison__text, .zm-saison__jahr, .zm-angebot__text, .zm-angebot__jahr) { color: #fff; }
  :root:not([data-kontrast]) .zm-saison__merkmale li { background: #000; border-color: #fff; }
  :root:not([data-kontrast]) .zm-saison__merkmale svg { color: #fff; }
  :root:not([data-kontrast]) :is(.zm-saison__knopf, .zm-saison__badge) { background: var(--zm-hk); border-color: #fff; box-shadow: none; }
  :root:not([data-kontrast]) .zm-flaeche { border: 2px solid #fff; box-shadow: none; background: #000; text-shadow: none; }
  :root:not([data-kontrast]) :is(.zm-flaeche__bild, .zm-flaeche__schutz) { display: none; }
  :root:not([data-kontrast]) .zm-flaeche__symbol { border-color: #fff; box-shadow: none; }
  :root:not([data-kontrast]) .zm-angebot__aktion { border-color: #fff; background: #000; }
}
@media (prefers-contrast: more) and (min-width: 1280px) {
  :root:not([data-kontrast]) .zm-saison__inhalt::before { background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .88) 50%, rgba(0, 0, 0, .25) 80%); }
  :root:not([data-kontrast]) .zm-flaeche__bild {
    display: block;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, #000 72%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, #000 72%);
  }
  :root:not([data-kontrast]) .zm-flaeche__schutz { display: block; background: linear-gradient(90deg, #000 0%, #000 48%, rgba(0, 0, 0, 0) 72%); }
}