/*
 * your-matrix: Veredelung der Original-Seiten, Teil P (Plugin). Stand 02.10.2026.
 *
 * Hier steht nur, was Divi selbst nicht kann: SVG-Ringe, Punkteraster als
 * Zusatzschicht, Einblenden beim Scrollen, Video-Zoom, Glasflächen
 * (backdrop-filter), wachsende Unterlinien, :active-Rückmeldung, Fokusring,
 * feine Linien an Überschriften, Verläufe am Sektionsrand.
 * Alles, was einen Divi-Wert ersetzt (Farben, Größen, Abstände, Schatten,
 * Knopf-Presets), steht in C:\Users\jensm\Claude\Projects\matrix\VEREDELUNG-QUELLE.md
 * und wird an der Quelle geändert. Deshalb hier kein !important und kein
 * #page-container; die Regeln ergänzen Divi, sie überschreiben es nicht.
 *
 * EINBINDEN
 *   wp_enqueue_style( 'ym-veredelung', YM_URL . 'assets/ym-veredelung.css',
 *     array(), ym_datei_version( 'assets/ym-veredelung.css' ) );
 *   Seitenweit, nicht im Visual Builder. Dazu gehört assets/ym-veredelung.js.
 *
 * AUS- UND EINSCHALTEN
 *   Jeder Block wirkt nur, wenn am <html>-Element die Klasse ymv-<kennung>
 *   steht. Die Klassen setzt ym-veredelung.js aus seiner Liste; was in
 *   window.YMV_AUS steht, wird nicht gesetzt. Ohne JS bleibt alles Original.
 *   Kein Text wird verändert. Pseudo-Elemente haben immer content: "".
 *
 * KENNUNGEN (Seite · Wirkung)
 *   fokus-seitenweit      alle · sichtbarer Tastaturfokus in Cyan, auf dunklen Flächen Aqua
 *   knoepfe-rueckmeldung  alle · Knöpfe (Divi und .yg-knopf) ducken sich beim Drücken (scale .97)
 *   einblenden-seitenweit alle · Module gleiten beim Scrollen ein (GSAP oder IntersectionObserver)
 *   fuss-signatur         alle · Punkteraster, Cyan→Aqua-Linie oben, wachsende Unterlinie, Ring um Social-Symbole
 *   start-hero            Start · Vignette hinter der H1, langsamer Video-Zoom, Verlauf in die weiße Fläche
 *   start-gaenge          Start · kurze Cyan→Aqua-Linie unter „Die Gänge der Bibliothek“
 *   start-erfahrung       Start · Punkteraster und konzentrische Ringe hinter „Erfahrungsintelligenz statt KI“
 *   wir-hero              Wir für euch · Glas (backdrop-filter) auf den Knöpfen Bettina/Petra
 *   wir-personen          Wir für euch · weicher Verlauf oben/unten in der Petra-Sektion
 *   matrix-text           Warum Matrix? · Glas (backdrop-filter) auf der Text-Tafel, Linie unter der H1
 */

/* ---------- Marke (nur aktiv, wenn irgendein Block eingeschaltet ist) ---------- */
html[class*="ymv-"] {
  --ymv-navy: #25385D;
  --ymv-cyan: #0A89C5;
  --ymv-aqua: #7FD8DC;
  --ymv-linie: #DCE4EA;
  --ymv-nacht: #121E34;
  --ymv-ease: cubic-bezier(.22, 1, .36, 1);
  --ymv-ease-aus: cubic-bezier(.23, 1, .32, 1);
  /* Signatur: feines Punkteraster in Cyan */
  --ymv-raster: radial-gradient(circle at 1px 1px, rgba(10, 137, 197, .16) 1px, transparent 1.7px);
  --ymv-raster-hell: radial-gradient(circle at 1px 1px, rgba(127, 216, 220, .22) 1px, transparent 1.7px);
}

/* Zierstriche an Überschriften: entfernt (Jens 03.10.2026). */

/* =====================================================================
   fokus-seitenweit · Tastaturfokus
   ===================================================================== */
html.ymv-fokus-seitenweit #main-content a:focus-visible,
html.ymv-fokus-seitenweit #main-content button:focus-visible,
html.ymv-fokus-seitenweit #main-content [tabindex]:focus-visible,
html.ymv-fokus-seitenweit .et_pb_section_0_tb_footer a:focus-visible {
  outline: 3px solid var(--ymv-cyan);
  outline-offset: 3px;
  /* kein eigener Radius: Der Ring folgt der Form des Elements, Knöpfe
     bleiben Pillen (vorher setzte die Regel 4 px und machte sie eckig) */
}
html.ymv-fokus-seitenweit .ymv-dunkel a:focus-visible,
html.ymv-fokus-seitenweit .ymv-dunkel button:focus-visible {
  outline-color: var(--ymv-aqua);
}

/* =====================================================================
   knoepfe-rueckmeldung · Drücken sichtbar machen
   Farben, Radius, Schrift und Symbol kommen aus dem Divi-Preset (Quelle).
   Divis Farbübergänge bleiben in der Liste. Innenabstand wird nicht animiert
   (Layout-Animation), nur transform beim Drücken.
   ===================================================================== */
html.ymv-knoepfe-rueckmeldung #main-content .et_pb_button,
html.ymv-knoepfe-rueckmeldung #main-content .yg-knopf {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .16s var(--ymv-ease-aus);
}
html.ymv-knoepfe-rueckmeldung #main-content .et_pb_button:active,
html.ymv-knoepfe-rueckmeldung #main-content .yg-knopf:active {
  transform: scale(.97);
}

/* =====================================================================
   einblenden-seitenweit · weiches Einblenden beim Scrollen
   Die Klassen vergibt ym-veredelung.js nur, wenn kein GSAP da ist (sonst
   setzt GSAP Inline-Stile). Ohne JS gibt es diese Klassen nicht.
   ===================================================================== */
html.ymv-einblenden-seitenweit .ymv-wartet {
  opacity: 0;
  transform: translateY(18px);
}
html.ymv-einblenden-seitenweit .ymv-da {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ymv-ease), transform .85s var(--ymv-ease);
  transition-delay: var(--ymv-verzoegerung, 0ms);
}
@media print {
  html.ymv-einblenden-seitenweit .ymv-wartet { opacity: 1; transform: none; }
}

/* =====================================================================
   fuss-signatur · Fußbereich (Theme-Builder-Vorlage, auf allen Seiten)
   Fläche, Abstände, Listen, Schriftgrößen: Quelle.
   ===================================================================== */
html.ymv-fuss-signatur .et_pb_section_0_tb_footer {
  position: relative;
  isolation: isolate;
}
html.ymv-fuss-signatur .et_pb_section_0_tb_footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ymv-raster-hell);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
html.ymv-fuss-signatur .et_pb_section_0_tb_footer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--ymv-cyan), var(--ymv-aqua) 45%, transparent 90%);
  opacity: .9;
  pointer-events: none;
}
/* Wachsende Unterlinie bei Links (Adresse und Liste „Informationen“) */
html.ymv-fuss-signatur .et_pb_text_0_tb_footer a,
html.ymv-fuss-signatur .et_pb_text_1_tb_footer li a {
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--ymv-aqua), var(--ymv-aqua));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size .28s var(--ymv-ease), color .25s ease;
}
html.ymv-fuss-signatur .et_pb_text_0_tb_footer a:hover,
html.ymv-fuss-signatur .et_pb_text_1_tb_footer li a:hover {
  background-size: 100% 1px;
}
/* Ring um die Social-Symbole */
html.ymv-fuss-signatur .et_pb_icon_list_item .et-pb-icon {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transition: border-color .25s ease, background-color .25s ease;
}
html.ymv-fuss-signatur .et_pb_icon_list_item:hover .et-pb-icon {
  border-color: var(--ymv-aqua);
  background-color: rgba(127, 216, 220, .08);
}

/* =====================================================================
   start-hero · Startseite, Video-Hero
   Textschatten weg und Laufweite: Quelle. Hier: Vignette hinter dem
   Titel, langsamer Zoom auf dem Video, Verlauf in die weiße Fläche.
   ===================================================================== */
html.ymv-start-hero .home .et_pb_section_0 {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
html.ymv-start-hero .home .et_pb_section_0::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(24vh, 200px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 60%, #fff);
  pointer-events: none;
  z-index: 2;
}
html.ymv-start-hero .home .et_pb_section_0 > .et_pb_row {
  position: relative;
  z-index: 3;
}
html.ymv-start-hero .home .et_pb_section_0 .et_pb_text_0 {
  position: relative;
}
html.ymv-start-hero .home .et_pb_section_0 .et_pb_text_0::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: radial-gradient(55% 60% at 50% 50%, rgba(18, 30, 52, .42), rgba(18, 30, 52, 0) 100%);
  pointer-events: none;
}
/* Divi-Hintergrundvideos füllen die Fläche vom ersten Bild an. Divi rechnet die
   Größe erst per Skript aus und schreibt sie als style-Attribut ans Video; bis
   dahin stand es in Originalgröße (864 × 496) oben links auf grauer Fläche
   (Jens 03.10.2026, Bildschirmfoto). Gegen das style-Attribut hilft nur
   !important; eine Divi-Einstellung dafür gibt es nicht. Ohne Klassenbedingung,
   damit es schon vor dem Veredelungs-Skript greift. */
.et_pb_section > .et-pb-background-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.et_pb_section > .et-pb-background-video video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
}

/* Dasselbe für die Hülle, die mediaelement.js um das Video baut (.mejs-container …).
   Divi rechnet ihr per Skript eine Überbreite mit negativem Rand zu (1146 px bei
   412 px Fenster); bis dahin stand sie in Videogröße versetzt, und beim ersten Bild
   sprang das Video auf volle Fläche: CLS 0,557 mobil (Messung 04.10.2026). Mit
   fester Fläche und object-fit: cover liegt es vom ersten Bild an richtig. */
.et_pb_section > .et-pb-background-video .mejs-container,
.et_pb_section > .et-pb-background-video .mejs-inner,
.et_pb_section > .et-pb-background-video .mejs-mediaelement,
.et_pb_section > .et-pb-background-video mediaelementwrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Ein Hintergrundvideo ist Dekoration: mediaelement.js darf darüber nie Knöpfe,
   Ladekreisel oder seine Fehlermeldung („Media error … Datei herunterladen“) legen.
   Die erschien im PageSpeed-Prüfbrowser (kann kein H.264) mitten im Hero
   (04.10.2026); seither gibt es zusätzlich eine WebM-Quelle. Bleibt das Video aus,
   steht das Standbild da. */
.et_pb_section > .et-pb-background-video .mejs-layers,
.et_pb_section > .et-pb-background-video .mejs-controls,
.et_pb_section > .et-pb-background-video .mejs-cannotplay,
.et_pb_section > .et-pb-background-video .mejs-offscreen {
  display: none !important;
}

/* Divis Ladezustand für Sektionen mit Hintergrundvideo (.et_pb_preload) setzt per
   !important eine graue Fläche (#464646), zeigt das Hintergrundbild in
   Originalgröße oben links, einen Ladekreisel und blendet den Inhalt aus, bis das
   Video bereit ist. Statt dessen: Standbild in voller Fläche, Inhalt sofort da;
   das Video legt sich danach über dasselbe erste Bild. Keine Divi-Einstellung
   dafür vorhanden, daher hier, mit höherer Spezifität gegen Divis !important. */
.et_pb_section.et-pb-has-background-video.et_pb_preload {
  background-color: #121E34 !important;
  background-size: cover !important;
  background-position: center !important;
}
.et_pb_section.et-pb-has-background-video.et_pb_preload::before {
  content: none !important;
}
.et_pb_section.et-pb-has-background-video.et_pb_preload > div {
  visibility: visible !important;
}

html.ymv-start-hero .home .et_pb_section_0 .et-pb-background-video video {
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  html.ymv-start-hero .home .et_pb_section_0 .et-pb-background-video video {
    animation: ymv-hero-zoom 34s ease-in-out infinite alternate;
  }
}
@keyframes ymv-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* =====================================================================
   start-gaenge · früher Linie unter „Die Gänge der Bibliothek“, entfernt
   (Jens 03.10.2026). Fläche, Größe, Farbe, Abstände: Quelle.
   ===================================================================== */

/* =====================================================================
   start-erfahrung · Punkteraster und Ringe hinter dem Text
   Abstände, Schriftgrößen und der Kasten um „Lasst uns voneinander
   lernen!“: Quelle (Kasten entfällt dort, siehe Prüfbericht H4).
   ===================================================================== */
html.ymv-start-erfahrung .home .et_pb_section_3 {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
html.ymv-start-erfahrung .home .et_pb_section_3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ymv-raster-hell);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 50% 40%, #000 0%, transparent 75%);
  opacity: .8;
  pointer-events: none;
}
html.ymv-start-erfahrung .home .et_pb_section_3 > .et_pb_row {
  position: relative;
  z-index: 1;
}
html.ymv-start-erfahrung .home .et_pb_section_3 .ymv-ringe {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  --ymv-ringe-groesse: min(120vw, 760px);
  --ymv-ringe-deckkraft: .3;
}
/* Ringe (SVG, aria-hidden, per JS eingehängt) */
.ymv-ringe {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--ymv-ringe-groesse, 640px);
  height: var(--ymv-ringe-groesse, 640px);
  opacity: var(--ymv-ringe-deckkraft, .38);
}
.ymv-ringe circle {
  fill: none;
  stroke: var(--ymv-ringe-farbe, var(--ymv-aqua));
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.ymv-ringe.ymv-gezeichnet circle {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ymv-ringe.ymv-gezeichnet circle {
    transition: stroke-dashoffset 1.6s var(--ymv-ease);
  }
  .ymv-ringe.ymv-gezeichnet circle:nth-child(2) { transition-delay: .12s; }
  .ymv-ringe.ymv-gezeichnet circle:nth-child(3) { transition-delay: .24s; }
  .ymv-ringe.ymv-gezeichnet circle:nth-child(4) { transition-delay: .36s; }
}

/* =====================================================================
   wir-hero · Glas auf den Knöpfen Bettina/Petra
   Lage der Texte (unten links), Verlauf von unten, durchscheinende
   Knopf-Farben: Quelle (Sektions-Verlauf und Knopfmodule).
   ===================================================================== */
html.ymv-wir-hero .page-id-665 .et_pb_section_1 .et_pb_button {
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
/* Bei „Transparenz reduzieren“ (in Windows: Transparenzeffekte aus) nur die
   Unschärfe weg. Die durchscheinende Fläche aus dem Preset bleibt (Wunsch Jens,
   wie der Video-Knopf der Startseite); weiße Schrift steht auf dem dunklen Verlauf. */
@media (prefers-reduced-transparency: reduce) {
  html.ymv-wir-hero body.page-id-665 #main-content .et_pb_section_1 .et_pb_button {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =====================================================================
   wir-personen · weicher Verlauf oben/unten in der Petra-Sektion
   Fläche der Bettina-Sektion und Kartenschatten: Quelle.
   ===================================================================== */
html.ymv-wir-personen .page-id-665 .et_pb_section_3 {
  position: relative;
  isolation: isolate;
}
html.ymv-wir-personen .page-id-665 .et_pb_section_3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(244, 248, 250, .35), rgba(244, 248, 250, 0) 30%, rgba(244, 248, 250, 0) 70%, rgba(244, 248, 250, .35));
  pointer-events: none;
}
html.ymv-wir-personen .page-id-665 .et_pb_section_3 > .et_pb_row {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   matrix-text · Glas auf der Text-Tafel, Linie unter der H1
   Fläche, Rand, Radius, Innenabstand und Breite der Tafel: Quelle.
   ===================================================================== */
html.ymv-matrix-text .page-id-667 .et_pb_section_1 .et_pb_text_0 {
  position: relative;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
@media (prefers-reduced-transparency: reduce) {
  html.ymv-matrix-text body.page-id-667 #main-content .et_pb_section_1 .et_pb_text_0 {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(27, 42, 71, .96);
  }
}

/* =====================================================================
   Bewegung aus, wenn gewünscht
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[class*="ymv-"] .et_pb_button,
  html[class*="ymv-"] .yg-knopf,
  html[class*="ymv-"] .et_pb_image img,
  html[class*="ymv-"] .et_pb_text_0_tb_footer a,
  html[class*="ymv-"] .et_pb_text_1_tb_footer li a {
    transition: none;
  }
  html[class*="ymv-"] .et_pb_button:active,
  html[class*="ymv-"] .yg-knopf:active,
  html[class*="ymv-"] .et_pb_image_1 img {
    transform: none;
  }
  html.ymv-einblenden-seitenweit .ymv-wartet {
    opacity: 1;
    transform: none;
  }
  html[class*="ymv-"] .ymv-ringe circle {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Punkteraster aus (Jens 04.10.2026): Startseite Abschnitt 3 und alte Divi-Fußzeile.
   Zum Zurückholen diesen Block entfernen. */
html.ymv-start-erfahrung .home .et_pb_section_3::before,
html.ymv-fuss-signatur .et_pb_section_0_tb_footer::before { content: none; }

/* /wir/ (Seite 661), Kartentitel als Divi-Knöpfe (raster-lr, Ursache 2): Divis Pfeil (::after) lag
   absolut neben dem Text und überdeckte bei umbrochenem Titel Buchstaben. Hier steht er im Textfluss
   und hängt per Wortverbinder (U+2060) am letzten Wort, bricht also nie allein um.
   Innenabstand 20 px links/rechts steht an der Quelle (Divi-Modul). */
.page-id-661 .et_pb_button_module_wrapper > a.et_pb_button:is(.et_pb_button_0, .et_pb_button_1, .et_pb_button_2, .et_pb_button_3)::after {
  position: static !important;
  display: inline !important;
  margin-left: 0 !important;
  padding-left: .25em;
  content: "\2060\26" !important;
  line-height: inherit !important;
  vertical-align: baseline;
  transform: none;
}
/* 981 bis 1100 px: Karten 179 bis 205 px breit, „Organisation“ mit Pfeil passt nur ohne Sperrung und mit 16 px */
@media (min-width: 981px) and (max-width: 1100px) {
  /* body #page-container .et_pb_section davor: Divi setzt Schrift und Sperrung mit !important unter #page-container */
  body.page-id-661 #page-container .et_pb_section .et_pb_button_module_wrapper > a.et_pb_button:is(.et_pb_button_0, .et_pb_button_1, .et_pb_button_2, .et_pb_button_3) { letter-spacing: 0 !important; font-size: 16px !important; }
}

/* Kritik R16 F4: Tastaturfokus auf einem Element, das noch auf sein Einblenden wartet
   (Klasse setzt ym-veredelung.js beim focusin, nur bei sichtbarem Tastaturfokus):
   sofort ganz sichtbar, ohne Übergang. !important, weil GSAP die Deckkraft inline setzt. */
.ym-fokus-da { opacity: 1 !important; transform: none !important; transition: none !important; }

/* R17 N16: Kopfknöpfe „Bettina“/„Petra“ auf Wir für euch (Navy-Kopfkarte): Ring in Aqua.
   Vorher ohne sichtbaren Ring (Divi setzt die Breite dort auf 0), nur Flächenwechsel. Aqua gegen Navy 7,1 : 1. */
html.ymv-fokus-seitenweit body #page-container #main-content .ym-kopf-karte .et_pb_button:focus-visible {
  outline: 3px solid var(--ymv-aqua);
  outline-offset: 3px;
}