/* ============================================================
   SEITE — Sektionslayout dieser Landingpage.

   Hier lebt alles, was diese eine LP ausmacht: Hero, Sektionen,
   Karten, Raster. Wird pro LP neu geschrieben.

   Was hier NICHT hingehoert: Farbwerte als Literal (nimm die Tokens
   aus kern.css), Knopfstile, Modal- oder Dialogmechanik. Wenn du hier
   etwas baust, das jede LP braeuchte, gehoert es in den Kern.

   Der Inhalt unten ist der Stand der Money-Mind-LP und dient als
   Referenz. Fuer eine neue LP: rauswerfen und neu schreiben.
   ============================================================ */

/* --- aus styles.css --- */

.gold { color: var(--gold); }

/* ============================================
   HERO
   ============================================ */
.hero {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  padding: 60px 0 40px;
}

/* Zeichenregen. Nur ab 901px, kern.js steigt darunter aus — das Canvas
   bleibt dann schlicht leer. 0.18 ist der Katalogwert: darueber liest es
   sich als Muster statt als Atmosphaere. */
.hero__matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
}

/* Die Aura: vier goldene Radialflaechen, Deckkraft zwischen 0.05 und 0.20.
   Sie laeuft als einziger autonomer Effekt auch auf Mobil. */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(201, 168, 76, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(201, 168, 76, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 10% 60%, rgba(201, 168, 76, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Die Drift. 20s, nicht 8s: bei 8s liest es sich als Pulsieren, bei 20s
   als Licht das sich bewegt. */
.hero__bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(201, 168, 76, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 80% 20%, rgba(201, 168, 76, 0.05) 0%, transparent 50%);
  animation: heroShimmer 20s ease-in-out infinite alternate;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* Logo statt der frueheren Augenbraue. Bewusst klein: die Datei traegt eine
   cremefarbene Scheibe hinter dem Mandala und waere auf dem fast schwarzen
   Hero sonst die hellste und groesste Flaeche ueber der Headline. Bei 60px
   liest sie sich als Siegel. Ausserhalb des Kreises ist die Datei echt
   transparent — es entsteht kein Kasten. */
.hero__logo {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}

/* Hiess frueher .hero__date-info und trug Datum, Ort und Knappheit in einer
   Zeile. Datum und Ort stehen jetzt in .hero__format direkt unter der H1 —
   hier bleibt nur die Platzzahl. */
.hero__knappheit {
  margin-top: 16px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.1vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 28px;
}

.hero__headline em {
  font-style: italic;
  color: var(--gold);
}

/* --- Hero-Video: Hintergrundmodus ---
   Das Video laeuft stumm in Schleife, unser eigener Knopf liegt
   flaechendeckend darueber. pointer-events:none haelt Vimeos
   Bedienelemente unerreichbar — ohne Hover blenden sie sich nie ein, und
   der einzige Weg hinein ist unser Knopf. Erst --ton gibt sie frei. */
/* Der Videokasten. Festes Seitenverhaeltnis, damit beim Nachladen des
   iframes nichts springt. Solange data-vimeo leer ist, laedt kern.js
   nichts und es bleibt bei der dunklen Flaeche mit dem Play-Kreis. */
.hero__video {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
}

.hero__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Hero-Video: Hintergrundmodus ---
   Das Video laeuft stumm in Schleife, unser eigener Knopf liegt
   flaechendeckend darueber. pointer-events:none haelt Vimeos
   Bedienelemente unerreichbar — ohne Hover blenden sie sich nie ein, und
   der einzige Weg hinein ist unser Knopf. Erst --ton gibt sie frei. */
.hero__video--laeuft iframe { pointer-events: none; }

.hero__video--ton iframe { pointer-events: auto; }

.hero__video-replay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hero__video-replay-btn {
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.hero__video-replay-btn:hover {
  transform: scale(1.12);
  color: var(--gold-light);
}

.hero__video-replay-btn svg {
  width: 100%;
  height: 100%;
}

/* Problem und Fuer-wen lagen auf Hintergrundfotos. Die beiden Dateien waren
   die PLATZHALTER aus dem Kern: schraffierte Flaechen mit der Aufschrift
   "HINTERGRUND PROBLEM 1920 x 1280" mitten im Bild. Auf der Seite stand
   damit das Wort PROBLEM sichtbar im Hintergrund.

   Fuer diese Seite gibt es keine echten Fotos, und sie braucht auch keine:
   ein E-Book hat keinen Seminarraum. Beide Sektionen tragen jetzt dieselben
   goldenen Radialverlaeufe wie die uebrigen. Wer spaeter doch ein Foto
   einsetzen will, holt das Verfahren aus seite.css der Money-Mind-Seite. */
.problem {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(201, 168, 76, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5%  95%, rgba(201, 168, 76, 0.12) 0%, transparent 50%),
    var(--black);
  position: relative;
}

.fuer-wen {
  background:
    radial-gradient(ellipse 65% 55% at 5% 5%,   rgba(201, 168, 76, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 95%, rgba(201, 168, 76, 0.12) 0%, transparent 50%),
    var(--surface);
  position: relative;
}

.fw__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.fw-card {
  border-radius: var(--radius-lg);
  padding: 38px 34px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
  box-sizing: border-box;
  max-width: 100%;
}

/* Die Ja-Karte traegt einen goldenen Rahmen — sie ist die Spalte,
   in der sich der Leser wiedererkennen soll. */
.fw-card--yes {
  border-color: rgba(201, 168, 76, 0.34);
  background: rgba(201, 168, 76, 0.035);
}

.fw-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: center;
  margin-bottom: 10px;
}

.fw-card__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

/* Punkte durch feine Linien getrennt statt als einzelne Boxen */
.fw-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}

.fw-item:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}

/* Icon im runden Badge */
.fw-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 168, 76, 0.14);
  color: var(--gold);
  margin-top: 1px;
}

.fw-item__icon svg {
  width: 15px;
  height: 15px;
}

.fw-item__text {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  word-break: break-word;
  min-width: 0;
}

/* Nein-Spalte: gedaempft statt golden */
.fw-card__list--no .fw-item__icon {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-dim);
}

.fw-card__list--no .fw-item__text {
  color: var(--text-muted);
}

/* Schlusssatz unter den Karten */
.fw-conclusion {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--gold);
  text-align: center;
  max-width: 720px;
  margin: 52px auto 0;
  line-height: 1.4;
}

.fw-card {
  display: flex;
  flex-direction: column;
}

.fw-card__list {
  align-self: stretch;
}

/* ============================================
   DAS SEMINAR — Sektionsgrund
   Liegt auf --black, die Problem-Sektion darueber auf --surface.
   ============================================ */
.inhalte {
  background:
    radial-gradient(ellipse 55% 65% at 15% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 85% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 55%),
    var(--black);
  position: relative;
}


/* ============================================
   DARKO
   ============================================ */
.darko-section {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(201, 168, 76, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5%  95%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    var(--black);
  position: relative;
}


.darko__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.darko__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.darko__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,0.5) 0%, transparent 50%);
  pointer-events: none;
}

.darko__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) brightness(0.9);
  transition: filter 0.5s ease;
}

.darko__img:hover img {
  filter: grayscale(0%) brightness(1);
}

.darko__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.1;
}

.darko__role {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
}

.darko__bio {
  font-size: 0.975rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.form__note {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

@media (max-width: 900px) {
.darko__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

.darko__img {
    max-width: 340px;
    margin: 0 auto;
  }

.darko__content {
    text-align: left;
  }

.fw__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
.hero {
    padding: 48px 0 40px;
  }

.hero__headline {
    font-size: clamp(2.2rem, 7.5vw, 3.6rem);
  }

@media (max-width: 350px) {
.hero__headline { font-size: 1.95rem; }
}

.fw-card {
    padding: 28px 22px;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* Jede Linie startet unsichtbar und wird vom Beobachter in seite.js per
   .section-divider-visible eingeblendet. Wer hier eine Sektion vergisst,
   deren Linie blitzt beim Laden auf; wer sie in seite.js vergisst, deren
   Linie bleibt fuer immer unsichtbar. Beide Listen zusammen pflegen. */
.problem::before,
.bausteine::before,
.darko-section::before,
.fuer-wen::before,
.inhalte::before {
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* ============================================
   TRENNLINIEN
   Jede Sektion traegt ihre Linie NUR OBEN. Damit kann nie eine untere auf
   eine obere treffen und zwei 1px-Linien im Abstand von 1px stehen, was
   wie ein Fehler aussieht. Eine Sonderregel pro Nachbarpaar entfaellt, und
   mit ihr die Pflicht, sie bei jeder Umstellung nachzuziehen.

   Jede Sektion hier steht auch in der opacity-0-Liste weiter unten UND in
   trennlinien in seite.js. Fehlt sie in einer der beiden, blitzt die Linie
   beim Laden auf oder bleibt fuer immer unsichtbar.
   ============================================ */
.problem::before,
.bausteine::before,
.darko-section::before,
.fuer-wen::before,
.inhalte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(201, 168, 76, 0.55) 30%,
    rgba(201, 168, 76, 0.55) 70%,
    transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
}

/* Weiche Variante fuer das Beiwerk: Person und Abschluss tragen den
   Argumentationsbogen nicht. */
.darko-section::before {
  background: linear-gradient(to right,
    transparent,
    rgba(201, 168, 76, 0.45) 30%,
    rgba(201, 168, 76, 0.45) 70%,
    transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3), 0 0 24px rgba(201, 168, 76, 0.12);
}



/* --- aus styles-moneymind.css --- */

/* --- Hero: Format-Zeile ---
   Sagt, dass hier eine Veranstaltung stattfindet. Optik wie .section__eyebrow,
   aber ohne dessen Untermarge und mit erlaubtem Umbruch: auf 320px passt
   "Tagesseminar in Wien · 17. Oktober 2026 · 09:00–17:00 Uhr" nicht in eine
   Zeile, und ein nowrap wuerde sie aus der Seite treiben. */
.hero__format {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  /* letter-spacing haengt hinter dem letzten Buchstaben ein Leerzeichen an —
     text-indent gleicht das aus, sonst sitzt die zentrierte Zeile zu weit links. */
  text-indent: 0.16em;
  line-height: 1.6;
  margin: -8px auto 26px;
  max-width: 620px;
}


/* --- Hero: die drei Punkte ---
   Ersetzen den fuenfzeiligen Fliesstext. Der Block ist zentriert, die Punkte
   selbst sind linksbuendig: zentrierter Flattersatz ueber mehrere Zeilen
   liest sich schlecht, und die Haken muessen untereinander stehen. */
.hero__punkte {
  list-style: none;
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__punkte li {
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}

.hero__punkte li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--gold);
  font-weight: 600;
}

/* Der Aufhaenger aus der Anzeige, direkt unter der Headline. Groesser als
   die Punkte darunter: er traegt den Gedanken, die Punkte belegen ihn nur. */
.hero__hook {
  max-width: 620px;
  margin: 22px auto 30px;
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  line-height: 1.6;
  color: var(--text);
}

/* Einleitung der Problem-Sektion, zwischen Kopf und Karten. */
.pr-lead {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: -14px auto 40px;
  max-width: 640px;
}

/* Zielgruppen-Zeile. Bewusst abgesetzt und ohne Haken: sie beschreibt nicht,
   was du bekommst, sondern fuer wen der Tag ist. */
.hero__fuer {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.hero__fuer strong {
  color: var(--gold);
  font-weight: 600;
}


/* Die Knappheitszeile gilt fuer BEIDE Angebote und steht darum unter dem
   Kartenpaar, nicht in einer der Karten. */
.ticket__scarcity {
  margin-top: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.03em;
}

/* --- 11. Final-CTA --- */
/* Liegt auf --surface: darko davor und der Footer danach liegen auf
   --black, der Grundton muss dazwischen wechseln. */
/* Die Schlusssektion steht als Block in der Mitte: Ueberschrift, Satz und
   Knopf auf einer Achse. Ohne text-align standen Titel und Knopf links,
   waehrend der Satz ueber margin:auto mittig lag. */
.final-cta {
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(201, 168, 76, 0.10) 0%, transparent 65%),
    var(--surface);
  text-align: center;
}

.final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 18px;
}

.final-cta__title em {
  color: var(--gold);
  font-style: italic;
}

.final-cta__sub {
  max-width: 560px;
  margin: 0 auto 8px;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.final-cta__countdown {
  margin-top: 28px;
  justify-content: center;
}

@media (max-width: 640px) {
/* Logo kleiner, damit die helle Scheibe der Headline nicht die Buehne nimmt */
.hero__logo { width: 48px; height: 48px; margin-bottom: 16px; }

.ticket__scarcity { font-size: 0.85rem; }

.form__note { font-size: 0.85rem; }
}


.pr__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.pr-card {
  /* Spalte statt Reihe: das Raster stammt aus der Money-Mind-Seite, wo
     links ein Icon neben dem Text stand. Hier sitzt die Nummer ueber der
     Ueberschrift, sonst quetscht sie den Titel in eine schmale Spalte. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
  box-sizing: border-box;
  max-width: 100%;
}

.pr-card__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text);
  min-width: 0;
}

/* Der Satz, der in die Reframe-Sektion uebergibt. Bewusst ohne Gold und
   ohne Kursiv — das hebt ihn vom Schlusssatz der Ja/Nein-Karten ab. */
.pr-turn {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  max-width: 720px;
  margin: 52px auto 0;
}

@media (max-width: 860px) {
.pr__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

.pr-card { padding: 24px 22px; gap: 15px; }

.pr-card__text { font-size: 0.96rem; line-height: 1.6; }

.pr-turn { margin-top: 40px; }

/* auf schmalen Screens bricht der Satz ohnehin — der harte Umbruch
     wuerde dort nur eine einsame Zeile erzeugen */
.pr-turn br { display: none; }
}


/* ============================================
   FREEBIE — Inhaltskarten
   Nutzen das Raster der Problem-Sektion (.pr__grid), tragen aber eine
   Nummer und eine Ueberschrift statt eines Icons.
   ============================================ */
.pr-card__nr {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 10px;
}
.pr-card__titel {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}


/* ============================================
   REDUZIERTE BEWEGUNG
   Pflicht, nicht optional. Jeder neue Effekt dieser Seite gehoert hier
   hinein. Der Regen prueft die Einstellung selbst in kern.js und zeichnet
   dann gar nicht erst.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* Die Aura bleibt sichtbar, hoert aber auf zu atmen. */
  .hero__bg-overlay::after { animation: none; }
}


/* ============================================
   DIE FUENF BAUSTEINE
   Gewichtete Karte nach Abschnitt 6.3 des Designsystems: dunkler Verlauf,
   goldener Rahmen, Hover, Lichtkante oben. Sie ist fuer wenige Dinge, die
   GELESEN werden. Die neutrale .pr-card bleibt fuer das, was gescannt wird.
   ============================================ */
.bausteine {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(201, 168, 76, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5%  95%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    var(--surface);
  position: relative;
}

/* Eine Spalte, auch am Desktop: die Texte sind lang und sollen gelesen
   werden. Nebeneinander waeren es zwei Textwaende. */
.bausteine__liste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
}

/* Bei ungerader Kartenzahl bliebe die letzte allein in der linken Spalte
   stehen und die rechte Haelfte leer. Ueber die ganze Breite gelegt sieht
   es nach Absicht aus statt nach Rest. Greift nur, wenn die letzte Karte
   zugleich an ungerader Position steht, also wirklich allein waere. */
.pr__grid > .pr-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.inhalte-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: linear-gradient(155deg, #1c1810 0%, #141008 100%);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color var(--transition), transform var(--transition);
}

.inhalte-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

/* Lichtkante, die im Hover oben aufleuchtet */
.inhalte-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.6), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.inhalte-card:hover::before { opacity: 1; }

/* Die Ziffer traegt die Reihenfolge. Gross und in der Displayschrift, damit
   man die fuenf Bausteine beim Ueberfliegen zaehlen kann. */
.inhalte-card__nr {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  color: var(--gold);
  min-width: 42px;
}

.inhalte-card__titel {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 10px;
}

.inhalte-card__text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.68;
}

@media (max-width: 640px) {
  .pr-lead { margin-bottom: 30px; font-size: 0.98rem; }

  .inhalte-card { padding: 24px 22px; gap: 16px; }

  .inhalte-card__nr { font-size: 1.7rem; min-width: 32px; }

  .inhalte-card__titel { font-size: 1.12rem; }

  .inhalte-card__text p { font-size: 0.96rem; line-height: 1.6; }
}