/* ============================================================
   plate_ces — hero (CType atomicplan_hero)

   Vertrag (harte Regeln):
   - KEIN Sektions-Hintergrund, KEIN Sektions-Padding, KEINE eigene
     Container-/Sektionsbreite. Flaeche, vertikale Abstaende und Inhaltsbreite
     macht ausschliesslich das Frame-System (background_color_class,
     background_image, space_*, frame_layout, frame_layout_inner_*).
   - Keine font-family / font-size an Ueberschriften — Typografie kommt global
     aus den Site-Settings des Themes.
   - Farben nur ueber --bs-*-Variablen bzw. eigene Slots mit Fallback.
   - Alles gescoped auf .frame-type-atomicplan_hero; @keyframes CE-eindeutig
     praefixiert.
   ============================================================ */

.frame-type-atomicplan_hero {
  /* Theme-Slots: ein Projekt-Theme belegt die Variablen neu, nicht die Regeln. */
  --plces-hero-accent: var(--bs-primary, #0d6efd);
  --plces-hero-on-media: #fff;
  --plces-hero-scrim-from: rgba(0, 0, 0, 0.62);
  --plces-hero-scrim-to: rgba(0, 0, 0, 0.12);
  --plces-hero-ink-soft: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  --plces-hero-line: var(--bs-border-color, rgba(0, 0, 0, 0.15));
  --plces-hero-radius: var(--bs-border-radius, 0.375rem);
  --plces-hero-gap: clamp(2rem, 4vw, 4rem);
  /* Mindesthoehe der Cover-Variante — bewusst als Slot, damit Themes sie
     anpassen koennen, ohne die Regel zu ueberschreiben. */
  --plces-hero-cover-min-height: clamp(28rem, 62svh, 46rem);
}

/* ---- Cover: Bild-Ebene ueber der GANZEN Frame-Flaeche -------------------
   Die Bildquelle ist das generische Rahmen-Feld `background_image`; gerendert
   wird es als echtes <img> (LCP, siehe Kommentar in frontend.html).

   Randabfallend wird die Ebene NICHT ueber eine eigene Breite, sondern ueber
   die Viewport-Breite: `left:50%` + `width:100vw` + `translateX(-50%)`. Das ist
   bewusst unabhaengig davon, welcher Vorfahre gerade `position: relative` traegt
   (das Frame-Markup kennt je nach Theme mehrere) — ein `inset:0` haenge sonst am
   breitenbegrenzten Container und das Bild bliebe eingerueckt. Die INHALTSbreite
   bleibt unangetastet: sie kommt weiterhin allein vom `.frame-container`.
   `overflow: hidden` am Frame verhindert, dass die 100vw-Ebene (Scrollbar-Breite)
   horizontal ueberlaeuft. */
.frame-type-atomicplan_hero { overflow: hidden; }

.frame-type-atomicplan_hero .plces-hero__media,
.frame-type-atomicplan_hero .plces-hero__scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
}
.frame-type-atomicplan_hero .plces-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame-type-atomicplan_hero .plces-hero__scrim {
  background: linear-gradient(to top, var(--plces-hero-scrim-from) 0%, var(--plces-hero-scrim-to) 70%);
}

/* Das Auto-Rendering des Frame-Hintergrundbildes (CSS-Background) wuerde dasselbe
   Bild ein zweites Mal laden — ueber den PARENT ausblenden, damit der Browser den
   Background des Kind-Elements gar nicht erst anfordert. */
.frame-type-atomicplan_hero .frame-backgroundimage-container { display: none; }

/* ---- Cover: Textebene --------------------------------------------------- */
.frame-type-atomicplan_hero .plces-hero--cover .plces-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--plces-hero-cover-min-height);
}
/* Helle Typo NUR, solange ein Hintergrundbild vorhanden ist. */
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__inner,
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__title,
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__lead,
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__fact-value {
  color: var(--plces-hero-on-media);
}
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__eyebrow,
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__fact-label {
  color: rgba(255, 255, 255, 0.82);
}
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__arrow { color: var(--plces-hero-on-media); }
.frame-type-atomicplan_hero.frame-has-backgroundimage .plces-hero--cover .plces-hero__facts { border-top-color: rgba(255, 255, 255, 0.28); }

/* Auf gefaerbten (invertierenden) Flaechen bzw. ueber einem Frame-Hintergrundbild
   duerfen die gedaempften Toene nicht auf einer festen Grau-Variable haengen —
   sie folgen der Textfarbe des Frames. So bleibt der Block auf hellen UND dunklen
   Flaechen lesbar, ohne dass ein Theme Regeln ueberschreiben muss. */
.frame-type-atomicplan_hero.frame-has-backgroundimage,
.frame-type-atomicplan_hero.-colorized {
  --plces-hero-ink-soft: color-mix(in srgb, currentColor 78%, transparent);
  --plces-hero-line: color-mix(in srgb, currentColor 32%, transparent);
}

/* ---- Split: Text + Bild ------------------------------------------------- */
.frame-type-atomicplan_hero .plces-hero--split {
  container-type: inline-size;
  container-name: plces-hero;
}
.frame-type-atomicplan_hero .plces-hero__grid {
  display: grid;
  gap: var(--plces-hero-gap);
  align-items: center;
}
@container plces-hero (min-width: 52rem) {
  .frame-type-atomicplan_hero .plces-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.frame-type-atomicplan_hero .plces-hero__figure { margin: 0; }
.frame-type-atomicplan_hero .plces-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--plces-hero-radius);
}

/* ---- Textbausteine ------------------------------------------------------ */
.frame-type-atomicplan_hero .plces-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plces-hero-ink-soft);
}
.frame-type-atomicplan_hero .plces-hero__eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--plces-hero-accent);
  flex: 0 0 auto;
}
.frame-type-atomicplan_hero .plces-hero__eyebrow .idx { color: var(--plces-hero-accent); }

/* Nur Laufweite/Zeilenlaenge — KEINE font-size/-family an der Ueberschrift. */
.frame-type-atomicplan_hero .plces-hero__title {
  max-width: 20ch;
  margin-bottom: 0;
}
.frame-type-atomicplan_hero .plces-hero__lead {
  margin: 1.2rem 0 0;
  max-width: 52ch;
  color: var(--plces-hero-ink-soft);
}

.frame-type-atomicplan_hero .plces-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  margin-top: 1.8rem;
}
.frame-type-atomicplan_hero .plces-hero__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
}
.frame-type-atomicplan_hero .plces-hero__arrow-glyph { transition: transform 0.25s ease; }
.frame-type-atomicplan_hero .plces-hero__arrow:hover .plces-hero__arrow-glyph { transform: translateX(0.25em); }

/* ---- Kennzahlen --------------------------------------------------------- */
.frame-type-atomicplan_hero .plces-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.8rem;
  margin: 2.2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--plces-hero-line);
}
.frame-type-atomicplan_hero .plces-hero__fact-value {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  line-height: 1.1;
  font-weight: 600;
}
.frame-type-atomicplan_hero .plces-hero__fact-label {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plces-hero-ink-soft);
}

/* ---- Sanfter Auftritt (CE-eindeutig praefixierte Keyframes) -------------- */
.frame-type-atomicplan_hero .plces-hero__eyebrow,
.frame-type-atomicplan_hero .plces-hero__actions,
.frame-type-atomicplan_hero .plces-hero__facts {
  animation: plces-hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
/* title and lead are the LCP candidates: visible from the first paint, they only slide */
.frame-type-atomicplan_hero .plces-hero__title,
.frame-type-atomicplan_hero .plces-hero__lead {
  animation: plces-hero-slide 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.frame-type-atomicplan_hero .plces-hero__title { animation-delay: 0.08s; }
.frame-type-atomicplan_hero .plces-hero__lead { animation-delay: 0.16s; }
.frame-type-atomicplan_hero .plces-hero__actions { animation-delay: 0.24s; }
.frame-type-atomicplan_hero .plces-hero__facts { animation-delay: 0.32s; }

@keyframes plces-hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes plces-hero-slide {
  from { transform: translateY(18px); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .frame-type-atomicplan_hero .plces-hero__eyebrow,
  .frame-type-atomicplan_hero .plces-hero__title,
  .frame-type-atomicplan_hero .plces-hero__lead,
  .frame-type-atomicplan_hero .plces-hero__actions,
  .frame-type-atomicplan_hero .plces-hero__facts {
    animation: none;
  }
  .frame-type-atomicplan_hero .plces-hero__arrow-glyph { transition: none; }
}