/* ===== 01-base.css ===== */
/* ===============================================================
   Grundlagen: Schriften, Farben, Grundbausteine
   Alle Farben und Maße stehen HIER. Wer die Marke umfärbt,
   ändert nur diesen Block.
   =============================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fw-dunkel: #07182d;
  --fw-dunkel-2: #0b223d;
  --fw-blau: #0d2747;
  --fw-blau-2: #102b4d;
  --fw-gold: #b79a4a;
  --fw-gold-2: #d3bc78;
  --fw-gold-text: #8e7534;

  --fw-text: #0f1d2d;
  --fw-text-leise: rgba(15, 29, 45, .74);
  --fw-text-hell: #f7f8fb;
  --fw-text-hell-leise: rgba(247, 248, 251, .76);

  --fw-rand: rgba(15, 29, 45, .10);
  --fw-rand-hell: rgba(255, 255, 255, .10);

  --fw-schatten: 0 20px 60px rgba(7, 24, 45, .10);
  --fw-schatten-blau: 0 24px 70px rgba(7, 24, 45, .20);

  --fw-max: 1280px;
  --fw-kopf-hoehe: 106px;
  --fw-uebergang: all .4s cubic-bezier(.22, .61, .36, 1);

  --fw-schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* clip statt hidden: hidden erzeugt einen Scroll-Container und
     killt position:sticky (LESSONS, Aura Beauty 04.08.). */
  overflow-x: clip;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--fw-text);
  font-family: var(--fw-schrift);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

/* Listen, die als Raster oder Kachelreihe dienen, brauchen keinen
   Aufzählungs-Einzug. Ohne diesen Reset schiebt das Standard-
   Stylesheet des Browsers sie um 40 px nach rechts, und die Reihe
   steht dann sichtbar versetzt zur restlichen Spalte. Genau das war
   bei den drei Zahlenkacheln im Kopfbereich passiert.

   `:where()` hat Spezifität 0, damit gewinnt jede spätere
   Klassenregel (etwa `margin-top`) trotzdem.
   Aufzählungen im Fließtext (Impressum, Datenschutz) tragen keine
   fw-Klasse und behalten ihre Punkte. */
:where(ul[class^="fw-"], ul[class*=" fw-"],
       ol[class^="fw-"], ol[class*=" fw-"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -.03em;
  font-weight: 800;
  line-height: 1.05;
  color: var(--fw-text);
}

p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--fw-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sprungmarken dürfen nicht unter dem festen Kopf landen */
[id] { scroll-margin-top: calc(var(--fw-kopf-hoehe) + 16px); }

.fw-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 2000;
  padding: 12px 18px;
  border-radius: 0 0 14px 14px;
  background: var(--fw-dunkel);
  color: #fff;
  font-weight: 700;
  transition: top .2s ease;
}

.fw-skip:focus { top: 0; }

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Grundraster ---------- */

.fw-container {
  width: min(calc(100% - 32px), var(--fw-max));
  margin: 0 auto;
  position: relative;
}

.fw-section { position: relative; padding: 96px 0; }
.fw-section--schmal { padding: 72px 0; }

.fw-section--hell {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
}

.fw-seite-oben { padding-top: 40px; }

/* ---------- Textbausteine ---------- */

.fw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(183, 154, 74, .28);
  border-radius: 999px;
  background: rgba(183, 154, 74, .08);
  color: var(--fw-dunkel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Auf dunklem Grund wird der Eyebrow gold */
.fw-auf-dunkel .fw-eyebrow,
.fw-karte-dunkel .fw-eyebrow {
  color: var(--fw-gold-2);
  background: rgba(183, 154, 74, .12);
  border-color: rgba(211, 188, 120, .30);
}

.fw-title {
  margin: 0 0 16px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: .99;
  letter-spacing: -.035em;
  font-weight: 800;
}

.fw-section-title {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 800;
}

.fw-accent {
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Auf hellem Grund ist Gold auf Weiß zu schwach — dort dunkelblau.
   Genau so lief es auch live auf der Shopify-Seite. */
.fw-accent--blau {
  background: linear-gradient(135deg, #07182d 0%, #0b223d 45%, #163a63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fw-text {
  margin: 0;
  color: var(--fw-text-leise);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
}

.fw-auf-dunkel .fw-text,
.fw-karte-dunkel .fw-text { color: var(--fw-text-hell-leise); }

.fw-section-head {
  max-width: 760px;
  margin: 0 auto 54px;
  text-align: center;
}

.fw-section-text {
  margin: 0;
  color: var(--fw-text-leise);
  font-size: 17px;
  line-height: 1.7;
}

/* ---------- Knöpfe ---------- */

.fw-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.fw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: var(--fw-uebergang);
}

.fw-btn-primary {
  color: #0b1524;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  box-shadow: 0 18px 40px rgba(183, 154, 74, .22);
}

.fw-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgba(183, 154, 74, .30);
}

.fw-btn-secondary {
  color: #fff;
  border-color: rgba(13, 39, 71, .18);
  background: linear-gradient(135deg, var(--fw-blau), var(--fw-blau-2));
  box-shadow: 0 18px 40px rgba(7, 24, 45, .14);
}

.fw-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(183, 154, 74, .40);
  background: linear-gradient(135deg, var(--fw-blau-2), var(--fw-blau));
}

/* Auf dunklem Grund braucht der zweite Knopf einen hellen Rand,
   sonst verschwindet er im Hintergrund. */
.fw-auf-dunkel .fw-btn-secondary,
.fw-karte-dunkel .fw-btn-secondary {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}

.fw-auf-dunkel .fw-btn-secondary:hover,
.fw-karte-dunkel .fw-btn-secondary:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(211, 188, 120, .36);
}

/* ---------- Karten auf dunklem Grund ---------- */

.fw-karte-dunkel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fw-rand-hell);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(211, 188, 120, .14), transparent 30%),
    linear-gradient(180deg, rgba(13, 39, 71, .98), rgba(16, 43, 77, .98));
  box-shadow: var(--fw-schatten-blau);
  color: var(--fw-text-hell);
}

.fw-karte-dunkel h2,
.fw-karte-dunkel h3,
.fw-karte-dunkel .fw-section-title,
.fw-karte-dunkel .fw-title { color: #fff; }

/* ---------- Häkchenliste ---------- */

.fw-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.fw-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}

.fw-check i,
.fw-hero-list i,
.fw-contact-item i,
.fw-info-item i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: #0f1d2d;
  font-style: normal;
  font-weight: 800;
  font-size: 13px;
}

.fw-check strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
}

.fw-check span {
  display: block;
  color: var(--fw-text-hell-leise);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---------- Symbole ---------- */

.fw-icon {
  display: block;
  width: 55%;
  height: 55%;
  max-width: 30px;
  max-height: 30px;
}

.fw-service-icon .fw-icon,
.fw-benefit-icon .fw-icon {
  width: 30px;
  height: 30px;
  max-width: none;
  max-height: none;
}

.fw-global-wa-icon .fw-icon { width: 22px; height: 22px; }

/* ---------- KI-Kennzeichnung am Bild ----------
   Art. 50 Abs. 5 KI-VO (seit 2. August 2026): der Hinweis muss
   sichtbar sein, sobald man das Bild sieht. Er sitzt deshalb AUF dem
   Bild und nicht nur im Impressum. Bewusst dezent, aber mit eigener
   dunkler Fläche, damit er auf jedem Motiv lesbar bleibt. */

.fw-ki-marke {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(7, 24, 45, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fw-ki-marke abbr {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: #0b1524;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  cursor: help;
}

/* ---------- Fehlende Kundendaten sichtbar machen ---------- */

.fw-luecke {
  background: #ffe98a;
  color: #4a3a00;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: .92em;
}

/* ---------- Einblenden beim Scrollen ---------- */

/* Sichtbar ist der Normalfall. Versteckt wird nur, wenn der Browser
   den IntersectionObserver kennt — dann setzt das Kopf-Skript die
   Klasse hat-js. Fällt das Skript aus, bleibt die Seite lesbar,
   statt leer zu sein. */
.hat-js .fw-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: transform, opacity;
}

.hat-js .fw-reveal.ist-sichtbar {
  opacity: 1;
  transform: none;
}

.fw-delay-1 { transition-delay: .08s; }
.fw-delay-2 { transition-delay: .16s; }
.fw-delay-3 { transition-delay: .24s; }
.fw-delay-4 { transition-delay: .32s; }
.fw-delay-5 { transition-delay: .40s; }

@media (max-width: 860px) {
  .fw-section { padding: 72px 0; }
  .fw-checks { grid-template-columns: 1fr; }

  /* Alleinstehende Links (Telefon, E-Mail, Route, Team) brauchen auf
     dem Handy ein Tippziel von mindestens 44 px. Links MITTEN im
     Fließtext sind davon ausgenommen, die dürfen klein bleiben. */
  .fw-contact-item a,
  .fw-kontakt-item a,
  .fw-team-meta a,
  .fw-about-team-meta a,
  .fw-allein-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .fw-container { width: min(calc(100% - 20px), var(--fw-max)); }
  .fw-btn { width: 100%; }
  .fw-btns { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

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


/* ===== 02-header.css ===== */
/* ===============================================================
   Fester Kopfbereich mit Glas-Pille
   Der Abstandhalter steht ABSICHTLICH als Geschwister hinter dem
   Kopf, nicht darin: ein Element in einem position:fixed-Kasten
   schiebt gar nichts. Im alten Shop lag er innen und wirkte nicht —
   deshalb rutschte mobil die erste Überschrift unter das Menü
   (LESSONS Falle 15).
   =============================================================== */

.fw-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 14px 0;
  background: transparent;
  transition: padding .35s cubic-bezier(.22, .61, .36, 1);
}

/* Kein Abstandhalter mehr. Ein eigenes Element unter dem festen Kopf
   traegt immer den Seitenhintergrund und erzeugt dadurch einen weissen
   Balken ueber dem Hero-Verlauf. Stattdessen rechnet jede erste
   Sektion die Kopfhoehe in ihr eigenes padding-top ein, dann liegt
   hinter dem Kopf der Hintergrund, der dort hingehoert. */

.fw-header.ist-gescrollt { padding: 10px 0; }

.fw-header-container {
  width: min(calc(100% - 32px), var(--fw-max));
  margin: 0 auto;
  position: relative;
}

.fw-header-shell {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: rgba(7, 24, 45, .72);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: var(--fw-uebergang);
}

.fw-header.ist-gescrollt .fw-header-shell {
  min-height: 70px;
  background: rgba(7, 24, 45, .95);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .24);
}

/* ---------- Wortmarke ---------- */

.fw-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 0 0 auto;
}

.fw-header-mark {
  flex: 0 0 auto;
  display: block;
  width: 46px;
  height: 46px;
}

.fw-header-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fw-header-brand-text { min-width: 0; }

.fw-header-brand-title {
  display: block;
  color: #fff;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fw-header-brand-sub {
  display: block;
  margin-top: 4px;
  color: rgba(247, 248, 251, .74);
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Navigation für große Bildschirme ---------- */

.fw-header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.fw-nav-link,
.fw-nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--fw-uebergang);
}

.fw-nav-link:hover,
.fw-nav-drop-toggle:hover {
  color: var(--fw-gold-2);
  background: rgba(255, 255, 255, .06);
}

.fw-nav-link[aria-current="page"],
.fw-nav-dropdown--aktiv .fw-nav-drop-toggle {
  color: var(--fw-gold-2);
  background: rgba(211, 188, 120, .12);
}

.fw-nav-dropdown { position: relative; }

.fw-nav-drop-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform .3s ease;
}

.fw-nav-dropdown:hover .fw-nav-drop-toggle svg,
.fw-nav-dropdown.ist-offen .fw-nav-drop-toggle svg { transform: rotate(180deg); }

.fw-nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(9, 24, 44, .97);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--fw-uebergang);
}

.fw-nav-dropdown:hover .fw-nav-menu,
.fw-nav-dropdown.ist-offen .fw-nav-menu,
.fw-nav-dropdown:focus-within .fw-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fw-nav-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: 600;
  transition: var(--fw-uebergang);
}

.fw-nav-menu a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.fw-nav-menu a[aria-current="page"] { color: var(--fw-gold-2); }

.fw-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  margin-left: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: #0b1524;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 18px 40px rgba(183, 154, 74, .22);
  transition: var(--fw-uebergang);
}

.fw-header-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgba(183, 154, 74, .30);
}

/* ---------- Menüknopf ---------- */

.fw-header-toggle {
  display: none;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: var(--fw-uebergang);
}

.fw-header-toggle:hover { background: rgba(255, 255, 255, .10); }

.fw-header-toggle-lines {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.fw-header-toggle-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transition: var(--fw-uebergang);
}

.fw-header-toggle-lines span:nth-child(1) { top: 0; }
.fw-header-toggle-lines span:nth-child(2) { top: 6px; }
.fw-header-toggle-lines span:nth-child(3) { top: 12px; }

.fw-header.ist-offen .fw-header-toggle-lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.fw-header.ist-offen .fw-header-toggle-lines span:nth-child(2) { opacity: 0; }
.fw-header.ist-offen .fw-header-toggle-lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.fw-mobile-nav { display: none; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 1080px) {
  .fw-header-nav,
  .fw-header-btn { display: none; }

  .fw-header-toggle { display: flex; }

  .fw-mobile-nav {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1;
    max-height: calc(100dvh - var(--fw-kopf-hoehe) - 24px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  }

  .fw-header.ist-offen .fw-mobile-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .fw-mobile-nav-inner {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background: rgba(7, 24, 45, .97);
    box-shadow: 0 22px 52px rgba(0, 0, 0, .30);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .fw-mobile-nav a,
  .fw-mobile-drop-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .94);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--fw-uebergang);
  }

  .fw-mobile-nav a:hover,
  .fw-mobile-drop-toggle:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .12);
  }

  .fw-mobile-nav a[aria-current="page"] {
    color: var(--fw-gold-2);
    border-color: rgba(211, 188, 120, .32);
  }

  .fw-mobile-dropdown {
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
  }

  .fw-mobile-drop-pfeil { transition: transform .3s ease; }
  .fw-mobile-dropdown.ist-offen .fw-mobile-drop-pfeil { transform: rotate(180deg); }

  .fw-mobile-dropdown-menu {
    display: grid;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, margin-top .35s ease;
  }

  .fw-mobile-dropdown.ist-offen .fw-mobile-dropdown-menu {
    max-height: 240px;
    margin-top: 8px;
  }

  .fw-mobile-dropdown-menu a {
    min-height: 46px;
    padding-left: 18px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(7, 24, 45, .90);
  }

  .fw-mobile-cta {
    margin-top: 4px;
    justify-content: center;
    border: none;
    background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
    color: #0b1524;
    font-weight: 800;
    box-shadow: 0 18px 40px rgba(183, 154, 74, .22);
  }

  .fw-mobile-nav a.fw-mobile-cta:hover {
    background: linear-gradient(135deg, var(--fw-gold), var(--fw-gold-2));
    color: #0b1524;
  }
}

@media (max-width: 560px) {
  :root { --fw-kopf-hoehe: 98px; }

  .fw-header-container { width: min(calc(100% - 20px), var(--fw-max)); }

  .fw-header-shell {
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 20px;
    gap: 12px;
  }

  .fw-header-brand { gap: 11px; }
  .fw-header-brand-title { font-size: 22px; }
  .fw-header-brand-sub { font-size: 9.5px; letter-spacing: .06em; }
  .fw-header-mark { width: 40px; height: 40px; }

  .fw-mobile-nav { top: calc(100% + 8px); }
  .fw-mobile-nav-inner { padding: 10px; border-radius: 18px; }
}


/* ===== 03-footer.css ===== */
/* ===============================================================
   Fußbereich + schwebender WhatsApp-Knopf
   =============================================================== */

.fw-footer {
  position: relative;
  overflow: hidden;
  padding: 72px 0 28px;
  background:
    radial-gradient(circle at top right, rgba(183, 154, 74, .10), transparent 24%),
    linear-gradient(180deg, #061426 0%, #081a31 100%);
  color: var(--fw-text-hell);
}

.fw-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(183, 154, 74, .9) 20%,
    rgba(211, 188, 120, 1) 50%,
    rgba(183, 154, 74, .9) 80%,
    transparent 100%
  );
}

.fw-footer-container {
  width: min(calc(100% - 32px), var(--fw-max));
  margin: 0 auto;
}

.fw-footer-top {
  display: grid;
  grid-template-columns: 1.2fr .85fr .95fr 1fr;
  gap: 26px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.fw-footer-brand { max-width: 380px; }

.fw-footer-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.fw-footer-mark {
  flex: 0 0 auto;
  display: block;
  width: 48px;
  height: 48px;
}

.fw-footer-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fw-footer-brand-title {
  display: block;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fw-footer-brand-sub {
  display: block;
  margin-top: 4px;
  color: var(--fw-text-hell-leise);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fw-footer-text {
  color: var(--fw-text-hell-leise);
  font-size: 15px;
  line-height: 1.7;
}

.fw-footer-col h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fw-footer-links {
  display: grid;
  gap: 12px;
  align-content: start;
}

.fw-footer-links a {
  color: var(--fw-text-hell-leise);
  font-size: 15px;
  line-height: 1.6;
  transition: color .25s ease;
}

.fw-footer-links a:hover { color: var(--fw-gold-2); }

.fw-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  color: rgba(247, 248, 251, .64);
  font-size: 14px;
  line-height: 1.6;
}

.fw-footer-bottom-left,
.fw-footer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.fw-footer-bottom a {
  color: rgba(247, 248, 251, .64);
  transition: color .25s ease;
}

.fw-footer-bottom a:hover { color: var(--fw-gold-2); }

.fw-footer-credit { white-space: nowrap; }

@media (max-width: 1000px) {
  .fw-footer-top { grid-template-columns: 1fr 1fr; }
  .fw-footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 860px) {
  /* Auf dem Handy sind die Fußlinks die einzige Zweitnavigation.
     Sie brauchen ein Tippziel von mindestens 44 px, sonst trifft
     man mit dem Daumen den Nachbarlink. */
  .fw-footer-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .fw-footer-bottom-right a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .fw-footer-container { width: min(calc(100% - 20px), var(--fw-max)); }
  .fw-footer-top { grid-template-columns: 1fr; }
  .fw-footer-brand-title { font-size: 25px; }
  .fw-footer-mark { width: 42px; height: 42px; }

  .fw-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .fw-footer-bottom-left,
  .fw-footer-bottom-right { width: 100%; gap: 10px 14px; }
  .fw-footer-credit { white-space: normal; }
}

/* ===============================================================
   Schwebender WhatsApp-Knopf
   Sitzt unten rechts, verschwindet sobald der Fußbereich im Bild
   ist, damit er nicht über dem Impressum-Link klebt.
   =============================================================== */

.fw-global-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 340px);
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: #0b1524;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 20px 45px rgba(183, 154, 74, .30);
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.fw-global-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px rgba(183, 154, 74, .34);
}

.fw-global-wa.ist-versteckt {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.fw-global-wa-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  color: #0b1524;
  font-size: 18px;
  font-weight: 900;
}

.fw-global-wa-text { display: block; }

.fw-global-wa-text small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
}

@media (max-width: 560px) {
  .fw-global-wa {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
    justify-content: flex-start;
  }
}


/* ===== 10-start.css ===== */
/* ===============================================================
   Startseite: Kopfbild mit Video, Leistungen, Vorteile, Ablauf,
   Team, Kontaktblock
   =============================================================== */

.fw-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--fw-kopf-hoehe) + 64px) 0 96px;
  background:
    radial-gradient(circle at top left, rgba(183, 154, 74, .10), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(211, 188, 120, .08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
}

.fw-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 34px;
  align-items: center;
}

.fw-hero-copy { max-width: 690px; }

.fw-hero .fw-title { color: var(--fw-dunkel); }

/* ---------- Die drei goldenen Zahlenkacheln ---------- */

.fw-hero-subline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  max-width: 760px;
}

.fw-mini-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(142, 117, 52, .22);
  border-radius: 22px;
  background: linear-gradient(180deg, #d3bc78 0%, #b79a4a 100%);
  box-shadow: 0 16px 34px rgba(183, 154, 74, .20);
  transition: transform .35s ease, box-shadow .35s ease;
}

.fw-mini-stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 46px rgba(183, 154, 74, .26);
}

.fw-mini-stat::before {
  content: "";
  position: absolute;
  inset: auto -38px -48px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
  pointer-events: none;
}

.fw-mini-stat strong {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.06em;
  color: var(--fw-dunkel);
  white-space: nowrap;
}

.fw-counter {
  font-size: clamp(40px, 4vw, 52px);
  line-height: .9;
}

.fw-counter-plus {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -.04em;
}

.fw-mini-stat-label {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: rgba(7, 24, 45, .88);
  font-size: 15.5px;
  line-height: 1.15;
  font-weight: 700;
}

/* ---------- Videokarte ---------- */

/* Quadratische Karte (Bastians Vorgabe 05.08.). Das Standbild wird
   dafür bereits quadratisch aus dem Video geschnitten, siehe
   _build/video-standbild.js — sonst stünde der Weißraum, den das
   Whiteboard-Video unten hat, als leere Fläche in der Karte. */
.fw-video-card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(7, 24, 45, .10);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(183, 154, 74, .20), transparent 30%),
    linear-gradient(135deg, #07182d 0%, #02060d 100%);
  box-shadow: 0 30px 80px rgba(7, 24, 45, .12);
  cursor: pointer;
  transition: transform .45s ease, box-shadow .45s ease;
}

.fw-video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 36px 90px rgba(7, 24, 45, .18);
}

/* Standbild aus dem Video. Ersetzt das früher inline eingebundene
   8,5-MB-Video, das bei jedem Seitenaufruf komplett geladen wurde,
   nur um ein Bild zu zeigen. Neu erzeugen: node _build/video-standbild.js */
.fw-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}

.fw-video-card:hover .fw-video-poster { transform: scale(1.04); }

/* Das Standbild ist ein Whiteboard-Video, also fast weiß. Der
   Verlauf bleibt deshalb bewusst schwach: er soll die Karte in den
   Rahmen einbinden, nicht die Zeichnung zugrauen. Alles, was Text
   trägt (Badge oben), hat seine eigene dunkle Fläche. */
.fw-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(7, 24, 45, .07) 0%,
      rgba(7, 24, 45, 0) 26%,
      rgba(7, 24, 45, 0) 76%,
      rgba(7, 24, 45, .24) 100%),
    radial-gradient(circle at 72% 16%, rgba(183, 154, 74, .10), transparent 34%);
}

.fw-video-play-btn {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.fw-video-play-btn-inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #07182d, #0b223d);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 24px 54px rgba(7, 24, 45, .22);
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-video-play-btn-inner::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(183, 154, 74, .34);
  border-radius: 50%;
  animation: fwPlayPuls 2.8s ease-out infinite;
}

.fw-video-play-btn:hover .fw-video-play-btn-inner {
  transform: scale(1.07);
  box-shadow: 0 28px 60px rgba(7, 24, 45, .28);
}

.fw-floating-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 4;
  max-width: calc(100% - 44px);
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(7, 24, 45, .78);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 28px rgba(7, 24, 45, .16);
  animation: fwBadgeSchweben 4.8s ease-in-out infinite;
}

@keyframes fwBadgeSchweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes fwPlayPuls {
  0% { opacity: .55; transform: scale(.9); }
  70% { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.22); }
}

/* ---------- Videofenster ---------- */

.fw-video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 44px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}

.fw-video-modal.ist-offen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fw-video-modal-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(5, 12, 22, .62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
}

.fw-video-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(92vw, 1100px);
  max-height: calc(100dvh - 48px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: #000;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .45);
  transform: translateY(18px) scale(.96);
  transition: transform .35s ease;
}

.fw-video-modal.ist-offen .fw-video-modal-dialog { transform: none; }

.fw-video-modal-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.fw-video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: rgba(7, 24, 45, .78);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: var(--fw-uebergang);
}

.fw-video-modal-close:hover { transform: scale(1.06); background: rgba(12, 30, 56, .9); }

body.fw-modal-offen { overflow: hidden; }

/* ---------- Leistungskarten ---------- */

.fw-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.fw-service {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(7, 24, 45, .08);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(11, 20, 35, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-service:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px rgba(11, 20, 35, .12);
}

.fw-service-media {
  position: relative;
  height: 185px;
  overflow: hidden;
  background: #d9dde4;
}

.fw-service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 24, 45, .06) 0%, rgba(7, 24, 45, .22) 100%);
}

.fw-service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.fw-service:hover .fw-service-media img { transform: scale(1.05); }

.fw-service-body { position: relative; padding: 28px; }

.fw-service-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: -58px 0 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(211, 188, 120, .96), rgba(183, 154, 74, .96));
  color: var(--fw-text);
  font-size: 26px;
  box-shadow: 0 14px 30px rgba(183, 154, 74, .20);
  transition: transform .3s ease;
}

.fw-service:hover .fw-service-icon { transform: rotate(-4deg) scale(1.04); }

.fw-card-title {
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fw-card-text {
  margin: 0;
  color: var(--fw-text-leise);
  font-size: 15px;
  line-height: 1.7;
}

.fw-service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  color: var(--fw-text);
  font-size: 14px;
  font-weight: 700;
}

.fw-service-link span {
  color: var(--fw-gold-text);
  transition: transform .2s ease;
}

.fw-service:hover .fw-service-link span { transform: translateX(4px); }

/* ---------- Vorteile: großer Kasten plus Seitenkarten ---------- */

.fw-usp-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: start;
}

.fw-usp-main { padding: 34px; border-radius: 30px; }

.fw-usp-main .fw-section-title { text-align: left; margin-bottom: 14px; }

.fw-side-cards { display: grid; gap: 18px; }

.fw-mini-card { padding: 26px; border-radius: 26px; }

.fw-mini-card strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}

.fw-mini-card p {
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.7;
}

.fw-photo-card {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 28px;
  background: #0b1829;
  box-shadow: var(--fw-schatten);
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .16);
}

.fw-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s ease;
}

.fw-photo-card:hover img { transform: scale(1.05); }

.fw-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 20, 38, .08) 0%, rgba(7, 20, 38, .68) 100%);
}

.fw-photo-badge {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  max-width: 280px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(7, 24, 45, .72);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fw-photo-badge strong { display: block; margin-bottom: 4px; font-size: 15px; }

.fw-photo-badge span {
  display: block;
  color: rgba(247, 248, 251, .82);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Ablaufschritte ---------- */

.fw-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.fw-step {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  border: 1px solid rgba(7, 24, 45, .08);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(11, 20, 35, .08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.fw-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(11, 20, 35, .12);
  border-color: rgba(183, 154, 74, .22);
}

.fw-step-num {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: var(--fw-text);
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 14px 28px rgba(183, 154, 74, .18);
  transition: transform .3s ease;
}

.fw-step:hover .fw-step-num { transform: rotate(-6deg) scale(1.06); }

.fw-step h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.12; }

.fw-step p {
  color: var(--fw-text-leise);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Team ---------- */

.fw-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.fw-team-card {
  overflow: hidden;
  border-radius: 30px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(0, 0, 0, .18);
}

.fw-team-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(180deg, #f7f7f8, #ebedf1);
}

.fw-team-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .55s ease;
}

.fw-team-card:hover .fw-team-media img { transform: scale(1.05); }

.fw-team-content { padding: 26px; }

.fw-team-name {
  margin: 0 0 6px;
  color: #fff;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.fw-team-role {
  margin: 0 0 18px;
  color: var(--fw-gold-2);
  font-size: 15px;
  font-weight: 700;
}

.fw-team-meta { display: grid; gap: 10px; }

.fw-team-meta a,
.fw-team-meta div {
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fw-team-meta strong { color: #fff; font-weight: 700; }
.fw-team-meta a:hover { color: var(--fw-gold-2); }

/* ---------- Kontaktblock am Seitenende ---------- */

.fw-cta-box {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(211, 188, 120, .18), transparent 30%),
    linear-gradient(135deg, #0c223f, #09182c 60%, #071426);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
}

.fw-cta-box::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 154, 74, .20), transparent 64%);
  pointer-events: none;
}

.fw-cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: center;
}

.fw-cta-box .fw-section-title { text-align: left; margin-bottom: 14px; }

.fw-cta-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.fw-cta-point {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.55;
}

.fw-contact-card {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 28px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fw-contact-card h2,
.fw-contact-card h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 27px;
  line-height: 1.05;
}

.fw-contact-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--fw-text-hell-leise);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.fw-contact-item i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 14px;
}

.fw-contact-item a { color: #fff; }
.fw-contact-item a:hover { color: var(--fw-gold-2); }

/* ---------- Umbrüche ---------- */

@media (max-width: 1100px) {
  .fw-hero-grid,
  .fw-usp-grid,
  .fw-cta-grid { grid-template-columns: 1fr; }

  .fw-hero-copy { max-width: none; }
  .fw-hero-subline { max-width: none; }

  .fw-services,
  .fw-steps,
  .fw-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 860px) {
  .fw-hero { padding: calc(var(--fw-kopf-hoehe) + 44px) 0 72px; }

  .fw-services,
  .fw-steps,
  .fw-team-grid,
  .fw-cta-points { grid-template-columns: 1fr; }

  .fw-hero-subline { grid-template-columns: 1fr; }
  .fw-mini-stat { min-height: 110px; }
  .fw-service-media { height: 200px; }
}

@media (max-width: 560px) {
  .fw-video-card { border-radius: 24px; }
  .fw-video-play-btn-inner { width: 78px; height: 78px; font-size: 24px; }
  .fw-floating-badge { left: 14px; top: 14px; font-size: 12px; padding: 10px 12px; }

  .fw-usp-main,
  .fw-mini-card,
  .fw-service-body,
  .fw-step,
  .fw-team-content,
  .fw-cta-box,
  .fw-contact-card { padding-left: 20px; padding-right: 20px; }

  .fw-cta-box { padding-top: 28px; padding-bottom: 28px; border-radius: 26px; }
  .fw-photo-card { min-height: 240px; }
  .fw-video-modal-dialog { border-radius: 18px; }
  .fw-video-modal-close { width: 42px; height: 42px; top: 10px; right: 10px; }
}


/* ===== 20-unterseiten.css ===== */
/* ===============================================================
   Bausteine, die sich Baufinanzierung, Forward Darlehen,
   Ratenkredite und Bausparen teilen.
   Im alten Shop war dieses Muster in jeder Seite noch einmal
   komplett hinterlegt — hier steht es genau einmal.
   =============================================================== */

.fw-unterseite-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--fw-kopf-hoehe) + 40px) 0 84px;
  background:
    radial-gradient(circle at top left, rgba(183, 154, 74, .10), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(13, 39, 71, .06), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
}

.fw-unterseite-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 154, 74, .14), transparent 62%);
  pointer-events: none;
}

.fw-hero-grid-2 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: center;
}

.fw-hero-copy-2 { max-width: 760px; }

/* ---------- Notiz-Pillen unter dem Kopfbereich ---------- */

.fw-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.fw-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(13, 39, 71, .98), rgba(16, 43, 77, .98));
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--fw-schatten-blau);
}

.fw-note b { color: #fff; font-weight: 700; }

/* ---------- Dunkle Karte im Kopfbereich ---------- */

.fw-hero-card { padding: 30px; border-radius: 30px; }

.fw-hero-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.fw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(183, 154, 74, .26);
  border-radius: 999px;
  background: rgba(183, 154, 74, .12);
  color: var(--fw-gold-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.fw-mini-rating {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  line-height: 1.35;
}

.fw-mini-rating span {
  display: block;
  color: rgba(247, 248, 251, .66);
  font-weight: 500;
}

.fw-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.fw-stat {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
}

.fw-stat strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.03em;
}

.fw-stat span {
  display: block;
  color: var(--fw-text-hell-leise);
  font-size: 13px;
  line-height: 1.55;
}

.fw-hero-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-hero-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- Vorteilskarten (hell) ---------- */

.fw-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.fw-benefit {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(7, 24, 45, .08);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(11, 20, 35, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-benefit::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 154, 74, .18), transparent 68%);
  pointer-events: none;
}

.fw-benefit:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px rgba(11, 20, 35, .12);
}

.fw-benefit-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(211, 188, 120, .9), rgba(183, 154, 74, .92));
  color: var(--fw-text);
  font-size: 26px;
  box-shadow: 0 14px 30px rgba(183, 154, 74, .20);
}

/* ---------- Nummerierte Einsatzbereiche ---------- */

.fw-usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.fw-usecase {
  padding: 26px;
  border: 1px solid rgba(7, 24, 45, .08);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(11, 20, 35, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-usecase:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(11, 20, 35, .12);
}

.fw-usecase-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: var(--fw-text);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 12px 24px rgba(183, 154, 74, .18);
}

.fw-usecase h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.1; }

.fw-usecase p {
  color: var(--fw-text-leise);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Verweiskarten auf andere Leistungen ---------- */

.fw-service-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.fw-service-link-card {
  position: relative;
  display: block;
  padding: 24px;
  border: 1px solid rgba(7, 24, 45, .08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(11, 20, 35, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-service-link-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 42px rgba(11, 20, 35, .12);
}

.fw-service-link-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.15;
}

.fw-service-link-card p {
  color: var(--fw-text-leise);
  font-size: 14px;
  line-height: 1.65;
}

.fw-service-link-card span {
  display: inline-block;
  margin-top: 14px;
  color: var(--fw-gold-text);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Fragen und Antworten ---------- */

.fw-faq-grid {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.fw-faq {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(211, 188, 120, .10), transparent 30%),
    linear-gradient(180deg, rgba(13, 39, 71, .98), rgba(16, 43, 77, .98));
  box-shadow: var(--fw-schatten-blau);
}

.fw-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.fw-faq summary::-webkit-details-marker { display: none; }

.fw-faq-zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: var(--fw-text);
  font-size: 18px;
  font-weight: 800;
  transition: transform .3s ease;
}

.fw-faq[open] .fw-faq-zeichen { transform: rotate(45deg); }

.fw-faq-content {
  padding: 0 24px 24px;
  color: var(--fw-text-hell-leise);
  font-size: 15px;
  line-height: 1.75;
}

/* ---------- Großer Kasten mit Häkchen ---------- */

.fw-main-panel { padding: 34px; border-radius: 30px; }
.fw-main-panel .fw-section-title { text-align: left; margin-bottom: 14px; }

.fw-split-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 24px;
  align-items: start;
}

.fw-side-stack { display: grid; gap: 18px; }

/* ---------- Kleine Kennzahlkarte ---------- */

.fw-stat-card,
.fw-info-card { padding: 28px; border-radius: 26px; }

.fw-stat-gross {
  margin-bottom: 12px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fw-info-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }

.fw-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.65;
}

.fw-info-item i { width: 30px; height: 30px; border-radius: 10px; }

.fw-badge-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.fw-badge-kachel {
  padding: 16px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  text-align: center;
}

.fw-badge-kachel strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 15px;
}

.fw-badge-kachel span {
  display: block;
  color: var(--fw-text-hell-leise);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Umbrüche ---------- */

@media (max-width: 1100px) {
  .fw-hero-grid-2,
  .fw-split-grid { grid-template-columns: 1fr; }

  .fw-hero-copy-2 { max-width: none; }

  .fw-benefits,
  .fw-usecases,
  .fw-service-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .fw-unterseite-hero { padding: calc(var(--fw-kopf-hoehe) + 24px) 0 60px; }

  .fw-benefits,
  .fw-usecases,
  .fw-service-links,
  .fw-hero-stats,
  .fw-badge-row { grid-template-columns: 1fr; }

  .fw-hero-note { display: grid; }
  .fw-note { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .fw-hero-card,
  .fw-main-panel,
  .fw-stat-card,
  .fw-info-card,
  .fw-benefit,
  .fw-usecase,
  .fw-service-link-card { padding-left: 20px; padding-right: 20px; }

  .fw-faq summary { padding: 18px 20px; font-size: 17px; }
  .fw-faq-content { padding: 0 20px 20px; }

  .fw-hero-card-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fw-mini-rating { text-align: left; }
}


/* ===== 21-ueber-uns.css ===== */
/* ===============================================================
   Über uns
   =============================================================== */

.fw-about {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(183, 154, 74, .10), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(13, 39, 71, .07), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 52%, #ffffff 100%);
}

.fw-about-section { padding: calc(var(--fw-kopf-hoehe) + 40px) 0 90px; }

.fw-about-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 34px;
  align-items: stretch;
}

.fw-about-card { padding: 38px; border-radius: 34px; }

.fw-about-card::before {
  content: "";
  position: absolute;
  top: -110px;
  right: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 154, 74, .20), transparent 68%);
  pointer-events: none;
}

.fw-about-title {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 800;
  max-width: 13ch;
}

.fw-about-text {
  margin: 20px 0 0;
  color: var(--fw-text-hell-leise);
  font-size: 16.5px;
  line-height: 1.8;
  max-width: 60ch;
}

.fw-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- Bildseite ---------- */

.fw-about-visual {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 18px;
  border-radius: 34px;
}

.fw-about-logo-wrap {
  display: flex;
  align-items: center;
  padding: 8px 8px 2px;
}

.fw-about-logo-wrap img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .18));
}

.fw-about-visual-main {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 70% 20%, rgba(183, 154, 74, .16), transparent 32%),
    linear-gradient(135deg, #0d2747 0%, #102b4d 60%, #0d2747 100%);
}

.fw-about-badge {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 44px);
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(7, 24, 45, .74);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fw-about-badge-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fw-gold-2);
  box-shadow: 0 0 0 6px rgba(211, 188, 120, .14);
}

.fw-about-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.fw-about-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(6, 20, 38, .03) 0%,
    rgba(6, 20, 38, .28) 48%,
    rgba(6, 20, 38, .88) 100%
  );
}

.fw-about-quote {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(7, 24, 45, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fw-about-quote p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: -.01em;
}

.fw-about-quote footer {
  margin-top: 8px;
  color: rgba(247, 248, 251, .78);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- Kennzahlen ---------- */

.fw-about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.fw-about-stat {
  padding: 24px 22px;
  border-radius: 24px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-about-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 64px rgba(7, 24, 45, .22);
}

.fw-about-stat-number {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
}

.fw-about-stat-number .ist-gold { color: var(--fw-gold-2); }

.fw-about-stat-label {
  margin: 12px 0 0;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- Blöcke ---------- */

.fw-about-block { padding: 0 0 90px; }

.fw-about-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 28px;
}

.fw-about-block-title {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -.04em;
  max-width: 14ch;
}

.fw-about-block-text {
  margin: 0;
  max-width: 56ch;
  color: var(--fw-text-leise);
  font-size: 16px;
  line-height: 1.8;
}

.fw-about-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fw-about-service {
  padding: 24px;
  border-radius: 26px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-about-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(7, 24, 45, .24);
}

.fw-about-service::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 154, 74, .16), transparent 70%);
  pointer-events: none;
}

.fw-about-service-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border: 1px solid rgba(211, 188, 120, .35);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(211, 188, 120, .96), rgba(183, 154, 74, .96));
  color: var(--fw-text);
  box-shadow: 0 14px 30px rgba(183, 154, 74, .18);
}

.fw-about-service-icon svg { width: 24px; height: 24px; }

.fw-about-service-title {
  margin: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.fw-about-service-text {
  margin: 12px 0 0;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.75;
}

/* ---------- Werte ---------- */

.fw-about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}

.fw-about-values-card { padding: 26px; border-radius: 26px; }

.fw-about-values-title {
  margin: 0 0 12px;
  color: #fff;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.fw-about-values-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.fw-about-values-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.8;
}

.fw-about-values-item svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  color: var(--fw-gold-2);
}

/* ---------- Team ---------- */

.fw-about-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fw-about-team-card {
  overflow: hidden;
  border-radius: 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-about-team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 64px rgba(7, 24, 45, .24);
}

.fw-about-team-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #e9eaed, #cfd3d8);
}

.fw-about-team-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .55s ease;
}

.fw-about-team-card:hover .fw-about-team-media img { transform: scale(1.05); }

.fw-about-team-body { padding: 24px; }

.fw-about-team-name {
  margin: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.fw-about-team-role {
  margin: 8px 0 0;
  color: var(--fw-gold-2);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fw-about-team-text {
  margin: 16px 0 0;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.8;
}

.fw-about-team-meta {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.fw-about-team-meta a {
  color: rgba(247, 248, 251, .88);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  transition: color .25s ease;
}

.fw-about-team-meta a:hover { color: var(--fw-gold-2); }

/* ---------- Abschlusskasten ---------- */

.fw-about-cta-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 26px;
  padding: 34px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(183, 154, 74, .18), transparent 26%),
    linear-gradient(135deg, #0d2747 0%, #102b4d 62%, #0d2747 100%);
}

.fw-about-cta-title {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -.04em;
  max-width: 18ch;
}

.fw-about-cta-text {
  margin: 12px 0 0;
  color: var(--fw-text-hell-leise);
  font-size: 15px;
  line-height: 1.8;
  max-width: 64ch;
}

@media (max-width: 1100px) {
  .fw-about-grid { grid-template-columns: 1fr; }

  .fw-about-services,
  .fw-about-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fw-about-cta-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .fw-about-section { padding: calc(var(--fw-kopf-hoehe) + 24px) 0 70px; }
  .fw-about-block { padding: 0 0 70px; }

  .fw-about-grid,
  .fw-about-services,
  .fw-about-stats,
  .fw-about-team,
  .fw-about-values { grid-template-columns: 1fr; }

  .fw-about-card,
  .fw-about-visual,
  .fw-about-service,
  .fw-about-team-card,
  .fw-about-values-card,
  .fw-about-cta-card { border-radius: 24px; }

  .fw-about-card,
  .fw-about-team-body,
  .fw-about-values-card,
  .fw-about-cta-card { padding: 22px 18px; }

  .fw-about-visual { padding: 14px; }
  .fw-about-visual-main { min-height: 420px; border-radius: 22px; }
  .fw-about-title { max-width: none; }
  .fw-about-stats { margin-top: 40px; }

  .fw-about-block-head { display: block; margin-bottom: 22px; }
  .fw-about-block-title { max-width: none; }
  .fw-about-block-text { margin-top: 14px; }

  .fw-about-actions { width: 100%; }
  .fw-about-actions .fw-btn { width: 100%; }
}


/* ===== 22-einbettung.css ===== */
/* ===============================================================
   Klick zum Laden — für Google Maps und den Kreditrechner
   ---------------------------------------------------------------
   Beide Dienste liegen bei fremden Anbietern und würden beim
   bloßen Öffnen der Seite schon die IP-Adresse der Besucher
   übertragen. Deshalb steht hier zuerst nur eine Vorschaukachel:
   erst der Klick lädt den Dienst. So bleibt die Seite ohne
   Cookie-Banner DSGVO-sauber.
   =============================================================== */

.fw-einbettung {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 70% 20%, rgba(183, 154, 74, .14), transparent 34%),
    linear-gradient(135deg, #0d2747 0%, #102b4d 60%, #0d2747 100%);
}

.fw-einbettung--hell {
  border-color: rgba(7, 24, 45, .10);
  background:
    radial-gradient(circle at 70% 20%, rgba(183, 154, 74, .12), transparent 34%),
    linear-gradient(135deg, #0d2747 0%, #102b4d 60%, #0d2747 100%);
}

.fw-einbettung-vorschau {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 320px;
  padding: 32px 24px;
  text-align: center;
}

.fw-einbettung-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: var(--fw-text);
  font-size: 28px;
  box-shadow: 0 14px 30px rgba(183, 154, 74, .22);
}

.fw-einbettung-vorschau h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
}

.fw-einbettung-vorschau p {
  max-width: 52ch;
  margin: 0;
  color: var(--fw-text-hell-leise);
  font-size: 14.5px;
  line-height: 1.7;
}

.fw-einbettung-vorschau p a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fw-einbettung-knopf {
  min-height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: #0b1524;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(183, 154, 74, .22);
  transition: var(--fw-uebergang);
}

.fw-einbettung-knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(183, 154, 74, .30);
}

.fw-einbettung-rahmen {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
}

/* Solange nicht geladen wurde, nimmt der Rahmen keinen Platz weg. */
.fw-einbettung:not(.ist-geladen) .fw-einbettung-rahmen { display: none; }
.fw-einbettung.ist-geladen .fw-einbettung-vorschau { display: none; }

.fw-einbettung--karte .fw-einbettung-rahmen { height: 320px; }
.fw-einbettung--karte .fw-einbettung-vorschau { min-height: 320px; }

.fw-einbettung--rechner .fw-einbettung-rahmen { min-height: 1600px; }
.fw-einbettung--rechner .fw-einbettung-vorschau { min-height: 420px; }

@media (max-width: 1100px) {
  .fw-einbettung--rechner .fw-einbettung-rahmen { min-height: 1700px; }
}

@media (max-width: 720px) {
  .fw-einbettung--rechner .fw-einbettung-rahmen { min-height: 1850px; }
  .fw-einbettung-vorschau { padding: 26px 18px; }
  .fw-einbettung-knopf { width: 100%; }
}

/* ===============================================================
   Kreditvergleich
   =============================================================== */

.fw-kv {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(183, 154, 74, .10), transparent 24%),
    radial-gradient(circle at left center, rgba(13, 39, 71, .06), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 52%, #ffffff 100%);
}

.fw-kv-hero { padding: calc(var(--fw-kopf-hoehe) + 40px) 0 52px; }

.fw-kv-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 28px;
  align-items: center;
}

.fw-kv-title {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: .99;
  letter-spacing: -.04em;
  font-weight: 900;
  max-width: 13ch;
}

.fw-kv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.fw-kv-stat {
  padding: 18px 18px 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(13, 39, 71, .98), rgba(16, 43, 77, .98));
  box-shadow: var(--fw-schatten-blau);
}

.fw-kv-stat strong {
  display: block;
  margin-bottom: 7px;
  color: var(--fw-gold-2);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.03em;
}

.fw-kv-stat span {
  display: block;
  color: var(--fw-text-hell-leise);
  font-size: 13px;
  line-height: 1.5;
}

.fw-kv-highlight { padding: 28px; border-radius: 28px; }

.fw-kv-card-title {
  margin: 18px 0 12px;
  color: #fff;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 900;
}

.fw-kv-checks { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }

.fw-kv-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--fw-text-hell);
  font-size: 15px;
  line-height: 1.6;
}

.fw-kv-checks li::before {
  content: "✓";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: var(--fw-text);
  font-size: 13px;
  font-weight: 900;
}

.fw-kv-embed-wrap {
  padding: 28px;
  border-radius: 30px;
}

.fw-kv-embed-head { margin-bottom: 20px; }

.fw-kv-embed-head h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 900;
}

.fw-kv-embed-head p {
  max-width: 62ch;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

.fw-kv-embed-wrap .fw-kv-embed-head h2 { color: #fff; }
.fw-kv-embed-wrap .fw-kv-embed-head p { color: var(--fw-text-hell-leise); }

.fw-kv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(211, 188, 120, .30);
  border-radius: 999px;
  background: rgba(183, 154, 74, .12);
  color: var(--fw-gold-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.fw-kv-badge--hell {
  border-color: rgba(183, 154, 74, .28);
  background: rgba(183, 154, 74, .08);
  color: var(--fw-dunkel);
}

.fw-kv-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}

.fw-kv-fallback p {
  margin: 0;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.7;
}

.fw-kv-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.fw-kv-step {
  padding: 22px 20px;
  border-radius: 22px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.fw-kv-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(7, 24, 45, .24);
}

.fw-kv-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: #0b1524;
  font-size: 15px;
  font-weight: 900;
}

.fw-kv-step h3 { margin: 0 0 10px; color: #fff; font-size: 19px; line-height: 1.2; }

.fw-kv-step p {
  margin: 0;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.7;
}

/* Pflichthinweis unter dem Rechner: Vermittlung, nicht Angebot. */
.fw-kv-note {
  max-width: 90ch;
  margin: 26px auto 0;
  padding: 18px 20px;
  border: 1px solid rgba(7, 24, 45, .10);
  border-radius: 18px;
  background: rgba(7, 24, 45, .03);
  color: rgba(15, 29, 45, .70);
  font-size: 13px;
  line-height: 1.7;
}

.fw-kv-note strong { color: var(--fw-text); }

@media (max-width: 1100px) {
  .fw-kv-grid { grid-template-columns: 1fr; }
  .fw-kv-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .fw-kv-hero { padding: calc(var(--fw-kopf-hoehe) + 24px) 0 34px; }
  .fw-kv-stats { grid-template-columns: 1fr; }
  .fw-kv-steps { grid-template-columns: 1fr; }
  .fw-kv-title { max-width: none; }

  .fw-kv-embed-wrap,
  .fw-kv-highlight { padding: 20px; border-radius: 22px; }
}


/* ===== 23-kontakt.css ===== */
/* ===============================================================
   Kontaktseite mit Formular
   =============================================================== */

.fw-contact-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(183, 154, 74, .10), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(13, 39, 71, .06), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 52%, #ffffff 100%);
}

.fw-page-head {
  padding: calc(var(--fw-kopf-hoehe) + 48px) 0 18px;
  text-align: center;
}

.fw-page-head .fw-title { max-width: 760px; margin: 0 auto 14px; }
.fw-page-head .fw-text { max-width: 700px; margin: 0 auto; }

/* ---------- WhatsApp-Kasten ---------- */

.fw-whatsapp-wrap { padding: 18px 0 22px; }

.fw-whatsapp-card {
  padding: 34px;
  border-radius: 30px;
  text-align: center;
}

.fw-whatsapp-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 154, 74, .22), transparent 64%);
  pointer-events: none;
}

.fw-whatsapp-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: var(--fw-text);
  font-size: 32px;
  box-shadow: 0 14px 30px rgba(183, 154, 74, .22);
}

.fw-whatsapp-title {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.fw-whatsapp-text {
  max-width: 700px;
  margin: 0 auto;
  color: var(--fw-text-hell-leise);
  font-size: 16px;
  line-height: 1.7;
}

.fw-whatsapp-card .fw-btns { justify-content: center; }

.fw-btn-whatsapp {
  color: #fff;
  background: #1ea952;
  box-shadow: 0 18px 40px rgba(30, 169, 82, .22);
}

.fw-btn-whatsapp:hover {
  transform: translateY(-2px);
  background: #178c43;
  box-shadow: 0 24px 46px rgba(30, 169, 82, .28);
}

/* ---------- Formular und Seitenspalte ---------- */

.fw-grid-main {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: start;
}

.fw-form-card,
.fw-map-card { padding: 34px; border-radius: 30px; }

.fw-info-card-kontakt { padding: 26px; border-radius: 30px; }

.fw-form-head { margin-bottom: 24px; }

.fw-form-head h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.fw-form-head p {
  margin: 0;
  color: var(--fw-text-hell-leise);
  font-size: 16px;
  line-height: 1.7;
}

.fw-form { display: grid; gap: 16px; }

.fw-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fw-field { display: grid; gap: 8px; }

.fw-field label {
  color: var(--fw-gold-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fw-input,
.fw-textarea,
.fw-select {
  width: 100%;
  border: 1px solid rgba(7, 24, 45, .12);
  border-radius: 18px;
  background: #fff;
  color: #111;
  font: inherit;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.fw-input,
.fw-select { min-height: 56px; padding: 0 18px; }

.fw-textarea {
  min-height: 180px;
  padding: 16px 18px;
  resize: vertical;
}

.fw-input::placeholder,
.fw-textarea::placeholder { color: rgba(17, 17, 17, .55); }

.fw-input:focus,
.fw-textarea:focus,
.fw-select:focus {
  outline: none;
  border-color: rgba(183, 154, 74, .8);
  box-shadow: 0 0 0 4px rgba(183, 154, 74, .18);
}

/* Falle für Werbeprogramme: für Menschen unsichtbar, Programme
   füllen es aus und Formspree wirft die Nachricht weg. */
.fw-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fw-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}

.fw-checkbox input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--fw-gold);
}

.fw-checkbox label {
  margin: 0;
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.fw-checkbox a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fw-form-note {
  margin: 0;
  color: var(--fw-text-hell-leise);
  font-size: 13px;
  line-height: 1.6;
}

.fw-submit {
  width: 100%;
  min-height: 58px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: #0b1524;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(183, 154, 74, .22);
  transition: var(--fw-uebergang);
}

.fw-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgba(183, 154, 74, .30);
}

.fw-side-grid { display: grid; gap: 24px; }

.fw-kontakt-liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.fw-kontakt-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  color: var(--fw-text-hell-leise);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.fw-kontakt-item i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fw-gold-2), var(--fw-gold));
  color: var(--fw-text);
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
}

.fw-kontakt-item strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
}

.fw-kontakt-item a { color: #fff; }
.fw-kontakt-item a:hover { color: var(--fw-gold-2); }

.fw-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px) {
  .fw-grid-main { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .fw-page-head { padding: calc(var(--fw-kopf-hoehe) + 28px) 0 10px; }
  .fw-whatsapp-wrap { padding: 8px 0 10px; }

  .fw-form-grid,
  .fw-mini-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fw-form-card,
  .fw-info-card-kontakt,
  .fw-map-card,
  .fw-whatsapp-card { padding: 22px; border-radius: 24px; }
}


/* ===== 24-textseiten.css ===== */
/* ===============================================================
   Impressum, Datenschutz, Danke, 404, Passwort
   =============================================================== */

.fw-textseite {
  position: relative;
  padding: calc(var(--fw-kopf-hoehe) + 48px) 0 90px;
  background:
    radial-gradient(circle at 12% 6%, rgba(183, 154, 74, .08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
}

.fw-textseite-inner {
  width: min(calc(100% - 32px), 860px);
  margin: 0 auto;
}

.fw-textseite h1 {
  margin: 0 0 10px;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.04;
}

.fw-textseite-lead {
  margin: 0 0 40px;
  color: var(--fw-text-leise);
  font-size: 17px;
  line-height: 1.7;
}

.fw-textseite h2 {
  margin: 40px 0 12px;
  font-size: 25px;
  line-height: 1.2;
}

.fw-textseite h3 {
  margin: 26px 0 8px;
  font-size: 19px;
  line-height: 1.3;
}

.fw-textseite p,
.fw-textseite li {
  color: var(--fw-text-leise);
  font-size: 16px;
  line-height: 1.8;
}

.fw-textseite p { margin: 0 0 14px; }

.fw-textseite ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.fw-textseite li { margin-bottom: 8px; }

.fw-textseite a {
  color: var(--fw-dunkel);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(183, 154, 74, .7);
}

.fw-textseite a:hover { color: var(--fw-gold-text); }

.fw-textseite address {
  font-style: normal;
  color: var(--fw-text-leise);
  font-size: 16px;
  line-height: 1.8;
}

.fw-daten-karte {
  margin: 0 0 18px;
  padding: 24px 26px;
  border: 1px solid var(--fw-rand);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(11, 20, 35, .06);
}

.fw-daten-karte h2 { margin-top: 0; }

.fw-daten-liste {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 10px 24px;
  margin: 0;
}

.fw-daten-liste dt {
  color: var(--fw-text);
  font-size: 15px;
  font-weight: 700;
}

.fw-daten-liste dd {
  margin: 0;
  color: var(--fw-text-leise);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.fw-stand {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--fw-rand);
  color: rgba(15, 29, 45, .58);
  font-size: 14px;
}

/* ---------- Alleinstehende Seiten (404, Danke, Passwort) ---------- */

.fw-allein {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 40px 20px;
  background:
    radial-gradient(circle at top right, rgba(183, 154, 74, .16), transparent 30%),
    linear-gradient(135deg, #0d2747 0%, #07182d 60%, #061426 100%);
  color: var(--fw-text-hell);
  text-align: center;
}

.fw-allein-box {
  width: min(100%, 560px);
  padding: 40px 32px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 30px;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fw-allein-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  object-fit: contain;
}

.fw-allein-box h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
}

.fw-allein-box p {
  margin: 0 0 12px;
  color: var(--fw-text-hell-leise);
  font-size: 16px;
  line-height: 1.75;
}

.fw-allein-box .fw-btns { justify-content: center; margin-top: 26px; }

.fw-allein-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.fw-allein-links a {
  color: var(--fw-text-hell-leise);
  font-size: 14px;
  transition: color .25s ease;
}

.fw-allein-links a:hover { color: var(--fw-gold-2); }

.fw-passwort-form {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  text-align: left;
}

.fw-passwort-form label {
  color: var(--fw-gold-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fw-passwort-fehler {
  display: none;
  margin: 0;
  color: #ffb4a6;
  font-size: 14px;
  font-weight: 600;
}

.fw-passwort-fehler.ist-sichtbar { display: block; }

@media (max-width: 560px) {
  .fw-textseite { padding: calc(var(--fw-kopf-hoehe) + 28px) 0 70px; }
  .fw-textseite-inner { width: min(calc(100% - 20px), 860px); }
  .fw-daten-karte { padding: 20px; border-radius: 18px; }
  .fw-daten-liste { grid-template-columns: 1fr; gap: 2px; }
  .fw-daten-liste dd { margin-bottom: 10px; }
  .fw-allein-box { padding: 30px 20px; border-radius: 24px; }
}