/* Neues Design, gemeinsam für alle Seiten (Plan:
   .agents/plans/website-redesign-rollout.md). Seitenspezifisches bleibt im
   Inline-CSS der jeweiligen Seite; hier liegt nur, was mehrere Seiten teilen. */

/* ===== Schwebende Navigationsleiste =====
   Oben durchsichtig, nach den ersten Pixeln eine weiße Karte. is-scrolled und
   --nav-top setzt nav-dropdown.js; --nav-top hält sie unter der Event-Leiste. */
.navbar.navbar-float {
  position: fixed;
  top: var(--nav-top, 10px);
  left: 0;
  right: 0;
  width: min(1240px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0.7rem 1rem 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.navbar.navbar-float.is-scrolled,
.navbar.navbar-float:has(.mobile-menu-toggle.active) {
  border-color: rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 17px -5px rgba(30, 41, 59, 0.18);
  backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
  .navbar.navbar-float {
    width: calc(100% - 1rem);
    padding: 0.6rem 0.75rem 0.6rem 1rem;
  }
}

/* ===== Dropdowns der schwebenden Leiste =====
   Ruhig: weiche Kante statt Rahmen, grauer Hover statt Orange, die aktuelle
   Seite in Orange. Gilt für Produkt, Wissen und Unternehmen. */
.navbar-float .nav-dropdown {
  border: 0;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 18px 40px -18px rgba(30, 41, 59, 0.3);
}

.navbar-float .nav-dropdown a:hover {
  background: #f8fafc;
  color: var(--c-ink, #1e293b);
}

.navbar-float .nav-dropdown a.active {
  background: transparent;
  color: #ea580c;
}

.navbar-float .nav-dropdown a.active:hover {
  background: #f8fafc;
}

/* Produkt: oben der Überblick, darunter zwei Spalten mit grauen
   Linien-Symbolen. Hängt linksbündig am Knopf, damit es am linken Rand der
   Leiste nicht aus dem Bild ragt. */
.nav-dropdown.nav-product {
  left: -0.85rem;
  width: 400px;
  min-width: 0;
  transform: translateY(6px);
}

.nav-group:hover > .nav-dropdown.nav-product,
.nav-group:focus-within > .nav-dropdown.nav-product,
.nav-group.is-open > .nav-dropdown.nav-product {
  transform: none;
}

.nav-product .nav-product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--c-ink, #1e293b);
}

.nav-product-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid #f1f5f9;
}

.nav-product-label {
  margin: 0.45rem 0.85rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.nav-product .nav-product-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-product-link svg {
  flex-shrink: 0;
  color: #94a3b8;
  transition: color 0.15s ease;
}

.nav-product .nav-product-link:hover svg,
.nav-product .nav-product-link.active svg {
  color: currentcolor;
}

/* Zwischen Tablet und großem Laptop wird die Leiste eng: kleinere Abstände,
   und der Knopf „Erstgespräch buchen“ bricht nicht um. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .navbar.navbar-float .nav-links {
    gap: 1.15rem;
  }

  .navbar.navbar-float .nav-actions {
    gap: 0.6rem;
  }

  .navbar.navbar-float .nav-actions .btn-primary {
    padding-right: 1.1rem;
    padding-left: 1.1rem;
    white-space: nowrap;
  }
}

/* Unter 1180px passt die Sprachwahl nicht mehr in die Leiste; im Mobilmenü
   (unter 1025px) ist sie weiterhin da. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .navbar.navbar-float .nav-lang {
    display: none;
  }
}

/* Platz unter der schwebenden Leiste für Seiten, die noch keinen
   bildschirmfüllenden Kopf (.rd-pagehead) haben. */
.rd-offset {
  padding-top: 88px;
}

@media (max-width: 768px) {
  .rd-offset {
    padding-top: 76px;
  }
}

/* ===== Weiches Scrollen (Lenis, smooth-scroll.js) ===== */
html.lenis,
html.lenis body {
  height: auto;
}

/* stylelint-disable-next-line selector-class-pattern -- Klassenname von Lenis */
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ===== Fußzeile dunkel, mit weißem Logo (Images/Logo/Logo-white.svg) ===== */
.footer.footer-dark {
  border-top: 0;
  background: #0a1224;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.footer-dark .footer-brand p,
.footer-dark .footer-contact a,
.footer-dark .footer-links a,
.footer-dark .footer-copyright {
  color: #94a3b8;
}

.footer-dark .footer-contact a:hover,
.footer-dark .footer-links a:hover {
  color: #fff;
}

/* Between tablet and desktop the link columns get narrower than
   "Auftragsverarbeitungsvertrag"; let long words break instead of spilling. */
.footer-dark .footer-links a {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.footer-dark .footer-column h3,
.footer-dark .footer-column h4 {
  color: #fff;
}

.footer-dark .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.footer-dark .footer-social a {
  border-color: rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}

.footer-dark .footer-social a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ===== Bausteine für die Unterseiten ===== */

/* Hintergründe: Pastell (wie der Hero) und dunkel (wie der Abschluss), beide
   mit dem weißen Linien-Netz, das zur Mitte und nach oben/unten ausläuft. */
.rd-pastel,
.rd-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.rd-pastel {
  background:
    radial-gradient(ellipse 48% 42% at 50% 50%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 100%),
    linear-gradient(105deg, #ffe6d5 0%, #fdf2ea 32%, #f6f3fb 66%, #e6ebfd 100%);
}

.rd-dark {
  color: #fff;
  background:
    radial-gradient(ellipse 48% 42% at 50% 50%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 100%),
    linear-gradient(105deg, #2a160b 0%, #161320 34%, #0e1527 66%, #0a1a3b 100%);
}

.rd-pastel::before,
.rd-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/Images/hero-mesh.svg") center / 512px 512px;
  opacity: 0.8;
  mask-image:
    radial-gradient(ellipse 52% 48% at 50% 50%, transparent 0%, #000 95%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}

.rd-dark::before {
  opacity: 0.08;
}

/* Abschnitt und Bühne */
.rd-section {
  padding: 7rem 1.5rem;
}

.rd-stage {
  max-width: 1120px;
  margin: 0 auto;
}

.rd-center {
  text-align: center;
}

/* Kicker mit orangem Punkt, Titel, Lead */
.rd-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink-3, #475569);
}

.rd-center .rd-eyebrow {
  justify-content: center;
}

.rd-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
}

.rd-title {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3.3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--c-ink, #1e293b);
}

.rd-lead {
  max-width: 38rem;
  margin: 1.2rem 0 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--c-ink-3, #475569);
}

.rd-center .rd-lead {
  margin-left: auto;
  margin-right: auto;
}

.rd-dark .rd-eyebrow {
  color: #cbd5e1;
}

.rd-dark .rd-title {
  color: #fff;
}

.rd-dark .rd-lead {
  color: #b4bfd0;
}

.rd-accent {
  color: #ea580c;
}

.rd-dark .rd-accent {
  color: #fb923c;
}

/* Bildschirmfüllender Seitenkopf der Unterseiten (wie der Hero) */
.rd-pagehead {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(calc(100vh - var(--banner-h, 0px)), 1100px);
  min-height: min(calc(100svh - var(--banner-h, 0px)), 1100px);
  box-sizing: border-box;
  padding: 7.5rem 1.5rem 6rem;
  text-align: center;
}

.rd-pagehead .rd-eyebrow {
  justify-content: center;
}

.rd-pagehead .rd-title {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.04;
}

.rd-pagehead .rd-lead {
  margin-left: auto;
  margin-right: auto;
  font-size: 1.12rem;
}

.rd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

.rd-center .rd-actions,
.rd-pagehead .rd-actions {
  justify-content: center;
}

/* Karten */
.rd-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.rd-cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rd-cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rd-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-sizing: border-box;
  height: 100%;
  padding: 1.75rem;
  border-radius: 22px;
  background: var(--c-bg, #fff);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 24px 50px -32px rgba(30, 41, 59, 0.4);
  color: inherit;
  text-decoration: none;
}

a.rd-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

a.rd-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.25),
    0 30px 60px -30px rgba(249, 115, 22, 0.35);
}

.rd-card h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--c-ink, #1e293b);
}

.rd-card p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--c-ink-4, #64748b);
}

.rd-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff7ed;
  color: #ea580c;
}

.rd-chip {
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #fff7ed;
  font-size: 0.78rem;
  font-weight: 600;
  color: #c2410c;
}

.rd-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #c2410c;
  text-decoration: none;
}

/* Zwei Spalten: Text und Bild/Modul nebeneinander, unter 1000px untereinander.
   .rd-split-flip stellt das Bild nach links. */
.rd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 4rem;
}

.rd-split-flip > :first-child {
  order: 2;
}

.rd-visual {
  overflow: hidden;
  border-radius: 24px;
  background: var(--c-bg, #fff);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    0 40px 80px -44px rgba(30, 41, 59, 0.45);
}

/* Liste mit orangen Haken */
.rd-checks {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.rd-checks li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--c-ink-2, #334155);
}

.rd-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
      center / 11px no-repeat,
    #fff7ed;
}

/* FAQ: Überschrift seitlich und mitlaufend, rechts die vorhandenen
   details.faq-item (Text unverändert, er spiegelt die FAQPage-Daten). */
.rd-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 4rem;
}

.rd-faq-copy {
  position: sticky;
  top: 7rem;
}

.rd-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: none;
  margin: 0;
}

/* Grundform der Fragen (dieselbe wie in noncritical.css, das nur die
   Startseiten laden): Summary als Zeile mit Plus, [open] blendet den
   senkrechten Balken aus. Für details/summary und für button-Fragen. */
.rd-faq .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--c-ink, #1e293b);
  cursor: pointer;
  list-style: none;
  hyphens: manual;
  padding: 1.15rem 1.35rem;
  font-size: 1rem;
}

.rd-faq .faq-question::-webkit-details-marker {
  display: none;
}

.rd-faq .faq-question h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.rd-faq .faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #fff7ed;
}

.rd-faq .faq-toggle::before,
.rd-faq .faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ea580c;
}

.rd-faq .faq-toggle::before {
  width: 11px;
  height: 2px;
}

.rd-faq .faq-toggle::after {
  width: 2px;
  height: 11px;
  transition: opacity 0.2s ease;
}

.rd-faq .faq-item[open] .faq-toggle::after,
.rd-faq .faq-item.open .faq-toggle::after {
  opacity: 0;
}

.rd-faq .faq-answer {
  line-height: 1.75;
  color: var(--c-ink-3, #475569);
  padding: 0 1.35rem 1.35rem;
  font-size: 0.97rem;
}

/* Links in FAQ answers, on the start page too (it has its own FAQ block). */
.faq-answer a {
  color: #c2410c;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(194, 65, 12, 0.35);
  text-underline-offset: 3px;
}

.faq-answer a:hover {
  text-decoration-color: currentcolor;
}

.rd-faq .faq-item {
  border: 0;
  border-radius: 16px;
  background: var(--c-bg, #fff);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    0 12px 30px -24px rgba(30, 41, 59, 0.45);
  transition: box-shadow 0.25s ease;
}

.rd-faq .faq-item:hover {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.3),
    0 12px 30px -24px rgba(30, 41, 59, 0.45);
}

.rd-faq .faq-item[open] {
  box-shadow:
    0 0 0 1.5px #fdba74,
    0 20px 44px -28px rgba(249, 115, 22, 0.5);
}

.rd-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink, #1e293b);
  text-decoration: none;
}

.rd-link:hover {
  color: #c2410c;
}

/* Dunkler Abschluss (Muster: Startseite) */
.rd-cta {
  padding: 8rem 1.5rem;
  text-align: center;
}

.rd-cta .rd-stage {
  max-width: 860px;
}

.rd-cta .rd-eyebrow {
  justify-content: center;
}

.rd-cta .rd-title {
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
}

.rd-cta .rd-lead {
  margin-left: auto;
  margin-right: auto;
}

.rd-cta .rd-actions {
  justify-content: center;
  margin-top: 2.5rem;
}

/* Abschluss: Telefon-Knopf auf dunklem Grund und Fakten mit Haken */
.rd-call {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.rd-call:hover {
  background: rgba(255, 255, 255, 0.12);
}

.rd-call span {
  font-weight: 500;
  color: #b4bfd0;
  font-variant-numeric: tabular-nums;
}

.rd-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: #cbd5e1;
}

.rd-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rd-facts svg {
  color: #fb923c;
}

/* Bewegung wie auf der Startseite, ruhig und etwas langsam.
   1. Der Kopf jeder Unterseite kommt beim Laden Zeile für Zeile herein
      (reines CSS, damit vor dem ersten Bild nichts aufblitzt).
   2. Alles darunter erscheint beim Scrollen: redesign.js sucht die Bausteine
      jedes Abschnitts (Überschriften, Texte, Karten, Listenpunkte) und gibt
      ihnen rd-auto; sobald einer ins Bild kommt, steigt er auf. Was gleichzeitig
      ins Bild kommt, folgt nacheinander (--rd-d). Ohne Skript, für Crawler und
      mit reduzierter Bewegung bleibt alles sofort sichtbar. */
@keyframes rd-rise {
  from {
    opacity: 0;
    translate: 0 26px;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

.rd-pagehead .rd-stage > *,
.lg-head .rd-stage > *,
.ba-head .ba-stage > *,
.rd-pagehead > .pricing-section,
.ba-head + .ba-cover {
  animation: rd-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 1.3s;
}

.rd-pagehead .rd-stage > :nth-child(1),
.lg-head .rd-stage > :nth-child(1),
.ba-head .ba-stage > :nth-child(1) {
  animation-delay: 0.1s;
}

.rd-pagehead .rd-stage > :nth-child(2),
.lg-head .rd-stage > :nth-child(2),
.ba-head .ba-stage > :nth-child(2) {
  animation-delay: 0.28s;
}

.rd-pagehead .rd-stage > :nth-child(3),
.lg-head .rd-stage > :nth-child(3),
.ba-head .ba-stage > :nth-child(3) {
  animation-delay: 0.55s;
}

.rd-pagehead .rd-stage > :nth-child(4),
.lg-head .rd-stage > :nth-child(4),
.ba-head .ba-stage > :nth-child(4) {
  animation-delay: 0.78s;
}

.rd-pagehead .rd-stage > :nth-child(5),
.ba-head + .ba-cover {
  animation-delay: 0.98s;
}

.rd-pagehead .rd-stage > :nth-child(6),
.rd-pagehead > .pricing-section {
  animation-delay: 1.15s;
}

/* Überschrift und Einleitung sind sofort sichtbar (für Suchmaschinen und
   den ersten Eindruck) und gleiten nur an ihren Platz. */
@keyframes rd-slide {
  from {
    translate: 0 18px;
  }

  to {
    translate: none;
  }
}

.rd-pagehead .rd-stage > .rd-title,
.rd-pagehead .rd-stage > .rd-lead,
.lg-head .rd-stage > .rd-title,
.lg-head .rd-stage > .rd-lead,
.ba-head .ba-stage > .rd-title {
  animation-name: rd-slide;
}

.rd-auto {
  opacity: 0;
}

.rd-auto.rd-shown {
  animation: rd-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--rd-d, 0ms) both;
}

@media (max-width: 1000px) {
  .rd-split,
  .rd-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .rd-split-flip > :first-child {
    order: 0;
  }

  .rd-faq-copy {
    position: static;
  }

  .rd-cards,
  .rd-cards-2,
  .rd-cards-4 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .rd-section {
    padding: 4.5rem 1.25rem;
  }

  .rd-pagehead {
    padding: 6.5rem 1.25rem 5rem;
  }

  .rd-cta {
    padding: 5.5rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-pagehead .rd-stage > *,
  .lg-head .rd-stage > *,
  .ba-head .ba-stage > *,
  .rd-pagehead > .pricing-section,
  .ba-head + .ba-cover {
    animation: none;
  }
}