/* ============================================================
   plate_ces — page-intro (CType atomicplan_pageintro)

   Vertrag (harte Regeln):
   - KEIN Sektions-Hintergrund, KEIN Sektions-Padding, KEINE eigene
     Container-/Sektionsbreite — das macht alles das Frame-System.
   - Keine font-family / font-size an Ueberschriften.
   - Farben nur ueber --bs-*-Variablen bzw. eigene Slots mit Fallback.
   - Gescoped auf .frame-type-atomicplan_pageintro.
   ============================================================ */

.frame-type-atomicplan_pageintro {
  --plces-pi-accent: var(--bs-primary, #0d6efd);
  --plces-pi-ink-soft: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  --plces-pi-line: var(--bs-border-color, rgba(0, 0, 0, 0.15));
  --plces-pi-radius: var(--bs-border-radius, 0.375rem);
  --plces-pi-gap: clamp(2rem, 4vw, 4rem);
}

/* Auf gefaerbten (invertierenden) Flaechen 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_pageintro.-colorized {
  --plces-pi-ink-soft: color-mix(in srgb, currentColor 78%, transparent);
  --plces-pi-line: color-mix(in srgb, currentColor 32%, transparent);
}

/* ==========================================================================
   Intro MIT Frame-Hintergrundbild ("Bild als Hintergrund, Text darueber")
   --------------------------------------------------------------------------
   Das Bild kommt AUSSCHLIESSLICH aus dem generischen Rahmen-Feld
   `background_image`; dieser Block rendert kein eigenes <img> und definiert
   weder Sektions-Hintergrund noch Sektions-Padding oder Breite. Hier steht nur,
   was ueber einem FOTO fuer die Lesbarkeit noetig ist.

   Zwei Regeln, beide aus einer Messung (eco 28.08.2026, 1440 px):

   1) Kein transparenter Text. Der gedaempfte Ton war hier bisher — wie auf
      gefaerbten Flaechen — ein `color-mix` mit Transparenz. Ueber einer Flaeche
      ist das harmlos, ueber einem Foto nicht: an hellen Bildstellen schlaegt der
      Untergrund durch und das effektive Verhaeltnis faellt bis auf 1,0:1.
      Gemessen: 29,8 % der Flaeche des Einleitungstextes lagen unter 4,5:1.
   2) Lesbarkeits-Schleier ueber dem Bild. Farbtoene ueber Variablen, damit ein
      Theme den Ton seiner Marke setzen kann, ohne die Mechanik zu kopieren.
      Der Verlauf ist doppelt: quer (die Textspalte steht links) und laengs.
   ========================================================================== */
.frame-type-atomicplan_pageintro.frame-has-backgroundimage {
  --plces-pi-ink-soft: currentColor;
  --plces-pi-line: color-mix(in srgb, currentColor 32%, transparent);

  --plces-pi-scrim-strong: rgba(0, 0, 0, 0.72);
  --plces-pi-scrim-mid: rgba(0, 0, 0, 0.5);
  --plces-pi-scrim-soft: rgba(0, 0, 0, 0.2);

  /* Obergrenze der BILDFLAECHE (nicht des Inhalts, siehe unten). */
  --plces-pi-bg-max-width: 2100px;
}

/* ==========================================================================
   Obergrenze der Bildflaeche
   --------------------------------------------------------------------------
   Der Frame malt sein Hintergrundbild randabfallend ueber die volle
   Viewport-Breite. Mit `background-size: cover` heisst das: je breiter der
   Schirm, desto staerker wird das Motiv hochskaliert und desto ENGER wird der
   sichtbare Ausschnitt — ab etwa 2000 px sieht man vom Motiv nur noch einen
   Streifen. Deshalb hoert die Bildflaeche bei `--plces-pi-bg-max-width` auf und
   steht mittig; rechts und links davon bleibt die Flaeche des Frames stehen
   (`background_color_class`), was den Bildstreifen bewusst rahmt.

   ABGRENZUNG ZUR FRAME-REGEL — die beiden Breiten sind verschiedene Dinge:
     * Bildflaeche  = dieser absolut positionierte Bild-Container. Er liegt
                      HINTER dem Inhalt, traegt keinen Text und ist keine
                      Sektionsbreite.
     * Inhaltsbreite = unveraendert `.frame-container` (Feld „Rahmen-Layout",
                      Settings-Slot max-width-xl/-xxl). Dieser Block setzt daran
                      nichts. Beide sind zentriert, der Text steht damit mittig
                      zur Bildflaeche.

   `min(100%, …)` ist der Sicherheitsgurt: unterhalb der Obergrenze aendert sich
   nichts, die Regel greift ausschliesslich auf sehr breiten Schirmen.
   Zentriert per `left/right: 0` + `margin-inline: auto` (nicht per `transform` —
   ein Transform erzeugt einen eigenen Enthaeltnisblock und wuerde die Fixierung
   des Parallax-Modus aushebeln).
   ========================================================================== */
.frame.frame-type-atomicplan_pageintro.frame-has-backgroundimage .frame-backgroundimage-container {
  width: min(100%, var(--plces-pi-bg-max-width, 2100px));
  left: 0;
  right: 0;
  margin-inline: auto;
}

/* Der Schleier liegt auf dem Bild-Container (Geschwister des Inhalts), nicht im
   Block — nur dort ist er randabfallend. Die Reihenfolge im DOM stellt der
   Frame: backgroundimage-container VOR frame-container.

   Das fuehrende `.frame` ist Absicht und kein Zufall: Themes duerfen fuer ALLE
   Frames mit Hintergrundbild einen eigenen Schleier setzen (theme_eco tut das in
   Sections/_frames.scss als `.frame.frame-has-backgroundimage .frame-back…::after`
   — dieselbe Spezifitaet wie ohne das `.frame` hier, und weil Theme-CSS zuletzt
   laedt, gewaenne bei Gleichstand das Theme). Der Kopf einer Seite braucht aber
   mehr Deckung als ein beliebiges Band, deshalb gewinnt hier die Spezialisierung.
   Den TON setzt trotzdem das Theme — ueber die Variablen oben. */
.frame.frame-type-atomicplan_pageintro.frame-has-backgroundimage .frame-backgroundimage-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--plces-pi-scrim-strong) 0%,
      var(--plces-pi-scrim-mid) 58%,
      var(--plces-pi-scrim-soft) 100%),
    linear-gradient(to bottom,
      var(--plces-pi-scrim-soft) 0%,
      var(--plces-pi-scrim-mid) 100%);
}

.frame-type-atomicplan_pageintro .plces-page-intro {
  container-type: inline-size;
  container-name: plces-page-intro;
}

.frame-type-atomicplan_pageintro .plces-page-intro__grid {
  display: grid;
  gap: var(--plces-pi-gap);
  align-items: end;
}
@container plces-page-intro (min-width: 52rem) {
  .frame-type-atomicplan_pageintro .plces-page-intro--has-aside .plces-page-intro__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .frame-type-atomicplan_pageintro .plces-page-intro--image .plces-page-intro__grid { align-items: center; }
}

/* Kompakt = schmalere Textspalte, engere Zeilenlaenge (KEINE Sektionsbreite!). */
.frame-type-atomicplan_pageintro .plces-page-intro--compact .plces-page-intro__text { max-width: 46rem; }

/* ---- Text -------------------------------------------------------------- */
.frame-type-atomicplan_pageintro .plces-page-intro__eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plces-pi-ink-soft);
}
.frame-type-atomicplan_pageintro .plces-page-intro__eyebrow .idx { color: var(--plces-pi-accent); }

.frame-type-atomicplan_pageintro .plces-page-intro__title {
  max-width: 30ch;
  margin-bottom: 0;
}
.frame-type-atomicplan_pageintro .plces-page-intro__lead {
  margin-top: 1.2rem;
  max-width: 58ch;
  color: var(--plces-pi-ink-soft);
}
.frame-type-atomicplan_pageintro .plces-page-intro__lead > :last-child { margin-bottom: 0; }

.frame-type-atomicplan_pageintro .plces-page-intro__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.4rem;
  text-decoration: none;
}
.frame-type-atomicplan_pageintro .plces-page-intro__arrow-glyph { transition: transform 0.25s ease; }
.frame-type-atomicplan_pageintro .plces-page-intro__arrow:hover .plces-page-intro__arrow-glyph { transform: translateX(0.25em); }

/* ---- Bild -------------------------------------------------------------- */
.frame-type-atomicplan_pageintro .plces-page-intro__figure { margin: 0; }
.frame-type-atomicplan_pageintro .plces-page-intro__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--plces-pi-radius);
}
.frame-type-atomicplan_pageintro .plces-page-intro__caption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--plces-pi-ink-soft);
}

/* ---- Kennzahlen -------------------------------------------------------- */
.frame-type-atomicplan_pageintro .plces-page-intro__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.2rem 1.8rem;
  margin: 0;
}
.frame-type-atomicplan_pageintro .plces-page-intro__fact {
  padding-top: 0.9rem;
  border-top: 2px solid var(--plces-pi-accent);
}
.frame-type-atomicplan_pageintro .plces-page-intro__fact-value {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1.05;
  font-weight: 600;
}
.frame-type-atomicplan_pageintro .plces-page-intro__fact-value a { color: inherit; text-decoration: none; }
.frame-type-atomicplan_pageintro .plces-page-intro__fact-value a:hover { text-decoration: underline; }
.frame-type-atomicplan_pageintro .plces-page-intro__fact-label {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plces-pi-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .frame-type-atomicplan_pageintro .plces-page-intro__arrow-glyph { transition: none; }
}

/* ==========================================================================
   Optionales Piktogramm der Seite (pages.tx_bwicons_icon)
   --------------------------------------------------------------------------
   Rendert als CSS-Maske (Atoms/Icon), Farbe deshalb ueber background-color und
   per Token themebar, ohne die SVG-Datei zu tauschen. Default: Textfarbe.
   ========================================================================== */
.plces-page-intro__icon {
  margin-block-end: 0.9rem;
}
.plces-page-intro__icon .mask-svg {
  background-color: var(--plces-page-intro-icon-color, currentColor);
}