/* ==========================================================================
   bewertung-footer.css (2026-09-29) - Bewertungen der Startseite + Footer.
   Eingebunden nach kontakt.css. Rückbau = diesen <link> entfernen (die
   Markup-Reihenfolge in home.jsx funktioniert auch mit den alten Regeln).
   Hierarchie Bewertungen: Zitat -> Paar + Sterne -> Blättern -> Google-Aufruf.
   Footer: ruhiger, gegliedert, am Handy kompakt; Tippziele >= 44 px.
   ========================================================================== */

/* ---------- Bewertungen ---------- */
.testimonial { padding: 104px 0 96px; }
.testimonial__mark {
  font-size: 88px;
  line-height: 0.5;
  margin-bottom: 28px;
  color: var(--accent-active);
}
.testimonial__who {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.testimonial__who .testimonial__stars {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--blush-700, #B0594D);
}
.testimonial__author {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.testimonial__who .testimonial__attr {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #6B6B6B;              /* war --fg-3 (#828282, 3,8:1) */
}

/* Blättern: eine ruhige Pille, Pfeile + Zähler */
.testimonial__nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 36px;
  padding: 4px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1), 0 8px 24px -16px rgba(10, 10, 10, 0.25);
}
.testimonial__nav button {
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: var(--fg);
  transition: background-color 180ms ease-out, color 180ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
  .testimonial__nav button:hover { background: var(--fg); color: #FFFFFF; }
}
.testimonial__nav button:active { transform: scale(0.94); }
.testimonial__nav button:focus-visible,
.testimonial__google .testimonial__gcta:focus-visible {
  outline: 2px solid var(--blush-700, #B0594D);
  outline-offset: 2px;
}
.testimonial__count {
  min-width: 56px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

/* Google-Aufruf: abgesetzt, leise, aber als echter Knopf */
.testimonial__google {
  margin: 44px auto 0;
  padding-top: 32px;
  max-width: 460px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.testimonial__google-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: balance;
}
.testimonial__google .testimonial__gcta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.16);
  transition: background-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.testimonial__google .testimonial__gcta svg { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) {
  .testimonial__google .testimonial__gcta:hover { background: var(--fg); color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--fg); }
  .testimonial__google .testimonial__gcta:hover svg { transform: translate(2px, -2px); }
}
.testimonial__google .testimonial__gcta:active { transform: scale(0.97); }

@media (max-width: 720px) {
  .testimonial { padding: 72px 0 64px; }
  .testimonial__inner { padding: 0 20px; }
  .testimonial__mark { font-size: 64px; margin-bottom: 20px; }
  .testimonial__who { margin-top: 28px; }
  .testimonial__nav { margin-top: 28px; }
  .testimonial__google { margin-top: 36px; padding-top: 28px; }
}

/* ---------- Footer (Neubau 2026-09-29) ----------
   Abschluss-Aufruf -> Marke + drei Spalten -> Fußzeile -> Wortmarke.
   Alle Regeln hängen an .footer--neu, damit die alten aus styles.css
   (absolut gesetzte, abgeschnittene Riesen-Schrift) sicher überstimmt werden. */
.footer.footer--neu { padding: 0; background: #0A0A0A; }
.footer--neu .footer__inner { position: relative; z-index: 1; }

.footer--neu .footer__cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 64px;
  padding: 120px 0 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer--neu .footer__cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%; top: 10%;
  width: 60%; height: 90%;
  background: radial-gradient(closest-side, rgba(232, 160, 154, 0.16), rgba(232, 160, 154, 0));
  pointer-events: none;
}
.footer__eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blush-500, #E8A09A);
  margin-bottom: 20px;
}
.footer__cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-wrap: balance;
}
.footer__cta-sub {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  max-width: 46ch;
}
.footer__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--blush-500, #E8A09A);
  color: #0A0A0A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.footer__cta-btn svg { transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) {
  .footer__cta-btn:hover { background: #F0BCAE; }
  .footer__cta-btn:hover svg { transform: translateX(4px); }
}
.footer__cta-btn:active { transform: scale(0.97); }
.footer__cta-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

.footer--neu .footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 40px 48px;
  margin: 0;
  padding: 64px 0 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer--neu .footer__brand { gap: 18px; max-width: none; }
.footer--neu .footer__brand img { width: 40px; height: 40px; }
.footer--neu .footer__tag { font-size: 14px; color: rgba(255, 255, 255, 0.66); line-height: 1.7; max-width: 32ch; margin: 0; }
.footer--neu .footer__col h4 {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.5);
  margin: 6px 0 14px;
}
.footer--neu .footer__col a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  position: relative;
  transition: color 160ms ease-out;
}
.footer--neu .footer__col a span { overflow-wrap: anywhere; }
.footer--neu .footer__col a svg { flex: none; opacity: 0.7; }
.footer--neu .footer__col a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
  .footer--neu .footer__col a:hover { color: #FFFFFF; }
  .footer--neu .footer__col a:hover::after { transform: scaleX(1); }
}
.footer--neu .footer__col a:focus-visible,
.footer__top-btn:focus-visible { outline: 2px solid var(--accent-active); outline-offset: 3px; border-radius: 6px; }
.footer__region { display: block; margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.5); }

.footer--neu .footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 22px 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}
.footer__top-btn {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 160ms ease-out;
}
.footer__top-ico { transform: rotate(-45deg); transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) {
  .footer__top-btn:hover { color: #FFFFFF; }
  .footer__top-btn:hover .footer__top-ico { transform: rotate(-45deg) translate(2px, -2px); }
}

/* Wortmarke: im Fluss, ganz sichtbar, nach unten ausblendend */
.footer--neu .footer__giant {
  position: relative;
  bottom: auto;
  display: block;
  margin: 8px 0 0;
  padding: 0 16px;
  font-size: clamp(56px, 13.2vw, 250px);
  line-height: 0.8;
  letter-spacing: -0.01em;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (max-width: 1100px) {
  .footer--neu .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer--neu .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer--neu .footer__cta { grid-template-columns: minmax(0, 1fr); padding: 72px 0 48px; gap: 28px; }
  .footer--neu .footer__cta::before { left: -30%; width: 120%; }
  .footer__cta-btn { width: 100%; }
  .footer--neu .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; padding: 44px 0 36px; }
  .footer--neu .footer__brand { grid-column: 1 / -1; }
  .footer--neu .footer__col:nth-child(3) { grid-column: 1 / -1; order: 3; }
  .footer--neu .footer__col a { min-height: 44px; }
  .footer--neu .footer__col a::after { bottom: 12px; }
  .footer--neu .footer__bottom { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0 8px; }
  .footer--neu .footer__giant { font-size: clamp(40px, 15vw, 120px); padding: 0 0 72px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__col a::after, .footer__cta-btn svg, .footer__top-ico, .testimonial__google .testimonial__gcta svg { transition: none; }
}

/* ---------- Laufband (2026-09-29) ----------
   Die neuen, längeren Begriffe haben die Spur fast verdoppelt (12400 px statt
   6700 px), bei gleichen 32 s lief das Band damit ~194 px/s. 90 s ergeben
   ~70 px/s: ruhig lesbar, langsamer als der alte Livestand (105 px/s). */
.marquee__track { animation-duration: 90s; }

/* ---------- „Vier Schritte bis zum Film“ (2026-09-29) ----------
   Dennis: Hover besser, Titel in der Akzentfarbe. Vorher war der Übergang der
   Akzentlinie kaputt (Hover ändert transform, animations.css überblendete width
   -> die Linie sprang). Jetzt: Linie zieht in 600 ms, Titel färbt sich Blush und
   rückt 6 px ein, Nummer wächst zur Linie, Text wird heller, die anderen Schritte
   treten zurück. Auf Geräten ohne Hover sind die Titel dauerhaft in Blush. */
.process-step::before { z-index: 1; height: 2px; top: -1px; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.process-step__num { display: inline-flex; align-items: center; gap: 10px; transition: letter-spacing 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.process-step__title { transition: color 320ms ease-out, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.process-step__body { transition: color 320ms ease-out; }
.process-step { transition: opacity 320ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .process-step:hover .process-step__title { color: var(--accent-active); transform: translateX(6px); }
  .process-step:hover .process-step__body { color: rgba(255, 255, 255, 0.88); }
  .process-step:hover .process-step__num { letter-spacing: 0.4em; }
  .process__grid:hover .process-step:not(:hover) { opacity: 0.45; }
}
@media (hover: none), (pointer: coarse) {
  .process-step__title { color: var(--accent-active); }
}
@media (prefers-reduced-motion: reduce) {
  .process-step__title, .process-step__num, .process-step::before { transition: none; }
  .process-step:hover .process-step__title { transform: none; }
}