/* ============================================================
   plate_ces — text-media-split (CType atomicplan_textmediasplit)

   Vertrag (harte Regeln):
   - KEIN Sektions-Hintergrund, KEIN Sektions-Padding, KEINE eigene
     Container-/Sektionsbreite — das macht 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_textmediasplit.
   ============================================================ */

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

/* 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_textmediasplit.frame-has-backgroundimage,
.frame-type-atomicplan_textmediasplit.-colorized {
  --plces-tms-ink-soft: color-mix(in srgb, currentColor 78%, transparent);
  --plces-tms-line: color-mix(in srgb, currentColor 32%, transparent);
}

.frame-type-atomicplan_textmediasplit .plces-tms {
  container-type: inline-size;
  container-name: plces-tms;
}

.frame-type-atomicplan_textmediasplit .plces-tms__grid {
  display: grid;
  gap: var(--plces-tms-gap);
  align-items: center;
}
@container plces-tms (min-width: 50rem) {
  .frame-type-atomicplan_textmediasplit .plces-tms__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* Bild rechts: die Bild-Spalte wandert per Grid-Order, die DOM-Reihenfolge
     (Bild vor Text) bleibt unveraendert — auf schmalen Breiten steht das Bild
     dadurch immer oben. */
  .frame-type-atomicplan_textmediasplit .plces-tms--image-right .plces-tms__figure { order: 2; }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-right .plces-tms__text { order: 1; }
  .frame-type-atomicplan_textmediasplit .plces-tms--noimage .plces-tms__grid { grid-template-columns: minmax(0, 1fr); }

  /* Variante „Bild oben": bleibt einspaltig, das Bild nimmt damit die volle
     Breite des Frame-Containers ein. Der Selektor traegt eine Klasse mehr als
     die Zweispalten-Regel darueber und gewinnt dadurch — die beiden aelteren
     Varianten bleiben unangetastet.
     Die Werte in `ch`/`rem` sind Zeilenlaengen von TEXT-Bloecken (erlaubt),
     KEINE Sektions-/Containerbreite: die kommt weiter ausschliesslich vom
     generischen `.frame-container`. */
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 3vw, 3rem);
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__title { max-width: 32ch; }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__body { max-width: 62ch; }
  /* Die Schlagwortliste sind kurze Labels, keine Fliesstextzeilen — etwas mehr
     Mass, damit drei Spalten ohne Wortumbruch nebeneinander stehen. */
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__list { max-width: 72ch; }

  /* Kundenwunsch 28.08.2026: In der Variante „Bild oben" stehen Fliesstext und
     Schlagwortliste NEBENEINANDER statt untereinander — unter einem
     vollbreiten Bild wirkt eine einzelne schmale Textspalte verloren.
     Dachzeile, Ueberschrift und Pfeil-Link laufen weiter ueber beide Spalten.
     `align-items: start`, damit beide Spalten oben buendig beginnen; die
     Listen-Marge von 1.6rem entfaellt dabei, sonst saesse sie tiefer als der
     Fliesstext. Eyebrow und Pfeil-Link sind inline-flex — als Grid-Element
     wuerden sie sonst auf die volle Spaltenbreite gedehnt, deshalb
     `justify-self: start`. */
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__text {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__eyebrow,
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__title,
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__arrow {
    grid-column: 1 / -1;
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__eyebrow,
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__arrow {
    justify-self: start;
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__body {
    grid-column: 1;
  }
  /* Beide Spalten muessen oben auf derselben Hoehe beginnen. Der Fliesstext
     traegt eine eigene Marge von 1.1rem (gemessen 17,6 px), die Liste 1.6rem —
     nebeneinander saesse die Liste dadurch 18 px hoeher. Statt beide auf 0 zu
     setzen (dann klebten sie an der Ueberschrift) bekommen sie denselben
     Abstand ueber eine gemeinsame Variable. */
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__body,
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__list {
    margin-top: var(--plces-tms-col-top, 1.1rem);
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-top .plces-tms__list {
    grid-column: 2;
    max-width: none;
  }
}

/* ---- Variante „Bild links UND rechts, Text mittig" (`image-both`) ------
   Drei Spalten ab 60rem Containerbreite: Bild · Text · Bild. Die
   Textspalte ist etwas breiter (1.6fr); ihre Zeilenlaenge begrenzt weiterhin
   nur `max-width` in ch am TEXT (erlaubt) — KEINE Sektions-/Containerbreite.
   Zwischen 50rem und 60rem bleibt die Zweispalten-Regel von oben stehen; das
   zweite Bild landet dann unter dem Text, links neben nichts — deshalb hier
   eine eigene Zwischenstufe: einspaltig gestapelt (Bild, Text, Bild), die
   Bilder mit begrenzter Breite. `.plces-tms__figure--second` ist nur in
   dieser Variante im DOM. */
@container plces-tms (max-width: 59.98rem) {
  .frame-type-atomicplan_textmediasplit .plces-tms--image-both .plces-tms__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-both .plces-tms__figure {
    max-width: 36rem;
  }
}
@container plces-tms (min-width: 60rem) {
  .frame-type-atomicplan_textmediasplit .plces-tms--image-both .plces-tms__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: center;
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-both .plces-tms__text {
    /* Mittige Textspalte: Kopf und Fliesstext an der Spalte ausgerichtet,
       Zeilenlaenge weiterhin nur am Text (ch), nicht am Container. */
    justify-self: center;
    max-width: 62ch;
  }
  .frame-type-atomicplan_textmediasplit .plces-tms--image-both .plces-tms__body {
    max-width: none;
  }
}

/* ---- Bild -------------------------------------------------------------- */
.frame-type-atomicplan_textmediasplit .plces-tms__figure { margin: 0; }
/* `Atoms/Image` liefert ein <picture>; das ist inline und wuerde sonst eine
   Zeilenbox mit Unterlaengen-Luecke unter dem Bild aufziehen. */
.frame-type-atomicplan_textmediasplit .plces-tms__figure picture { display: block; }
.frame-type-atomicplan_textmediasplit .plces-tms__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--plces-tms-radius);
}
.frame-type-atomicplan_textmediasplit .plces-tms__caption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--plces-tms-ink-soft);
}

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

.frame-type-atomicplan_textmediasplit .plces-tms__title {
  max-width: 24ch;
  margin-bottom: 0;
}
.frame-type-atomicplan_textmediasplit .plces-tms__body {
  margin-top: 1.1rem;
  max-width: 58ch;
}
.frame-type-atomicplan_textmediasplit .plces-tms__body > :last-child { margin-bottom: 0; }

/* ---- Schlagwort-Liste --------------------------------------------------- */
.frame-type-atomicplan_textmediasplit .plces-tms__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.55rem 1.6rem;
}
.frame-type-atomicplan_textmediasplit .plces-tms__list li {
  position: relative;
  padding-left: 1.4em;
}
.frame-type-atomicplan_textmediasplit .plces-tms__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--plces-tms-accent);
}

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

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