/* ==============================================================
   Brückner Steuerberatung, zentrale Interaktionen
   Angelegt: 20.08.2026 (Auftrag "Interaktionen und Datenschutz")

   Diese Datei enthaelt ausschliesslich Interaktionszustaende:
   Hover, Fokus und das Scroll-Einblenden.

   Eine Ausnahme: Hintergrund-, Text- und Rahmenfarbe der Buttons
   sowie der Ruheschatten von drei Kartentypen standen bisher als
   Inline-Style im Markup. Inline-Angaben schlagen jede Klasse und
   haetten jeden Hover blockiert. Sie wurden deshalb hierher
   verschoben, mit unveraenderten Werten. Der Ruhezustand sieht
   danach genauso aus wie vorher.

   Rueckbau: Einbindungszeile in den 22 Seiten entfernen.
   ============================================================== */


/* --- 1) Bewegung reduzieren -----------------------------------
   Steht auftragsgemaess als erste Regel. Weil spaetere Regeln
   dieser Datei sie sonst ueberschreiben wuerden, setzt sie
   !important. Einblendungen erscheinen dann sofort, ohne
   Bewegung; alle Inhalte bleiben sichtbar.                      */

@media (prefers-reduced-motion: reduce) {

  .btn-cta,
  .kat-btn,
  .nav-toggle,
  .site-nav a::after,
  .saeule-link::after,
  .site-footer-link,
  footer a,
  .wcard, .verwandt-card, .beitrag-card,
  .branchen-link, .branche-link, .weiter-card, .branche-card,
  .ix-reveal,
  .hero-punkt {
    transition: none !important;
    animation: none !important;
  }

  /* Achtung: die Unterstreichungen bekommen hier bewusst KEIN
     transform:none. Ihr Ruhezustand ist scaleX(0); ein erzwungenes
     transform:none wuerde sie dauerhaft auf voller Breite zeigen.
     Das Abschalten der transition oben genuegt: die Unterstreichung
     erscheint beim Hover dann sofort, ohne Bewegung. */

  .ix-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-punkt {
    transform: none !important;
  }
}


/* --- 2) Buttons ------------------------------------------------
   Gilt fuer jeden Button und jeden als Button gestalteten Link.
   Der Uebergang lag bisher inline auf opacity und transform; er
   liegt jetzt hier und umfasst background-color, box-shadow und
   transform.                                                     */

.btn-cta {
  transition: background-color 200ms ease,
              box-shadow      200ms ease,
              transform       200ms ease;
}

/* Ruhezustand der vier Button-Varianten, Werte unveraendert aus
   den bisherigen Inline-Styles uebernommen. */

.btn-primaer {
  background: var(--color-neon-yellow, #CCFF00);
  color: var(--color-forest-green, #0B3D2E);
}

.btn-sek-hell {
  background: transparent;
  color: var(--color-off-white, #F5F7F6);
  border: 1.5px solid var(--color-off-white, #F5F7F6);
}

.btn-sek-dunkel {
  background: transparent;
  color: var(--color-forest-green, #0B3D2E);
  border: 1.5px solid var(--color-forest-green, #0B3D2E);
}

.btn-navy {
  background: var(--color-midnight-navy, #0B2545);
  color: var(--color-off-white, #F5F7F6);
}

/* Hover: Hintergrund eine Stufe, leichtes Anheben, weicher Schatten */

.btn-primaer:hover    { background-color: #B8E600; }
.btn-sek-hell:hover   { background-color: rgba(245, 247, 246, 0.14); }
.btn-sek-dunkel:hover { background-color: rgba(11, 61, 46, 0.08); }
.btn-navy:hover       { background-color: #0F3159; }

.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Kategoriefilter der Wissensseite und Menue-Schalter.
   Beim Kategoriefilter wird der Hintergrund bewusst nicht
   angefasst: das Filterskript schreibt das style-Attribut dieser
   Schalter neu und wuerde sich sonst mit dem Hover beissen. */

.kat-btn,
.nav-toggle {
  transition: box-shadow 200ms ease,
              transform  200ms ease;
}

.kat-btn:hover,
.nav-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kat-btn:active,
.nav-toggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}


/* --- 3) Fokus fuer Tastaturbedienung ---------------------------
   Bisher gab es auf der gesamten Website keine einzige
   Fokus-Regel. Einheitlicher Neon-Rahmen, der Halo dahinter
   sorgt dafuer, dass der Rahmen auch auf neongelber Flaeche
   erkennbar bleibt.                                              */

.btn-cta:focus-visible,
.kat-btn:focus-visible,
.nav-toggle:focus-visible,
.site-nav a:focus-visible,
.saeule-link:focus-visible,
.wcard:focus-visible,
.verwandt-card:focus-visible,
.beitrag-card:focus-visible,
.branchen-link:focus-visible,
.branche-link:focus-visible,
.weiter-card:focus-visible,
.branche-card:focus-visible,
.saeulen-tab:focus-visible,
footer a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-neon-yellow, #CCFF00);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(11, 61, 46, 0.28);
}


/* --- 4) Animierte Link-Unterstreichung -------------------------
   Waechst auf Hover von links nach rechts auf volle Breite.
   Neon auf dunklem Grund, Forest auf hellem Grund.
   Der aktive Navigationslink traegt bereits einen festen
   Neonstrich und bleibt deshalb ausgenommen.                     */

.site-nav a:not(.btn-cta):not(.nav-aktiv),
.saeule-link {
  position: relative;
}

/* align-self, damit die Unterstreichung die Textbreite trifft und
   nicht die volle Breite des Saeulen-Kastens. Optisch aendert das
   im Ruhezustand nichts. */
.saeule-link {
  align-self: flex-start;
}

.site-nav a:not(.btn-cta):not(.nav-aktiv)::after,
.saeule-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
  pointer-events: none;
}

.site-nav a:not(.btn-cta):not(.nav-aktiv)::after {
  background: var(--color-forest-green, #0B3D2E);
}

.saeule-link::after {
  background: var(--color-neon-yellow, #CCFF00);
}

.site-nav a:not(.btn-cta):not(.nav-aktiv):hover::after,
.site-nav a:not(.btn-cta):not(.nav-aktiv):focus-visible::after,
.saeule-link:hover::after,
.saeule-link:focus-visible::after {
  transform: scaleX(1);
}

/* Footer: nur ein dezenter Farbwechsel, keine Animation.
   !important, weil die Footer-Links ihre Farbe inline tragen.
   Das ist die einzige Stelle dieser Datei, die es braucht. */

footer a {
  transition: color 200ms ease, opacity 200ms ease;
}

footer a:hover {
  color: var(--color-neon-yellow, #CCFF00) !important;
  opacity: 1 !important;
}


/* --- 5) Karten -------------------------------------------------
   Einheitlicher Standard fuer alle verlinkten Karten.
   Statische Infobloecke (Saeulen-Kaesten, Team-Karten, FAQ)
   bleiben bewusst ohne Effekt.                                   */

/* Ruheschatten, bisher inline an diesen drei Kartentypen. */
.wcard,
.verwandt-card,
.beitrag-card {
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.06);
}

.wcard,
.verwandt-card,
.beitrag-card,
.branchen-link,
.branche-link,
.weiter-card,
.branche-card {
  transition: transform  200ms ease,
              box-shadow 200ms ease;
}

.wcard:hover,
.verwandt-card:hover,
.beitrag-card:hover,
.branchen-link:hover,
.branche-link:hover,
.weiter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 61, 46, 0.14);
}

/* Die Branchen-Karten der Startseite stehen auf Forest Green.
   Ein gruener Schatten waere dort unsichtbar, deshalb hier ein
   dunkler Schatten bei sonst gleichem Effekt. */
.branche-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}


/* --- 6) Scroll-Einblenden --------------------------------------
   Der Startzustand haengt an .ix-ready. Diese Klasse setzt
   interaktionen.js beim Start auf <html>. Ohne JavaScript wird
   also nichts versteckt, alle Inhalte sind normal sichtbar.      */

.ix-ready .ix-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity   500ms ease,
              transform 500ms ease;
}

.ix-ready .ix-reveal.ix-sichtbar {
  opacity: 1;
  transform: translateY(0);
}


/* --- 7) Neon-Punkt der Hero-Headlines --------------------------
   Ersetzt den getippten Schlusspunkt in der H1 von index.html,
   Weniger-Steuern.html, Mehr-Gewinn.html und Mehr-Zeit.html.
   Entspricht der CI-Regel: rund ist ausschliesslich der
   Satzpunkt hinter Titeln und Ueberschriften, in Neon Yellow.    */

.hero-punkt {
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--color-neon-yellow, #CCFF00);
  vertical-align: baseline;
  animation: ix-punkt 300ms ease-out 1 backwards;
}

@keyframes ix-punkt {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}