/* ==========================================================================
   alfa-ci.css
   CI- und Layout-Layer für alfamedia

   Grundlage (verbindlich):
     - CI-Guide-alfamedia.md      · Version 1.0 · 05.08.2026
     - Layout-Guide-alfamedia.md  · Version 1.0 · 05.08.2026

   Dieses Stylesheet ergänzt css_v5/style.css, css_v5/responsive.css und
   css_v5/stylo.css, ohne sie zu verändern. Es wird als LETZTES eingebunden.
   Kapitelverweise in den Kommentaren beziehen sich auf die beiden Guides.
   ========================================================================== */


/* ==========================================================================
   1. Design-Tokens
   CI-Guide Kap. 9 · Layout-Guide Kap. 9
   ========================================================================== */

:root {
  /* --- Marken-Kernfarben aus der Logo-Masterdatei (CI 3.1) --- */
  --alfa-blue-deep:   #144C96;
  --alfa-blue-mid:    #4566A9;
  --alfa-cyan:        #31A9CB;
  --alfa-cyan-light:  #73C9DA;
  --alfa-orange:      #E45B48;
  --alfa-orange-deep: #D35A45;

  /* --- Digitale UI-Palette (CI 3.2) --- */
  --alfa-primary: #004792; /* Überschriften, Links, primäre UI */
  --alfa-navy:    #071B33; /* dunkle Bühnen */
  --alfa-accent:  #E1442C; /* Akzent / Signal */
  --alfa-teal:    #0E7C86; /* Sekundärakzent */
  --alfa-slate:   #4C6178; /* Sekundärtext */
  --alfa-text:    #444444; /* Fließtext */

  /* --- Neutrale Flächen (CI 3.3) --- */
  --alfa-white:    #FFFFFF;
  --alfa-grey-50:  #F5F8FA;
  --alfa-grey-100: #EAF1F2;
  --alfa-line:     #EFEFEF;

  /* --- Container & Seitenbreiten (Layout 2) --- */
  --layout-outer:         1280px;
  --layout-content:       1180px;
  --layout-narrow:        1024px;
  --layout-reading:        820px;
  --layout-gutter:          24px;
  --layout-gutter-mobile:   18px;

  /* --- Spacing-Skala, 8-px-Raster (Layout 3) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px; /* Standard-Sektionsabstand */

  /* --- Raster-Gaps (Layout 4) --- */
  --gap-split: 56px;
  --gap-cards: 20px;
  --gap-tiles: 16px;
  --gap-band:  32px;

  /* --- Eckenradien (Layout 6) --- */
  --radius-sm:    4px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Typografie (CI 4.1) --- */
  --alfa-font: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* --- Weiche, palettentreue Tiefe (CI 5.3: keine schweren Rahmen) --- */
  --alfa-shadow-card:  0 2px 8px rgba(7, 27, 51, .06);
  --alfa-shadow-panel: 0 8px 28px rgba(7, 27, 51, .12);
}


/* ==========================================================================
   2. Hausschrift
   CI 4.1 – Open Sans für alle Anwendungen.
   Die @font-face-Deklarationen liegen in css_v5/stylo.css.
   ========================================================================== */

body,
button,
input,
select,
textarea {
  font-family: var(--alfa-font);
}


/* ==========================================================================
   3. Container & Gutter
   Layout 2 – Content-Container 1180 px zentriert, Gutter 24 px ab Tablet,
   18 px auf Mobile. Gilt seitenweit, damit Header, Inhalt und Footer auf
   derselben Kante stehen.
   ========================================================================== */

.container {
  max-width: var(--layout-content);
  padding-left:  var(--layout-gutter);
  padding-right: var(--layout-gutter);
}

/* Überschreibt css_v5/style.css (dort: 30 px unter 1024 px) */
@media (max-width: 1024px) {
  .container {
    padding-left:  var(--layout-gutter);
    padding-right: var(--layout-gutter);
  }
}

@media (max-width: 767px) {
  .container {
    padding-left:  var(--layout-gutter-mobile);
    padding-right: var(--layout-gutter-mobile);
  }
}


/* ==========================================================================
   4. Sektionsrhythmus
   Layout 3 + 7 – 64 px oben und unten als Standard. Die Klassenselektoren
   sind spezifischer als `section { padding: 30px 0 !important }` aus
   css_v5/stylo.css und setzen sich deshalb durch.
   ========================================================================== */

section.alfa-section {
  padding: var(--space-8) 0 !important;
  clear: both;
}

/* Helle Sektionsfläche (CI 5.1: Wechsel zwischen Weiß und #F5F8FA) */
section.alfa-section--tint {
  background-color: var(--alfa-grey-50);
}


/* ==========================================================================
   5. Typografie
   CI 4.2 – Hierarchie mit den gemessenen Web-Referenzwerten.
   `!important` ist nötig, um h1–h3 aus css_v5/stylo.css (font-weight: 800)
   auf die verbindlichen 700 zurückzuholen.
   ========================================================================== */

.alfa-section,
.alfa-stage,
.alfa-cta {
  font-size: 1rem;   /* 16 px */
  line-height: 1.6;  /* CI 4.4 */
  color: var(--alfa-text);
}


/* H2 – Sektions-Überschrift: 37 px / 700 / 1,2 / #004792 */
.alfa-section h2,
.alfa-cta h2 {
  font-size: 2.3rem;
  line-height: 1.2;
  font-weight: 700 !important;
  color: var(--alfa-primary);
  margin: 0 0 var(--space-4);
  text-transform: none;
}

/* H3 – Teaser-/Karten-Titel: 18 px / 700 / 1,3 / #004792 */
.alfa-section h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700 !important;
  color: var(--alfa-primary);
  margin: 0 0 var(--space-3);
}

/* H4 – kleine Titel: 15 px / 700 / 1,3 */
.alfa-section h4 {
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 700 !important;
  color: var(--alfa-primary);
  margin: 0 0 var(--space-2);
}

.alfa-section p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--alfa-text);
  margin: 0 0 var(--space-3);
}

.alfa-section p:last-child {
  margin-bottom: 0;
}

/* Eyebrow / Kicker – CI 4.3: Großbuchstaben, leichte Laufweite, über der H2 */
.alfa-kicker {
  display: block;
  font-size: 0.8125rem; /* 13 px */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alfa-primary);
  margin: 0 0 var(--space-2); /* Layout 7: space-2 unter dem Kicker */
}

.alfa-kicker--onDark {
  color: var(--alfa-cyan-light);
}

/* Ein einzelnes Akzentwort in der Headline auf dunkler Bühne, in Light Cyan
   (CI 3.5, Beispiel der Referenzseite: „Feinschliff"). */
.alfa-accent-word--onDark {
  color: var(--alfa-cyan-light);
}

/* Textlinks in Primary Blue, im Hover unterstrichen (CI 7.2) */
.alfa-section a:not(.alfa-btn) {
  color: var(--alfa-primary);
}

.alfa-section a:not(.alfa-btn):hover,
.alfa-section a:not(.alfa-btn):focus {
  color: var(--alfa-primary);
  text-decoration: underline;
}


/* ==========================================================================
   6. Sektionskopf
   Layout 7 – Kicker → H2 → Einleitungssatz, auf 820 px Lesebreite begrenzt.
   ========================================================================== */

.alfa-section-head {
  max-width: var(--layout-reading);
  margin: 0 0 var(--space-5); /* space-5 vor dem Inhalt */
  text-align: left;           /* Layout 1.6 / CI 4.4 */
}

.alfa-section-head > h2 {
  margin-bottom: var(--space-4);
}

.alfa-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--alfa-slate);
  margin: 0;
}


/* ==========================================================================
   7. Feature-Karten
   Layout 4 + 8 – 2-spaltiges Raster, Gap 20 px, Innenabstand 24 px,
   gleiche Kartenhöhe, radius-md. CI 5.3: Fläche statt Rahmen.
   ========================================================================== */

.alfa-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-cards);
  align-items: stretch;
}

/* Einzelne Karte: eine Spalte auf Lesebreite, damit die Kartenkanten mit dem
   820-px-Sektionskopf darüber abschließen (Layout 2). */
.alfa-cards--single {
  grid-template-columns: 1fr;
  max-width: var(--layout-reading);
}

.alfa-card {
  background-color: var(--alfa-grey-100);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.alfa-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--alfa-white);
  color: var(--alfa-teal);
  font-size: 1.15rem;
}

.alfa-card-icon > img,
.alfa-card-icon > svg {
  display: block;
  height: 18px;
  width: auto;
}

.alfa-card > p {
  color: var(--alfa-text);
}

/* Die Funktionslisten dieser Seiten sind auf Feature-Karten umgestellt
   (Layout 8). Die folgenden Regeln bringen das Akkordeon der Vorlage in die
   gleiche CI-Kartenoptik – für den Fall, dass die Klappfunktion wieder
   gewünscht ist, genügt dann der Wechsel der Markup-Bausteine. */
.alfa-section .accordion .ac-item {
  background-color: var(--alfa-grey-100);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.alfa-section .accordion .ac-item:last-child {
  margin-bottom: 0;
}

.alfa-section .accordion .ac-item .ac-title {
  font-family: var(--alfa-font);
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--alfa-primary);
  padding-right: var(--space-5);
}

.alfa-section .accordion .ac-item .ac-title > i {
  margin-right: var(--space-2);
  color: var(--alfa-teal);
}

.alfa-section .accordion .ac-item .ac-content {
  padding-top: var(--space-3);
  color: var(--alfa-text);
}


/* ==========================================================================
   8. Editor-Panel
   Layout 6 – radius-lg für Bühnen-Panels. Ersetzt den harten schwarzen
   Schatten von `iframe.flott` aus css_v5/stylo.css durch eine weiche,
   palettentreue Tiefe (CI 5.3).
   ========================================================================== */

.alfa-editor {
  margin: 0;
}

.alfa-section iframe.flott,
.alfa-editor iframe {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--alfa-white);
  box-shadow: var(--alfa-shadow-panel);
}

/* Ansicht-Umschalter: Pills über dem Editor (CI 7.1) */
.alfa-viewswitch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.alfa-viewswitch > li {
  margin: 0;
  border: 0 !important; /* neutralisiert `li { border-color }` aus stylo.css */
}

.alfa-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--alfa-primary);
  border-radius: var(--radius-pill);
  background-color: var(--alfa-white);
  color: var(--alfa-primary);
  font-family: var(--alfa-font);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.alfa-pill:hover,
.alfa-pill:focus {
  background-color: var(--alfa-primary);
  color: var(--alfa-white);
  text-decoration: none;
}

.alfa-pill > i {
  font-size: 1rem;
}

.alfa-editor-note {
  margin: var(--space-3) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--alfa-slate);
}


/* ==========================================================================
   9. Buttons
   CI 7.1 – leicht abgerundet (radius-sm), großzügiges Padding,
   handlungsorientierte Beschriftung.
   ========================================================================== */

.alfa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--alfa-primary);
  color: var(--alfa-white);
  font-family: var(--alfa-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}

.alfa-btn:hover,
.alfa-btn:focus {
  background-color: var(--alfa-blue-deep);
  color: var(--alfa-white);
  text-decoration: none;
}

/* Primär-CTA der Referenzseite: Orange-Verlauf als Signalfläche.
   CI 3.6 erlaubt Orange ausdrücklich für große, fette Signalelemente –
   nicht für kleinen Fließtext. CI 3.4: sparsam, hier zwei Buttons je Seite.

   Kontrast: Weiß auf dem Orange-Verlauf ergibt 3,57:1. Das genügt WCAG AA
   nur für große, fette Schrift (Schwelle 3:1 ab 18,66 px bei Gewicht 700) –
   für normalen Text wären 4,5:1 nötig, was kein Orange der Palette erreicht
   (`--alfa-accent` kommt auf 4,15:1). Die Beschriftung ist deshalb auf
   1,2 rem = 19,2 px angehoben. Die Referenzseite setzt hier 15,2 px ein und
   bleibt damit unter AA. */
.alfa-btn--signal {
  background-color: var(--alfa-orange);
  background-image: linear-gradient(120deg, var(--alfa-orange), var(--alfa-orange-deep));
  color: var(--alfa-white);
  font-size: 1.2rem;
}

.alfa-btn--signal:hover,
.alfa-btn--signal:focus {
  background-image: linear-gradient(120deg, var(--alfa-orange-deep), var(--alfa-orange-deep));
  color: var(--alfa-white);
  box-shadow: 0 8px 24px rgba(228, 91, 72, .35);
}

/* Theme-Buttons innerhalb der übernommenen Demo-Bereiche auf die Palette
   bringen. css_v5/color-variations/custom.css setzt dort `#164c93` – nahe an,
   aber nicht identisch mit Primary Blue (CI 3.2). Betrifft nur Seiten mit
   CI-Layer, das Theme selbst bleibt unangetastet. */
.alfa-section .btn.btn-primary,
.alfa-section .button.color {
  background-color: var(--alfa-primary);
  border-color: var(--alfa-primary);
  border-radius: var(--radius-sm);
  color: var(--alfa-white);
}

.alfa-section .btn.btn-primary:hover,
.alfa-section .btn.btn-primary:focus {
  background-color: var(--alfa-blue-deep);
  border-color: var(--alfa-blue-deep);
  color: var(--alfa-white);
}

/* Sekundär-CTA auf dunkler Bühne: nur Kontur.
   Gleiche Schriftgröße wie der Signal-Button, damit beide CTAs auf einer
   Linie stehen. */
.alfa-btn--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: var(--alfa-white);
  font-size: 1.2rem;
}

.alfa-btn--ghost:hover,
.alfa-btn--ghost:focus {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
  color: var(--alfa-white);
}


/* ==========================================================================
   10. CTA-Band auf dunkler Bühne
   Layout 4 + 8 – Flex-Zeile, Gap 32 px, Aussage links, Button rechts,
   auf Mobile gestapelt. CI 3.5 – Navy-Verlauf in der Blau-Zyan-Familie,
   weiße Typografie, ein Akzentwort in Light Cyan.
   ========================================================================== */

section.alfa-cta {
  padding: var(--space-8) 0 !important;
  /* CI 3.4: Blau dominiert – der Zyan-Anteil setzt erst spät ein. */
  background-image: linear-gradient(120deg, var(--alfa-navy) 0%, #0B3358 68%, var(--alfa-teal) 100%);
  background-color: var(--alfa-navy); /* Fallback */
  color: var(--alfa-white);
  clear: both;
}

.alfa-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-band);
}

.alfa-cta-text {
  max-width: var(--layout-reading);
}

.alfa-cta h2 {
  color: var(--alfa-white);
  margin-bottom: var(--space-3);
}

.alfa-cta p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7); /* CI 3.6 */
}


/* ==========================================================================
   11. Bühne (Hero)
   Aufbau nach dem Hero der Referenzseite
   alfamedia.com/loesungen/print-automation: Navy-Verlauf mit drei weichen
   Farbschleiern, zweispaltiger Hero-Split (Layout 8), linksbündige
   Headline mit einem Akzentwort in Light Cyan, Lead, zwei CTAs und rechts
   ein gerahmtes Produkt-Panel.

   Die Live-Seite nutzt dort Werte, die neben den Guide-Skalen liegen
   (Radius 10 px, Headline bis 54,4 px, Lead 17,3 px). Struktur und
   Komposition sind von dort übernommen, die Werte kommen aus den
   verbindlichen Tokens – die Farben der Schleier weichen dabei nur um
   1–3 Digit ab und ergeben denselben Eindruck.
   ========================================================================== */

section.alfa-stage {
  position: relative;
  overflow: hidden;
  padding: var(--space-7) 0 !important; /* 56 px wie die Referenz */
  background-color: var(--alfa-navy);
  background-image:
    radial-gradient(900px 480px at 82% -8%, rgba(49, 169, 203, .42), transparent 60%),
    radial-gradient(700px 420px at 6% 15%, rgba(228, 91, 72, .28), transparent 55%),
    radial-gradient(900px 520px at 65% 100%, rgba(115, 201, 218, .30), transparent 60%),
    linear-gradient(160deg, var(--alfa-navy) 0%, #062442 55%, #0C3161 100%);
  color: var(--alfa-white);
}

/* Hero-Split: Text ↔ Produkt-Panel, Gap 56 px (Layout 4) */
.alfa-stage-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap-split);
  align-items: center;
}

.alfa-stage-text {
  text-align: left; /* Layout 1.6 */
}

.alfa-stage h1 {
  font-size: 3.2rem;
  line-height: 1.06;
  font-weight: 700 !important;
  color: var(--alfa-white);
  margin: 0;
  text-transform: none;
}

.alfa-stage-lead {
  max-width: 52ch; /* Zeilenlänge wie in der Referenz */
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}

.alfa-stage-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Produkt-Panel: radius-lg außen, radius-md innen (Layout 6:
   verschachtelte Flächen mit kleinerem Innenradius) */
.alfa-stage-panel {
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, .04);
  box-shadow: 0 30px 60px rgba(4, 12, 24, .35);
}

.alfa-stage-panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Vorschau-Variante: Die Anzeige liegt als weißes Blatt auf der dunklen
   Bühne. Die Vorschaubilder sind nur 350 px breit – die rechte Spalte nimmt
   deshalb ihre natürliche Breite (`auto`), damit nichts hochskaliert und
   unscharf wird. */
.alfa-stage-split--preview {
  grid-template-columns: 1fr auto;
}

/* Ohne Vorschau-Panel: einspaltige Buehne auf Lesebreite */
.alfa-stage-split--single {
  grid-template-columns: 1fr;
}

.alfa-stage-split--single .alfa-stage-text {
  max-width: var(--layout-reading);
}

.alfa-stage-panel--sheet {
  margin: 0;
  border-color: rgba(255, 255, 255, .22);
  background-color: var(--alfa-white);
}

.alfa-stage-panel--sheet img {
  width: auto;
  max-width: 100%;
}


/* ==========================================================================
   12. Kachelraster
   Layout 4 – kompakte, gleichwertige Kacheln mit engem Gap (16 px).
   Dreispaltig, weil die neun Highlights so in gleichmäßige Reihen fallen.
   ========================================================================== */

.alfa-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-tiles);
  align-items: stretch;
}

.alfa-tile {
  background-color: var(--alfa-white);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.alfa-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--alfa-grey-50);
  color: var(--alfa-teal);
  font-size: 1.15rem;
}

.alfa-tile > h3 {
  margin-bottom: var(--space-2);
}


/* ==========================================================================
   13. Hinweis-Block, Abbildungen, Video-Raster, Referenzen
   ========================================================================== */

/* Hinweis: Fläche statt Rahmen (CI 5.3), Link in Primary Blue (CI 7.2) */
.alfa-notice {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--alfa-white);
}

.alfa-notice p {
  margin: 0;
}

/* Partner-Split: Text ↔ Bild, 2 Spalten mit großzügigem Gap (Layout 4).
   Für Sektionen mit kleinformatigem Bild, das allein in der vollen
   Container-Breite verloren stünde. */
.alfa-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-split);
  align-items: center;
}

.alfa-split .alfa-section-head {
  margin-bottom: 0;
}

/* Bildseite wechseln, ohne die Lesereihenfolge im Markup zu verdrehen:
   Text steht immer zuerst im Quelltext (Screenreader, Mobile-Stapelung),
   nur die Spaltenzuweisung tauscht. */
.alfa-split--reverse > .alfa-section-head {
  grid-column: 2;
  grid-row: 1;
}

.alfa-split--reverse > .alfa-figure {
  grid-column: 1;
  grid-row: 1;
}

/* Abbildungen: radius-lg für große Flächen (Layout 6) */
.alfa-figure {
  margin: 0;
}

.alfa-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Video-Vorschauen: Kartenraster mit Gap 20 px (Layout 4) */
.alfa-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}

.alfa-media-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--alfa-grey-100);
  box-shadow: var(--alfa-shadow-card);
}

.alfa-media-item > img {
  display: block;
  width: 100%;
  height: auto;
}

.alfa-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: var(--alfa-primary);
  color: var(--alfa-white) !important;
  font-size: 1.15rem;
  transition: background-color .2s ease;
}

.alfa-media-play:hover,
.alfa-media-play:focus {
  background-color: var(--alfa-accent);
  color: var(--alfa-white) !important;
  text-decoration: none !important;
}

/* Teaser „Das könnte Sie auch interessieren“: 3 gleichwertige Karten,
   Gap 20 px (Layout 4). Ersetzt das Theme-Karussell der Doku-Seiten – bei
   genau drei Elementen bringt ein Karussell nichts und die Pfeil-/Dot-
   Steuerung entfällt. */
.alfa-teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
  align-items: stretch;
}

.alfa-teaser {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--alfa-white);
  box-shadow: var(--alfa-shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}

.alfa-teaser:hover {
  transform: translateY(-4px);
  box-shadow: var(--alfa-shadow-panel);
}

.alfa-teaser > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none !important;
}

.alfa-teaser-image {
  overflow: hidden;
  height: 180px;
  background-color: var(--alfa-grey-50);
}

.alfa-teaser-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.alfa-teaser:hover .alfa-teaser-image > img {
  transform: scale(1.06);
}

.alfa-teaser-body {
  padding: var(--space-4);
}

.alfa-teaser-badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--alfa-grey-100);
  color: var(--alfa-teal);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.alfa-teaser-body > h3 {
  margin: 0;
}

/* Referenz-Karussell: Logos einheitlich einpassen */
.alfa-clients img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/* ==========================================================================
   14. Footer
   CI 3.4 – dunkle Flächen nutzen Navy #071B33. Ersetzt das
   palettenfremde Türkis aus css_v5/stylo.css.
   ========================================================================== */

#footer.alfa-footer {
  background-color: var(--alfa-navy) !important;
  color: var(--alfa-white) !important;
}

#footer.alfa-footer .footer-content {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Neutralisiert `dl, ol, ul { margin-left: 4rem }` aus css_v5/stylo.css */
#footer.alfa-footer ul {
  margin-top: 0;
  margin-left: 0;
}

/* text-transform: none neutralisiert `.widget > h4 { uppercase }` aus
   css_v5/style.css. Zwingend nach CI 1: „ALFAMEDIA" in Versalien ist
   ausdrücklich untersagt – der Markenname bleibt kleingeschrieben.
   CI 4.4 erlaubt Großbuchstaben ohnehin nur für kurze Kicker-Labels. */
#footer.alfa-footer .widget h4,
#footer.alfa-footer .widget .widget-title {
  color: var(--alfa-white);
  font-size: 1.15rem;
  font-weight: 700 !important;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: var(--space-4);
}

#footer.alfa-footer,
#footer.alfa-footer p,
#footer.alfa-footer li {
  font-size: 0.9375rem; /* 15 px */
  line-height: 1.6;
}

#footer.alfa-footer a:not(.btn):not(:hover) {
  color: rgba(255, 255, 255, .7) !important;
}

#footer.alfa-footer a:not(.btn):hover {
  color: var(--alfa-cyan-light) !important;
}

#footer.alfa-footer .list-icon > li > i {
  color: var(--alfa-cyan-light);
}

#footer.alfa-footer .copyright-content {
  background-color: rgba(0, 0, 0, .25) !important;
  color: rgba(255, 255, 255, .7);
}

#footer.alfa-footer .social-icons-border ul li a {
  border-color: rgba(255, 255, 255, .3);
  color: var(--alfa-white);
}


/* ==========================================================================
   15. Responsives Verhalten
   Layout 5 – Kollaps-Regeln. Wichtig (verifiziert): Gaps und
   Sektionspolster werden auf Mobile NICHT reduziert.
   ========================================================================== */

/* Tablet: 768 – 1023 px – mehrspaltige Kachelraster auf 2 Spalten */
@media (max-width: 1023px) {
  .alfa-stage h1 {
    font-size: 2.6rem;
  }

  .alfa-section h2,
  .alfa-cta h2 {
    font-size: 2rem;
  }

  .alfa-tiles,
  .alfa-teasers {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: < 768 px – einspaltig, CTA-Band gestapelt */
@media (max-width: 767px) {
  .alfa-stage h1 {
    font-size: 2.1rem;
  }

  .alfa-section h2,
  .alfa-cta h2 {
    font-size: 1.75rem;
  }

  /* Feature-Grid 2 → 1 Spalte, Gap 20 px bleibt (Layout 5) */
  .alfa-cards {
    grid-template-columns: 1fr;
  }

  /* Die Highlight-Kacheln tragen 2–3 Sätze und werden deshalb einspaltig –
     die Ausnahme „Vorteils-Kacheln bleiben 2-spaltig" (Layout 5) gilt für
     die kompakten Kacheln mit Kurzlabel, nicht für Textkacheln. */
  .alfa-tiles {
    grid-template-columns: 1fr;
  }

  /* Video-Vorschauen und Teaser einspaltig, Gap 20 px bleibt */
  .alfa-media-grid,
  .alfa-teasers {
    grid-template-columns: 1fr;
  }

  /* Partner-Split und Hero-Split gestapelt, Gap 56 px bleibt (Layout 5) */
  .alfa-split,
  .alfa-stage-split {
    grid-template-columns: 1fr;
  }

  /* Text oben, Visual darunter (Layout 5) */
  .alfa-stage-text {
    order: 1;
  }

  .alfa-stage-panel {
    order: 2;
  }

  /* CTA-Band gestapelt, Gap 32 px bleibt (Layout 8) */
  .alfa-cta-band {
    flex-direction: column;
    align-items: flex-start;
  }

  .alfa-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}