/* 2HOT2PAY — Landing Pages (Paket L2, Trennung 24.09.). Nur von
   src/landing.template.html geladen, NIE von der Startseite — css/site.css
   ist auf den Live-Stand eingefroren (Founder-Regel 24.09., siehe
   tools/build.test.mjs), Landing-Anpassungen kommen ausschließlich hierher.
   .price-card/.steps/.card-grid/.audience-card &c. selbst bleiben
   unangetastet in site.css; hier stehen nur eigene Klassen bzw. gezielte
   Zusatzregeln (siehe .steps--landing, .price-card--offer), die die
   Startseite gar nicht lädt. */

/* Brotkrumen — .nav ist `position: fixed` und nimmt keinen Platz im
   Dokumentfluss ein; das Padding gleicht das aus, sonst überlappt die feste
   Kopfzeile die erste Zeile (Fund 24.09., Sichtprüfung bei 390px). */
.breadcrumbs { padding-top: calc(var(--sp-16) + 24px); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: var(--sp-2); color: var(--muted-2); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--foreground); }
.breadcrumbs li[aria-current="page"] { color: var(--foreground); }

/* Hero (Business): Restaurant-Landing-Page. Vollflächen-Video hinter
   Titel/Text/Knöpfen, exakt das Muster von .hero__video-loop
   (index.template.html), eigene Klassen (hero-business__video-loop statt
   der Startseiten-Klassen — build.test.mjs erzwingt getrennte Namen). Der
   ::after-Verlauf ist dunkler als auf der Startseite (Nachtfahrt, gedeckte
   Farben) — die Sushi-Theke hat helle pinke Neon-Flächen, ohne stärkere
   Abdunklung reißt der Kontrast zum Text (WCAG AA) an den hellsten Stellen.
   Nur ein 16:9-Zuschnitt vorhanden, auf Mobil object-position weiter unten
   justiert, damit Frau und Koch im sichtbaren Ausschnitt bleiben.
   .hero-business bekommt hier KEIN zweites Top-Padding mehr für die feste
   Kopfzeile — .breadcrumbs (direkt davor im Fluss) übernimmt den Ausgleich
   bereits vollständig; ein zweites padding-top führte auf 390px zu einer zu
   großen Lücke, in der bei kurzer Sichtprüfung während der Auffahr-Animation
   die erste Zeile teils unter der Panel-Oberkante lag (Founder-Fund 24.09.,
   Behebung: eigenes Hero-Padding raus, nur noch .breadcrumbs sorgt für
   Abstand zur Kopfzeile, dazwischen ein normaler Abschnittsabstand). */
/* padding-bottom stand vorher auf var(--sp-20) — dieses Token existiert
   nicht (Tokens gehen von --sp-16 auf --sp-24, siehe tokens.css), die
   Deklaration war damit ungültig und fiel auf 0 zurück: die Knöpfe klebten
   an der Panelkante (Founder-Fund 24.09.). Jetzt ein echter Abstand unter
   den Knöpfen — vom Founder als "perfekt" abgenommen (24.09.).
   hero.trust (Silber/Gratismonat-Zeile) ist raus (Founder-Wunsch 24.09.,
   der Satz stand nur für den Business-Tarif und passte nicht mehr zur
   Positionierung). Damit der abgenommene Abstand unter den Knöpfen optisch
   gleich bleibt, übernimmt padding-bottom die Höhe, die vorher der
   Trust-Text plus sein margin-top belegte (var(--sp-16) + var(--sp-4) statt
   var(--sp-10)). */
.hero-business { padding-top: var(--sp-10); padding-bottom: calc(var(--sp-16) + var(--sp-4)); }
.hero-business__top { position: relative; z-index: 1; }
/* Founder-Fund 24.09. (Desktop, ca. 1440-2000px): 52ch ließ die h1 zu früh
   umbrechen (schmale Spalte), dazu klebte der Lead direkt an der h1 (beide
   margin:0 aus site.css) und der É-Akzent von "CAFÉS" stieß fast an die
   Zeile darüber. Breite jetzt exakt wie .section-head (site.css, 760px) statt
   einer eigenen ch-Zahl — dieselbe Spaltenbreite wie die abgenommenen
   Abschnitte (benefits/examples/steps). Der Lead-Abstand ist bewusst größer
   als .section-head .lead (var(--sp-3)): der Hero-Titel ist die größte
   Überschrift der Seite und verträgt mehr Luft. line-height nur hier auf
   1.15 (statt der globalen 1.1 aus site.css), damit Akzente wie "É" nicht an
   die Zeile darüber stoßen. */
.hero-business__copy { max-width: 760px; }
.hero-business__copy h1 { line-height: 1.15; }
.hero-business__copy .lead { margin-top: var(--sp-6); }
.hero-business__ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }
.hero-business__video-loop {
  position: absolute; inset: 0; z-index: 0; border: 0; border-radius: inherit;
}
.hero-business__video-loop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, .72) 0%, rgba(10, 10, 11, .88) 55%, rgba(10, 10, 11, .93) 100%);
}
.hero-business__video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; object-position: 62% 40%; }
@media (max-width: 700px) {
  .hero-business__video-el { object-position: 70% 38%; }
}

/* Einfacher Textblock (Ehrlich gesagt) */
.text-block { max-width: 70ch; }
.text-block p { color: var(--muted); }

/* "Was du davon hast" (#benefits): .panel padding-top ist
   var(--section-space) = clamp(64px, 10vw, 128px) — auf Desktop-Breiten
   spürbar mehr als die 64px, die hier gebraucht werden (Founder-Fund
   24.09., zu viel Luft über der Überschrift). Nur padding-top wird
   verkleinert, padding-bottom bleibt beim Panel-Standard. */
#benefits.panel { padding-top: var(--sp-16); }
@media (max-width: 640px) {
  #benefits.panel { padding-top: var(--sp-12); }
}

/* Vorteile — vier Karten, zwei mit Bild */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.benefit-card { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.benefit-card__media { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.benefit-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.benefit-card p { margin: 0; color: var(--muted); }
@media (max-width: 1100px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefit-grid { grid-template-columns: 1fr; } }

/* Häkchen-Liste (Beispiele) — gleiches Muster wie .price-card__features */
.check-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); max-width: 60ch; }
.check-list li { padding-left: 26px; position: relative; color: var(--muted); }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--pink); font-weight: 700; }
.check-list__note { margin-top: var(--sp-4); color: var(--muted-2); font-size: var(--fs-small); max-width: 60ch; }

/* FAQ (Partial fertig, wartet auf Rüdiger R-S1 — siehe src/pages.json) */
.faq-list { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); max-width: 76ch; }
.faq-item { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-6); }
.faq-item summary { cursor: pointer; list-style: none; padding: var(--sp-4) 0; font-weight: 700; display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--pink); font-weight: 700; }
.faq-item[open] summary::after { content: '–'; }
.faq-item summary h3 { margin: 0; font: inherit; }
.faq-item__answer { margin: 0 0 var(--sp-4); color: var(--muted); }

/* Auch interessant — Linkliste am Seitenende */
.related-links { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.related-links a { display: inline-block; padding: var(--sp-3) var(--sp-6); border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--foreground); }
.related-links a:hover { border-color: var(--pink-line); color: var(--pink); }

/* --- Startangebot Restaurant-Seite (Founder-Wunsch 24.09., "2 Monate
   kostenlos") — eigene Klassen, NICHT an der Basisklasse .price-card/
   .price-card__price selbst: dieselbe Basis nutzt auch die Startseite (in
   site.css, dort unverändert). .price-card--offer trägt die Kachel-
   Modifikatorklasse (nur von src/partials/sections/pricing.html gesetzt).
   .price-card__ribbon-corner ist ein eigener, kleiner Eck-Container (Muster:
   "CSS corner ribbon" mit Container statt direkt an der Karte) — top:0/
   right:0/width+height gleich groß, overflow:hidden. Das entkoppelt die
   Bandgeometrie von der tatsächlichen Kartenbreite (die je nach Spaltenzahl/
   Breakpoint stark variiert) und garantiert, dass das Band bei jeder
   Kartengröße lückenlos von der Kachel-Oberkante bis zur Kachel-Rechtskante
   reicht, ohne über die Karte hinauszuragen (Founder-Fund 24.09., Band war
   vorher zu kurz/mit Lücke zur Oberkante). Die Ecke selbst ist abgerundet
   (Container erbt praktisch die Kartenkontur über die Kartenkante als
   Clip-Grenze), overflow:hidden an der Karte (.price-card--offer) kappt
   zusätzlich jeden Rest, der über den Eck-Container hinausragen könnte. */
.price-card--offer { position: relative; overflow: hidden; }
.price-card__ribbon-corner {
  position: absolute; top: 0; right: 0; width: 130px; height: 130px;
  overflow: hidden; pointer-events: none; z-index: 2;
}
.price-card__corner-ribbon {
  position: absolute; top: 28px; right: -34px; width: 170px;
  transform: rotate(45deg); background: var(--pink); color: #fff;
  text-align: center; padding: 6px 0; font: 700 11px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .04em;
}
.price-card__oldPriceRow { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); }
.price-card__oldPrice { color: var(--muted); font: 400 1.25rem var(--font-display); text-decoration: line-through; }
.price-card__discountBadge { font: 700 var(--fs-label)/1 var(--font-body); color: var(--pink); text-transform: uppercase; letter-spacing: .02em; }
.price-card__offerNote { margin: 0; }

/* --- "In vier Schritten" (Founder-Fund 24.09.): eigenes Modifier statt
   .steps/.steps__num direkt zu ändern — dieselben Klassen laufen auch in
   "So läuft's" auf der Startseite, die soll unverändert bleiben.
   align-items:baseline richtet sich nach den Schriftmetriken von Anton
   (Zahl) und Geist (Text) unterschiedlich aus, das sah nach "Zahl oben,
   Text tiefer" aus — jetzt oben bündig, die Zahl bekommt line-height:1
   (eigene Zeilenbox), der Text einen kleinen Innenabstand, damit beide auf
   gleicher Höhe beginnen. */
.steps--landing { margin-top: var(--sp-8); }
.steps--landing li { align-items: flex-start; }
.steps--landing .steps__num { line-height: 1; }
.steps--landing li > span:last-child { padding-top: .35rem; }

/* --- "Gutes Essen allein füllt keine Tische." + "Gesehen werden, nicht nur
   fotografiert." (Founder-Feedback 24.09., Screenshot Desktop): ein
   Abschnitt, zwei gleich große Karten nebeneinander (.compare-grid),
   vertikal zentriert mit eigenem Innenabstand statt am Panel-Rand zu
   kleben.
   Überarbeitet 24.09. (drittes Founder-Feedback: "Gesehen werden" ist
   mega): beide Karten nutzen dieselbe Hintergrund-Regel 1:1 — gleiche
   Bild-URL/srcset, gleiche Abdunklung. Keine Karten-Modifier mehr
   (--tone/--photo raus), nur noch die Basisklassen.
   Vierte Runde (24.09., Founder: "das Foto so machen, dass es ganz drauf
   passt, es ist oben und unten abgeschnitten"): object-fit:contain ließ
   das Bild als schmalen Streifen mit leeren dunklen Rändern in der Karte
   stehen. Fix je nach Platz — Bildmaß laut HTML 1672×941 (--compare-ratio):
   - Ab 901px (2-spaltige Karte, Desktop/Tablet): die Karte bekommt das
     Bildseitenverhältnis als *Mindesthöhe* (aspect-ratio statt fixer Höhe).
     Das Vollbild sitzt per object-fit:cover randlos hinter dem Text.
   - Bis 900px stand hier eine eigene Handy-Lösung mit Bild oben und
     negativem margin-top auf der Überschrift — siehe sechste Runde unten,
     die das wieder verworfen hat.
   Fünfte Runde (24.09., Nachprüfung): auf jeder Desktop-Breite (901–1920px)
   schnitt aspect-ratio + overflow:hidden auf .compare-card den Text unten
   ab — Grund ist die CSS-"automatic minimum size" von Grid-Items: die
   greift nur bei overflow:visible, bei overflow:hidden wird sie 0 und
   aspect-ratio gewinnt fix gegen den Inhalt. Fix: overflow:hidden/
   border-radius wandern von der Karte auf .compare-card__bg (nur die
   Bildebene wird beschnitten), die Karte selbst bleibt overflow:visible
   und wächst mit dem Text über die Bild-Mindesthöhe hinaus — object-fit:
   cover füllt die gewachsene Karte weiterhin randlos. Weil beide Karten im
   selben Grid-Row liegen, zieht Grid-stretch sie automatisch auf gleiche
   Höhe (die der Karte mit dem längeren Text).
   Sechste Runde (24.09., Founder-Fund): auf dem Handy lag das Bild oben in
   der Karte und der Text darunter — der Founder will das ausdrücklich
   nicht, das Bild ist IMMER Hintergrund hinter dem Text, auf jeder Breite,
   auch auf dem Handy, keine eigene Handy-Lösung mit Bild oben. Bis 900px
   jetzt wie ab 901px: .compare-card__bg absolut (inset 0), Bild per
   object-fit:cover randlos, Verlauf per ::after wie ab 901px, nur etwas
   dunkler für die Lesbarkeit auf dem schmalen Screen. Keine aspect-ratio
   auf dem Handy — die Karte wächst weiterhin mit dem Text (fünfte Runde),
   nur eine min-height, damit auch ein kurzer Text noch genug vom Bild
   zeigt. */
/* Siebte Runde (Founder-Fund 24.09., ca. 2000px Fensterbreite): das Raster
   lief rechts aus dem Bildschirm, links blieb ein leerer Rand. Ursache: die
   "automatic minimum size" von Grid-Spuren -- ein 1fr-Track ist eigentlich
   minmax(auto, 1fr), und "auto" fällt bei overflow:visible (fünfte Runde
   oben, für das Höhenwachstum mit langem Text gebraucht) auf die
   min-content-Breite des Karteninhalts zurück. Bei viel Fensterbreite kann
   diese min-content-Breite (durch aspect-ratio auf die Kartenhöhe
   umgerechnet) größer werden als 1fr, die Spur wächst über den Container
   hinaus. minmax(0, 1fr) kappt nur die BREITEN-Mindestgröße auf 0 (Standard-
   fix für dieses Grid-Verhalten) -- overflow:visible auf .compare-card bleibt
   für die Höhen-Automatik unangetastet. */
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: stretch; }
.compare-card {
  --compare-ratio: 1672 / 941;
  position: relative; border-radius: var(--r-card); width: 100%; min-width: 0;
  background: var(--band-graphite); display: flex; align-items: center;
}
.compare-card__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.compare-card__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.compare-card__content { position: relative; z-index: 1; padding: var(--sp-6) var(--sp-4); }
.compare-card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.compare-card mark.mark { background: none; color: var(--pink); font-weight: inherit; }
@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .compare-card { min-height: 280px; border: none; }
  .compare-card__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 11, .45) 0%, rgba(10, 10, 11, .6) 55%, rgba(10, 10, 11, .8) 100%);
  }
  .compare-card__content { padding: var(--sp-8) var(--sp-6); }
}
@media (min-width: 901px) {
  .compare-card { aspect-ratio: var(--compare-ratio); border: 1px solid var(--border-strong); }
  .compare-card__bg { border-radius: calc(var(--r-card) - 1px); }
  .compare-card__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 11, .32) 0%, rgba(10, 10, 11, .5) 55%, rgba(10, 10, 11, .72) 100%);
  }
  .compare-card__content { padding: var(--sp-10) var(--sp-8); }
  .compare-card__title { margin-bottom: var(--sp-6); }
}

/* --- Gutschein-Karten ("Ideen für deinen ersten Gutschein") —
   TicketCard-Optik aus der App (platform/components/ui/TicketCard.tsx) als
   Vorbild: Lochrand-Kerben per mask-image (zwei radial-gradient-"Löcher",
   mask-composite: intersect — dieselbe Technik wie dort), gestrichelte
   Trennlinie, pinker Rand. Fällt ohne mask-composite: intersect-Unterstützung
   auf eine normale Karte ohne Kerben zurück (rein dekorativ). */
.examples-hero { position: relative; overflow: hidden; isolation: isolate; }
.examples-hero__bg { position: absolute; inset: 0; z-index: -1; }
.examples-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.examples-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,8,.88) 0%, rgba(8,6,8,.72) 30%, rgba(8,6,8,.8) 100%); }
.examples-hero__content { position: relative; padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.voucher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.voucher-card {
  position: relative; border-radius: var(--r-card); border: 1px solid var(--pink-line);
  background: rgba(28, 28, 31, .82); backdrop-filter: blur(2px); padding: var(--sp-6);
  transition: transform .25s var(--ease-out), border-color .2s var(--ease-out);
  -webkit-mask-image: radial-gradient(circle 9px at 0 60%, transparent 9px, black 9.5px), radial-gradient(circle 9px at 100% 60%, transparent 9px, black 9.5px);
  mask-image: radial-gradient(circle 9px at 0 60%, transparent 9px, black 9.5px), radial-gradient(circle 9px at 100% 60%, transparent 9px, black 9.5px);
  mask-composite: intersect;
}
.voucher-card__occasion { font: 700 var(--fs-label)/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--pink); }
.voucher-card__deal { margin-top: var(--sp-2); font: 400 1.5rem/1.15 var(--font-display); text-transform: uppercase; }
@media (hover: hover) { .voucher-card:hover { transform: translateY(-6px); border-color: var(--pink); } }
@media (max-width: 900px) { .voucher-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .voucher-grid { grid-template-columns: 1fr; } }
.examples-hero__tip {
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-6); border: 1px solid var(--pink-line);
  border-left: 3px solid var(--pink); border-radius: var(--r-card); background: rgba(20, 10, 14, .82); backdrop-filter: blur(2px);
  color: var(--foreground); font-size: var(--fs-small); max-width: 70ch;
}

/* --- "Was wir versprechen und was nicht." (Paket L2, 24.09.; überarbeitet
   24.09. Founder-Feedback "nicht mehr Fotos, alles war als Hintergrund
   gedacht"): auf JEDER Breite ein Vollflächen-Hintergrund (Muster wie
   .examples-hero__bg) statt eines eigenen Foto-Blocks im Textfluss — kein
   zusätzlicher Bild-Streifen mehr. Mobil ist der Text volle Breite über dem
   Bild, deshalb ein kräftiger, über die ganze Fläche wirkender Verlauf statt
   nur oben/unten. Ab 900px sitzt der Text links auf einem linksseitigen
   Verlauf, das Bild bleibt rechts frei (Muster wie zuvor). object-position
   rechts/oben, weil in der neuen Zuschnittfassung
   (05-mia-dinner-freundinnen-zuschnitt.png, Medien/BESTAND.md) die
   Freundinnen über die halbe bis rechte Bildhälfte verteilt sind. */
.honesty { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: center; }
.honesty__media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.honesty__img { width: 100%; height: 100%; object-fit: cover; object-position: right top; display: block; }
.honesty__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 12, 13, .55) 0%, rgba(15, 12, 13, .82) 45%, rgba(15, 12, 13, .95) 100%);
}
.honesty__content { position: relative; z-index: 1; padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.honesty__copy { max-width: 70ch; }
/* Founder-Fund 24.09. (Desktop, ca. 1440-2000px): 46ch ließ die h2 dreizeilig
   in einer sehr schmalen Spalte stehen, der Fließtext klebte direkt an der
   Überschrift (h2 und p beide margin:0). Breite jetzt wie .section-head
   (site.css, 760px) statt einer eigenen ch-Zahl, Abstand h2 -> Text wie dort
   (var(--sp-3)). .honesty__content ist ein Flex-Kind mit margin:0 auto
   (.wrap) und schrumpft auf seinen Inhalt, bleibt also zentriert -- die
   breitere Spalte reicht dadurch weiter nach rechts ins Bild als vorher,
   deshalb wandert der Verlauf hier mit (Prüfung per Screenshot 1440/2000px). */
.honesty__copy p { margin-top: var(--sp-3); }
@media (min-width: 900px) {
  .honesty__img { object-position: right center; }
  .honesty__scrim {
    background: linear-gradient(90deg, rgba(15, 12, 13, .96) 0%, rgba(15, 12, 13, .85) 40%, rgba(15, 12, 13, .4) 70%, rgba(15, 12, 13, 0) 92%);
  }
  .honesty__content { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  .honesty__copy { max-width: 760px; }
}

/* --- KI-Vermerk (Rüdiger-Prüfung 24.09., Abschnitt 5): kleines Etikett
   unten in der Ecke auf jedem Foto/Video mit Menschen — gleiche Optik wie
   platform/components/ui/AiGeneratedBadge.tsx (heller Pill, EU-Zeichen aus
   platform/public/brand/eu-ai-generated-white.svg unverändert kopiert, hier
   unten statt oben, weil die Kartentexte auf dieser Seite oben liegen).
   Baustein selbst kommt aus tools/build.mjs (aiLabel.badge_html, Schalter
   src/features.json → aiLabel) — jeder Bildcontainer, der ihn einsetzt,
   braucht position:relative + overflow:hidden (siehe die jeweiligen
   Medien-Container). */
.ai-badge { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px); padding: 4px 9px; border-radius: 999px; }
/* .ai-badge .ai-badge__icon (zwei Klassen) statt nur .ai-badge__icon: das
   Etikett steckt in Bildcontainern, die selbst ein generisches "img {
   width:100%; height:100%}" auf ihre Kinder anwenden (z. B.
   .benefit-card__media img, .examples-hero__bg img) — eine Klasse allein
   verliert gegen Klasse+Typ-Selektor an Spezifität, das Icon füllte sonst
   die ganze Kachel aus (Fund 24.09., Sichtprüfung). */
.ai-badge .ai-badge__icon { height: 13px; width: auto; max-width: none; display: block; }
.ai-badge__text { font: 700 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: #fff; white-space: nowrap; }

/* Kontaktformular auf der Restaurant-Seite (Founder 25.09.): Luft zwischen Überschrift und Text, wie in den anderen Abschnittsköpfen. */
.contact__intro .lead { margin-top: var(--sp-4); }