/* ============================================================
   Modelle gesucht (/modelle) — Seitenspezifische Bauteile

   Das Grunddesign kommt unveraendert aus assets/css/back-to-work.css
   (LaserX-Port in Laserazor-Blau, alles unter .btw gescopet). Hier
   stehen nur die Teile, die es dort nicht gibt: die zweistufige
   Auswahl aus Studio und Gratis-Zone sowie ein paar Anpassungen an
   sieben statt neun Zonenkarten.

   Farben NIE hier definieren, immer die --lx-Variablen benutzen.
   ============================================================ */

/* ============================================================
   Zweistufige Auswahl: erst Studio, dann Gratis-Zone

   Beide Schritte benutzen dasselbe Bauteil, die Produktkarte aus
   dem neuen Buchungs-Funnel (no-limits-ai.com/newbooking):

     weisse Karte mit weichem Schatten, darin ein Foto mit eigener
     Rundung, oben rechts eine ausgeschnittene Ecke mit der einen
     Zahl, auf die es ankommt, unten auf dem Foto ein blauer
     Streifen mit Symbol und Klartext, darunter Name und Adresse.

   Zu den Radien: die Laserazor-Hardrule sind 8 px. Die Auswahl-
   karten sind davon ausgenommen, weil die Rundung Teil dieser
   Kartenform ist — genau wie im Funnel, wo dieselbe Ausnahme fuer
   den Paket-Schritt gilt. Karte 18 px, Foto 13 px, Ecke 12 px.
   Das gilt nur hier, sonst nirgends auf der Seite.
   ============================================================ */

.btw .mod-step {
  margin-block-start: var(--lx-space-m);
  padding-block-start: var(--lx-space-s);
  border-block-start: 1px solid var(--lx-line);
}
.btw .mod-step:first-of-type { border-block-start: 0; padding-block-start: 0; }

.btw .mod-step__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 var(--lx-space-s);
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: var(--lx-text-h3);
  line-height: var(--lx-leading-h3);
  letter-spacing: var(--lx-track-h3);
}
.btw .mod-step__num {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--lx-navy);
  color: var(--lx-text-inv);
  font-size: 1rem;
  line-height: 1;
}
.btw .mod-step__hint {
  margin: -0.4rem 0 var(--lx-space-s);
  font-size: var(--lx-text-sm);
  color: var(--lx-ink-soft);
}

/* Frueher war Schritt 2 gesperrt, bis das Studio stand: gedimmt, Klick
   abgefangen, sichtbar passierte nichts. Beide Schritte sind jetzt immer
   bedienbar, die Reihenfolge ist egal. Fehlt der jeweils andere, holt
   .is-nudge den offenen Schritt nach vorn. */

/* ------------------------------------------------------------
   Die Karte — ein Bauteil fuer Studios und Zonen
   ------------------------------------------------------------ */

.btw .mod-card {
  --mod-r-card: 18px;
  --mod-r-shot: 13px;
  --mod-r-ecke: 12px;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Das Radio liegt unsichtbar unter der Karte; geklickt wird das Label. */
.btw .mod-card label { display: block; block-size: 100%; cursor: pointer; }
.btw .mod-card input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  pointer-events: none;
}

.btw .mod-card__box {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: 6px 6px 0;
  border-radius: var(--mod-r-card);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 42, 92, .07), 0 10px 26px -16px rgba(0, 42, 92, .42);
  transition: box-shadow var(--lx-dur-fast) var(--lx-ease),
              translate var(--lx-dur-fast) var(--lx-ease);
}
.btw .mod-card:hover .mod-card__box {
  box-shadow: 0 2px 5px rgba(0, 42, 92, .1), 0 16px 32px -16px rgba(0, 42, 92, .5);
  translate: 0 -2px;
}
.btw .mod-card input:focus-visible + .mod-card__box {
  outline: 3px solid var(--lx-cta-ring);
  outline-offset: 3px;
}
.btw .mod-card input:checked + .mod-card__box {
  box-shadow: 0 0 0 2px var(--lx-cta), 0 10px 26px -16px rgba(0, 42, 92, .42);
}

/* ---- Das Foto ---- */
.btw .mod-card__shot {
  position: relative;
  flex: none;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mod-r-shot);
  background: var(--lx-pink-100);
}
.btw .mod-card__shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  transition: scale var(--lx-dur) var(--lx-ease);
}
.btw .mod-card:hover .mod-card__shot img { scale: 1.04; }

/* Die ausgeschnittene Ecke oben rechts. Das Weiss der Karte greift ins
   Foto hinein, darin steht die eine Angabe, die zaehlt — beim Studio die
   Stadt, bei der Zone der Preis. Der Ausschnitt entsteht aus zwei Radien
   und zwei Gegenboegen ueber die Nachbarecken, damit die Kante nicht als
   Kasten auf dem Foto klebt. Dieselbe Figur wie im Funnel. */
.btw .mod-card__corner {
  --mod-ecke-farbe: #fff;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 3;
  padding: 5px 10px 8px 13px;
  background: var(--mod-ecke-farbe);
  color: var(--lx-ink);
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 0 var(--mod-r-shot) 0 var(--mod-r-ecke);
}
.btw .mod-card__corner::before,
.btw .mod-card__corner::after {
  content: "";
  position: absolute;
  inline-size: 11px;
  block-size: 11px;
  background: radial-gradient(circle 11px at 0 100%, #0000 98%, var(--mod-ecke-farbe) 100%);
}
.btw .mod-card__corner::before { inset-block-start: 0; inset-inline-start: -11px; }
.btw .mod-card__corner::after  { inset-inline-end: 0; inset-block-end: -11px; }

/* Preisecke: der Nullpreis ist das Argument der Seite, also traegt er
   die Markenfarbe statt Schwarz. */
.btw .mod-card__corner--preis { color: var(--lx-cta); font-size: 14px; }

/* ---- Der blaue Streifen unten auf dem Foto ---- */
.btw .mod-card__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 5px 9px;
  background: linear-gradient(180deg, rgba(0, 85, 179, .93), rgba(0, 58, 128, .96));
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .005em;
  border-radius: 0 0 var(--mod-r-shot) var(--mod-r-shot);
}
.btw .mod-card__bar svg {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  color: #fff;
}
.btw .mod-card__bar span {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Der Haken, wenn die Karte gewaehlt ist ---- */
.btw .mod-card__mark {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--lx-cta);
  color: #fff;
  scale: 0;
  transition: scale var(--lx-dur-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btw .mod-card__mark svg { inline-size: .9rem; block-size: .9rem; }
.btw .mod-card input:checked + .mod-card__box .mod-card__mark { scale: 1; }

/* ---- Der Textteil ---- */
.btw .mod-card__body {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex: 1 1 auto;
  padding: 8px 5px 10px;
}
.btw .mod-card__text { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 1px; }
/* Auf der schmalen Karte passt "Danckelmannstrasse" in keine Zeile und
   ein einzelnes Wort bricht von sich aus nicht. lang="de" steht im
   html-Element, also trennt der Browser korrekt. */
.btw .mod-card__text b {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--lx-ink);
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Die Adresse wird nicht getrennt: "Mün-chen" sah nach Fehler aus. Sie
   bricht nur zwischen den Woertern. */
.btw .mod-card__text small {
  font-size: 11px;
  line-height: 1.35;
  color: var(--lx-ink-soft);
  overflow-wrap: break-word;
}

/* Die Stadt steht in der ausgeschnittenen Ecke und noch einmal am Ende der
   Adresse. Dort traegt sie Fettschrift, damit man die Stadt beim Ueberfliegen
   der Reihe findet, ohne die Ecken abzusuchen. */
.btw .mod-card__city { font-weight: 700; color: var(--lx-ink); }

/* Der leere Kreis rechts sagt: hier ist etwas zu waehlen. Gewaehlt wird
   er zum blauen Punkt; der grosse Haken liegt zusaetzlich auf dem Foto. */
.btw .mod-card__pick {
  flex: none;
  margin-block-start: 1px;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border: 1.5px solid var(--lx-line);
  border-radius: 50%;
  background: #fff;
  transition: border-color var(--lx-dur-fast) var(--lx-ease),
              background var(--lx-dur-fast) var(--lx-ease),
              box-shadow var(--lx-dur-fast) var(--lx-ease);
}
.btw .mod-card:hover .mod-card__pick { border-color: var(--lx-cta); }
.btw .mod-card input:checked + .mod-card__box .mod-card__pick {
  border-color: var(--lx-cta);
  background: var(--lx-cta);
  box-shadow: inset 0 0 0 3px #fff;
}

/* Die Reihe schneidet mit overflow-x alles ab, was aus ihr heraussteht.
   Unten waren es die geerbten 6 px, die den Kartenschatten gekappt haben.
   Links und rechts fehlte der Platz ganz: die erste Karte sass genau auf
   der Kante und hatte dort eine harte Schnittlinie statt eines Schattens.
   Der Innenabstand schafft den Platz, die gleich grosse Gegenmarge haelt
   die Karten trotzdem buendig zum Fliesstext. 14 px passen in die
   Seitenrinne (mindestens 16 px), es entsteht kein Querlauf. */
.btw .btw-swipe__track.mod-locs,
.btw .btw-swipe__track.mod-zones { padding-block: 4px 18px; }

@media (max-width: 51.999rem) {
  .btw .btw-swipe__track.mod-locs,
  .btw .btw-swipe__track.mod-zones {
    padding-inline: 14px;
    margin-inline: -14px;
    scroll-padding-inline: 14px;
  }
}

/* ------------------------------------------------------------
   Schritt 1: Studios — kleine Karten, auf dem Telefon wischbar
   ------------------------------------------------------------ */

.btw .mod-locs { margin-block-start: var(--lx-space-s); }

/* Ab Tablet ein Raster aus fuenf schmalen Karten. Die Reihe bleibt
   bewusst schmaler als der Textsatz: die Studiowahl ist ein Schritt,
   keine Bildstrecke. */
@media (min-width: 52rem) {
  .btw .mod-locswipe .btw-swipe__track {
    gap: clamp(10px, 1.2vw, 14px);
    max-inline-size: 52rem;
  }
}

/* Feste Kartenbreite nur, solange gewischt wird. Ab 52rem macht
   btw-swipe--mobile aus der Reihe ein Raster; eine feste Breite wuerde die
   Spalten dort ueberlaufen lassen und den Wisch-Hinweis auf dem Rechner
   stehen lassen. */
@media (max-width: 51.999rem) {
  .btw .btw-swipe .mod-locs .mod-card,
  .btw .btw-swipe .mod-zones .mod-card { inline-size: clamp(9rem, 42vw, 11rem); }
}

/* Studio ohne Modell-Aktion: sichtbar, aber nicht waehlbar. */
.btw .mod-card--off { cursor: default; }
.btw .mod-card--off label { cursor: default; }
.btw .mod-card--off .mod-card__box { box-shadow: 0 1px 2px rgba(0, 42, 92, .07); }
.btw .mod-card--off:hover .mod-card__box { translate: none; box-shadow: 0 1px 2px rgba(0, 42, 92, .07); }
.btw .mod-card--off:hover .mod-card__shot img { scale: 1; }
.btw .mod-card--off .mod-card__shot img { filter: grayscale(.55); opacity: .72; }
.btw .mod-card--off .mod-card__bar { background: linear-gradient(180deg, rgba(64, 64, 64, .82), rgba(38, 38, 38, .9)); }
.btw .mod-card--off .mod-card__pick { display: none; }
.btw .mod-card--off .mod-card__text b { color: var(--lx-ink-soft); }
/* ------------------------------------------------------------
   Schritt 2: Gratis-Zonen — dieselbe Karte, Preis in der Ecke
   ------------------------------------------------------------ */

.btw .mod-zones { margin-block-start: var(--lx-space-s); }

/* Sieben Zonen: ab Tablet vier in einer Reihe, ab Desktop alle sieben. */
@media (min-width: 52rem) { .btw .mod-zoneswipe { --btw-cols: 4; } }
@media (min-width: 74rem) { .btw .mod-zoneswipe { --btw-cols: 7; } }
@media (min-width: 52rem) {
  .btw .mod-zoneswipe .btw-swipe__track { gap: clamp(10px, 1.2vw, 14px); }
}

/* Die Zonenfotos sind quadratisch aufgenommen. Im 16:10-Ausschnitt der
   Karte sitzt das Motiv sonst zu tief, deshalb der Schnitt etwas hoeher. */
.btw .mod-zones .mod-card__shot img { object-position: center 40%; }

/* Was in "Intim komplett" steckt, stand frueher als dritte Zeile in der
   Karte. Die eine Karte war dadurch hoeher als die sechs anderen und zog
   die ganze Reihe mit. Der Satz steht jetzt einmal unter der Reihe. */
.btw .mod-zones__note {
  margin: 0.7rem 0 0;
  font-size: var(--lx-text-xs);
  color: var(--lx-ink-soft);
}


/* ============================================================
   Zusammenfassung und Absprung in den Funnel
   ============================================================ */

.btw .mod-summary {
  margin-block-start: var(--lx-space-m);
  padding: var(--lx-space-s);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
  background: var(--lx-bg);
  display: grid;
  gap: var(--lx-space-s);
}
@media (min-width: 48rem) {
  .btw .mod-summary {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--lx-space-s) var(--lx-space-m);
  }
}
.btw .mod-summary.is-ready { border-color: var(--lx-cta); background: var(--lx-sea-100); }

.btw .mod-summary__slots { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.btw .mod-summary__slot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--lx-text-sm);
  color: var(--lx-ink-soft);
}
.btw .mod-summary__slot b {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--lx-ink);
}
.btw .mod-summary__slot.is-open b { color: var(--lx-ink-soft); font-weight: 500; font-family: var(--lx-font-body); }
.btw .mod-summary__slot .lx-icon { inline-size: 1.3rem; block-size: 1.3rem; animation: none; }

.btw .mod-summary .lx-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: .45;
}

/* ============================================================
   Kleinteile
   ============================================================ */

/* Entdecken-Karten sind Links, sollen aber wie Infoboxen aussehen. */
.btw a.mod-discover { text-decoration: none; color: inherit; transition: border-color var(--lx-dur-fast) var(--lx-ease); }
.btw a.mod-discover:hover { border-color: var(--lx-dune); }
.btw .mod-discover__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--lx-text-sm);
  color: var(--lx-pink-700);
}
.btw .mod-discover__cta svg { inline-size: 1em; block-size: 1em; }
@media (min-width: 62rem) {
  .btw .mod-discovergrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Drei Infoboxen nebeneinander statt zwei. */
@media (min-width: 52rem) {
  .btw .mod-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Technik: Geraetefoto links, Text rechts, beide oben buendig. Das Foto
   ist ein freigestelltes Produktbild auf Weiss, deshalb contain statt
   cover: sonst schneidet die Karte Griff und Rollen ab. */
.btw .mod-tech-grid { align-items: start; }
.btw .mod-tech-photo { background: #fff; }
.btw .mod-tech-photo img { aspect-ratio: 4 / 5; object-fit: contain; }
@media (min-width: 62rem) {
  .btw .mod-tech-grid { grid-template-columns: 0.8fr 1.2fr; }
}

.btw .mod-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-block-start: var(--lx-space-m);
  padding-block-start: var(--lx-space-s);
  border-block-start: 1px solid var(--lx-line);
}
.btw .mod-partners__label {
  font-size: var(--lx-text-xs);
  color: var(--lx-ink-soft);
  inline-size: 100%;
}
.btw .mod-partners img { block-size: 28px; inline-size: auto; opacity: .8; }
.btw .mod-partners__lutronic { block-size: 22px; }

/* Der site-weite Modelle-Stoerer unten links wirbt auf dieser Seite fuer
   diese Seite und liegt ausserdem der mitlaufenden CTA-Leiste im Weg. */
.btw-body .lz-models-badge { display: none !important; }

/* ============================================================
   Hero auf dem Telefon
   ============================================================ */

/* back-to-work.css loest die Textspalte auf dem Telefon auf und vergibt
   feste Reihenfolgen. Der Kleingedruckte-Satz kommt auf dieser Seite dazu
   und braucht deshalb eine eigene Position, sonst rutscht er nach ganz
   oben ueber die Beschriftung. */
@media (max-width: 52rem) {
  .btw .btw-hero-grid > .btw-hero-text > .lx-fine { order: 10; }
}

/* Hinweis, wenn die Zone steht und das Studio noch fehlt. Der alte
   Hinweis war ein rosa Ueberschriftton und ein 4-px-Schatten fuer 1,4 s:
   auf einer hellen Seite sieht das niemand, der Klick wirkte tot. Jetzt
   bekommt der offene Schritt eine eigene Flaeche, eine Zeile Klartext und
   einen Rahmen, der zweimal pulst. */
.btw .mod-step.is-nudge {
  background: var(--lx-cta-050, #eef5ff);
  box-shadow: 0 0 0 2px var(--lx-cta);
  border-radius: 8px;
  padding: 14px;
  margin-inline: -14px;
}
.btw .mod-step.is-nudge .mod-step__head { color: var(--lx-cta); }
.btw .mod-step.is-nudge .mod-step__hint::after {
  content: "Noch ein Schritt: wähle hier dein Studio, dann öffnet sich der Kalender.";
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--lx-cta);
}
.btw .mod-step.is-nudge .mod-locs .mod-card__box {
  animation: mod-nudge 1.1s var(--lx-ease) 2;
}
@keyframes mod-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 102, 204, 0); }
  35%      { box-shadow: 0 0 0 7px rgba(0, 102, 204, .3); }
}
@media (prefers-reduced-motion: reduce) {
  .btw .mod-step.is-nudge .mod-locs .mod-card__box { animation: none; }
}

/* ============================================================
   HERO VON /modelle
   Alles hier haengt an .mod-hero, weil back-to-work.html dieselbe
   Datei laedt und ebenfalls .mod am <main> traegt. Ohne diesen
   eigenen Haken faerbte jede Zeile die zweite Landingpage mit.
   ------------------------------------------------------------
   Der Hero war zu hoch: Headline, Fliesstext, vier Chips, ein
   grosser 0-Euro-Kasten, die Countdown-Karte, eine Handschrift-
   Notiz und erst dann die Knoepfe. Der Preiskasten wiederholte,
   was die Headline, der zweite Fakt und der Sticker auf dem Video
   ohnehin sagen, und ist deshalb raus. Die Notiz zeigte mit einem
   Pfeil auf genau diesen Kasten und ist mit ihm gegangen.
   ============================================================ */

/* ---- Zwei Belege statt einer Liste ------------------------
   Vier Zeilen untereinander frassen Hoehe, ohne mehr zu sagen.
   Geblieben ist der Preis, dazu kommt das, was Fremde wirklich
   ueberzeugt: die Google-Bewertung des Studios. Beides steht
   nebeneinander in einer Zeile. */
.mod-hero .mod-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  margin-block: 1.1rem 1.3rem;
}
.mod-hero .mod-proof__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--lx-text-base);
  font-weight: 600;
  color: var(--lx-ink);
}
/* Zweifarbiges Icon: die versetzte Geisterlinie traegt den hellen
   Ton, die Hauptlinie das kraeftige Blau. Kein Kasten, keine Kante. */
.mod-hero .mod-proof__fact .lx-icon {
  inline-size: 1.95rem;
  block-size: 1.95rem;
  color: var(--lx-cta);
}
.mod-hero .mod-proof__fact .lx-icon path { stroke-width: 2.1; }
.mod-hero .mod-proof__fact .lx-icon .ghost {
  opacity: 1;
  stroke: color-mix(in srgb, var(--lx-cta) 34%, #ffffff);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Das Google-Siegel -------------------------------------
   Bewusst eine helle Flaeche statt einer nackten Zeile: ein
   Bewertungssiegel wird nur geglaubt, wenn es wie eines aussieht.
   Radius bleibt bei den erlaubten 6 px, keine farbige Kante. */
.mod-hero .mod-goog {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.85rem;
  background: #ffffff;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--lx-navy) 8%, transparent);
  color: var(--lx-ink);
  text-decoration: none;
  transition: border-color var(--lx-dur) var(--lx-ease), box-shadow var(--lx-dur) var(--lx-ease);
}
.mod-hero .mod-goog:hover,
.mod-hero .mod-goog:focus-visible {
  border-color: var(--lx-cta);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lx-navy) 14%, transparent);
}
.mod-hero .mod-goog__g { display: inline-flex; flex: none; }
.mod-hero .mod-goog__g svg { inline-size: 1.3rem; block-size: 1.3rem; display: block; }
.mod-hero .mod-goog__txt { display: grid; gap: 1px; line-height: 1.15; }
/* Google-Gold, kein Schlagschatten. */
.mod-hero .mod-goog__stars {
  color: #f4b400;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.mod-hero .mod-goog__meta {
  font-size: var(--lx-text-sm);
  color: var(--lx-ink-soft);
}
.mod-hero .mod-goog__meta b { color: var(--lx-ink); font-weight: 700; }

/* ---- Der Sticker auf dem Video -----------------------------
   Er darf jetzt ausdruecklich ueber die Kante ragen. Dafuer gibt
   die Fotobox ihr overflow:hidden auf, und Video wie Koernung
   holen sich den Radius selbst, sonst stuenden dort Ecken. */
.mod-hero .btw-hero-photo { overflow: visible; }
.mod-hero .btw-hero-photo video,
.mod-hero .btw-hero-photo > img,
.mod-hero .btw-hero-photo::before { border-radius: var(--lx-r-md); }
.mod-hero .lx-hero__img .lx-sticker--onphoto {
  inset-block-start: 1.8rem;
  inset-inline-start: -1.7rem;
  inset-inline-end: auto;
  max-inline-size: min(94%, 21rem);
  font-size: clamp(1.35rem, 1rem + 0.9vw, 2rem);
  padding: 0.4em 0.75em;
  line-height: 1.12;
  rotate: -4deg;
}
/* Die Pop-Animation endet sonst bei 8 Grad und dreht den Sticker
   nach der Einblendung wieder in die falsche Richtung. */
@keyframes mod-pop { from { scale: 0; rotate: -14deg; } to { scale: 1; rotate: -4deg; } }
.mod-hero .lx-sticker--onphoto.lx-inview { animation-name: mod-pop; }


/* ---- Der Hero baut jetzt niedriger ------------------------
   Ohne den Preiskasten und die Notiz traegt die Spalte weniger,
   also darf auch der Rahmen enger sitzen. */
.btw .lx-hero.mod-hero { padding-block: 2.25rem 4.5rem; }
.mod-hero .lx-hero__ctas { margin-block-start: 1.4rem; }

@media (max-width: 52rem) {
  /* Auf dem Telefon loest sich die Textspalte in display:contents auf,
     jede Kachel braucht deshalb ihre eigene Reihenfolge. Ohne diese
     Zeile spraenge der Beleg-Block vor die Schlagzeile. */
  .mod-hero .btw-hero-grid > .btw-hero-text > .mod-proof { order: 5; }
  /* Weiter nach links darf der Sticker nicht, sonst schiebt er die
     Seite quer. */
  .mod-hero .lx-hero__img .lx-sticker--onphoto {
    inset-inline-start: -0.6rem;
    inset-block-start: 1rem;
    font-size: 1.2rem;
  }
}