/* edumod-wp.css — WordPress-spezifische Ergänzungen. edumod.css bleibt byte-gleich zur Referenz (Task 04).
   Nur Tokens aus CORPORATE-DESIGN §7 verwenden — keine neuen Farben, Schriften, Komponenten. */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
/* Contact Form 7 (Task 07): Plugin-CSS ist aus (inc/cf7.php). Diese zwei Regeln übernehmen dessen Ausblenden, sonst zeigte das
   versteckte fieldset seinen Browser-Rahmen und die Screenreader-Antwort ihre leeren Absätze. Seit Task 10 auch das Köderfeld .edumod-hp (mu-plugin edumod/formular.php). */
.wpcf7 .screen-reader-response,.edumod-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wpcf7 .hidden-fields-container,.wpcf7-display-none,.wpcf7-spinner{display:none}
/* Contact Form 7 — Zustände (Task 10); Gestaltung der Felder kommt aus edumod.css (.form-card, .fg). Klassen am form setzt das CF7-Skript
   (init, invalid, unaccepted, spam, aborted, sent, failed, submitting, resetting, validating). Leere Antwort-Box nie zeigen: validating
   löst init kurz ab. */
.wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:.85rem;line-height:1.4;color:var(--accent)}
/* Kein Sprung beim Korrigieren: Im Zustand invalid hält jedes Pflichtfeld ohne Hinweis eine Hinweis-Zeile frei. CF7 entfernt den Hinweis
   beim Fokuswechsel, also beim mousedown auf den Button; ohne Platzhalter rutschte der Button vor dem mouseup um die Hinweis-Höhe weg und
   der Klick ging verloren (gemessen −30 px, User-Entscheid Task 10). Höhe = eine Zeile des Hinweises (font-size × line-height oben). */
.wpcf7 form.invalid .wpcf7-form-control-wrap:has(.wpcf7-validates-as-required):not(:has(.wpcf7-not-valid-tip))::after{content:"";display:block;margin-top:6px;height:calc(.85rem * 1.4)}
.wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.92rem;color:var(--ink-soft);background:var(--surface)}
.wpcf7 form.init .wpcf7-response-output,.wpcf7 form.resetting .wpcf7-response-output,.wpcf7 form.submitting .wpcf7-response-output,.wpcf7 form .wpcf7-response-output:empty{display:none}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--stahl)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output{border-color:var(--accent)}
.wpcf7 form.submitting button[type=submit]{opacity:.6;pointer-events:none}
/* Einwilligung: CF7 legt drei span um die Checkbox; inline erzeugten sie eine Zeilenbox (+3 px bei einzeiligem Text, 820 px gemessen).
   Als Flex-Kette verhält sich die Checkbox wie in der Referenz (dort ist das input selbst das Flex-Element von .check). */
.form-card .check .wpcf7-form-control-wrap,.form-card .check .wpcf7-acceptance,.form-card .check .wpcf7-list-item{display:flex;flex:none}
/* Anwendungsfälle (Task 08): wp_get_attachment_image() setzt width/height-Attribute; das height-Attribut schlug aspect-ratio:2/3
   aus .uc img (1024 statt ~330 px je Bild bei 1280, gemessen). Die Referenz-<img> trägt keine Attribute, height:auto stellt ihr Verhalten her. */
.uc img{height:auto}
/* Cookie-Banner (Task 11, E13): beauftragte neue Komponente, die Referenz kennt keinen. Fixiert unten, im HTML hidden, per JS geöffnet:
   kein Layout-Sprung. Nur Tokens aus CORPORATE-DESIGN §7 und bestehende Komponenten (.btn, .eyebrow, .check, .link-arrow).
   [hidden] ausdrücklich: .btn{display:inline-flex} aus edumod.css schlägt sonst das hidden-Attribut («Auswahl speichern» stünde immer da).
   z-index über der mobilen CTA-Leiste (.mcta 300), unter dem Team-Modal (1000, folgt im DOM). */
.edumod-consent{position:fixed;left:0;right:0;bottom:0;z-index:1000;padding:0 var(--gutter) 16px;pointer-events:none}
.edumod-consent[hidden],.edumod-consent [hidden]{display:none}
.edumod-consent .ec-inner{pointer-events:auto;max-width:var(--maxw);margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:20px 24px;display:grid;gap:12px}
.edumod-consent .eyebrow{margin:0}
.edumod-consent .eyebrow:focus{outline:2px solid var(--stahl);outline-offset:4px}
.edumod-consent .ec-text{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.edumod-consent .ec-text a{color:var(--blau);text-decoration:underline}
/* .check gilt in edumod.css nur in .form-card (Z. 768 f.): Werte von dort übernommen, ohne den Aussenabstand. */
.edumod-consent .check{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--meta);margin:0}
.edumod-consent .check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--blau)}
.edumod-consent .check b{color:var(--ink)}
/* «Ablehnen» und «Akzeptieren» gleich gross aus der Bauweise (E13 Fairness): gleich breite Raster-Spalten = breitester Text, auch wenn
   ein Text im Backend länger wird. Mit min-width allein brach «Ablehnen» bei 390 px in eine eigene Zeile (312 statt 192 px, gemessen). */
.edumod-consent .ec-aktionen{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.edumod-consent .ec-wahl{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:12px}
.edumod-consent .ec-mehr{padding:0}
/* Handy: volle Breite unten (Bottom-Sheet), deckt die CTA-Leiste ganz ab — mit Rand schauten ihre Buttons links und rechts hervor. */
@media (max-width:820px){
  .edumod-consent{padding:0}
  .edumod-consent .ec-inner{padding:18px 18px calc(16px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .edumod-consent .ec-wahl{display:grid;grid-auto-flow:row;grid-template-columns:1fr 1fr;width:100%}
  .edumod-consent .ec-wahl .btn{min-width:0;padding:14px 12px;white-space:normal}
  .edumod-consent .ec-wahl [data-ec="speichern"]{grid-column:1/-1}
}
/* Kunden-Laufband mit Bild-Logos (2026-10-09): die Referenz kennt nur Wortmarken. (1) Ihr Hover setzt grayscale(0) am span, das img trägt
   einen eigenen Filter und blieb grau → Hover auch am img. (2) Kompakte Logos (Breite/Höhe < 2, seit 2026-10-17 < 2.8; Klasse aus
   kunden.php über edumod_bild_kompakt) wären bei 34 px unleserlich → 52 px. (3) Sehr breite Logos (Netrix 10:1, 350 px) dominierten → Breite gedeckelt,
   Bild bleibt unverzerrt. (4) Tempo: die Bahn der Referenz (8 Wortmarken) läuft 39.8 px/s (1669.5 px Satz / 42 s, gemessen 1280 px); 17 Logos (3028.5 px Satz, gemessen) → 77 s = 39.3 px/s. */
.ml-logo img{max-width:240px;object-fit:contain;transition:filter .25s,opacity .25s}
.ml-logo:hover img{filter:grayscale(0);opacity:1}
.ml-logo.edumod-logo-kompakt img{height:52px}
.marquee-track{animation-duration:89s} /* 19 Logos, Kompakt-Grenze 2.8: Satz 3558.5 px / 39.8 px/s (Referenz-Tempo) = 89 s (gemessen 2026-10-17; vorher 86 s bei Grenze 2.0, 77 s mit 17 Logos) */
/* Kurse-Übersicht: Kachel eines noch nicht freigegebenen Kurses (Kurs-Seite «Privat», blocks/kurs_kacheln.php; User 2026-10-17). Ausnahme zu
   «keine neuen Komponenten» auf Wunsch des Users: Eckband oben links (Akzent und Mono wie .kd2-kicker), bei Hover oder Fokus ausgegraut mit
   Hinweis. Kein Hover-Rand und -Schatten wie bei verlinkten Kacheln, sonst wirkte sie klickbar; .kt.kt-bald, weil diese Datei VOR
   edumod-leistung.css lädt und gleiche Spezifität dort verlöre. :focus (nicht nur :focus-visible) zeigt den Hinweis auch nach dem Antippen
   ohne :hover-Emulation; die Kontur nur bei :focus-visible. Hinweis-Mitte = Bildmitte: padding-top in % bezieht sich auf die Breite,
   31.25 % = halbe Höhe des 16:10-Bilds, translateY(-50%) zentriert auch zweizeilige Texte. */
.kt-bald{position:relative;cursor:default}
.kt.kt-bald:hover{box-shadow:var(--shadow-sm);border-color:var(--line)}
.kt-bald:focus{outline:none}
.kt-bald:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.kt-visual .kt-band ~ .badge{left:auto;right:14px}
.kt-band{position:absolute;z-index:2;top:22px;left:-44px;width:170px;transform:rotate(-45deg);background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:6px 0;box-shadow:var(--shadow-sm)}
.kt-bald-hinweis{position:absolute;inset:0;z-index:3;display:block;padding:31.25% 24px 0;text-align:center;background:color-mix(in srgb,var(--paper) 55%,transparent);-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);opacity:0;transition:opacity .25s var(--ease)}
.kt-bald-hinweis span{display:inline-block;max-width:100%;transform:translateY(-50%);background:var(--surface);color:var(--blau);font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.35;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow-sm)}
.kt-bald:hover .kt-bald-hinweis,.kt-bald:focus .kt-bald-hinweis{opacity:1}
@media (prefers-reduced-motion:reduce){.kt-bald-hinweis{transition:none}}
/* Links im Fliesstext ausserhalb der Rechtstexte (608 → 638 seit 2026-10-18, Datenblatt auf 35, 637): derselbe Stil wie .legal-card a.legal-link
   in edumod.css. Ohne ihn wäre der Link nur an der Farbe erkennbar (WCAG 1.4.1); keine neue Komponente, die Rechtstexte behalten ihre Regel. */
a.legal-link{color:var(--blau);font-weight:500;border-bottom:1px solid color-mix(in srgb,var(--blau) 35%,transparent)}
[data-theme="dark"] a.legal-link{color:#8FB2D6}
a.legal-link:hover{border-bottom-color:var(--blau)}
/* Leistungskacheln der Startseite (User 2026-10-19: «Entwicklung & Bereitstellung» als einziger Titel zweizeilig): dreispaltig ab 901 px ist
   eine Kachel höchstens 341 px breit, der Titel hat 279 px, braucht bei 1.32rem aber 282 px (gemessen 2026-10-19). 1.28rem lässt ab 1200 px
   ~5 px Luft; nicht weiter verkleinern: zwischen 901 und 1199 px bräuchte eine Zeile 15–19 px, dort brechen längere Titel weiter um.
   Mit .v6-leistungen, weil edumod-v6.css (.v2-card h3) NACH dieser Datei lädt. */
@media(min-width:901px){.v6-leistungen .v2-card-tab h3{font-size:1.28rem}}
/* Detailbereich der Leistungen ohne Eyebrow (User 2026-10-19, start/leistungen.php): der obere Rand 8px der Überschrift war der Abstand zur
   Eyebrow; ohne sie beginnt die Überschrift bündig am Innenabstand. Mit .v6-leistungen, weil edumod-v6.css (.v2-pane-body h3) später lädt. */
.v6-leistungen .v2-pane-body > h3:first-child{margin-top:0}
/* Detailbereich der Leistungen bis 900 px (Befund 2026-10-19): .btn bricht nie um (edumod.css) und die eine Spalte war 1fr (Mindestbreite = Inhalt),
   der CTA «Mehr zu Entwicklung & Bereitstellung →» drückte den Textblock bei 390 px 46 px über den Innenrand, .v2-detail{overflow:hidden} schnitt
   den Text ab. minmax(0,1fr) hält die Spalte im Kasten, der CTA bricht dort um; line-height 1 der .btn wäre zweizeilig zu eng, 12 px statt 14 px
   oben/unten halten den einzeiligen Button auf 44 px wie alle anderen (gemessen: 1.25 ohne Ausgleich 48 px). */
@media(max-width:900px){.v6-leistungen .v2-pane{grid-template-columns:minmax(0,1fr)}.v6-leistungen .v2-pane-cta .btn{white-space:normal;text-align:center;line-height:1.25;padding-top:12px;padding-bottom:12px}}