/* ---------------------------------------------------------------------------
   Bewegung und Übergänge, seitenübergreifend.

   Grundsatz: zurückhaltend. Jede Bewegung soll den Blick führen, nicht auf
   sich ziehen. Kurze Wege, weiche Kurven, nichts blinkt oder springt.
   Wird nach dem Seiten-CSS geladen und ergänzt es nur.

   Ganz unten wird alles abgeschaltet, wenn im Betriebssystem reduzierte
   Bewegung eingestellt ist.
   --------------------------------------------------------------------------- */

/* ---- 1. Gestaffelte Einblendung -------------------------------------------
   Karten in einer Reihe erscheinen leicht nacheinander statt gleichzeitig.
   Das wirkt ruhiger als ein Block, der auf einmal aufpoppt. */
.svc-grid > .reveal:nth-child(1),
.usp .wrap > .reveal:nth-child(1)   { transition-delay: 0s }
.svc-grid > .reveal:nth-child(2),
.usp .wrap > .reveal:nth-child(2)   { transition-delay: .08s }
.svc-grid > .reveal:nth-child(3),
.usp .wrap > .reveal:nth-child(3)   { transition-delay: .16s }
.svc-grid > .reveal:nth-child(4)    { transition-delay: .24s }
.svc-grid > .reveal:nth-child(5)    { transition-delay: .32s }
.svc-grid > .reveal:nth-child(6)    { transition-delay: .40s }

/* Bausteine innerhalb eines Blocks, der selbst eingeblendet wird */
.region-cards.in .rc,
.flow-grid.in > *,
.glass-grid.in > *,
.limit-grid.in > * {
  animation: gm-auf .55s cubic-bezier(.22,.8,.3,1) both;
}
.region-cards.in .rc:nth-child(2),
.flow-grid.in > *:nth-child(2),
.glass-grid.in > *:nth-child(2),
.limit-grid.in > *:nth-child(2) { animation-delay: .09s }
.region-cards.in .rc:nth-child(3),
.flow-grid.in > *:nth-child(3),
.glass-grid.in > *:nth-child(3),
.limit-grid.in > *:nth-child(3) { animation-delay: .18s }
.region-cards.in .rc:nth-child(4),
.flow-grid.in > *:nth-child(4),
.glass-grid.in > *:nth-child(4),
.limit-grid.in > *:nth-child(4) { animation-delay: .27s }

@keyframes gm-auf {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: none }
}

/* ---- 2. Weichere Kurve für die Grundeinblendung ---------------------------
   Statt gleichförmig läuft die Bewegung am Ende sanft aus. */
.reveal {
  transition: opacity .65s cubic-bezier(.22,.8,.3,1),
              transform .65s cubic-bezier(.22,.8,.3,1);
}

/* ---- 3. Seitliche Bilder kommen von der Seite -----------------------------
   Ein Bild am linken Rand von links einzublenden wirkt natürlicher,
   als es von unten hochzuschieben. */
.gewerbe-photo.reveal        { transform: translate(-26px, 8px) }
.gewerbe-photo.reveal.in     { transform: none }
.tel-contact-photo.reveal    { transform: translate(22px, 8px) }
.tel-contact-photo.reveal.in { transform: none }

/* ---- 4. Kopfbereich beim Scrollen ------------------------------------------
   Sobald man scrollt, rückt der Kopf minimal zusammen und bekommt einen
   feinen Schatten. Das trennt ihn vom Inhalt, ohne aufzufallen. */
header {
  transition: box-shadow .3s ease, background-color .3s ease;
}
header.is-scrolled {
  box-shadow: 0 6px 22px -18px rgba(30,60,90,.85);
}
header .wrap.nav,
header.site .wrap {
  transition: padding .3s ease;
}

/* ---- 5. Karten heben sich beim Zeigen leicht an --------------------------- */
.usp-c, .rc {
  transition: transform .25s cubic-bezier(.22,.8,.3,1), box-shadow .25s ease;
}
.usp-c:hover, .rc:hover {
  transform: translateY(-3px);
}
.rc:hover {
  box-shadow: var(--shadow-sm, 0 10px 26px -18px rgba(30,60,90,.3));
}

/* ---- 6. Symbole in Karten reagieren mit ----------------------------------- */
.usp-ic, .rc .ic, .svc .ic {
  transition: transform .3s cubic-bezier(.22,.8,.3,1);
}
.usp-c:hover .usp-ic,
.rc:hover .ic,
.svc:hover .ic {
  transform: scale(1.06);
}

/* ---- 6b. Symbole erscheinen mit ihrem Kasten ------------------------------
   Kurzes Aufziehen mit leichtem Überschwingen, knapp nach dem Kasten.
   Wirkt auch am Handy, wo es kein Zeigen mit der Maus gibt. */
.usp-c.in .usp-ic > svg,
.svc.in .ic > svg,
.region-cards.in .rc .ic > svg,
.flow-grid.in .ic > svg {
  animation: gm-symbol .55s cubic-bezier(.34,1.35,.5,1) both;
  animation-delay: .16s;
}
@keyframes gm-symbol {
  from { opacity: 0; transform: scale(.5) }
  60%  { opacity: 1 }
  to   { opacity: 1; transform: none }
}

/* ---- 6c. Ablauf in vier Schritten ----------------------------------------
   Die Schritte erscheinen nacheinander, die Nummer im Kreis zieht sich auf. */
.flow-grid > .reveal:nth-child(1) { transition-delay: 0s }
.flow-grid > .reveal:nth-child(2) { transition-delay: .09s }
.flow-grid > .reveal:nth-child(3) { transition-delay: .18s }
.flow-grid > .reveal:nth-child(4) { transition-delay: .27s }

.flow-c.in .num {
  animation: gm-nummer .5s cubic-bezier(.34,1.35,.5,1) both;
  animation-delay: .22s;
}

/* Dieselbe Wirkung fuer die Zeitleiste auf den uebrigen 19 Seiten */
.timeline > .reveal:nth-child(1) { transition-delay: 0s }
.timeline > .reveal:nth-child(2) { transition-delay: .09s }
.timeline > .reveal:nth-child(3) { transition-delay: .18s }
.timeline > .reveal:nth-child(4) { transition-delay: .27s }

.tl-step.in .tl-node {
  animation: gm-nummer .5s cubic-bezier(.34,1.35,.5,1) both;
  animation-delay: .22s;
}
@keyframes gm-nummer {
  from { opacity: 0; transform: scale(.4) }
  to   { opacity: 1; transform: none }
}

/* ---- 7. Textlinks bekommen einen mitlaufenden Unterstrich ----------------- */
.prose-narrow p a,
.faq-a a,
.foot-bottom a,
.fb a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.22,.8,.3,1);
  text-decoration: none;
}
.prose-narrow p a:hover,
.faq-a a:hover,
.foot-bottom a:hover,
.fb a:hover {
  background-size: 100% 1px;
}

/* ---- 8. Navigation im Kopf ------------------------------------------------ */
.nav-links a {
  position: relative;
  transition: color .22s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--blue, #3B8ED0);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.8,.3,1);
}
.nav-links a:hover::after { transform: scaleX(1) }

/* ---- 9. Bilder in der Galerie ziehen leicht heran ------------------------- */
.marquee img {
  transition: transform .5s cubic-bezier(.22,.8,.3,1),
              filter .5s ease;
}
.marquee img:hover {
  transform: scale(1.04);
  filter: saturate(1.08);
}

/* ---- 10. Tastaturbedienung sichtbar machen -------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue, #3B8ED0);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- 11. Eingabefelder ---------------------------------------------------- */
.mf input, .mf textarea, .amodal-form input, .amodal-form textarea {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mf input:focus, .mf textarea:focus,
.amodal-form input:focus, .amodal-form textarea:focus {
  border-color: var(--blue, #3B8ED0);
  box-shadow: 0 0 0 4px rgba(59,142,208,.14);
  outline: none;
}

/* ---- 12. WhatsApp-Schaltfläche atmet einmal beim Erscheinen --------------- */
.wa-float {
  transition: transform .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease;
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.03);
}


/* ---- 13. Lesefortschritt --------------------------------------------------
   Ein feiner Balken am oberen Rand zeigt, wie weit man auf langen Seiten ist.
   Drei Pixel hoch, in den Hausfarben, ohne Rahmen oder Schatten. */
.gm-fortschritt {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 1100;
  background: linear-gradient(90deg, #43a0e0, #2f78b4);
  transition: width .08s linear;
  pointer-events: none;
}

/* ---- 14. Puls am WhatsApp-Knopf -------------------------------------------
   Ein Ring laeuft langsam nach aussen und verblasst. Alle vier Sekunden
   einmal, nicht dauerhaft, damit es nicht nervt. */
/* Kein position hier setzen: der Knopf ist fixiert, und fixed ist bereits
   ein Bezugsrahmen fuer das ::after-Element. */
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: gm-puls 4s cubic-bezier(.22,.8,.3,1) infinite;
  pointer-events: none;
}
@keyframes gm-puls {
  0%       { box-shadow: 0 0 0 0 rgba(37,211,102,.55) }
  22%, 100%{ box-shadow: 0 0 0 18px rgba(37,211,102,0) }
}

/* ---------------------------------------------------------------------------
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt keine.
   Farbwechsel bleiben, alles Bewegte wird abgeschaltet.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .region-cards.in .rc,
  .flow-grid.in > *, .glass-grid.in > *, .limit-grid.in > *,
  .usp-c, .rc, .usp-ic, .svc .ic, .marquee img, .wa-float, .wa-float::after, header,
  .usp-c.in .usp-ic > svg, .svc.in .ic > svg, .region-cards.in .rc .ic > svg,
  .flow-c.in .num, .flow-grid > .reveal,
  .tl-step.in .tl-node, .timeline > .reveal, {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .svc-grid > .reveal, .usp .wrap > .reveal { transition-delay: 0s !important }
  .nav-links a::after { transition: none !important }
  .gm-fortschritt { display: none !important }
}

/* ---- 16. Fuer Suchmaschinen und Screenreader, optisch unsichtbar ----------
   Haelt die Ueberschriftengliederung vollstaendig, ohne das Layout zu aendern.
   Bewusst nicht display:none, das wuerde auch das Vorlesen unterbinden. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Mobile Navigation ----------------------------------------------------
   Der Knopf oeffnet die Navigation als Klappmenue. Ohne diese Regeln war die
   Navigation auf dem Handy nicht erreichbar. */
@media(max-width:920px){
  header .wrap.nav > .brand{order:1;max-width:calc(100% - 64px)}
  header .brand img{max-width:200px}
  header .wrap.nav > .burger{order:2;margin-left:auto}
  header .wrap.nav > .nav-links{order:3}
  header .wrap.nav > .nav-contact{order:4}
  header .wrap.nav{position:relative;flex-wrap:wrap;height:auto;min-height:78px;
          padding-top:0;padding-bottom:0}
  header .wrap.nav.hat-menue{padding-bottom:14px}
  .burger{display:flex;align-items:center;justify-content:center;
          width:48px;height:48px;margin:-9px -10px -9px 0;border-radius:12px;
          font-size:1.5rem;line-height:1}
  .burger:hover{background:var(--blue-soft,#EAF4FB)}
  .burger[aria-expanded="true"]{background:var(--blue-soft,#EAF4FB);color:var(--blue,#3B8ED0)}
  header .nav-links.is-offen,
  header .nav-contact.is-offen{display:flex;flex-direction:column;align-items:flex-start;
          flex:1 0 100%;gap:2px;margin-top:10px;padding-top:12px;
          border-top:1px solid var(--line,#e5e9ee)}
  header .nav-links.is-offen a,
  header .nav-contact.is-offen a{display:block;width:100%;padding:13px 4px;font-size:1.02rem}
  header .nav-contact.is-offen .sep{display:none}
  header .nav-links.is-offen a::after{display:none}
}