/* ==================================================================
   KONFIGURATOR — Modulkarten
   ------------------------------------------------------------------
   Diese Gestaltung lag bisher nur auf der Paketeseite. Der
   Bestellprozess hatte eine eigene, viel einfachere Darstellung —
   zwei Oberflächen für dieselbe Entscheidung, die auseinanderlaufen
   konnten. Jetzt liegt sie einmal hier und wird von beiden Seiten
   eingebunden.
   ================================================================== */

/* Module accordion — Sub-Optionen pro Modul */
.mod-list { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; }
.mod-card {
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 12px; overflow: hidden;
  transition: border-color var(--d-base), box-shadow var(--d-base), background var(--d-base);
}
/* ------------------------------------------------------------------
   EIN SCHLANKER KOPF — 20.9.2026

   Andri: «Die Kachel ist ewig lang, und unten ist irgendwie der
   Preis.» Gemessen: 155 px hoch für zwei kurze Zeilen Text, mit einem
   Loch in der Mitte.

   Drei Spuren statt vier: Bild, Text, Pfeil. Der Preis ist in die
   Textspur gewandert (siehe .mod-meta und der Kommentar in
   konfigurator.js) — damit gibt es nichts mehr, was mit dem Titel um
   Platz streitet, und der Kopf ist so hoch wie sein Inhalt.
   ------------------------------------------------------------------ */
.mod-head {
  width: 100%; padding: 10px 12px 10px 10px; text-align: left;
  cursor: pointer; background: transparent; border: 0; font: inherit; color: inherit;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 28px; gap: 12px;
  align-items: center;
}
.mod-thumb { width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--bg-2); flex-shrink: 0; }
.mod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.mod-card:hover .mod-thumb img { transform: scale(1.05); }
.mod-title-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mod-num { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--rust); font-weight: 700; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------------
   LANGE NAMEN DÜRFEN BRECHEN — 17.9.2026

   Andri: «Bei № 07 überschneidet sich der Baulandvisualisierungs-Text
   mit dem Preis, das sieht nicht wirklich professionell aus.»

   Der Kopf der Karte ist ein Raster: Bild, Titel, Preis, Pfeil. Der
   Titel steht in einer Spur mit «min-width: 0» — damit sie schmaler
   werden darf als ihr Inhalt, sonst würde eine lange Zeile die ganze
   Karte auseinanderschieben. Genau das lässt aber ein einzelnes
   langes Wort aus seiner Spur hinauslaufen, und «Baulandvisualisierung»
   hat einundzwanzig Buchstaben ohne eine Stelle zum Umbrechen.

   Der erste Versuch war «overflow-wrap: break-word». Gemessen ergab
   das «Baulandvisualisierun / g» — ein Umbruch mitten im Wort, ohne
   Strich. Behoben war die Überlappung, gewonnen war nichts.

   Denn das Problem ist nicht das Wort. Das Problem ist, dass die
   KARTE schmal ist: Im Bestellprozess stehen zwei je Reihe, das sind
   rund 460 Pixel, und davon gehen 64 fürs Bild, 32 für den Pfeil und
   der Rest an den Preis. Für den Bildschirm gab es diese Regel längst
   — unter 600 Pixel rutscht der Preis unter den Titel. Sie stand nur
   an der falschen Grösse: am Fenster statt an der Karte.

   Eine Abfrage auf die Karte selbst (@container) stellt das richtig.
   Schmale Karte, egal wie breit der Bildschirm ist: Preis eine Zeile
   tiefer, Titel über die ganze Breite. Kein Wort muss brechen.

   «hyphens: auto» bleibt als Höflichkeit für noch längere Namen
   stehen — mit einem richtigen Trennstrich, weil im <html> «de-CH»
   steht. Ohne «break-word»: Lieber ein Wort, das über den Rand
   schaut, als eines, das in der Mitte zerhackt wird.

   NACHTRAG 20.9.2026 — die Abfrage ist weg, das Problem auch.

   Die Regel darunter schob den Preis unter den Titel, sobald die
   Karte schmaler als 520 px war. Im Bestellprozess ist sie 392 px
   breit — die Regel griff also IMMER, und der Kartenkopf war dadurch
   zweizeilig und 155 px hoch. Das war Andris zweiter Befund.

   Die Notlösung ist nicht mehr nötig, weil der Streit nicht mehr
   stattfindet: Der Preis steht jetzt fest unter dem Namen, in
   .mod-meta. Der Titel hat in jeder Breite die ganze Spur — bei
   392 px Karte rund 272 px, und «Baulandvisualisierung» braucht 190.

       Eine Notlösung, deren Not behoben ist, ist nur noch eine
       Regel, die niemand mehr versteht.

   «container-type» bleibt: Die Abfrage für sehr schmale Karten
   darunter braucht sie weiterhin.
   ------------------------------------------------------------------ */
.mod-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
            line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; }
.mod-card { container-type: inline-size; }
/* Ganz schmal reicht auch die volle Breite nicht: «Baulandvisualisierung»
   braucht bei 17px rund 209 Pixel, und unter 380px Kartenbreite bleiben
   184. Gemessen am 17.9.2026 mit browserprobe-modulkarten.mjs, das den
   Überlauf zählt (scrollWidth gegen clientWidth) und nicht die Kästen.
   15px ist keine Notgrösse, sondern dieselbe, die auf dem Handy ohnehin
   gilt. */
@container (max-width: 380px) {
  .mod-name { font-size: 15px; }
}
.mod-name em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }

/* Die Zeile unter dem Namen: Preis zuerst, danach — wenn es etwas zu
   zählen gibt — wie viele Leistungen angekreuzt sind. Getrennt durch
   einen Punkt, der nur da ist, wenn beides dasteht. */
.mod-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.mod-selcount { font-size: 11px; color: var(--ink-mute); font-weight: 500; }
.mod-selcount::before { content: '·'; margin-right: 7px; color: var(--line-strong); }
.mod-selcount strong { color: var(--rust); font-weight: 700; }
/* Der Preis ist die zweite Auskunft, nicht die erste.
   ------------------------------------------------------------------
   Andri am 20.9.2026: «Die Schrift des Preises ist fast gleich gross
   wie der Titel. Vielleicht könnte man das noch etwas schwächer
   machen, sodass es nicht so aufdringlich wirkt.»

   Er hat recht, und zwar gemessen: 13.5 px fett und tintenschwarz
   neben 15.5 px halbfett — das sind zwei Pixel Unterschied. Zwei
   Pixel sind kein Rang, sondern ein Zufall.

       Wenn zwei Zeilen gleich laut sind, entscheidet nicht die
       Gestaltung, welche zuerst gelesen wird, sondern der Zufall.

   Jetzt 12 px, halbfett, eine Stufe heller als der Name. Der Abstand
   zum Titel ist damit dreieinhalb Pixel, ein Schriftschnitt und ein
   Grauwert — dreimal dasselbe gesagt, damit es auch auf einem
   schlechten Bildschirm ankommt. Lesbar bleibt er; er drängt sich
   nur nicht mehr vor.

   Angekreuzt wird er weiterhin rostfarben. Dort IST er die Auskunft,
   die zählt. */
.mod-price-lbl { font-size: 10.5px; color: var(--ink-mute); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mod-price-lbl strong { display: inline; font-size: 12px; color: var(--ink-2);
  font-weight: 600; margin-left: 4px; }
.mod-chev { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--d-base), background var(--d-base), color var(--d-base); color: var(--ink); }
.mod-chev svg { width: 11px; height: 11px; }
/* Aufklappen über die echte Höhe statt über max-height. Mit einem
   max-height-Sprung von 0 auf 1400px war der sichtbare Teil der
   Bewegung nach einem Bruchteil der Zeit vorbei und der Rest lief
   ins Leere — beim Zuklappen umgekehrt. Das war das Ruckartige. */
.mod-body {
  height: 0; overflow: hidden;
  transition: height .42s var(--ease-out);
  will-change: height;
}
.mod-body-inner {
  padding: 4px 18px 20px 18px;
  border-top: 1px solid var(--line);
  margin-top: 0;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .26s var(--ease), transform .38s var(--ease-out);
}
.mod-desc { font-size: 13px; color: var(--ink-2); line-height: 1.55; padding: 14px 0 14px 0; font-style: normal; font-family: var(--f-sans); }
.mod-subs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.mod-sub {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px 12px 12px; border-radius: 10px; background: var(--bg);
  cursor: pointer; border: 1.5px solid var(--line);
  /* "all" hat auch Layoutwerte mitanimiert und dabei gestockt —
     hier zählen nur Farbe, Rahmen und der kurze Druckpunkt. */
  transition: background .26s var(--ease), border-color .26s var(--ease),
              color .26s var(--ease), transform .16s var(--ease-out),
              box-shadow .26s var(--ease);
  width: 100%; text-align: left; font: inherit; color: inherit;
}
.mod-sub:hover { border-color: var(--ink-mute); transform: translateY(-1px); }
.mod-sub:active { transform: scale(.988); transition-duration: .08s; }
.mod-sub-box {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line);
  background: var(--paper); display: inline-flex; align-items: center; justify-content: center;
  transition: background .22s var(--ease), border-color .22s var(--ease); flex-shrink: 0;
}
.mod-sub-box svg {
  width: 12px; height: 12px; opacity: 0; transform: scale(.55);
  transition: opacity .16s var(--ease), transform .34s cubic-bezier(.34,1.5,.64,1);
}
.mod-sub-label { font-size: 14px; font-weight: 500; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.mod-sub-note { font-size: 11.5px; font-weight: 400; color: var(--ink-mute); line-height: 1.35; }
/* Batch 12: die eigene Voraussetzung eines Bausteins (Saison-Anpassung
   → Aussenaufnahmen). Immer sichtbar, betont, solange sie fehlt. */
.mod-sub-bindung { font-size: 11.5px; font-weight: 400; color: var(--ink-mute); line-height: 1.35; font-style: italic; }
.mod-sub:disabled .mod-sub-bindung { color: var(--rust); font-weight: 600; }
.mod-sub.on .mod-sub-bindung { color: rgba(248,245,240,.62); }
/* ==================================================================
   DER RIEGEL — eine Leistung, die eine andere voraussetzt
   ------------------------------------------------------------------
   Andri am 18.8.2026: Grundrisse gibt es nur zur Matterport-Tour,
   weil sie aus deren Scan entstehen.

   Der Riegel steht ÜBER den Bausteinen. Wer erst die Preise liest
   und danach erfährt, dass er nicht buchen kann, ärgert sich — und
   zwar zu Recht.

   Er ist bewusst kein rotes Warnfeld: Es ist kein Fehler des Kunden,
   sondern eine Eigenschaft der Leistung. Sandton, wie die
   Merkblatt-Zeile darunter, und derselbe Rahmen.
   ================================================================== */
.mod-riegel { display: none; }
.mod-card.gesperrt .mod-riegel {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-2);
}
.mod-riegel-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--rust);
}
.mod-riegel-icon svg { width: 17px; height: 17px; }
.mod-riegel-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mod-riegel-txt strong { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.mod-riegel-txt small { font-size: 11.5px; color: var(--ink-mute); line-height: 1.4; }
.mod-riegel-btn {
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg);
  border-radius: 8px; padding: 9px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .26s var(--ease), border-color .26s var(--ease),
              transform .16s var(--ease-out);
}
.mod-riegel-btn:hover { background: var(--rust); border-color: var(--rust); transform: translateY(-1px); }
.mod-riegel-btn:active { transform: scale(.988); transition-duration: .08s; }

/* Seit dem 7.9.2026 kann ein Modul mehrere Voraussetzungen haben —
   die Baulandvisualisierung braucht Drohne UND Aussenaufnahmen. Dann
   stehen zwei Knöpfe da, und sie brauchen eine eigene Spur: Ohne
   diese Regel drückte der zweite Knopf die Textspalte zusammen. */
.mod-riegel-knoepfe { display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------------------------------
   ANZAHL — nur bei Leistungen, die es mehrfach gibt
   ------------------------------------------------------------------
   Heute ist das allein die Baulandvisualisierung («pro
   Visualisierung»). Der Schalter steht NEBEN der Leistungszeile, nicht
   darin: Ein Knopf im Knopf ist ungültiges HTML, und der Klick auf «+»
   würde die Leistung gleich wieder abwählen.
   ------------------------------------------------------------------ */
.mod-menge {
  display: flex; align-items: center; gap: 8px;
  margin: -2px 0 2px; padding: 8px 13px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-2);
}
.mod-menge-lbl {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); margin-right: 2px;
}
.mod-menge-btn {
  width: 32px; height: 32px; flex: none;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 8px; font: inherit; font-size: 17px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.mod-menge-btn:hover:not(:disabled) { border-color: var(--rust); color: var(--rust); }
.mod-menge-btn:disabled { opacity: .35; cursor: not-allowed; }
.mod-menge-zahl {
  min-width: 26px; text-align: center;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}
.mod-menge-einheit { font-size: 12.5px; color: var(--ink-mute); }

/* Der Zeilenpreis nennt bei mehreren Stück beides: die Summe gross,
   die Rechnung dahinter klein. Ohne die kleine Zeile stünde dort
   CHF 3'000 bei einer Leistung, die 1'000 kostet. */
.mod-sub-je { display: block; font-size: 11px; font-weight: 400; opacity: .7; margin-top: 1px; }

/* Die gesperrten Bausteine bleiben lesbar — der Preis ist ja die
   Information, wegen der jemand die Karte geöffnet hat. Sie sind
   nur erkennbar nicht anklickbar. */
/* Seit Batch 12 am Knopf selbst und nicht mehr an der Karte: Ein
   Baustein mit eigener Voraussetzung (Saison-Anpassung) kann wählbar
   sein, während der Rest der Karte gesperrt ist — und umgekehrt. */
.mod-sub:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(1);
}
.mod-sub:disabled .mod-sub-bindung { filter: none; }
.mod-sub:disabled:hover { border-color: var(--line); transform: none; }
.mod-sub:disabled:active { transform: none; }

/* Was beim Abwählen der Tour mitgefallen ist. */
.mod-wegfall {
  margin: 14px 0 0; padding: 11px 14px;
  border-left: 3px solid var(--rust);
  background: var(--bg-2);
  border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}

/* Auf schmalen Geräten passt der Knopf nicht mehr neben den Text. */
@media (max-width: 560px) {
  .mod-card.gesperrt .mod-riegel { grid-template-columns: 34px 1fr; row-gap: 10px; }
  .mod-riegel-btn { grid-column: 1 / -1; width: 100%; padding: 12px 13px; }
}
/* Batch 45 (4.10.2026): Dasselbe, wenn die KARTE schmal ist — im
   Bestellprozess auf dem iPad stehen zwei Karten nebeneinander, und
   «Virtuelle Tour hinzufügen» ragte bis 87 px über den Rand. */
@container (max-width: 520px) {
  .mod-card.gesperrt .mod-riegel { grid-template-columns: 34px minmax(0, 1fr); row-gap: 10px; }
  .mod-riegel-knoepfe { grid-column: 1 / -1; }
  .mod-riegel-btn { width: 100%; padding: 11px 13px; }
}

/* Merkblatt-Verweis unter den Optionen */
.mod-merkblatt {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  margin-top: 12px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-2); text-decoration: none; color: inherit;
  transition: border-color .26s var(--ease), background .26s var(--ease), transform .16s var(--ease-out);
}
.mod-merkblatt:hover { border-color: var(--rust); background: var(--paper); transform: translateY(-1px); }
.mod-merkblatt-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--rust);
}
.mod-merkblatt-icon svg { width: 16px; height: 16px; }
.mod-merkblatt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mod-merkblatt-txt strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mod-merkblatt-txt small { font-size: 11.5px; color: var(--ink-mute); }
.mod-merkblatt-pdf {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--rust-dk); border: 1px solid var(--rust-lt);
  padding: 4px 9px; border-radius: 999px;
}
.mod-sub-price { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ==================================================================
   REFERENZEN — beschriftet, gruppiert, anklickbar (20.9.2026)
   ------------------------------------------------------------------
   Vorher lagen alle Kacheln einer Karte in EINER Reihe ohne
   Beschriftung, und sie erschienen auch dann, wenn noch nichts
   angekreuzt war. Wer bei «Fotografie» vier Bilder sah, wusste nicht,
   ob sie zu Innen-, Aussen-, Drohnen- oder Gemeindeaufnahmen gehören.

       Ein Beleg ohne Beschriftung belegt nichts.

   Jetzt: eine Gruppe je angekreuzter Leistung, jede mit ihrem Namen.
   ================================================================== */
.mod-refs-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mod-refs-lbl { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-bottom: 12px; }
.mod-refs-lbl::before { content: ''; width: 20px; height: 1px; background: var(--rust); }
.mod-refs-lbl em { font-style: normal; font-family: var(--f-sans); color: inherit; text-transform: none; letter-spacing: .02em; font-weight: 500; font-size: 11.5px; margin-left: 4px; }

.mod-refs-inhalt { display: flex; flex-direction: column; gap: 14px; }
.mod-refs-gruppe { display: flex; flex-direction: column; gap: 7px; }
.mod-refs-sub {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.mod-refs-sub span { font-size: 10.5px; font-weight: 500; color: var(--ink-mute); }

/* Solange nichts angekreuzt ist, steht hier ein Satz statt Bilder.
   Ein leerer Kasten wäre die schlechtere Antwort: Er sähe aus, als
   hätten wir zu dieser Leistung nichts vorzuweisen. */
.mod-refs-leer { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); margin: 0; }

.mod-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-ref {
  width: 100px; height: 76px; border-radius: 8px; overflow: hidden;
  background: var(--bg-2); position: relative; cursor: zoom-in;
  transition: transform var(--d-base), box-shadow var(--d-base);
  border: 1px solid var(--line); padding: 0; font: inherit;
  display: block;
}
.mod-ref:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.mod-ref:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.mod-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Die Marke bleibt in der Kachel. «HINTERKAPPELEN» ist vierzehn
   Zeichen gesperrt — das lief bei 100 px Kachelbreite rechts hinaus
   und stand über dem Nachbarbild. */
.mod-ref-tag {
  position: absolute; top: 5px; left: 5px; right: 5px; z-index: 3;
  background: rgba(20,16,13,.85); color: var(--paper);
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 3px 6px; border-radius: 3px;
  max-width: calc(100% - 10px); width: max-content;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Das Zeichen sagt, was der Klick tut: Lupe vergrössert, Dreieck
   spielt ab, 360° führt zum Rundgang. Bis heute trug jede Kachel
   «cursor: zoom-in» und tat gar nichts. */
.mod-ref-zeichen {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,16,13,.16);
  opacity: 0; transition: opacity var(--d-base), background var(--d-base);
  color: var(--ink);
}
.mod-ref:hover .mod-ref-zeichen,
.mod-ref:focus-visible .mod-ref-zeichen { opacity: 1; }
.mod-ref-zeichen svg {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%;
  background: rgba(248,245,240,.94);
  box-shadow: 0 4px 14px rgba(20,16,13,.3);
}
/* Film und Rundgang zeigen ihr Zeichen immer — sie sind kein Bild,
   und das soll man sehen, BEVOR man klickt. Die Klassen sitzen an
   demselben Element, nicht an einem Vorfahren: «.mod-ref-video
   .mod-ref-zeichen» wäre ein Nachfahre und träfe nichts. */
.mod-ref-zeichen.mod-ref-video,
.mod-ref-zeichen.mod-ref-tour { opacity: 1; background: rgba(20,16,13,.26); }
.mod-ref[data-ref="video"], .mod-ref[data-ref="tour"] { cursor: pointer; }


/* ==================================================================
   DIE LEUCHTE
   ================================================================== */
.mod-leuchte {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(14,11,9,.92);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 48px);
}
.mod-leuchte[hidden] { display: none; }
.mod-lt-buehne {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 100%; max-height: 100%;
}
.mod-lt-inhalt { display: flex; max-width: 100%; min-height: 0; }
.mod-lt-inhalt img, .mod-lt-inhalt video {
  max-width: min(1200px, 92vw); max-height: 78vh;
  width: auto; height: auto; border-radius: 10px; display: block;
  background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.mod-lt-titel { font-size: 13px; color: rgba(248,245,240,.82); text-align: center; }

.mod-lt-zu, .mod-lt-pfeil {
  position: absolute; z-index: 2; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(248,245,240,.12); border: 1px solid rgba(248,245,240,.22);
  color: #F8F5F0; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--d-base);
}
.mod-lt-zu:hover, .mod-lt-pfeil:hover { background: rgba(248,245,240,.24); }
.mod-lt-zu { top: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px); }
.mod-lt-pfeil.links  { left: clamp(8px, 2vw, 22px);  top: 50%; transform: translateY(-50%); }
.mod-lt-pfeil.rechts { right: clamp(8px, 2vw, 22px); top: 50%; transform: translateY(-50%); }
.mod-lt-pfeil[hidden] { display: none; }
.mod-lt-zu svg, .mod-lt-pfeil svg { width: 19px; height: 19px; }

@media (max-width: 600px) {
  .mod-lt-pfeil { width: 38px; height: 38px; }
  .mod-lt-inhalt img, .mod-lt-inhalt video { max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
  .mod-body, .mod-body-inner, .mod-sub, .mod-sub-box svg, .mod-thumb img { transition: none !important; }
  .mod-sub:hover, .mod-sub:active { transform: none; }
}

@media (max-width: 600px) {
  .mod-head { grid-template-columns: 42px minmax(0, 1fr) 26px; gap: 10px; }
  .mod-thumb { width: 42px; height: 42px; }
  .mod-ref { width: calc(50% - 4px); }
}


/* --- Zustände: gewählt, aufgeklappt --- */
.mod-card:hover:not(.open) { border-color: var(--ink-mute); }
.mod-card.has-selection:not(.open) { border-color: var(--rust); background: var(--paper); }
.mod-card.open { border-color: var(--ink); background: var(--paper); box-shadow: var(--sh-sm); }
.mod-card.has-selection .mod-price-lbl strong { color: var(--rust); }
.mod-card.open .mod-chev { background: var(--ink); color: var(--paper); transform: rotate(180deg); }
.mod-card.open .mod-body-inner {
  opacity: 1; transform: none;
  transition-delay: .08s;
}
.mod-sub.on { box-shadow: 0 6px 18px rgba(20,16,13,.14); }
.mod-sub.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mod-sub.on .mod-sub-box { background: var(--rust); border-color: var(--rust); }
.mod-sub.on .mod-sub-box svg { opacity: 1; transform: none; }
.mod-sub.on .mod-sub-note { color: rgba(248,245,240,.62); }
.mod-sub.on .mod-sub-label { color: var(--bg); }
.mod-sub.on .mod-sub-price { color: var(--rust-lt); }

/* --- Modulkarten auf dem Handy --- */
@media (max-width: 780px) {
  .mod-head { padding: 10px 11px; gap: 11px; }
  .mod-thumb { width: 44px; height: 44px; }
  .mod-name { font-size: 14.5px; }
  .mod-sub { padding: 12px 13px; min-height: 54px; }
  .mod-sub-label { font-size: 13.5px; }
}


/* ==================================================================
   MODULE NEBENEINANDER — nur im Bestellprozess
   ------------------------------------------------------------------
   Auf der Paketeseite stehen die Module untereinander; dort ist die
   Spalte schmal und das ist richtig. Im Bestellprozess gibt es Platz,
   und sechs gestapelte Karten machen aus einer Übersicht eine Reise.

   Zwei Spalten, solange nichts aufgeklappt ist. Wer eine Karte
   öffnet, bekommt die volle Breite — die Referenzbilder und
   Unteroptionen brauchen sie.
   ================================================================== */
/* Batch 45 (4.10.2026): Gemessen wird die Spalte, nicht der Bildschirm.
   «ab 780 px Fenster» galt auch auf dem iPad quer mit Seitenleiste, wo
   die Spalte nur 450 px breit war: zwei Karten à 190 px, «Foto-grafie»
   getrennt und «Baulandvisualisierung» unter dem Pfeil. Andris Entscheid:
   Ist die Spalte schmal, stehen die Karten untereinander wie auf der
   Paketeseite; zu zweit erst ab 600 px Spalteninhalt. .co-panel ist dafür
   ein Behälter (checkout.html). Karten derselben Reihe sind gleich hoch. */
@container copanel (min-width: 600px) {
  .co-panel #svcPick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .co-panel .mod-card.open { grid-column: 1 / -1; }
  .co-panel #svcPick .mod-name { font-size: 14.5px; }
}

/* Hier stand eine Regel «.co-panel .mod-refs { grid-template-columns:
   repeat(4, 1fr) }». Sie hat nie gewirkt: .mod-refs ist eine
   Flex-Reihe, und «grid-template-columns» sagt einer Flex-Reihe
   nichts. Die Kacheln stehen ohnehin nebeneinander, so viele wie
   hinpassen.

       Eine Regel, die auf die falsche Anzeigeart zielt, ist nicht
       wirkungslos, sondern unsichtbar — und wird beim nächsten Mal
       als Erklärung gelesen.

   Am 20.9.2026 entfernt. */