/*
 * Dunkler Kontext (dev-wp.progiton.com component.scss:
 * .pg-component--dark) -- dieselbe Vereinfachung wie bei pg-hero/
 * pg-timeline/pg-gallery-scrollytelling: kein generisches Kontext-
 * Token-System, Werte lokal gesetzt.
 */
.pg-container-default {
  --component-background: var(--color-dark);
  --component-text: var(--color-text-inverse);
  --component-muted: rgba(255, 255, 255, 0.72);
  --component-accent: var(--color-primary);
  --component-border: rgba(255, 255, 255, 0.14);
  --component-shadow: var(--shadow-lg);

  padding-block: var(--space-section);
  color: var(--component-text);
  background: var(--component-background);
}

.pg-container-default__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: min(var(--container-width), calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
}

.pg-container-default__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

/*
 * "horizontal" (field_layout): Text und Bild nebeneinander, Bild
 * rechts. "vertical"/Default (kein eigenes Selektor-Gewicht nötig):
 * Text und Bild bleiben in der natürlichen Dokumentreihenfolge
 * gestapelt (Bild nach dem Text), siehe Basis-`flex-direction:
 * column` oben. Karten (field_cards) bleiben in beiden Varianten
 * volle Breite unterhalb.
 */
.pg-container-default--horizontal .pg-container-default__container {
  flex-flow: row wrap;
  align-items: center;
}

.pg-container-default--horizontal .pg-container-default__content {
  flex: 1 1 22rem;
}

.pg-container-default--horizontal .pg-container-default__media {
  flex: 1 1 22rem;
}

.pg-container-default--horizontal .pg-container-default__container > .field--name-field-cards {
  flex-basis: 100%;
}

.pg-container-default__header {
  max-width: 46rem;
}

.pg-container-default__eyebrow {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin: 0 0 var(--space-sm);
  color: var(--component-accent);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pg-container-default__eyebrow::before {
  width: 2.5rem;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--component-accent);
  content: "";
}

.pg-container-default__heading {
  max-width: 26ch;
  margin: 0;
  color: var(--component-text);
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: var(--font-weight-black);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.pg-container-default__introduction {
  max-width: 40rem;
  margin-top: var(--space-sm);
  color: var(--component-muted);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
}

.pg-container-default__content > .field--name-field-beschreibung {
  max-width: 46rem;
  color: var(--component-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/*
 * Links innerhalb von Freitext auf diesem dunklen Hintergrund: die
 * globale Link-Farbe (--color-secondary, #55306f) ist für helle
 * Seiten gedacht und auf Schwarz kaum lesbar (Nutzer-Fund 20.08.2026,
 * am Übersetzungs-Hinweis auf Datenschutz/Impressum). Hellere
 * Token-Variante statt neuer Hex-Wert.
 */
.pg-container-default__introduction a,
.pg-container-default__content > .field--name-field-beschreibung a {
  color: var(--color-secondary-light);
}

.pg-container-default__introduction a:hover,
.pg-container-default__introduction a:focus-visible,
.pg-container-default__content > .field--name-field-beschreibung a:hover,
.pg-container-default__content > .field--name-field-beschreibung a:focus-visible {
  color: var(--component-accent);
}

.pg-container-default__content > .field--name-field-beschreibung strong {
  color: var(--component-text);
}

.pg-container-default__media img {
  width: 100%;
  max-width: 40rem;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--component-shadow);
}

.pg-container-default__media--svg svg {
  width: 100%;
  max-width: 40rem;
  height: auto;
  filter: drop-shadow(var(--component-shadow));
}

.pg-container-default__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pg-container-default__container > .field--name-field-cards > .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/*
 * 13rem -- exakter Referenz-Wert (dev-wp.progiton.com
 * .pg-services__cards-item, live per CSSOM gemessen), nicht frei
 * gewählt.
 *
 * Eigentliche Ursache der "unterschiedliche Höhe"-Meldung
 * (20.08.2026): der per Feld-Fallback (field.html.twig) erzeugte
 * Wrapper-Div je Karte ist der tatsächliche Flex-Item und wird durch
 * align-items: stretch (Flexbox-Default) korrekt auf die Zeilenhöhe
 * gestreckt -- live gemessen alle 4 Wrapper exakt gleich hoch. Die
 * sichtbare Kartenbox selbst (.pg-card, mit Rahmen/Hintergrund) ist
 * darin aber nur ein normales Block-Kind OHNE eigene Höhenangabe und
 * füllt daher nur ihren eigenen Inhalt -- der gestreckte Wrapper blieb
 * unsichtbar größer als die sichtbare Box, wodurch Karte 1 (mit dem
 * längsten Abstract-Text) sichtbar höher wirkte als die anderen drei.
 * Fix: .pg-card bekommt height: 100% (siehe unten), damit sie den
 * gestreckten Wrapper tatsächlich ausfüllt.
 */
.pg-container-default__container > .field--name-field-cards > .field__items > * {
  flex: 1 1 13rem;
}

.pg-container-default__container > .field--name-field-cards .pg-card {
  height: 100%;
}

/*
 * Karten in einem dunklen pg-container-default-Kontext: die
 * Standard-.pg-card--white-Farben (siehe paragraph--pg-card.html.twig,
 * dort noch fest auf "white" verdrahtet, Story 11) durch ein
 * transparentes "Glas"-Panel ersetzen -- Referenz-Fund Story
 * layout-024 (dev-wp.progiton.com "Unsere Leistungen"): Karten sind
 * dort NICHT weiß, sondern ein dezenter heller Verlauf auf dem
 * dunklen Sektions-Hintergrund (live gemessen:
 * `linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.02))`,
 * Rahmen `rgba(255,255,255,.14)`). Bewusst scoped auf diesen Kontext
 * statt das globale pg-card--white zu ändern, das an anderer Stelle
 * (helle Sektionen) weiterhin richtig ist.
 */
.pg-container-default__container > .field--name-field-cards .pg-card--white {
  border-color: var(--component-border);
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  color: var(--color-text-inverse);
  box-shadow: none;
  transition:
    transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

/*
 * Live-Fund (20.08.2026): derselbe "p vs. Feld-Div"-Sachverhalt wie
 * bei der Typografie oben -- der Selektor "... p" griff für den
 * Abstract-Text nie (kein <p>, sondern .field--name-field-abstract-
 * long), daher blieb die Karte in vollem Weiß statt gedämpft. Exakter
 * Referenzwert live gemessen (.pg-services__cards-abstract):
 * rgba(255, 255, 255, 0.72).
 */
.pg-container-default__container > .field--name-field-cards .pg-card--white .pg-card__subtitle,
.pg-container-default__container > .field--name-field-cards .pg-card--white .pg-card__inner .field {
  color: rgba(255, 255, 255, 0.72);
}

/*
 * Hover: rein dekorativ, keine Funktion (Nutzer-Vorgabe 20.08.2026,
 * Referenz-Werte live per CSSOM gemessen -- .pg-services__cards-item:hover
 * auf dev-wp.progiton.com). border-color wechselt auf
 * --component-accent (Lime im dunklen Kontext), leichtes Anheben +
 * etwas hellerer Verlauf.
 */
.pg-container-default__container > .field--name-field-cards .pg-card--white:hover {
  transform: translateY(-0.125rem);
  border-color: var(--component-accent);
  background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}

/*
 * Typografie: pg-card__title/__inner p nutzen standardmäßig die
 * große Showcase-Card-Skala (--font-size-lg/--font-size-md, für
 * größere Kontexte wie das Service-Akkordeon gedacht) -- für dieses
 * kompakte Icon-Karten-Grid viel zu groß (Nutzer-Meldung 20.08.2026,
 * "Fonts sind wieder ganz anders als bei Referenz"). Referenz-Werte
 * live per CSSOM gemessen (.pg-services__cards-title/-abstract):
 * Titel 0,9375rem/700/-0,01em/1.25, Abstract 0,8125rem/1.45 -- exakt
 * übernommen, nicht frei geschätzt.
 *
 * Live-Fund (20.08.2026): der Abstract-Text wird -- anders als bei
 * der generischen pg-card-Komponente sonst üblich -- NICHT als <p>
 * gerendert, sondern als rohes Feld-Div (.field--name-field-abstract-
 * long, aus dem generischen Feld-Fallback ohne eigene Komponente,
 * siehe pg-card.html.twig). Der ursprüngliche Selektor
 * ".pg-card__inner p" griff dadurch nie -- die Abstract-Schrift blieb
 * unverändert groß. Zusätzlich war der Innenabstand
 * (--pg-card__inner, clamp(1.25rem, 4vw, 2rem) -> 2rem auf Desktop)
 * und der Icon-Abstand (--space-sm, 1rem) deutlich größer als die
 * Referenz (1,125rem bzw. 0,625rem, live per CSSOM gemessen an
 * .pg-services__cards-item/-icon) -- zusammen die Ursache für
 * "wirkt klobiger" und unterschiedlich hohe Karten (mehr Text nötig
 * pro Zeile durch mehr Innenabstand).
 */
.pg-container-default__container > .field--name-field-cards .pg-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.pg-container-default__container > .field--name-field-cards .pg-card__inner {
  padding: 1.125rem;
}

.pg-container-default__container > .field--name-field-cards .pg-card__icon {
  margin-bottom: 0.625rem;
}

.pg-container-default__container > .field--name-field-cards .pg-card__inner .field {
  font-size: 0.8125rem;
  line-height: 1.45;
}