/* ============================================================================
   Defensia — Bewegung und Tiefe
   ----------------------------------------------------------------------------
   Ergänzt das Grundstylesheet um Zustände und Bewegung. Die Seitenstruktur
   bleibt unverändert: hier wird nichts umgebaut, was ein erneuter Import
   überschreiben würde. Alles hängt an den vorhandenen dfa-Klassen.

   Zwei Regeln, an die sich alles hält:
   1. Animiert werden ausschließlich `transform` und `opacity`. Beides läuft auf
      dem Compositor, kostet kein Layout und bleibt auch auf schwachen Geräten
      flüssig.
   2. `prefers-reduced-motion` schaltet jede Bewegung ab. Das ist keine Kür —
      für Menschen mit vestibulären Beschwerden ist Scroll-Bewegung ein
      körperliches Problem.
   ========================================================================== */

:root {
  --dfa-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ruhiges Ausschwingen */
  --dfa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dfa-dur: 620ms;
}


/* ---------- 0. Elementors Animationen schärfen, nicht ersetzen -----------

   Vorgeschichte, damit der Umbau nachvollziehbar bleibt: Hier lief zwischen-
   zeitlich ein eigenes Einblend-System. Das war ein Fehlschluss. Ich hatte
   gemessen, dass kein Element je die Klasse `animated` bekommt — die Messung
   war schlicht zu früh, direkt nach dem Laden. In Chrome auf der echten
   Installation vergibt Elementor Pro sie sehr wohl.

   Ergebnis waren zwei Systeme, die sich gegenseitig im Weg standen: Elemente
   trugen gleichzeitig `dfa-rv` und `animated fadeInRight`, das eigene Skript
   entfernte `elementor-invisible` und nahm Elementor damit seinen Marker.
   Sichtbar wurde daraus eine rund fünf Sekunden leere Seite, danach klappte
   alles auf einmal auf.

   Jetzt gilt: Die Eingangsanimationen gehören Elementor. Sie stehen in den
   Vorlagen, sind im Editor pro Element einstellbar und funktionieren. Hier
   wird nur noch ihre Ausführung korrigiert — und alles ergänzt, was Elementor
   selbst nicht kann (Hover, Tiefe, Dauerbewegung).

   Was korrigiert wird: Elementor nutzt die Animate.css-Vorlagen. `fadeInUp`
   verschiebt ein Element um translate3d(0, 100%, 0) — um seine *eigene Höhe*.
   Bei einer 300 px hohen Karte sind das 300 px in einer Sekunde mit dem
   Standard-`ease`. Das ist das schwammige Durchhängen, das billig wirkt.
   28 px in 620 ms auf einer Kurve, die schnell anläuft und weich ausklingt,
   liest sich als Absicht statt als Effekt.
   ---------------------------------------------------------------------- */

.elementor .animated {
  animation-duration: 620ms;
  animation-timing-function: var(--dfa-ease);
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -28px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-34px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(34px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(0.94, 0.94, 1); }
  to   { opacity: 1; transform: none; }
}

/* Sicherung. Elementor setzt animierte Elemente per CSS auf opacity 0 und
   verlässt sich darauf, dass sein JavaScript sie später einblendet. Bleibt
   das aus — Skriptfehler, blockiertes JS, ein Beobachter der nie auslöst —
   ist der Inhalt dauerhaft weg. Genau das ist in diesem Projekt schon mit der
   H1 passiert. Nach 4 Sekunden wird darum in jedem Fall eingeblendet; läuft
   die Animation normal, ist sie längst fertig und das hier fällt nicht auf. */
@keyframes dfa-failsafe { to { opacity: 1; } }
.elementor-invisible {
  /* KRITISCH. Diese Elementor-Version versteckt mit `visibility: hidden`,
     nicht mit `opacity: 0`. Meine frühere Korrektur setzte nur opacity — und
     lief damit ins Leere. Auf der Startseite standen dadurch 165 Elemente auf
     visibility:hidden, darunter die kompletten Leistungskarten: Bild, Titel
     und Text waren im DOM vorhanden, aber unsichtbar. Sichtbarkeit vererbt
     sich, deshalb reißt ein einziges verstecktes Elternelement den ganzen
     Block mit.
     Die Animation braucht diese Sperre nicht: die Keyframes starten selbst
     bei opacity 0. Läuft die Animation, sieht man sie; läuft sie nicht, ist
     der Inhalt trotzdem da. */
  visibility: visible !important;
  opacity: 1 !important;
  animation: dfa-failsafe 1ms linear 0s forwards;
}

/* ---------- 2. Karten: Anfassen statt Anschauen -------------------------- */

.dfa-svc-card, .dfa-lex-card, .dfa-reason-card, .dfa-cust-card, .dfa-p-card {
  transition: transform 420ms var(--dfa-ease),
              box-shadow 420ms var(--dfa-ease);
  will-change: transform;
}
.dfa-svc-card:hover, .dfa-lex-card:hover,
.dfa-cust-card:hover, .dfa-p-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 54px rgba(16, 16, 16, 0.16);
}

/* Bild in der Karte zieht langsam heran, der Rahmen bleibt stehen */
.dfa-svc-img, .dfa-lex-img, .dfa-p-img, .dfa-frame-img, .dfa-roundimg {
  overflow: hidden;
}
.dfa-svc-img img, .dfa-lex-img img, .dfa-p-img img,
.dfa-frame-img img, .dfa-roundimg img {
  transition: transform 900ms var(--dfa-ease), filter 600ms ease;
  will-change: transform;
}
.dfa-svc-card:hover .dfa-svc-img img,
.dfa-lex-card:hover .dfa-lex-img img,
.dfa-p-card:hover .dfa-p-img img { transform: scale(1.07); }

/* Grünschleier, der beim Überfahren zurückweicht — gibt den Bildern Tiefe
   und bindet sie farblich an die Marke. */
.dfa-svc-img, .dfa-lex-img { position: relative; }
.dfa-svc-img::after, .dfa-lex-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 58, 34, 0) 38%, rgba(11, 58, 34, 0.55) 100%);
  opacity: 1; transition: opacity 520ms var(--dfa-ease);
}
.dfa-svc-card:hover .dfa-svc-img::after,
.dfa-lex-card:hover .dfa-lex-img::after { opacity: 0.35; }

/* Die Symbolplakette dreht sich beim Überfahren leicht mit */
.dfa-reason-ic, .dfa-svc-badge, .dfa-reason-icon {
  transition: transform 520ms var(--dfa-ease), background-color 380ms ease;
}
.dfa-reason-card:hover .dfa-reason-ic,
.dfa-svc-card:hover .dfa-svc-badge { transform: rotate(-8deg) scale(1.08); }

/* Begründungskarten bekommen eine Kante, die beim Überfahren aufläuft */
.dfa-reason-card { position: relative; }
.dfa-reason-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--dfa-accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 480ms var(--dfa-ease);
}
.dfa-reason-card:hover::before { transform: scaleY(1); }

/* ---------- 3. Schaltflächen -------------------------------------------- */

.dfa-btn .elementor-button {
  position: relative; overflow: hidden;
  transition: transform 260ms var(--dfa-ease), background-color 300ms ease,
              box-shadow 300ms ease;
}
.dfa-btn .elementor-button:hover { transform: translateY(-2px); }
.dfa-btn .elementor-button:active { transform: translateY(0); }

/* Heller Streifen, der einmal über die Fläche wischt */
.dfa-btn--accent .elementor-button::after,
.dfa-btn--primary .elementor-button::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transition: left 620ms var(--dfa-ease);
}
.dfa-btn--accent .elementor-button:hover::after,
.dfa-btn--primary .elementor-button:hover::after { left: 115%; }

/* ---------- 4. Hero und Titelband: das Bild lebt ------------------------ */
/* Sehr langsamer Zoom. 18 Sekunden ist bewusst zäh — man soll es nicht
   bemerken, nur spüren, dass das Bild nicht tot ist. */

@keyframes dfa-kenburns {
  from { transform: scale(1);    }
  to   { transform: scale(1.085); }
}
.dfa-hero, .dfa-titleband { overflow: hidden; }
.dfa-hero::after, .dfa-titleband::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: inherit; background-size: cover; background-position: center;
  animation: dfa-kenburns 18s var(--dfa-ease-out) forwards;
}

/* ---------- 5. (entfernt) --------------------------------------------------
   Hier standen schräge Abschnittskanten über .dfa-banner::before und ::after.
   Das war ein Fehler: Elementor rendert sein Hintergrund-Overlay auf genau
   demselben ::before. Meine Regel hat es überschrieben und aus der
   deckenden Fläche einen 46 px hohen Streifen am oberen Rand gemacht
   (height:46px, top:-22px, clip-path) — gemessen auf dem Staging.

   Folge: Auf allen Bannern stand weißer Text ohne Abdunklung direkt auf dem
   Foto. Mit den neuen, helleren Aufnahmen war er praktisch unlesbar.

   Regel: ::before und ::after von Elementor-Containern gehören Elementor.
   Dekoration braucht ein eigenes Element.
   -------------------------------------------------------------------- */

/* ---------- 6. Städte-Leiste als ruhiger Lauf --------------------------- */

@keyframes dfa-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.dfa-cities--run { overflow: hidden; flex-wrap: nowrap; justify-content: flex-start; }
.dfa-cities--run .dfa-cities__track {
  display: flex; align-items: center; gap: 12px 30px; flex: none;
  animation: dfa-marquee 34s linear infinite;
}
.dfa-cities--run:hover .dfa-cities__track { animation-play-state: paused; }

/* ---------- 7. Kopfzeile schrumpft beim Scrollen ------------------------ */

.dfa-headbar {
  transition: padding 320ms var(--dfa-ease), box-shadow 320ms ease,
              background-color 320ms ease;
}
body.dfa-scrolled .dfa-headbar {
  padding-top: 6px; padding-bottom: 6px;
  box-shadow: 0 10px 30px rgba(8, 43, 25, 0.28);
}
body.dfa-scrolled .dfa-logo img { transform: scale(0.88); transition: transform 320ms var(--dfa-ease); }

/* ---------- 8. Zahlen und Auszeichnungen -------------------------------- */

.dfa-usp { transition: transform 420ms var(--dfa-ease); }
.dfa-usp:hover { transform: translateY(-4px); }

/* Häkchenlisten laufen nacheinander ein */
.dfa-checks .elementor-icon-list-item { transition: transform 300ms var(--dfa-ease); }
.dfa-checks .elementor-icon-list-item:hover { transform: translateX(4px); }

/* ---------- 9. Ruhige Zierde ------------------------------------------- */
/* Ein sehr schwacher, langsam wandernder Farbschleier hinter hellen
   Abschnitten. Kein Muster, keine Blobs — nur die Andeutung von Bewegung. */

@keyframes dfa-drift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1);    }
  50%  { transform: translate3d( 4%,  3%, 0) scale(1.12); }
  100% { transform: translate3d(-4%, -3%, 0) scale(1);    }
}
.dfa-glow { position: relative; isolation: isolate; overflow: hidden; }
.dfa-glow::before {
  content: ""; position: absolute; z-index: -1;
  width: 46vw; height: 46vw; right: -12vw; top: -14vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 115, 54, 0.10), rgba(0, 115, 54, 0) 68%);
  animation: dfa-drift 26s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- 10. Fokus bleibt sichtbar ----------------------------------- */
/* Bewegung darf die Tastaturbedienung nicht verschlucken. */

.dfa-btn .elementor-button:focus-visible,
.dfa-nav a:focus-visible, .dfa-headcta:focus-visible {
  outline: 3px solid #ffb3b8; outline-offset: 3px;
}

/* ---------- 11. Bewegung abschaltbar ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .elementor .animated { animation: none !important; }
  .elementor-invisible { opacity: 1 !important; animation: none !important; }
  .dfa-hero::after, .dfa-titleband::after,
  .dfa-cities--run .dfa-cities__track, .dfa-glow::before {
    animation: none !important;
  }
  .elementor .animated { animation: none !important; }
  .dfa-svc-card, .dfa-lex-card, .dfa-reason-card, .dfa-cust-card, .dfa-p-card,
  .dfa-btn .elementor-button, .dfa-usp, .dfa-headbar {
    transition: none !important;
  }
  .dfa-svc-card:hover, .dfa-lex-card:hover,
  .dfa-cust-card:hover, .dfa-p-card:hover { transform: none; }
}