/* /css/ergaenzungen.css */
/* Ergänzungen außerhalb des übernommenen Elementor-Designs (Barrierefreiheit). */

/* Pause-Knopf für Hintergrundvideos (src/lib/hero-video.ts).
   „button.“ erhöht die Spezifität gegenüber den Button-Stilen des Hello-Themes. */
button.tf-video-toggle {
  position: absolute;
  z-index: 5;
  right: 60px;
  bottom: 90px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
button.tf-video-toggle[hidden] { display: none; }
button.tf-video-toggle:hover,
button.tf-video-toggle:focus { background: rgb(0 0 0 / 0.7); color: #fff; border-color: #fff; }
button.tf-video-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button.tf-video-toggle svg { width: 16px; height: 16px; fill: currentColor; }
button.tf-video-toggle .tf-video-toggle__play,
button.tf-video-toggle[aria-pressed="true"] .tf-video-toggle__pause { display: none; }
button.tf-video-toggle[aria-pressed="true"] .tf-video-toggle__play { display: block; margin-left: 2px; }
@media (max-width: 1024px) {
  button.tf-video-toggle { right: 24px; bottom: 140px; }
}
@media (max-width: 767px) {
  /* unten liegen Buttons und Logo-Laufband – daher oben rechts unter dem Menübalken */
  button.tf-video-toggle { top: 128px; right: 16px; bottom: auto; }
}

/* „Bewegung reduzieren“: Einblend-Animationen abschalten, Inhalte sofort zeigen */
@media (prefers-reduced-motion: reduce) {
  .elementor-element.animated { animation: none !important; }
  .elementor-invisible { visibility: visible !important; opacity: 1 !important; }
}

/* ---------------------------------------------------------------------------------------------
   Kontraste nach WCAG 2.2 AA (4,5:1 für Text, 3:1 für große Schrift) – jeweils die geringste
   Abdunklung, die die Anforderung erfüllt. Originalwerte in Klammern.
   --------------------------------------------------------------------------------------------- */
body.elementor-kit-52 {
  --e-global-color-accent: #267f32;   /* Grün (#61ce70): weiße Schrift auf Grün, grüne Schrift auf Hell-/Blaugrün */
  --e-global-color-8ce9af0: #7e5fe1;  /* Lila (#8a6ee4): weiße Schrift auf Lila */
  --e-global-color-343617a: #2baa3d;  /* Dunkelgrün (#2cac3e): große weiße Schrift */
}
/* FAQ-Fläche „Klartext“ (Startseite, Leistungsseiten) – Farbe dort fest hinterlegt statt als Variable */
.elementor .elementor-element.elementor-element-a0516f5:not(.elementor-motion-effects-element-type-background) {
  background-color: #267f32;
}
/* Info-Box „Websites“-Seite, Farbe dort fest hinterlegt (#8a6ee4) */
.elementor-13322 .elementor-element.elementor-element-289f5e2 .eael-infobox { background-color: #7e5fe1; }
/* Blog-Teaser (#777) */
body .elementor-posts .elementor-post__excerpt p { color: #717171; }
/* Formular-Beschriftungen im Standard-Formulardesign (#777771) */
.forminator-ui.forminator-custom-form[data-design="default"]:not(#forminator-module-13090) .forminator-label,
.forminator-ui.forminator-custom-form[data-design="default"]:not(#forminator-module-13090) .forminator-description,
.forminator-ui.forminator-custom-form[data-design="default"]:not(#forminator-module-13090) .forminator-checkbox-label,
.forminator-ui.forminator-custom-form[data-design="default"]:not(#forminator-module-13090) .forminator-checkbox__label,
.forminator-ui.forminator-custom-form[data-design="default"]:not(#forminator-module-13090) .forminator-checkbox span,
.forminator-ui.forminator-custom-form[data-design="default"]:not(#forminator-module-13090) .forminator-option { color: #656560 !important; }
/* „Weiter“/„Senden“ im Marketing-Check und in der Projektanfrage (#7d73d4) */
.forminator-ui.forminator-custom-form-12432 .forminator-button,
.forminator-ui.forminator-custom-form-11213 .forminator-button { background-color: #6f63cc !important; }
.forminator-ui.forminator-custom-form-12432 .forminator-button:hover,
.forminator-ui.forminator-custom-form-12432 .forminator-button:focus,
.forminator-ui.forminator-custom-form-11213 .forminator-button:hover,
.forminator-ui.forminator-custom-form-11213 .forminator-button:focus { background-color: #5b4ec8 !important; }
/* Mietstudio: Formularbereich (#8a6ee4) und grüner Infokasten (#2cac3e) mit ausreichendem Kontrast */
.elementor-13039 .elementor-element.elementor-element-e70e2c8:not(.elementor-motion-effects-element-type-background) { background-color: #7e5fe1; }
.elementor-13039 .elementor-element.elementor-element-fea8158:not(.elementor-motion-effects-element-type-background) { background-color: #267f32; }
/* Instagram „Auf Instagram folgen“ (#408bd1) */
#sb_instagram .sbi_follow_btn a { background: #2e79bf !important; }

/* Links im Fließtext zusätzlich zur Farbe unterstreichen (WCAG 1.4.1) – nicht im Menü (Kopfbereich):
   Navigationslinks stehen für sich und bleiben wie im Original */
:where(main, .elementor-location-single, .elementor-location-footer, .elementor-location-popup) .elementor-widget-text-editor p a:not(.elementor-button),
.erecht24-legal-texts a,
:where(main, .elementor-location-single) .elementor-widget-text-editor li a:not(.elementor-button),
.elementor-widget-theme-post-content p a:not(.elementor-button),
.elementor-widget-theme-post-content li a:not(.elementor-button),
.elementor-location-footer p a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Datenschutzerklärung: Links in Listen als ausreichend große Klickfläche (WCAG 2.5.8) */
.elementor-widget-erecht24 li > a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Fehlerseite 404 (src/pages/404.astro): Fuchs im Linienstil des Logos, „Fährten“ als Kacheln. Mobile first. */
.tf-404.site-main { max-width: none !important; width: 100%; margin: 0 !important; padding: 150px 20px 80px; background: #eef7ff; font-family: Outfit, system-ui, sans-serif; color: #313131; }
.tf-404__kopf, .tf-404__faehrten { max-width: 1140px; margin: 0 auto; }
.tf-404__kopf { display: grid; gap: 2rem; align-items: center; }
.tf-404__fuchs { order: -1; width: min(220px, 60vw); height: auto; }
.tf-404__dach { margin: 0 0 0.5rem; font-size: clamp(1.125rem, 0.92rem + 0.85vw, 1.5rem); font-weight: 600; color: #3b3192; }
.tf-404 h1 { margin: 0 0 1rem; font-size: clamp(2.375rem, 1.55rem + 3.3vw, 3.75rem); line-height: 1.1; letter-spacing: -0.01em; color: #5b4ec8; }
.tf-404__lead { margin: 0 0 2rem; font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.3125rem); line-height: 1.55; }
.tf-404__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; font-size: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem); }
.tf-404__aktion span a { color: #3b3192; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.tf-404__faehrten { margin-top: 4.5rem; }
.tf-404__faehrten h2 { margin: 0 0 1.25rem; font-size: clamp(1.3125rem, 1.15rem + 0.65vw, 1.625rem); line-height: 1.25; color: #3b3192; }
.tf-404__faehrten ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.tf-404__faehrten a { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1.25rem 3rem 1.25rem 1.25rem; position: relative;
  border-radius: 10px; background: #fff; color: #313131; text-decoration: none; box-shadow: 0 1px 2px rgba(59, 49, 146, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tf-404__faehrten a strong { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); color: #5b4ec8; }
.tf-404__faehrten a span { font-size: 1rem; line-height: 1.45; }
.tf-404__faehrten a::after { content: ""; position: absolute; right: 1.25rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem;
  background: #5b4ec8; -webkit-mask: var(--tf-pfeil) center / contain no-repeat; mask: var(--tf-pfeil) center / contain no-repeat; }
.tf-404__faehrten a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59, 49, 146, 0.16); }
.tf-404 a:focus-visible { outline: 3px solid #1f1f1f; outline-offset: 3px; }
@media (min-width: 640px) { .tf-404__faehrten ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) {
  .tf-404.site-main { padding: 200px 20px 120px; }
  .tf-404__kopf { grid-template-columns: 1fr 340px; gap: 4rem; }
  .tf-404__fuchs { order: 0; width: 340px; }
  .tf-404__faehrten ul { grid-template-columns: repeat(3, 1fr); }
}
/* Der Fuchs sucht: Schwanz wedelt, Lupe kreist, Augen blinzeln, Fragezeichen wippt – nur ohne „Bewegung reduzieren“ */
@media (prefers-reduced-motion: no-preference) {
  .tf-404__fuchs :is(.tf-404__schwanz, .tf-404__lupe, .tf-404__augen) { transform-box: view-box; }
  .tf-404__schwanz { transform-origin: 228px 316px; animation: tf-404-schwanz 2.2s ease-in-out infinite; }
  .tf-404__lupe { transform-origin: 232px 262px; animation: tf-404-lupe 4s ease-in-out infinite; }
  .tf-404__augen { transform-origin: 180px 150px; animation: tf-404-blinzeln 5s infinite; }
  .tf-404__frage { transform-box: fill-box; transform-origin: center; animation: tf-404-frage 2.4s ease-in-out infinite; }
}
@keyframes tf-404-schwanz { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes tf-404-lupe { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-12deg); } 70% { transform: rotate(5deg); } }
@keyframes tf-404-blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes tf-404-frage { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(8deg); } }

/* Hintergrundvideos: Größe ab dem ersten Bild (vorher setzte erst das Skript sie → Layout-Verschiebung).
   Das Video hat bis dahin keine Quelle und ist unsichtbar.
   Ohne JavaScript zeigt der Browser das Video mit Bedienleiste – dort bleibt es wie im Original. */
@media (scripting: enabled) {
  .elementor-background-video-container > video.elementor-background-video-hosted { width: 100%; height: 100%; }
}

/* Logo-Laufband: Folienbreite schon vor dem Slider-Start wie danach (sonst steht kurz ein
   einzelnes, seitenbreites Logo da und der Inhalt springt → Layout-Verschiebung). Werte wie in
   EAEL (Folien/Abstand je Elementor-Breakpoint). Nur mit JavaScript – ohne bleibt es wie im Original. */
@media (scripting: enabled) {
  .eael-logo-carousel[data-items="9"][data-items-mobile="4"]:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    --n: 4; --abstand: 10px;
    width: calc((100% - (var(--n) - 1) * var(--abstand)) / var(--n));
    margin-right: var(--abstand);
  }
}
@media (scripting: enabled) and (min-width: 767px) {
  .eael-logo-carousel[data-items="9"][data-items-mobile="4"]:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { --n: 7; }
}
@media (scripting: enabled) and (min-width: 1024px) {
  .eael-logo-carousel[data-items="9"][data-items-mobile="4"]:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { --n: 8; }
}
@media (scripting: enabled) and (min-width: 1366px) {
  .eael-logo-carousel[data-items="9"][data-items-mobile="4"]:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { --n: 9; --abstand: 20px; }
}
@media (scripting: enabled) and (min-width: 2399px) {
  .eael-logo-carousel[data-items="9"][data-items-mobile="4"]:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { --n: 10; --abstand: 10px; }
}

/* --- Handy-Darstellung -------------------------------------------------------------------------- */

/* Wörter, die allein breiter sind als die Zeile (lange Überschriften-Wörter, Adressen), umbrechen statt
   über den Rand zu laufen. Alles, was passt, bleibt unverändert. Trennstellen: src/lib/umbruch.ts */
h1, h2, h3, h4, h5, h6, p, li { overflow-wrap: break-word; }

/* Was über den Bildschirmrand hinausragt, abschneiden: Safari (iPhone/iPad) beachtet overflow-x am
   <body> nicht und lässt die Seite sonst seitlich verschieben. Sichtbar ändert sich dadurch nichts. */
body > :is(header, main, footer, [data-elementor-type]) { overflow-x: clip; }

@media (max-width: 767px) {
  /* Projekt-Vorlage (Elementor-Template 10946): Der Beitragsinhalt ist mobil um 8 px nach links
     verschoben (margin-left: -8px am Inhalt). Randlose Bereiche (Bilder, Videos) waren dadurch links
     angeschnitten, rechts blieb ein Streifen. Ausgleich: Verschiebung aufheben und die Innenabstände
     so umrechnen, dass Texte exakt an ihrer Stelle bleiben (10 px → 2 px links / 18 px rechts);
     Bereiche ohne Innenabstand gehen wieder über die volle Breite. */
  .elementor-10946 .elementor-element.elementor-element-1e804eb { margin-left: 0; }
  .elementor-10946 .elementor-element-1e804eb > .elementor > .e-con {
    padding-inline-start: max(0px, var(--padding-left) - 8px);
    padding-inline-end: min(var(--padding-right) + 8px, var(--padding-right) * 1000);
  }
  .elementor-10946 .elementor-element-1e804eb > .elementor > .elementor-section { margin-left: -8px; margin-right: 8px; }
  /* Überschrift über dem Video (z. B. „Recruitment-Video für …“): auf Höhe des Fließtexts */
  .elementor-10946 .elementor-element-1e804eb .elementor-element-c1ca932 .elementor-widget-heading { padding-inline: 22px; }
}

/* Formulare (Marketing-Ampel, Projektanfrage): Die Forminator-Stile verlangen „Roboto“, das WordPress extern
   (fonts.bunny.net) nachgeladen hat. Ohne diese Fremdquelle fiel die Schrift auf eine Serifenschrift zurück –
   daher die Hausschrift. */
.forminator-ui.forminator-custom-form :is(input, select, textarea, label, span, p, button, li),
.forminator-select-dropdown-container :is(li, span, input) { font-family: "Outfit", sans-serif !important; }
/* Mehrstufige Formulare: Forminator blendet im letzten Schritt neben dem echten Absende-Button einen zweiten,
   dauerhaft deaktivierten ein („Auswertung anzeigen“ doppelt, einer ausgegraut) – den überflüssigen ausblenden. */
.forminator-ui:has(.forminator-button-submit) .forminator-pagination-submit { display: none !important; }
/* Auswahlkreise/-kästchen der Formulare: hellgrau auf Weiß war zu kontrastarm (WCAG 1.4.11, mind. 3:1) */
.forminator-ui :is(.forminator-radio-bullet, .forminator-checkbox-box) { box-shadow: inset 0 0 0 1px #8a8799; }