/* ==========================================================================
   PICHLER SYSTEMTECHNIK – Design-Erweiterungen
   Hero-Variante 410 + Farbstreifen 210-240 (CGI-Farben)
   Wird NACH style.css geladen und überschreibt gezielt per frame-layout-Klassen.
   ========================================================================== */

/* Sicherheitsnetz: ein leeres HTML-Element (nur <br>, kein echter Inhalt)
   soll trotz seines Standard-Innenabstands keine sichtbare weisse Luecke
   zwischen zwei farbigen Baendern erzeugen. Eigentliche Loesung bleibt,
   das leere Element im Backend zu entfernen - das hier ist nur ein Fallback. */
.frame-type-html:empty,
.frame-type-html:has(> br:only-child) {
  display: none;
}

:root {
  /* CGI-Farbtokens (--orange, --black, --gray* kommen aus CssVariables/custom.css) */
  --pichler-orange: var(--orange, #FF8C00);
  --pichler-orange-deep: #C96A00;        /* Hover-Zustand auf Orange */
  --pichler-black: #0B0B0C;              /* Streifen-Schwarz, weicher als reines #000 */
  --pichler-silver: #AEB4BB;             /* CGI Silber */
  --pichler-grey-light: #EDEDEE;         /* Heller Streifen */
  --pichler-text-on-dark: #F3F3F4;
  --pichler-muted-on-dark: #C6CACF;
  --pichler-accent-on-light: #B85400;    /* Orange-Variante mit Kontrast auf hellem Grund */
}

/* ==========================================================================
   HERO-VARIANTE 410 – "Hero: Pichler"
   Bild vollflächig, dunkler Verlauf von links, Text + Buttons darüber.
   Auswahl im Backend: Heroimage-Element -> Erscheinungsbild -> Layout 410
   ========================================================================== */

.frame-type-heroimage.frame-layout-410 .ce-heroimage {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(420px, 48vw, 640px);
}

/* Bild fuellt die gesamte Flaeche (object-fit statt Zuschnitt) */
.frame-type-heroimage.frame-layout-410 .ce-heroimage figure.image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.frame-type-heroimage.frame-layout-410 .ce-heroimage figure.image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.frame-type-heroimage.frame-layout-410 .ce-heroimage figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dunkler Verlauf von links, rechts bleibt das Bild sichtbar */
.frame-type-heroimage.frame-layout-410 .ce-heroimage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(11, 11, 12, 0.82) 0%,
    rgba(11, 11, 12, 0.55) 45%,
    rgba(11, 11, 12, 0.18) 72%,
    rgba(11, 11, 12, 0) 100%);
}

/* Textblock: setzt die absolute Positionierung der Standard-Varianten ausser Kraft.
   Bewusst LINKSBUENDIG statt als zentrierte max-width-Spalte: eine zentrierte
   1200px-Box liess auf breiten Monitoren eine grosse leere Luecke vor dem Text
   entstehen. Stattdessen haengt der Text am linken Gutter, die Zeilenlaenge
   wird stattdessen ueber ch-basierte max-width auf den Textelementen selbst
   begrenzt (siehe .hero-text > *), nicht ueber die Containerbreite. */
.frame-type-heroimage.frame-layout-410 .hero-text {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  background: none;
  overflow: visible;
  max-height: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(32px, 6vw, 72px) clamp(24px, 6vw, 96px);
  text-shadow: none;
}

.frame-type-heroimage.frame-layout-410 .hero-text > * {
  max-width: 62ch;
}

.frame-type-heroimage.frame-layout-410 .hero-text,
.frame-type-heroimage.frame-layout-410 .hero-text * {
  color: var(--pichler-text-on-dark);
}

/* H1 bewusst als kleineres, leichteres "Label" ueber der grossen Akzentzeile -
   nicht die dominante Aussage, das uebernimmt .hero-accent darunter. */
.frame-type-heroimage.frame-layout-410 .hero-text h1,
.frame-type-heroimage.frame-layout-410 .hero-text h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: clamp(6px, 1vw, 10px);
  text-wrap: balance;
  text-shadow: var(--hero-text-shadow-dark, 1px 1px 1px rgba(0, 0, 0, 0.6));
}

/* Hinweis: Das "Header"-Feld ist reiner Klartext (Fluid escaped {header}
   automatisch), ein getippter <em> wuerde als sichtbarer Text "<em>"
   erscheinen statt formatiert zu werden. Diese Regel bleibt daher bewusst
   ungenutzt/wirkungslos, falls doch mal jemand em im Header versucht -
   die eigentliche zweifarbige Wirkung laeuft ueber .hero-accent (Bodytext,
   siehe unten), da Bodytext ueber f:format.html sauber gerendert wird. */
.frame-type-heroimage.frame-layout-410 .hero-text h1 em,
.frame-type-heroimage.frame-layout-410 .hero-text h2 em {
  color: var(--pichler-orange);
  font-style: normal;
}

.frame-type-heroimage.frame-layout-410 .hero-text .ce-bodytext {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
}

/* Grosse orange Akzentzeile (RTE-Stil "Hero Akzentzeile") auch in 410 nutzbar -
   etwas grosszuegiger dimensioniert als in der kompakten 420-Panel-Variante,
   da 410 mehr vertikalen Platz hat. */
.frame-type-heroimage.frame-layout-410 .hero-text .ce-bodytext p.hero-accent {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--pichler-orange);
  margin-top: 0;
  margin-bottom: clamp(14px, 2.2vw, 24px);
  text-wrap: balance;
  text-shadow: var(--hero-text-shadow-dark, 1px 1px 1px rgba(0, 0, 0, 0.6));
}

/* Untertitel in 410: warmes gedimmtes Weiss statt kuehlem Blaugrau, damit
   Headline (weiss) und Untertitel wie EIN Farbsystem wirken, nur abgestuft. */
.frame-type-heroimage.frame-layout-410 .hero-text .ce-bodytext p:not(:has(> a.btn)):not(.hero-actions):not(.hero-accent) {
  color: rgba(243, 243, 244, 0.72);
}

/* ==========================================================================
   HERO-VARIANTE 420 – "Hero: Produktseite"
   Dunkles Panel, Produktbild rechts angedockt, Text links. Kein Verlauf/
   Overlay noetig, da Bild und Text getrennte Flaechen sind (kein Text-auf-
   Bild-Kontrastproblem). Zweifarbige Headline: Header-Feld = heller
   Einleitungssatz, RTE-Stil "Hero Akzentzeile" im Bodytext = grosse orange
   Aussage darunter.
   Auswahl im Backend: Heroimage-Element -> Erscheinungsbild -> Layout 420
   Umbruch auf Mobil (<=768px, wie im Sitepackage ueblich $mediaquery-small-max):
   Bild rutscht unter den Text, beide Spalten werden volle Breite.
   ========================================================================== */

.frame-type-heroimage.frame-layout-420 .ce-heroimage {
  display: flex;
  flex-direction: column;
  background: var(--pichler-black);
  overflow: hidden;
}

.frame-type-heroimage.frame-layout-420 .ce-heroimage figure.image {
  order: 2;
  margin: 0;
  flex: 0 0 auto;
}

.frame-type-heroimage.frame-layout-420 .ce-heroimage figure.image picture {
  display: block;
  height: 100%;
}

.frame-type-heroimage.frame-layout-420 .ce-heroimage figure.image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.frame-type-heroimage.frame-layout-420 .hero-text {
  order: 1;
  position: relative;
  top: auto;
  left: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  width: auto;
  padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 48px);
  color: var(--pichler-text-on-dark);
}

.frame-type-heroimage.frame-layout-420 .hero-text h1 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 500;
  color: var(--pichler-text-on-dark);
  margin-bottom: 4px;
}

/* Zweite, grosse Zeile: RTE-Stil "Hero Akzentzeile" auf einen Bodytext-Absatz */
.frame-type-heroimage.frame-layout-420 .hero-text .ce-bodytext p.hero-accent {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pichler-orange);
  margin-top: 0;
  margin-bottom: clamp(12px, 2vw, 20px);
  text-wrap: balance;
}

.frame-type-heroimage.frame-layout-420 .hero-text .ce-bodytext {
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  line-height: 1.6;
  max-width: 46ch;
}

@media screen and (min-width: 769px) {
  /* CSS Grid statt Flexbox: die 1fr-Spalte fuellt IMMER den kompletten
     Restplatz, unabhaengig vom Textinhalt - kein ungenutzter schwarzer
     Rand mehr moeglich (Flexbox mit max-width auf einem grow-Item liess
     ungenutzten Platz uebrig, wenn der Inhalt kuerzer als der Platz war). */
  .frame-type-heroimage.frame-layout-420 .ce-heroimage {
    display: grid;
    grid-template-columns: 1fr 42%;
    align-items: stretch;
    min-height: clamp(340px, 30vw, 440px);
  }

  .frame-type-heroimage.frame-layout-420 .ce-heroimage figure.image {
    grid-column: 2;
    grid-row: 1;
  }

  .frame-type-heroimage.frame-layout-420 .ce-heroimage figure.image img {
    height: 100%;
  }

  .frame-type-heroimage.frame-layout-420 .hero-text {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 640px;
  }
}

/* ==========================================================================
   Hero-Bodytext: Subtitle + Button-Zeile automatisch anhand der Struktur
   unterscheiden - der Redakteur muss dafuer KEINEN Extra-Stil auswaehlen.
   - Absatz OHNE Button-Link  -> Subtitle-Formatierung (groesser, gedaempft)
   - Absatz MIT  Button-Link  -> Abstand nach oben, eigene Zeile fuer Buttons
   Die Klasse .hero-actions bleibt als manuelle Override-Moeglichkeit bestehen
   (falls :has() in einem sehr alten Browser mal nicht greift).
   Gilt fuer ALLE Hero-Varianten (0/400/401/402/410).
   ========================================================================== */

.frame-type-heroimage .hero-text .ce-bodytext p:not(:has(> a.btn)):not(.hero-actions):not(.hero-accent) {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: var(--pichler-muted-on-dark);
}

.frame-type-heroimage.frame-layout-0 .hero-text .ce-bodytext p:not(:has(> a.btn)):not(.hero-actions):not(.hero-accent),
.frame-type-heroimage.frame-layout-400 .hero-text .ce-bodytext p:not(:has(> a.btn)):not(.hero-actions):not(.hero-accent) {
  color: var(--pichler-black);
  opacity: 0.75;
}

.frame-type-heroimage .hero-text .ce-bodytext p:has(> a.btn),
.frame-type-heroimage .hero-text .ce-bodytext p.hero-actions {
  margin-top: clamp(16px, 2.5vw, 28px);
  margin-bottom: 0;
  color: inherit;
}

/* ==========================================================================
   Buttons im Hero-Bodytext
   Beide RTE-Stile fuehren zum gleichen Orange-Button:
   "CTA Button" (Klasse cta-button, aeltester Stil) und "Button Action"
   (Klasse btn-primary, neuer). "Button Page" (btn-secondary) ist die
   transparente Variante.
   ========================================================================== */

.frame-type-heroimage .hero-text a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 12px 10px 0;
  padding: 12px 22px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 2px;
}

.frame-type-heroimage .hero-text a.btn-primary,
.frame-type-heroimage .hero-text a.btn.cta-button,
.frame-type-heroimage .hero-text a.btn.primary {
  background: var(--pichler-orange);
  border-color: var(--pichler-orange);
  color: #fff;
}

.frame-type-heroimage .hero-text a.btn-primary:hover,
.frame-type-heroimage .hero-text a.btn-primary:focus,
.frame-type-heroimage .hero-text a.btn.cta-button:hover,
.frame-type-heroimage .hero-text a.btn.cta-button:focus,
.frame-type-heroimage .hero-text a.btn.primary:hover,
.frame-type-heroimage .hero-text a.btn.primary:focus {
  background: var(--pichler-orange-deep);
  border-color: var(--pichler-orange-deep);
  color: #fff;
}

.frame-type-heroimage .hero-text a.btn-secondary,
.frame-type-heroimage .hero-text a.btn.secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--pichler-text-on-dark);
}

.frame-type-heroimage.frame-layout-0 .hero-text a.btn-secondary,
.frame-type-heroimage.frame-layout-400 .hero-text a.btn-secondary {
  border-color: rgba(11, 11, 12, 0.4);
  color: var(--pichler-black);
}

.frame-type-heroimage .hero-text a.btn-secondary:hover,
.frame-type-heroimage .hero-text a.btn-secondary:focus,
.frame-type-heroimage .hero-text a.btn.secondary:hover,
.frame-type-heroimage .hero-text a.btn.secondary:focus {
  background: rgba(255, 255, 255, 0.12);
}

/* Kompaktere Hero-Hoehe auf sehr kleinen Screens */
@media screen and (max-width: 479px) {
  .frame-type-heroimage.frame-layout-410 .ce-heroimage {
    min-height: 380px;
  }
}

/* ==========================================================================
   FARBSTREIFEN 210-240 – Inhaltssektionen in CGI-Farben
   Hintergrund laeuft ueber die volle Viewport-Breite (box-shadow-Trick,
   erzeugt keinen horizontalen Scrollbalken), der Inhalt bleibt im Raster.
   Auswahl im Backend: Inhaltselement -> Erscheinungsbild -> Layout 210-240
   ========================================================================== */

.frame-layout-210,
.frame-layout-220,
.frame-layout-230,
.frame-layout-240 {
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(36px, 6vw, 72px);
  clip-path: inset(0 -100vmax);
}

/* --- 210: Schwarz, Ueberschriften Orange --- */
.frame-layout-210 {
  background: var(--pichler-black);
  box-shadow: 0 0 0 100vmax var(--pichler-black);
}

.frame-layout-210,
.frame-layout-210 p,
.frame-layout-210 li,
.frame-layout-210 td {
  color: var(--pichler-text-on-dark);
}

.frame-layout-210 h1,
.frame-layout-210 h2,
.frame-layout-210 h3,
.frame-layout-210 h4 {
  color: var(--pichler-orange);
}

.frame-layout-210 a:not(.btn) {
  color: var(--pichler-orange);
}

.frame-layout-210 a:not(.btn):hover,
.frame-layout-210 a:not(.btn):focus {
  color: var(--pichler-text-on-dark);
}

.frame-layout-210 a.btn-secondary {
  background: transparent;
  border-color: rgba(243, 243, 244, 0.55);
  color: var(--pichler-text-on-dark);
}

/* --- 220: Orange, Text Schwarz --- */
.frame-layout-220 {
  background: var(--pichler-orange);
  box-shadow: 0 0 0 100vmax var(--pichler-orange);
}

.frame-layout-220,
.frame-layout-220 p,
.frame-layout-220 li,
.frame-layout-220 td,
.frame-layout-220 h1,
.frame-layout-220 h2,
.frame-layout-220 h3,
.frame-layout-220 h4 {
  color: var(--pichler-black);
}

.frame-layout-220 a:not(.btn) {
  color: var(--pichler-black);
  text-decoration: underline;
}

.frame-layout-220 a.btn-primary {
  background: var(--pichler-black);
  border-color: var(--pichler-black);
  color: #fff;
}

/* --- 230: Silber, Text Schwarz --- */
.frame-layout-230 {
  background: var(--pichler-silver);
  box-shadow: 0 0 0 100vmax var(--pichler-silver);
}

.frame-layout-230,
.frame-layout-230 p,
.frame-layout-230 li,
.frame-layout-230 td,
.frame-layout-230 h1,
.frame-layout-230 h2,
.frame-layout-230 h3,
.frame-layout-230 h4 {
  color: var(--pichler-black);
}

/* --- 240: Hellgrau, Ueberschriften dunkles Orange (WCAG-Kontrast) --- */
.frame-layout-240 {
  background: var(--pichler-grey-light);
  box-shadow: 0 0 0 100vmax var(--pichler-grey-light);
}

.frame-layout-240 h1,
.frame-layout-240 h2,
.frame-layout-240 h3,
.frame-layout-240 h4 {
  color: var(--pichler-accent-on-light);
}

/* ==========================================================================
   STREIFEN-BAENDER 350/351/360/361 – Team-Vorstellung + Zielgruppen-Karten
   CType-gescoped (frame-type-textmedia / frame-type-cols_4), damit die
   Nummern nicht mit anderen Content-Typen kollidieren. Gleicher Bleed-Trick
   wie bei 210-240, additiv zu den bestehenden Layouts 150/300 - die
   bleiben komplett unangetastet nutzbar.
   Auswahl im Backend: Element -> Erscheinungsbild -> Layout 350/351 bzw. 360/361
   ========================================================================== */

.frame-type-textmedia.frame-layout-350,
.frame-type-textmedia.frame-layout-351,
.frame-type-textmedia.frame-layout-352,
.frame-type-cols_4.frame-layout-360,
.frame-type-cols_4.frame-layout-361 {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
  clip-path: inset(0 -100vmax);
}

/* --- 350: Team-Vorstellung, Schwarz --- */
.frame-type-textmedia.frame-layout-350 {
  background: var(--pichler-black);
  box-shadow: 0 0 0 100vmax var(--pichler-black);
}

.frame-type-textmedia.frame-layout-350,
.frame-type-textmedia.frame-layout-350 p,
.frame-type-textmedia.frame-layout-350 strong,
.frame-type-textmedia.frame-layout-350 li {
  color: var(--pichler-text-on-dark);
}

.frame-type-textmedia.frame-layout-350 h1,
.frame-type-textmedia.frame-layout-350 h2,
.frame-type-textmedia.frame-layout-350 h3,
.frame-type-textmedia.frame-layout-350 h4 {
  color: var(--pichler-orange);
}

.frame-type-textmedia.frame-layout-350 a:not(.btn) {
  color: var(--pichler-orange);
}

/* --- 351: Team-Vorstellung, Hell (Silber/Hellgrau) --- */
.frame-type-textmedia.frame-layout-351 {
  background: var(--pichler-grey-light);
  box-shadow: 0 0 0 100vmax var(--pichler-grey-light);
}

.frame-type-textmedia.frame-layout-351,
.frame-type-textmedia.frame-layout-351 p,
.frame-type-textmedia.frame-layout-351 strong,
.frame-type-textmedia.frame-layout-351 li {
  color: var(--pichler-black);
}

.frame-type-textmedia.frame-layout-351 h1,
.frame-type-textmedia.frame-layout-351 h2,
.frame-type-textmedia.frame-layout-351 h3,
.frame-type-textmedia.frame-layout-351 h4 {
  color: var(--pichler-accent-on-light);
}

/* --- 352: "Ganze Uhr"-Kernaussage, Konzept B "Grosse Geste" -----------
   Die wichtigste Markenaussage der Seite ("Ein System. Viele Zahnraeder.
   Ein Ziel."). War urspruenglich orange mit TYPO3s Standard-Bild-Float
   (Bild rechts, Text laeuft drumherum) - dadurch weder vertikal zentriert
   noch klar zweispaltig, wirkte unausgewogen mit viel Leerraum. Jetzt:
   dunkler Hintergrund, echtes CSS-Grid (Text | Bild), riesige Typografie,
   Bild mit orangem Glow freigestellt - naeher an der Bildmarke, mehr
   Buehne fuer die Kernaussage. */
.frame-type-textmedia.frame-layout-352 {
  background: var(--pichler-black);
  box-shadow: 0 0 0 100vmax var(--pichler-black);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  column-gap: clamp(24px, 4vw, 56px);
}

.frame-type-textmedia.frame-layout-352 > header {
  grid-column: 1;
  grid-row: 1;
}

/* TYPO3s Bild-Float-Wrapper (ce-right/ce-intext) wird zum zweiten,
   eigenen 2-Spalten-Grid mit den GLEICHEN Spaltenmassen wie aussen -
   dadurch liegen Ueberschrift (aeusseres Grid, Spalte 1) und Bodytext
   (inneres Grid, Spalte 1) exakt untereinander, das Bild (Spalte 2)
   bleibt vertikal zentriert neben beidem. */
.frame-type-textmedia.frame-layout-352 > .ce-textpic {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: clamp(24px, 4vw, 56px);
  align-items: center;
  float: none;
}

.frame-type-textmedia.frame-layout-352 .ce-gallery {
  grid-column: 2;
  grid-row: 1;
  float: none;
  /* Das Ursprungs-Theme setzt fuer ".ce-intext .ce-gallery" ab 769px
     Breite pauschal width:50% (bezogen auf die Grid-Spurbreite als
     Grid-Item) - dadurch blieb das Bild trotz breiterer Spalte klein.
     Hier auf volle Spaltenbreite zurückgesetzt. */
  width: 100%;
}

.frame-type-textmedia.frame-layout-352 .ce-gallery figure,
.frame-type-textmedia.frame-layout-352 .ce-gallery picture {
  display: block;
  width: 100%;
  margin: 0;
}

.frame-type-textmedia.frame-layout-352 .ce-gallery img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.frame-type-textmedia.frame-layout-352 .ce-bodytext {
  grid-column: 1;
  grid-row: 1;
  float: none;
}

.frame-type-textmedia.frame-layout-352,
.frame-type-textmedia.frame-layout-352 p,
.frame-type-textmedia.frame-layout-352 strong,
.frame-type-textmedia.frame-layout-352 li {
  color: var(--pichler-muted-on-dark);
}

/* Kleiner oranger Kicker ueber der Ueberschrift - rein dekorativ per CSS
   generiert (kein zusaetzliches Backend-Feld noetig), analog zur
   Nummerierung bei Layout 310. */
.frame-type-textmedia.frame-layout-352 > header::before {
  content: 'Unser Prinzip';
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pichler-orange);
  margin-bottom: 16px;
}

.frame-type-textmedia.frame-layout-352 h1,
.frame-type-textmedia.frame-layout-352 h2,
.frame-type-textmedia.frame-layout-352 h3,
.frame-type-textmedia.frame-layout-352 h4 {
  color: #fff;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.frame-type-textmedia.frame-layout-352 .ce-bodytext p {
  max-width: 44ch;
}

.frame-type-textmedia.frame-layout-352 a:not(.btn) {
  color: var(--pichler-orange);
  text-decoration: underline;
}

.frame-type-textmedia.frame-layout-352 a.btn-primary {
  background: var(--pichler-orange);
  border-color: var(--pichler-orange);
  color: #fff;
}

@media (max-width: 760px) {
  .frame-type-textmedia.frame-layout-352,
  .frame-type-textmedia.frame-layout-352 > .ce-textpic {
    grid-template-columns: 1fr;
  }

  .frame-type-textmedia.frame-layout-352 .ce-gallery {
    grid-row: 1;
    margin-bottom: 24px;
  }

  .frame-type-textmedia.frame-layout-352 .ce-bodytext {
    grid-row: 2;
  }
}

/* --- 360: Zielgruppen-Karten, Schwarz ---
   Die 4 Karten sind je ein verschachteltes frame-type-textmedia
   frame-layout-130 Element (Bild oben, h4.headline-divider + p darunter).
   Farben werden ueber normale Nachfahren-Selektoren durchgereicht, kein
   Extra-Markup noetig. */
.frame-type-cols_4.frame-layout-360 {
  background: var(--pichler-black);
  box-shadow: 0 0 0 100vmax var(--pichler-black);
}

.frame-type-cols_4.frame-layout-360,
.frame-type-cols_4.frame-layout-360 p,
.frame-type-cols_4.frame-layout-360 strong,
.frame-type-cols_4.frame-layout-360 li {
  color: var(--pichler-text-on-dark);
}

.frame-type-cols_4.frame-layout-360 h1,
.frame-type-cols_4.frame-layout-360 h2,
.frame-type-cols_4.frame-layout-360 h3,
.frame-type-cols_4.frame-layout-360 h4 {
  color: var(--pichler-orange);
}

/* Etwas mehr Luft zwischen den 4 Karten im Vollbreite-Kontext */
.frame-type-cols_4.frame-layout-360 > .grid {
  row-gap: clamp(24px, 4vw, 40px);
}

/* --- 361: Zielgruppen-Karten, Hell (Silber/Hellgrau) --- */
.frame-type-cols_4.frame-layout-361 {
  background: var(--pichler-grey-light);
  box-shadow: 0 0 0 100vmax var(--pichler-grey-light);
}

.frame-type-cols_4.frame-layout-361,
.frame-type-cols_4.frame-layout-361 p,
.frame-type-cols_4.frame-layout-361 strong,
.frame-type-cols_4.frame-layout-361 li {
  color: var(--pichler-black);
}

.frame-type-cols_4.frame-layout-361 h1,
.frame-type-cols_4.frame-layout-361 h2,
.frame-type-cols_4.frame-layout-361 h3,
.frame-type-cols_4.frame-layout-361 h4 {
  color: var(--pichler-accent-on-light);
}

.frame-type-cols_4.frame-layout-361 > .grid {
  row-gap: clamp(24px, 4vw, 40px);
}

/* ==========================================================================
   Weisser Spalt zwischen Hero und einem direkt folgenden Streifen-Band
   entfernen. Ursache: .content-main hat ein pauschales padding-top
   (--base-size, Core-Theme) VOR dem ersten Element. Wenn dieses erste
   Element eines unserer Vollbreite-Baender ist, ziehen wir es exakt um
   diesen Wert nach oben, damit es nahtlos an den Hero anschliesst.
   Reale DOM-Kette (per Browser geprueft): .content-main > .grid > .col-12 > .frame
   WICHTIG: TYPO3 rendert vor JEDEM Frame ein Geschwister-Element
   <div class="anker"></div> - der Frame ist daher NIE :first-child,
   sondern folgt immer direkt auf den ersten Anker. Deshalb ":first-child"
   auf dem .anker selbst pruefen, dann per "+" auf den direkt folgenden
   Frame zielen (Adjacent-Sibling-Combinator), statt auf dem Frame selbst. */
.content-main .grid > .col-12 > .anker:first-child + .frame-layout-210,
.content-main .grid > .col-12 > .anker:first-child + .frame-layout-220,
.content-main .grid > .col-12 > .anker:first-child + .frame-layout-230,
.content-main .grid > .col-12 > .anker:first-child + .frame-layout-240,
.content-main .grid > .col-12 > .anker:first-child + .frame-type-textmedia.frame-layout-350,
.content-main .grid > .col-12 > .anker:first-child + .frame-type-textmedia.frame-layout-351,
.content-main .grid > .col-12 > .anker:first-child + .frame-type-cols_4.frame-layout-360,
.content-main .grid > .col-12 > .anker:first-child + .frame-type-cols_4.frame-layout-361 {
  margin-top: calc(-1 * var(--base-size));
}

/* ==========================================================================
   News-Teaser-Karten: konsistente Card-Optik im CGI-Design.
   Scoped auf ".news-list-view", weil ".wrapper-card" auch anderswo
   verwendet wird (Seiten-Vorschau-Menues) - die bleiben unangetastet.
   ========================================================================== */
.news-list-view .wrapper-card {
  background: #fff;
  border: 1px solid rgba(11, 11, 12, 0.1);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}

/* Bild, Titel und Button liegen alle INNERHALB des Karten-Links (<a>).
   Der Link selbst war display:block (Standard), dadurch kam bei
   ".card-text{flex:1}" und dem "margin-top:auto" am Button kein
   Flex-Kontext an - der Button blieb direkt unter dem (unterschiedlich
   langen) Titel haengen statt immer unten in der Karte zu sitzen, obwohl
   alle Karten gleich hoch sind. Link muss selbst Flex-Column sein und die
   volle Kartenhoehe fuellen, damit der Flex-Chain bis zum Button
   durchgereicht wird. */
.news-list-view .wrapper-card > a {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.news-list-view .wrapper-card:hover,
.news-list-view .wrapper-card:focus-within {
  border-color: var(--pichler-orange);
  box-shadow: 0 10px 28px rgba(11, 11, 12, 0.14);
  transform: translateY(-3px);
}

.news-list-view .wrapper-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

.news-list-view .wrapper-card figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 250ms ease;
}

.news-list-view .wrapper-card:hover figure img {
  transform: scale(1.04);
}

/* Datums-Badge oben links auf dem Bild */
.news-list-view .news-card-date {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--pichler-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 2px;
  line-height: 1.2;
}

.news-list-view .card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--gap-md, 20px) !important;
}

.news-list-view .card-text h3 {
  /* Titel erbte sonst Standard-Linkfarbe/Unterstreichung vom umgebenden
     <a> (orange, underline) - hier bewusst neutral (dunkel, ohne
     Unterstreichung), Farbwechsel gibt es erst beim Hover. */
  color: var(--pichler-black);
  text-decoration: none;
  font-size: 0.98rem;
  line-height: 1.4;
  margin-bottom: 16px !important;
}

.news-list-view a h3:hover,
.news-list-view a h3:focus {
  color: var(--pichler-orange-deep) !important;
}

/* "Weiterlesen"-Button (ersetzt den frueheren Teaser-Absatz) */
.news-list-view .news-card-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 12px 22px;
  background: var(--pichler-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background 150ms ease;
}

.news-list-view .wrapper-card:hover .news-card-readmore {
  background: var(--pichler-orange-deep);
}

/* ==========================================================================
   News-Teaser: "Alle Neuigkeiten ansehen"-Button unterhalb der Karten
   ========================================================================== */
.news-list-view-all {
  margin-top: var(--gap-lg, 32px);
  text-align: center;
}

/* ==========================================================================
   News-Archivseite, Template-Layout 3 "Featured + Grid" (Konzept B):
   Der erste (= neueste) Eintrag wird per Partials/List/FeaturedItem.html
   gross/hervorgehoben dargestellt, alle weiteren im normalen Karten-Grid
   (gleiche ".wrapper-card"-Optik wie Layout 2, hier ueber CSS-Grid statt
   dem alten Prozent-Flex aus Extensions/news.css angeordnet - vermeidet
   die in dieser Session wiederholt aufgetretenen Breiten-Rundungsfehler
   des Flex-Systems).
   ========================================================================== */
.news-list-view.layout-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.news-list-view.layout-3 > .featured-item {
  grid-column: 1 / -1;
}

/* Grid-Kinder werden per Default (align-items:stretch) auf die
   Zeilenhoehe gestreckt - die verschachtelte ".wrapper-card" darin
   muss diese Streckung explizit uebernehmen, sonst bleiben die Karten
   trotz gleicher Zeilenhoehe unterschiedlich hoch und der
   Weiterlesen-Button haengt nicht mehr zuverlaessig unten (siehe
   gleiches Muster bei den News-Karten auf der Startseite). */
.news-list-view.layout-3 > div {
  height: 100%;
}

.news-list-view.layout-3 .wrapper-card {
  height: 100%;
}

@media (max-width: 900px) {
  .news-list-view.layout-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .news-list-view.layout-3 {
    grid-template-columns: 1fr;
  }
}

.news-list-view.layout-3 .featured-item-link {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  background: var(--pichler-black);
  border-radius: 8px;
  padding: clamp(20px, 3vw, 36px);
}

.news-list-view.layout-3 .featured-item figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
}

.news-list-view.layout-3 .featured-item figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-list-view.layout-3 .featured-item-kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pichler-orange);
  margin-bottom: 14px;
}

.news-list-view.layout-3 .featured-item-text h2 {
  color: #fff;
  text-decoration: none;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 16px;
}

.news-list-view.layout-3 .featured-item-text p {
  color: var(--pichler-muted-on-dark);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 20px;
}

.news-list-view.layout-3 .featured-item-readmore {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: var(--pichler-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background 150ms ease;
}

.news-list-view.layout-3 .featured-item-link:hover .featured-item-readmore {
  background: var(--pichler-orange-deep);
}

@media (max-width: 700px) {
  .news-list-view.layout-3 .featured-item-link {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EDITORIAL-BAUSTEINE (Konzept B)
   ========================================================================== */

/* --- 353: Team-Intro hell/editorial ---
   Header wird zum kleinen orangen Kicker, der erste Bodytext-Absatz nutzt
   den BEREITS VORHANDENEN RTE-Stil "Hero Akzentzeile" (p.hero-accent) als
   grosse Aussage - keine neue RTE-Konfiguration noetig, reine Wiederverwendung.
   Kein Bleed noetig: weisser/schlichter Hintergrund, normaler Fluss. */
.frame-type-textmedia.frame-layout-353 h1,
.frame-type-textmedia.frame-layout-353 h2 {
  color: var(--pichler-accent-on-light);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.frame-type-textmedia.frame-layout-353 .ce-bodytext p.hero-accent {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--pichler-black);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 16px;
  text-wrap: balance;
}

.frame-type-textmedia.frame-layout-353 .ce-bodytext p:not(.hero-accent) {
  color: #444;
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 62ch;
}

/* --- 354: Dunkles Kontakt-Panel (KEIN Bleed - bleibt in seiner Spalte) --- */
.frame-type-textmedia.frame-layout-354 {
  background: var(--pichler-black);
  color: var(--pichler-text-on-dark);
  padding: clamp(28px, 4vw, 40px);
  border-radius: 2px;
}

.frame-type-textmedia.frame-layout-354 h1,
.frame-type-textmedia.frame-layout-354 h2,
.frame-type-textmedia.frame-layout-354 h3 {
  color: var(--pichler-orange);
}

.frame-type-textmedia.frame-layout-354 p {
  color: var(--pichler-muted-on-dark);
  line-height: 1.6;
}

.frame-type-textmedia.frame-layout-354 img {
  border-radius: 2px;
  margin-bottom: 16px;
}

.frame-type-textmedia.frame-layout-354 a.btn-primary {
  background: var(--pichler-orange);
  border-color: var(--pichler-orange);
  color: #fff;
}

/* --- 362: Zielgruppen-Karten, Schwarz ---
   AEussere Bleed-Technik wie 360/361 (schwarzer Hintergrund), jede
   verschachtelte Karte (textmedia/layout-130) wird zur Karte mit Bild oben
   und Textfeld darunter (kein Overlay - Text soll unter dem Bild stehen).

   Das Karten-Grid wird bewusst NICHT dem Standard-Flex-Grid ueberlassen
   (".grid{display:flex}" + Original-Spaltenklasse "col-3_md-6_xs-12" mit
   width:25% je Karte): width:25% + zusaetzlicher flex-"gap" ergibt in Summe
   knapp ueber 100% Zeilenbreite (Rundungsfehler im Sub-Pixel-Bereich), die
   4. Karte ist dadurch ungewollt in eine neue Zeile gerutscht (3+1 statt
   4 nebeneinander). Deshalb wird hier auf CSS-Grid umgestellt, das den
   Gap VOR der Spaltenberechnung abzieht und garantiert exakt aufgeht -
   inkl. sauberem 2x2-Umbruch auf Tablet statt 3+1. */
.frame-type-cols_4.frame-layout-362 {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
  clip-path: inset(0 -100vmax);
  background: var(--pichler-black);
  box-shadow: 0 0 0 100vmax var(--pichler-black);
}

.frame-type-cols_4.frame-layout-362 > .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.frame-type-cols_4.frame-layout-362 > .grid > [class*="col-"] {
  width: auto;
  flex: none;
  padding: 0;
}

@media (max-width: 1024px) {
  .frame-type-cols_4.frame-layout-362 > .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .frame-type-cols_4.frame-layout-362 > .grid {
    grid-template-columns: 1fr;
  }
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: #17171a;
  /* Die tief verschachtelte Karte hat wie jedes Content-Element die
     Scroll-Fade-In-Klasse (.fade -> visibility:hidden, wird per JS beim
     Scrollen auf .fadeIn umgeschaltet). Bei dieser Verschachtelungstiefe
     wird das Umschalten offenbar nicht zuverlaessig ausgeloest, der Text
     blieb dauerhaft unsichtbar. Erzwingen wir hier direkt, unabhaengig
     vom Scroll-JS. */
  visibility: visible !important;
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 .ce-bodytext {
  visibility: visible !important;
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 .ce-textpic {
  margin: 0;
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 .ce-textpic figure {
  margin: 0;
  /* Die Quellbilder sind Hochformat (336x481px, Verhaeltnis ~0.7) mit einem
     Icon-Overlay im unteren Bildbereich. Ein Querformat-Verhaeltnis (4:3)
     schnitt diesen unteren Bereich per object-fit:cover weg, das Icon war
     abgeschnitten. 3:4 kommt dem Original naeher und zeigt das Icon wieder
     vollstaendig. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 .ce-textpic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease;
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130:hover .ce-textpic img {
  transform: scale(1.04);
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 .ce-bodytext {
  padding: clamp(18px, 2.5vw, 26px);
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 h4 {
  color: var(--pichler-orange);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.frame-type-cols_4.frame-layout-362 .frame-type-textmedia.frame-layout-130 p {
  color: var(--pichler-text-on-dark);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* --- 310: Leistungen als nummerierte Liste statt 6er-Grid ---
   Hebt das cols_6-Grid-Verhalten auf (display:block), jede Spalte wird
   eine volle-Breite-Zeile. Die Nummerierung 01-06 kommt automatisch aus
   CSS-Countern - kein Texteingriff im Backend noetig. */
.frame-type-cols_6.frame-layout-310 > .grid {
  display: block;
  counter-reset: pichler-svc;
  border-top: 1px solid #e2e2e2;
}

.frame-type-cols_6.frame-layout-310 > .grid > div {
  width: 100%;
  max-width: none;
  flex: none;
  counter-increment: pichler-svc;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid #e2e2e2;
}

.frame-type-cols_6.frame-layout-310 > .grid > div::before {
  content: counter(pichler-svc, decimal-leading-zero);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--pichler-orange);
  grid-row: 1 / 3;
}

/* Die kleinen Icon-Bilder je Leistung werden in der nummerierten Liste
   bewusst ausgeblendet - Mockup-Konzept B zeigt hier nur Nummer + Text,
   keine Icons (ruhigerer, listenartiger Look). */
.frame-type-cols_6.frame-layout-310 .frame-type-textmedia.frame-layout-140 .ce-textpic {
  display: none;
}

.frame-type-cols_6.frame-layout-310 .frame-type-textmedia.frame-layout-140,
.frame-type-cols_6.frame-layout-310 .frame-type-textmedia.frame-layout-140 .ce-bodytext {
  display: contents;
}

.frame-type-cols_6.frame-layout-310 h4 {
  font-size: 1rem;
  margin: 0;
  grid-column: 2;
}

.frame-type-cols_6.frame-layout-310 p {
  grid-column: 2;
  margin: 0;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.5;
}

@media screen and (max-width: 600px) {
  .frame-type-cols_6.frame-layout-310 > .grid > div {
    grid-template-columns: 36px 1fr;
    gap: 12px;
  }
}

/* --- 311: Icon + Nummern-Chip (Konzept B, "Wobei wir unsere Partner
   unterstuetzen") -------------------------------------------------------
   Anders als 310 werden die Icons HIER bewusst behalten (User-Wunsch:
   "die Bilder sind eigentlich schoen"), bekommen aber einen Badge-
   Hintergrund + kleinen nummerierten Chip. Absichtlich NICHT auf einen
   bestimmten inneren Layout-Wert der verschachtelten Elemente gescoped
   (anders als bei 310/frame-layout-140) - greift unabhaengig davon,
   welches Layout die einzelnen Elemente haben, und bricht dadurch nicht,
   falls sie ein anderes Layout als erwartet nutzen.
   Ueber :is(cols_6, cols_3) gescoped, da der Abschnitt auf ein "cols_3"-
   Element (Dreifach-Container) angewendet wird, nicht auf cols_6 wie
   urspruenglich angenommen - so greift der Wert 311 unabhaengig davon,
   welcher der beiden Container-Typen tatsaechlich verwendet wird. */
/* Der Zaehler wird bewusst auf "body" statt auf ".grid" zurueckgesetzt:
   der Abschnitt besteht aus ZWEI separaten cols_3-Elementen (je 3 Icons),
   nicht einem einzigen mit 6 - ein Reset auf ".grid" wuerde bei jedem der
   beiden Container neu bei 01 anfangen (sichtbarer Bug: "02" erschien
   zweimal, einmal pro Container). Reset auf "body" sorgt fuer eine
   durchgehende Nummerierung 01-06 ueber beide Container hinweg. */
body {
  counter-reset: pichler-partner;
}

/* Abstand oben/unten sowie zwischen den beiden Containern: da es zwei
   separate cols_3-Elemente sind (je nur 1 Zeile), greift der Row-Gap
   innerhalb eines einzelnen Grids hier nicht - der noetige Abstand
   ("in der Mitte") entsteht erst zwischen den zwei Containern selbst.
   Padding an jedem der beiden Container gibt Luft zur Ueberschrift
   davor, zueinander und zum Inhalt danach. */
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 {
  padding-top: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(20px, 3vw, 32px);
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 > .grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px 28px !important;
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 > .grid > div {
  width: auto;
  flex: none;
  padding: 0;
  counter-increment: pichler-partner;
  text-align: left;
}

@media (max-width: 900px) {
  :is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 > .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 520px) {
  :is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 > .grid {
    grid-template-columns: 1fr !important;
  }
}

/* Icon soll LINKS NEBEN dem Text stehen (Backend-Einstellung "Bild
   links"), nicht darueber - und die Nummer sass zuvor an der falschen
   Stelle, weil ".ce-textpic" per inline-block auf eine unbekannte
   Breite kam (abhaengig von verschachtelten Wrapper-Elementen) statt
   auf die tatsaechliche 52px-Icongroesse. Statt uns auf die Breite
   von ".ce-textpic" zu verlassen, wird das ganze Element (Icon +
   Ueberschrift + Text) hier zu EINEM CSS-Grid mit fester Icon-Spalte:
   ".ce-textpic" UND ".ce-bodytext" werden per "display:contents"
   aufgeloest (gleiche Technik wie bei Layout 310) - das funktioniert
   unabhaengig davon, ob ".ce-bodytext" ein Geschwister von ".ce-textpic"
   ist (Bildposition "oben"/"links") oder darin verschachtelt
   (Bildposition "im Text") - Icon, Ueberschrift und Absatz werden so
   direkte, unabhaengig platzierbare Grid-Kinder. */
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 18px;
  align-items: start;
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-textpic,
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-bodytext {
  display: contents;
}

/* Die Icon-Box wirkte nicht quadratisch, weil zwischen ".ce-gallery" und
   dem eigentlichen "img" mehrere Zwischen-Wrapper liegen (ce-row,
   ce-column, figure, picture), die eigene Breiten-/Padding-Regeln aus
   dem Ursprungs-Theme mitbringen (z.B. ".ce-column{padding-right:...}").
   Nur ".ce-gallery" und "img" auf feste Groesse zu setzen reichte nicht -
   jetzt wird die gesamte Kette auf 64x64px erzwungen, mit !important
   gegen die Theme-Regeln. */
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-gallery,
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-row,
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-column,
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia figure,
:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia picture {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-gallery {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  overflow: visible;
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-gallery img {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  background: var(--pichler-grey-light);
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia .ce-gallery::after {
  content: counter(pichler-partner, decimal-leading-zero);
  position: absolute;
  z-index: 2;
  /* "transform" statt negativer top/right-Werte, damit die Position
     nicht von einem umgebenden overflow/Stacking-Kontext abgeschnitten
     werden kann - deformierte/abgeschnittene Kreis-Darstellung zuvor. */
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pichler-black);
  color: var(--pichler-orange);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia h4 {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  font-size: 1.05rem;
  margin: 0;
}

:is(.frame-type-cols_6, .frame-type-cols_3).frame-layout-311 .frame-type-textmedia p {
  /* Nur Spalte 2 (wie die Ueberschrift), nicht ueber die Icon-Spalte
     hinweg - Text soll optisch unter der Ueberschrift, nicht unter
     dem Icon beginnen. */
  grid-column: 2;
  text-align: left;
  margin: 8px 0 0;
  color: #555;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* --- Partner-Logos auf dem bestehenden 240-Streifen: Graustufen-Hover --- */
.frame-type-cols_3.frame-layout-240 img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 200ms ease, opacity 200ms ease;
}

.frame-type-cols_3.frame-layout-240 img:hover {
  filter: none;
  opacity: 1;
}

/* Sicherheitsbremse: die Ueberschrift ist im Backend aktuell als H1
   eingestellt (sollte auf H2 umgestellt werden - "Typ"-Feld beim Element).
   Bis dahin hier auf H2-Groesse begrenzen, damit sie nicht wie die
   Haupt-Headline der Seite wirkt. */
.frame-type-cols_3.frame-layout-240 h1 {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
}

/* Alle 3 Spalten (2 Logos + Text) vertikal zentrieren, statt oben
   auszurichten - wirkt sonst unausgewogen, da Logo- und Text-Boxen
   unterschiedliche Eigenhoehen haben. */
.frame-type-cols_3.frame-layout-240 > .grid > div {
  display: flex;
  align-items: center;
}

/* Der erklaerende Text neben den Partner-Logos ging als normaler,
   duenner Absatz neben den beiden fetten Wortmarken-Logos unter.
   Mehr Gewicht (Farbe, Schriftschnitt) fuer bessere Lesbarkeit. */
.frame-type-cols_3.frame-layout-240 .frame-type-textmedia .ce-bodytext p {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pichler-black);
  line-height: 1.45;
}

/* --- "Unsere Staerken"-Liste neben dem Kontakt-Panel (354) ---
   War bisher eine ungestylte Browser-Standardliste (disc-Bullets,
   57px Einzug) - wirkte neben dem gestalteten dunklen Kontakt-Panel
   wie vergessen. Eigene, schmalere Marker im Marken-Orange statt
   Standard-Aufzaehlungspunkt. ":has()" grenzt gezielt auf die Spalte
   neben dem 354-Panel ein, damit andere cols_2/300-Aufzaehlungen an
   anderer Stelle unangetastet bleiben. */
.frame-type-cols_2.frame-layout-300:has(.frame-type-textmedia.frame-layout-354) .frame-type-bullets ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.frame-type-cols_2.frame-layout-300:has(.frame-type-textmedia.frame-layout-354) .frame-type-bullets li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--pichler-black);
  line-height: 1.4;
}

.frame-type-cols_2.frame-layout-300:has(.frame-type-textmedia.frame-layout-354) .frame-type-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 16px;
  height: 3px;
  background: var(--pichler-orange);
}

/* --- Mehr Luft vor "Aktuelles & Wissen", wirkte direkt unter dem
   Staerken/Kontakt-Block zu dicht gedraengt. --- */
.frame-type-news_newsliststicky {
  margin-top: clamp(24px, 4vw, 48px);
}

/* Der Staerken/Kontakt-Block startete exakt an der Farbkante zum grauen
   Partner-Band darueber (0px Abstand) - "Unsere Staerken" klebte direkt
   am Farbwechsel. Eigener Abstand oben, unabhaengig vom Partner-Band. */
.frame-type-cols_2.frame-layout-300:has(.frame-type-textmedia.frame-layout-354) {
  padding-top: clamp(32px, 5vw, 56px);
}

/* Kontakt-Panel (354) randlos bis zum rechten Spaltenrand: die Spalte
   hat wie jede Grid-Spalte einen rechten Gutter-Abstand (var(--gutter))
   zum Seitenrand - dadurch wirkte das schwarze Panel eingerueckt statt
   die Spaltenbreite voll auszunutzen. Nur der rechte Gutter dieser einen
   Spalte wird entfernt (linker Gutter zur Nachbarspalte bleibt). */
.frame-type-cols_2.frame-layout-300 > .grid > div:has(.frame-type-textmedia.frame-layout-354) {
  padding-right: 0;
}