/* ==========================================================================
   NoMakler — Design System
   Farben abgeleitet aus dem NoMakler-Logo (Navy + Gold auf Off-White)
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Navy — aus der Wortmarke "Makler" */
  --navy-950: #08111f;
  --navy-900: #0e1b2e;
  --navy-800: #142744;
  --navy-700: #1e3557;
  --navy-600: #2b4568;

  /* Warme Dunkelflächen: stimmen mit Beige und Gold zusammen, während das
     Navy oben ausschließlich der Wortmarke vorbehalten bleibt */
  --ink-950: #16130f;
  --ink-900: #211d17;
  --ink-800: #2e2921;
  --ink-700: #413a2e;
  --ink-600: #58503f;

  /* Gold — aus Dach & "No" */
  --gold-700: #8a5f24; /* Kleintext auf hellem Grund (5.3:1) */
  --gold-600: #a8752f;
  --gold-500: #c8934f;
  --gold-400: #ddb177;
  --gold-300: #e6c399;
  --gold-200: #efd9bb;
  --gold-100: #f7ecdc;

  /* Grundflächen */
  --cream-50: #faf8f4;
  --cream-100: #f5f1e9;
  --cream-200: #ebe5d8;

  --ink: #101b2b;
  --slate: #5a6675; /* 5.5:1 auf cream-50 */
  --line: #e4ddce;

  --white: #ffffff;
  --danger: #b3261e;
  --success: #1c6b4a;

  /* Semantisch */
  --bg: var(--cream-50);
  --fg: var(--ink);
  --muted: var(--slate);
  --border: var(--line);

  /* Typo */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Radien */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* Schatten — weich, mit Navy-Ton statt reinem Schwarz */
  --shadow-xs: 0 1px 2px rgba(16, 27, 43, 0.05);
  --shadow-sm: 0 2px 8px rgba(16, 27, 43, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(16, 27, 43, 0.16);
  --shadow-lg: 0 24px 60px -20px rgba(16, 27, 43, 0.24);
  --shadow-gold: 0 16px 40px -14px rgba(168, 117, 47, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 700ms;

  /* Vertikaler Rhythmus: gilt für alle Sektionen gleichermaßen */
  --flow-sm: 14px;   /* kleiner Nachsatz unter einem Absatz */
  --flow-md: 18px;   /* Überschrift zu Einleitung */
  --flow-lg: 28px;   /* Einleitung zum nächsten Block */
  --flow-xl: 40px;   /* nach einem Inhaltsblock */

  /* Lichtverlauf für ALLE hellen Flächen — Hero, Seitenkopf und jede
     .section. Wird unten immer mit background-attachment: fixed eingesetzt:
     dadurch hängt der Verlauf am Browserfenster statt an der einzelnen
     Sektion, jede Fläche zeigt also denselben Ausschnitt derselben Fläche.
     Das macht Kanten zwischen hellen Sektionen unmöglich, unabhängig von
     Sektionshöhe oder Scrollposition — nicht nur unwahrscheinlich. */
  --licht-verlauf:
    radial-gradient(55% 50% at 88% 10%, rgba(200, 147, 79, 0.12), transparent 62%),
    radial-gradient(45% 42% at 4% 82%, rgba(88, 80, 63, 0.07), transparent 58%);

  /* Layout */
  --nav-h: 68px;
  --container: 1180px;
}

/* --- 2. Reset & Basis --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--gold-200);
  color: var(--navy-900);
}

/* Fokus — immer sichtbar, nie entfernt */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink-900);
  color: var(--cream-50);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-base) var(--ease-out);
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Typo-Skala (mobile first, fluid) -------------------------------- */

.t-display {
  font-size: clamp(2.3rem, 6.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.036em;
}

.t-h2 {
  font-size: clamp(1.85rem, 5.6vw, 3rem);
  letter-spacing: -0.032em;
}

.t-h3 {
  font-size: clamp(1.2rem, 3.2vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.t-lead {
  font-size: clamp(1.03rem, 2.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
}

.t-body {
  font-size: 1rem;
  color: var(--muted);
}

.t-sm {
  font-size: 0.925rem;
  color: var(--muted);
}

/* Eyebrow: kleines Label über Überschriften */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 16px;
}

/* --- 4. Layout ---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

.container--narrow {
  max-width: 820px;
}

/* Jede helle Sektion nutzt exakt denselben, am Fenster fixierten Verlauf.
   Weil der Verlauf an den Viewport gebunden ist statt an die Sektion, sehen
   zwei benachbarte Sektionen lückenlos denselben Ausschnitt derselben
   Fläche — keine zwei verschiedenen Farbflächen können mehr aufeinander-
   treffen. Absichtlich identisch für alle Varianten (auch .section--mesh),
   denn jede sichtbare Intensitäts-Differenz würde die Garantie brechen. */
.section {
  position: relative;
  padding-block: clamp(4.25rem, 10vw, 7.5rem);
  background-color: var(--cream-50);
  background-image: var(--licht-verlauf);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.section--tight {
  padding-block: clamp(3rem, 7vw, 4.5rem);
}

/* Flächen-Variante für dunkle Sektionen — bewusst kein Verlauf, keine
   Fixierung: hier soll die Kante zur Nachbarsektion hart bleiben. */
.section--navy {
  background: var(--ink-900);
  color: var(--cream-50);
}

.section-head {
  max-width: 660px;
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

/* Greift überall gleich, egal ob in .section-head, .page-head oder frei stehend */
h1 + .t-lead,
h2 + .t-lead,
.t-display + .t-lead,
.t-h2 + .t-lead {
  margin-top: var(--flow-md);
}

.section--navy .eyebrow {
  color: var(--gold-400);
}

.section--navy .t-lead,
.section--navy .t-body,
.section--navy .t-sm {
  color: rgba(240, 236, 228, 0.72);
}

/* Feine Trennlinie im Dach-Winkel des Logos */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--navy-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-soft);
}

/* Weicher Glanz, der beim Hover durchläuft */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn:active {
  transform: translateY(0);
  transition-duration: 90ms;
}

.btn svg {
  flex: none;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn--lg {
  min-height: 60px;
  padding: 0 34px;
  font-size: 1.06rem;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1.5px solid var(--border);
}

.btn--ghost:hover {
  --btn-bg: var(--white);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
}

.btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, 0.07);
  --btn-fg: var(--cream-50);
  border: 1.5px solid rgba(240, 236, 228, 0.24);
  backdrop-filter: blur(8px);
}

.btn--ghost-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.14);
  border-color: rgba(221, 177, 119, 0.6);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Textlink mit animiertem Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--gold-700);
  transition: gap var(--t-base) var(--ease-out), color var(--t-base) var(--ease-soft);
}

.link-arrow svg {
  transition: transform var(--t-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--navy-800);
  gap: 12px;
}

.section--navy .link-arrow {
  color: var(--gold-400);
}

.section--navy .link-arrow:hover {
  color: var(--cream-50);
}

/* --- 6. Logo ------------------------------------------------------------ */

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 48px;
  line-height: 1;
  color: var(--navy-900);
}

.logo__roof {
  width: 38px;
  height: auto;
  overflow: visible;
  color: var(--gold-500);
  transition: transform var(--t-base) var(--ease-out);
}

.logo:hover .logo__roof {
  transform: translateY(-2px);
}

.logo__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.035em;
}

.logo__no {
  color: var(--gold-500);
}

.logo--light {
  color: var(--cream-50);
}

.logo--lg .logo__roof {
  width: 52px;
}

.logo--lg .logo__word {
  font-size: 1.75rem;
}

/* --- 7. Navigation ------------------------------------------------------ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition:
    background-color var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft);
  border-bottom: 1px solid transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-h);
}

/* Transparent über dem hellen Hero */
.header .logo {
  color: var(--navy-900);
}

.header__link {
  color: var(--navy-800);
}

/* Glass-Effekt beim Scrollen */
.header.is-scrolled {
  background: rgba(250, 248, 244, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: rgba(228, 221, 206, 0.9);
  box-shadow: 0 4px 24px -16px rgba(16, 27, 43, 0.35);
}

.header.is-scrolled .logo {
  color: var(--navy-900);
}

.header.is-scrolled .header__link {
  color: var(--navy-800);
}

.header.is-scrolled .nav-toggle {
  color: var(--navy-900);
  border-color: var(--border);
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.945rem;
  font-weight: 600;
  transition: color var(--t-base) var(--ease-soft);
}

/* Unterstrich wächst aus der Mitte */
.header__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base) var(--ease-out);
}

/* Bewusst nur bei Hover: aria-current bleibt für Screenreader erhalten,
   erzeugt aber keinen dauerhaften Strich mehr. */
.header__link:hover::after {
  transform: scaleX(1);
}

.header__link:hover {
  color: var(--gold-700);
}

.header.is-scrolled .header__link:hover {
  color: var(--navy-950);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* CTA bleibt auch auf dem Smartphone sichtbar — kompakter, aber erreichbar */
.header__cta {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.9rem;
}

/* Burger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  color: var(--navy-900);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-soft), border-color var(--t-base) var(--ease-soft);
}

.nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 14px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity 120ms var(--ease-soft);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile-Panel */
.mobile-nav {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(1.25rem, 5vw, 2rem) calc(32px + env(safe-area-inset-bottom));
  background: rgba(33, 29, 23, 0.95);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  color: var(--cream-50);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-out),
    visibility var(--t-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(240, 236, 228, 0.1);
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  opacity: 0;
  transform: translateY(14px);
  transition: color var(--t-base) var(--ease-soft);
}

.mobile-nav.is-open .mobile-nav__link {
  animation: navItemIn 460ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

.mobile-nav__link svg {
  color: var(--gold-500);
  transition: transform var(--t-base) var(--ease-out);
}

.mobile-nav__link:hover svg,
.mobile-nav__link:focus-visible svg {
  transform: translateX(4px);
}

@keyframes navItemIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav__foot {
  margin-top: auto;
  padding-top: 32px;
}

.mobile-nav__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  font-size: 0.925rem;
  color: rgba(240, 236, 228, 0.68);
}

.mobile-nav__meta a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.mobile-nav__meta a:hover {
  color: var(--gold-400);
}

/* --- 8. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 9vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 9vw, 6rem);
  background-color: var(--cream-50);
  background-image: var(--licht-verlauf);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  isolation: isolate;
}

/* Die eigenen, animierten Lichtkreise sind bewusst entfernt: Sie lagen nur
   im Hero, nicht im gemeinsamen --licht-verlauf, und erzeugten dadurch genau
   an der Kante zur nächsten Sektion (unten links) zusätzliche Wärme, die die
   Nachbarsektion nicht mitbekam — ein Intensitätssprung an exakt der Stelle,
   die nahtlos sein soll. Der Hero bezieht sein Licht jetzt ausschließlich aus
   demselben fensterfixierten Verlauf wie jede andere helle Sektion. */

/* Einspaltig und mittig: ohne Grafik daneben würde eine linke Spalte kippen */
.hero__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Breit genug, dass die Überschrift in zwei Zeilen steht, ohne zu zerfasern */
.hero__copy {
  max-width: 54rem;
}

.hero h1 .accent {
  display: block;
  background: linear-gradient(96deg, var(--gold-700) 5%, var(--gold-600) 60%, #96682a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  max-width: 46ch;
  margin-inline: auto;
  margin-top: 24px;
  font-size: clamp(1.05rem, 3vw, 1.24rem);
  line-height: 1.6;
  color: var(--muted);
}

.hero .btn-row {
  justify-content: center;
  margin-top: 34px;
}

/* Auf schmalen Screens stapeln die Hero-Buttons in voller Breite */
@media (max-width: 29.99em) {
  .hero .btn-row .btn {
    width: 100%;
  }
}

.hero__notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
}

.hero__notes li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--muted);
}

.hero__notes svg {
  color: var(--gold-700);
  flex: none;
}

/* Hero-Visual: schwebende Glaskarten statt Stock-Immobilienfoto */
/* --- 9. Portale (Trust) ------------------------------------------------- */

.portals__label {
  text-align: center;
  font-size: 0.83rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
}

.portals__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.portal {
  display: grid;
  place-items: center;
  padding: 20px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-soft);
}

.portal:hover {
  transform: translateY(-4px);
  border-color: var(--gold-200);
  box-shadow: var(--shadow-md);
}

/* Grundzustand ist voll farbig. Nur wo es eine Maus gibt, treten die Logos
   zurück und kommen beim Überfahren nach vorn. */
.portal img {
  width: auto;
  max-height: 44px;
  object-fit: contain;
  transition: filter var(--t-base) var(--ease-soft), opacity var(--t-base) var(--ease-soft);
}

@media (hover: hover) {
  .portal img {
    filter: grayscale(1);
    opacity: 0.72;
  }

  .portal:hover img {
    filter: grayscale(0);
    opacity: 1;
  }
}

/* Optischer Ausgleich — die Logos haben sehr unterschiedliche Weissräume */
.portal img[data-logo="kleinanzeigen"] {
  max-height: 62px;
}

.portal img[data-logo="immowelt"] {
  max-height: 34px;
}


.portal--more {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gold-700);
  text-align: center;
  line-height: 1.3;
}

.portals__note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

/* --- 10. Karten (Leistungen) -------------------------------------------- */

.card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.card {
  position: relative;
  padding: 28px 26px 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out),
    border-color 260ms var(--ease-soft);
}

/* Goldene Dachkante fährt beim Hover über die Karte */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}

.card:hover::before,
.card:focus-within::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: var(--gold-200);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--gold-100), var(--cream-100));
  border: 1px solid var(--gold-200);
  color: var(--gold-700);
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-soft);
}

.card:hover .card__icon {
  transform: scale(1.07) rotate(-3deg);
}

.card h3 {
  margin-bottom: 9px;
}

/* --- 11. Ablauf (Timeline) ---------------------------------------------- */

.timeline {
  position: relative;
  display: grid;
  gap: 0;
}

/* Verbindungslinie — zeichnet sich beim Scrollen */
.timeline::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 25px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-200));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s var(--ease-out) 200ms;
}

.timeline.in::before {
  transform: scaleY(1);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding-block: 22px;
}

.step__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold-200);
  box-shadow: 0 0 0 6px var(--cream-50);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--gold-700);
  transition:
    transform var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-soft),
    color var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft);
}

.section--cream .step__marker {
  box-shadow: 0 0 0 6px var(--cream-50);
}

.step:hover .step__marker {
  transform: scale(1.08);
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

.step__body {
  padding-top: 6px;
}

.step h3 {
  margin-bottom: 8px;
}

.step__meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--gold-700);
}

.step__meta svg {
  flex: none;
}

/* --- 12. Vorteile (Warum NoMakler) -------------------------------------- */

.benefit-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
  border: 1px solid rgba(240, 236, 228, 0.14);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(240, 236, 228, 0.14);
}

.benefit {
  position: relative;
  padding: 30px 26px;
  background: var(--ink-900);
  transition: background-color var(--t-base) var(--ease-soft);
}

.benefit:hover {
  background: var(--ink-800);
}

.benefit__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: var(--r-sm);
  background: rgba(200, 147, 79, 0.16);
  border: 1px solid rgba(221, 177, 119, 0.3);
  color: var(--gold-400);
  transition: transform var(--t-base) var(--ease-out);
}

.benefit:hover .benefit__icon {
  transform: translateY(-3px);
}

.benefit h3 {
  margin-bottom: 8px;
  font-size: 1.09rem;
  color: var(--cream-50);
}

.benefit p {
  font-size: 0.945rem;
  color: rgba(240, 236, 228, 0.66);
}

/* --- 12a. Vergleich ------------------------------------------------------ */

/* Eine zusammenhaengende Karte. Die eigene Spalte ist durchgehend hinterlegt:
   weil es keine Zeilenabstaende gibt, ergeben die einzelnen Zellen optisch ein
   ununterbrochenes Band. Die Werte sind kurz gehalten, damit auch auf dem
   Smartphone drei Spalten nebeneinander passen. */
.vs {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* minmax(0, …) verhindert, dass ein langes Wort die Spalte aufdehnt.
   Silbentrennung bleibt aus, sie zerlegt die kurzen Begriffe sonst unschön. */
.vs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.vs__cat,
.vs__val span {
  overflow-wrap: break-word;
}

.vs__col {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding: 12px 10px 13px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Wortmarke exakt wie im Logo gesetzt */
.vs__col--ours {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--navy-900);
}

.vs__cat {
  display: flex;
  align-items: center;
  padding: 14px 12px 14px 16px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--navy-900);
}

.vs__val {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 14px 10px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

/* Durchgehendes Band ueber die eigene Spalte */
.vs__col--ours,
.vs__val--ours {
  background: linear-gradient(180deg, rgba(200, 147, 79, 0.15), rgba(200, 147, 79, 0.06));
  box-shadow: inset 1px 0 0 var(--gold-200), inset -1px 0 0 var(--gold-200);
  font-weight: 600;
  color: var(--navy-800);
}

/* Steht nach der Band-Regel, damit die Logo-Schriftstärke erhalten bleibt */
.vs__col--ours {
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--navy-900);
  box-shadow: inset 1px 0 0 var(--gold-200), inset -1px 0 0 var(--gold-200), inset 0 3px 0 var(--gold-500);
}

/* Hauchduenne Zeilentrenner statt gefuellter Streifen */
.vs__cat,
.vs__val {
  border-top: 1px solid var(--border);
}

.vs__val--ours {
  border-top-color: rgba(221, 177, 119, 0.45);
}

/* Rechte Spalte haelt Abstand zum Kartenrand */
.vs__col:not(.vs__col--ours),
.vs__val:not(.vs__val--ours) {
  padding-right: 16px;
}

.vs__mark {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex: none;
  color: var(--gold-600);
}

.vs__mark--no {
  color: #a9b0b9;
}

.compare__note {
  max-width: 62ch;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.btn-row--center {
  justify-content: center;
  margin-top: var(--flow-lg);
}

/* Weiterführender Link unter einem Inhaltsblock */
.section-more {
  display: flex;
  justify-content: center;
  margin-top: var(--flow-xl);
}

.about__link {
  margin-top: var(--flow-lg);
}

@media (min-width: 44em) {
  .vs__grid {
    grid-template-columns: 1.25fr 1fr 1fr;
  }

  .vs__col {
    padding: 16px 18px 16px;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .vs__col--ours {
    font-size: 1.15rem;
    text-transform: none;
    letter-spacing: -0.035em;
  }

  .vs__cat {
    padding: 18px 20px 18px 24px;
    font-size: 0.95rem;
  }

  .vs__val {
    align-items: center;
    gap: 10px;
    padding: 18px 18px;
    font-size: 0.92rem;
  }

  .vs__col:not(.vs__col--ours),
  .vs__val:not(.vs__val--ours) {
    padding-right: 24px;
  }

  .vs__mark {
    width: 16px;
    height: 16px;
    margin-top: 0;
  }
}

/* --- 13. Über uns ------------------------------------------------------- */

.about {
  display: grid;
  gap: clamp(2.25rem, 6vw, 3.5rem);
  align-items: center;
}

.founders {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.founder {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.founder:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.founder__avatar {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--ink-800), var(--ink-600));
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.founder__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.founder__role {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Auf der eigenen Seite stehen die Personen zentriert und großzügiger */
.founder--lg {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 34px 26px;
  text-align: center;
}

.founder--lg .founder__avatar {
  width: 84px;
  height: 84px;
  font-size: 1.6rem;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold-200);
}

.founder--lg .founder__name {
  font-size: 1.15rem;
}

.founder--lg .founder__role {
  margin-top: 3px;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* --- 14. FAQ ------------------------------------------------------------ */

.faq {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-soft), box-shadow var(--t-base) var(--ease-out);
}

.faq-item:hover {
  border-color: var(--gold-200);
  box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 18px 20px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--navy-900);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-soft);
}

.faq-item__q:hover {
  color: var(--gold-700);
}

.faq-item__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--cream-100);
  border: 1px solid var(--border);
  transition: background-color var(--t-base) var(--ease-soft), transform 320ms var(--ease-out);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--gold-700);
  border-radius: 2px;
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-soft);
}

.faq-item__icon::before {
  width: 12px;
  height: 2px;
}

.faq-item__icon::after {
  width: 2px;
  height: 12px;
}

.faq-item.is-open .faq-item__icon {
  background: var(--gold-500);
  border-color: var(--gold-500);
  transform: rotate(180deg);
}

.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after {
  background: var(--ink-900);
}

.faq-item.is-open .faq-item__icon::after {
  transform: scaleY(0);
  opacity: 0;
}

/* Höhen-Animation via grid-template-rows (flüssiger als max-height) */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ease-out);
}

.faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
}

.faq-item__a > div {
  overflow: hidden;
}

.faq-item__a p {
  padding: 0 20px 22px;
  font-size: 0.97rem;
  color: var(--muted);
}

/* --- 14b. Einsatzgebiet (PLZ-Check) -------------------------------------- */

.plz-check {
  max-width: 480px;
  margin-inline: auto;
}

.plz-check__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plz-check__form input {
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  transition:
    border-color var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft);
}

.plz-check__form input::placeholder {
  font-weight: 400;
  color: #9aa3ae;
}

.plz-check__form input:hover {
  border-color: var(--gold-300);
}

.plz-check__form input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(200, 147, 79, 0.16);
}

.plz-check__form input:user-invalid {
  border-color: var(--danger);
}

.plz-check__form .btn {
  width: 100%;
}

/* Ergebnis: erscheint erst nach der ersten Prüfung */
.plz-check__result {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.plz-check__result:empty {
  display: none;
}

.plz-check__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-align: left;
  animation: plzPopIn 360ms var(--ease-out);
}

@keyframes plzPopIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: none; }
}

.plz-check__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
}

.plz-check__text strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}

.plz-check__text span {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Innerhalb des Radius */
.plz-check__card--in .plz-check__icon {
  background: #e8f3ee;
  color: var(--success);
}

.plz-check__card--in {
  border-color: #cfe8dc;
}

/* Grenzfall: knapp außerhalb, Kontakt trotzdem sinnvoll */
.plz-check__card--border .plz-check__icon {
  background: var(--gold-100);
  color: var(--gold-700);
}

.plz-check__card--border {
  border-color: var(--gold-200);
}

/* Außerhalb des Einsatzgebiets */
.plz-check__card--out .plz-check__icon {
  background: #fbeceb;
  color: var(--danger);
}

.plz-check__card--out {
  border-color: #f3d3d1;
}

/* Ungültige Eingabe */
.plz-check__card--invalid .plz-check__icon {
  background: var(--cream-200);
  color: var(--slate);
}

/* --- 15. Kontakt & Formular --------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
}

.contact-methods {
  display: grid;
  gap: 12px;
  margin-top: var(--flow-lg);
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 14px 18px;
  border: 1px solid rgba(240, 236, 228, 0.16);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft);
}

.contact-method:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(221, 177, 119, 0.45);
}

.contact-method__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  background: rgba(200, 147, 79, 0.18);
  color: var(--gold-400);
}

.contact-method__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 236, 228, 0.58);
}

.contact-method__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--cream-50);
  overflow-wrap: anywhere;
}

/* Terminbuchung: das Calendly-Widget sitzt in einer hellen Karte, damit der
   weisse Kalender auf der dunklen Fläche nicht wie ein Fremdkörper wirkt. */
.booking {
  padding: 10px;
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid rgba(240, 236, 228, 0.16);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.booking .calendly-inline-widget {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.booking__fallback {
  padding: 28px 22px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Platzhalter, solange der Kalender ohne Zustimmung nicht laden darf */
.booking__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-height: 500px;
  padding: 48px 28px;
  text-align: center;
}

.booking__gate-text {
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

.booking__gate-alt {
  font-size: 0.88rem;
  color: var(--muted);
}

.booking__gate-alt a {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Cookie-Banner -------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  padding: 16px;
  animation: cookieIn 420ms var(--ease-out);
}

@keyframes cookieIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin-inline: auto;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--cream-50);
  box-shadow: var(--shadow-lg);
}

.cookie-banner__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.cookie-banner__text a {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cookie-banner__actions .btn {
  flex: 1;
  min-width: 160px;
}

/* Unauffälliger Textlink im Footer statt eines vollen Buttons */
[data-cookie-settings] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-soft);
}

[data-cookie-settings]:hover {
  color: var(--gold-400);
}

@media (min-width: 40em) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cookie-banner__text {
    flex: 1;
  }

  .cookie-banner__actions {
    flex: none;
  }

  .cookie-banner__actions .btn {
    min-width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    animation: none;
  }
}

.booking__fallback a {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 16. CTA-Band ------------------------------------------------------- */

.cta-band {
  position: relative;
  padding: clamp(2.25rem, 7vw, 3.75rem);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--ink-900), var(--ink-700));
  color: var(--cream-50);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50%;
  right: -18%;
  width: min(70vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 147, 79, 0.35), transparent 68%);
  filter: blur(60px);
}

.cta-band .btn-row {
  justify-content: center;
  margin-top: 28px;
}

.cta-band p {
  max-width: 46ch;
  margin: 16px auto 0;
  color: rgba(240, 236, 228, 0.74);
}

/* --- 17. Page-Header (Unterseiten) -------------------------------------- */

.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.75rem, 8vw, 4.5rem));
  padding-bottom: clamp(2.75rem, 8vw, 4.25rem);
  background-color: var(--cream-50);
  background-image: var(--licht-verlauf);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  isolation: isolate;
}

.page-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  right: -12%;
  width: min(80vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 147, 79, 0.16), transparent 68%);
  filter: blur(70px);
}

.page-head .eyebrow {
  color: var(--gold-700);
}

.page-head p {
  max-width: 56ch;
  color: var(--muted);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: rgba(240, 236, 228, 0.55);
}

.breadcrumb a:hover {
  color: var(--gold-400);
}

/* --- 18. Prosa (Rechtstexte) -------------------------------------------- */

.prose {
  max-width: 72ch;
}

.prose h2 {
  margin-top: 44px;
  margin-bottom: 14px;
  font-size: clamp(1.3rem, 4vw, 1.6rem);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 1.08rem;
}

.prose p,
.prose li {
  color: var(--muted);
  margin-bottom: 14px;
}

.prose ul {
  list-style: none;
  margin-bottom: 18px;
}

.prose ul li {
  position: relative;
  padding-left: 22px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}

.prose a {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose strong {
  color: var(--navy-800);
  font-weight: 650;
}

/* Quellenangabe des Generators, deutlich zurückgenommen */
.prose__quelle {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

/* Redaktioneller Hinweis auf den Rechtsseiten */
.notice {
  max-width: 72ch;
  margin-bottom: 38px;
  padding: 18px 20px;
  border: 1px solid var(--gold-200);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--r-md);
  background: var(--gold-100);
  font-size: 0.92rem;
  line-height: 1.6;
  color: #6b5426;
}

.notice strong {
  color: var(--navy-900);
}

/* --- 19. Footer --------------------------------------------------------- */

.footer {
  padding-block: clamp(2.75rem, 7vw, 4rem) 0;
  background: var(--ink-950);
  color: rgba(240, 236, 228, 0.7);
}

.footer__top {
  display: grid;
  gap: 34px;
}

.footer__col-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 12px;
}

.footer__list {
  display: grid;
  gap: 2px;
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.945rem;
  transition: color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-out);
}

.footer__list a:hover {
  color: var(--gold-400);
  transform: translateX(3px);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(240, 236, 228, 0.1);
  font-size: 0.855rem;
  color: rgba(240, 236, 228, 0.5);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer__legal a:hover {
  color: var(--gold-400);
}

.footer__legal [data-cookie-settings] {
  font-size: inherit;
}

/* --- 20. Scroll-Reveal -------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

[data-reveal="left"] {
  transform: translateX(-26px);
}

[data-reveal="right"] {
  transform: translateX(26px);
}

[data-reveal="scale"] {
  transform: scale(0.95);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* Zurück-nach-oben */
.to-top {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--navy-800);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition:
    opacity var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-out),
    visibility var(--t-base);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

/* ==========================================================================
   21. Breakpoints — mobile first
   ========================================================================== */

/* ≥ 480px — große Smartphones */
@media (min-width: 30em) {
  .portals__grid {
    gap: 14px;
  }
}

@media (min-width: 40em) {
  .hero__notes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
  }
}

/* ≥ 640px — kleine Tablets */
@media (min-width: 40em) {
  :root {
    --nav-h: 76px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portals__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .founders {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-methods {
    grid-template-columns: repeat(2, 1fr);
  }

  .step {
    grid-template-columns: 60px 1fr;
    gap: 24px;
  }

  .step__marker {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }

  .timeline::before {
    left: 29px;
  }
}

/* ≥ 900px — Laptop */
@media (min-width: 56.25em) {
  .nav {
    display: block;
  }

  .header__cta {
    min-height: 46px;
    padding: 0 22px;
    font-size: 0.95rem;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefit-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about {
    grid-template-columns: 1fr 0.82fr;
  }

  /* In der schmalen rechten Spalte stehen die Gründer untereinander */
  .about .founders {
    grid-template-columns: 1fr;
  }

  .contact {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .contact-methods {
    grid-template-columns: 1fr;
  }

  /* Die Markenspalte trägt nur noch das Logo und darf schmaler sein */
  .footer__top {
    grid-template-columns: 0.85fr 1fr 1fr 1.15fr;
    gap: 44px;
  }

  .card-grid {
    gap: 20px;
  }

  .to-top {
    right: 28px;
    bottom: 28px;
  }

  /* Timeline horizontal ab Laptop */
  .timeline--horizontal {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .timeline--horizontal::before {
    top: 30px;
    bottom: auto;
    left: 12%;
    right: 12%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-200));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.6s var(--ease-out) 200ms;
  }

  .timeline--horizontal.in::before {
    transform: scaleX(1);
  }

  .timeline--horizontal .step {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 0;
    text-align: center;
  }

  .timeline--horizontal .step__marker {
    margin-inline: auto;
  }

  .timeline--horizontal .step__body {
    padding-top: 0;
  }

  /* Gleiche Grundlinie, auch wenn eine Überschrift zweizeilig umbricht */
  .timeline--horizontal .step h3 {
    min-height: 2.5em;
  }
}

/* ≥ 1200px — Desktop */
@media (min-width: 75em) {
  .hero__inner {
    gap: 4.5rem;
  }
}

/* --- 22. Reduced Motion & Print ----------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .timeline::before,
  .timeline--horizontal::before {
    transform: none;
  }

  .mobile-nav.is-open .mobile-nav__link {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media print {
  .header,
  .mobile-nav,
  .to-top {
    display: none !important;
  }

  body {
    background: #fff;
  }
}