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

/* Layout map:
 - Base & utilities
 - Navigation & logo
 - Buttons
 - Sections & cards
 - Hero
 - Lead forms & wizard
 - Lead funnel (cards, layout)
 - Exposé
 - Lists & content blocks
 - Footer
 - Cookie banner
 - Admin UI
 - Responsive helpers

*/

:root {
  /* Brand & Akzente */
  --gold: #d4af37;           /* Primärer Goldton (Buttons, Akzente) */
  --gold-deep: #b58c1d;      /* Dunklerer Goldton für Verläufe (Progressbar/Banner) */
  --gold-light: #f3d884;     /* Helle Goldfläche/Verlauf-Start */
  --gold-soft: #e0c45e;      /* Gold weich (Hover/Badges) */

  /* Textfarben */
  --text: #0f2414;           /* Primärtext */
  --heading: #0b1a0c;        /* Überschriften */
  --muted: #556557;          /* Sekundärtext */
  --text-strong: #2d4c3b;    /* Akzentierter Text */

  /* Dunkle Akzente */
  --dark: #0d3500;           /* Ränder/Icons dunkelgrün */
  --deep: #062100;           /* Sehr dunkles Grün (Fokus/Hover) */

  /* Flächen/Hintergründe */
  --paper: #f7f9f5;          /* Card-Hintergrund */
  --cream: #fffef8;          /* Creme-Fläche */
  --white: #ffffff;          /* Reines Weiß */
  --bg-1: #f8faf6;           /* Verlauf Start */
  --bg-2: #f4f6f2;           /* Verlauf Mitte */
  --bg-3: #f1f3ef;           /* Verlauf Ende */
  --bg-muted: #e9eee6;       /* Dezente Flächen */
  --bg-success: #e6f7e6;     /* Erfolgs-Hintergrund */

  /* Linien/Schatten */
  --border: #e5e5d6;         /* Standard-Kanten */
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.16); /* globaler Card-Schatten */

  /* Statusfarben */
  --error: #b80000;          /* Fehler Rot */
  --error-dark: #8b0000;     /* Fehler Dunkelrot */
  --error-soft: #ffe6e6;     /* Fehler Hintergrund */
  --success: #3fa46b;        /* Erfolg Grün */
  --success-dark: #2e8b57;   /* Erfolg Dunkelgrün */

  /* Typografie */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;  /* Überschriften & hero/headline-Flächen */
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;     /* Navigation, Fließtext, Formulare, Buttons */
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* Codeblöcke in Admin/Offer-Preview */

  /* Layout */
  --max-width: 1200px;

  /* Gradients */
  --grad-body: radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.4), transparent 26%), radial-gradient(circle at 72% 8%, rgba(255, 255, 255, 0.3), transparent 22%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 40%, var(--bg-3) 100%); /* Body-Verlauf mit hellen Lichtflecken */
  --grad-cream: linear-gradient(120deg, var(--bg-1) 0%, var(--bg-2) 100%);
  --grad-gold-banner: linear-gradient(90deg, var(--gold) 60%, var(--gold-deep) 100%);
  --grad-gold-soft: linear-gradient(145deg, var(--gold-light), var(--gold));
  --grad-gold-135: linear-gradient(135deg, var(--gold), var(--gold-soft));
  --grad-paper-glow: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.25), transparent 45%), radial-gradient(circle at 70% 60%, rgba(212, 175, 55, 0.18), transparent 42%), linear-gradient(135deg, var(--paper), var(--bg-2)); /* Papier-Glanz mit goldenen Highlights */
  --grad-gold-dark: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(6, 33, 0, 0.9)); /* dunkler Goldverlauf für heroische Flächen */
  --grad-soft-light: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(234, 242, 235, 0.95)); /* weiches Licht über hellen Cards */
  --grad-soft-vertical: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 246, 242, 0.9), rgba(212, 175, 55, 0.12)); /* neutraler, leicht goldiger Vertikal-Fade */
  --grad-success: linear-gradient(135deg, var(--success-dark), var(--success));

  /* RGBA Tokens */
  --rgba-black-08: rgba(0, 0, 0, 0.08);          /* feinster Schwarz-Schleier für zarte Schatten/Linien */
  --rgba-black-12: rgba(0, 0, 0, 0.12);          /* leichte Tiefenwirkung (kleine Card-Schatten) */
  --rgba-black-18: rgba(0, 0, 0, 0.18);          /* mittelstarker Schatten */
  --rgba-black-28: rgba(0, 0, 0, 0.28);          /* kräftiger Schatten/Overlay */
  --rgba-black-60: rgba(0, 0, 0, 0.60);          /* dunkle Layer (z.B. Backdrops) */
  --rgba-black-70: rgba(0, 0, 0, 0.70);          /* sehr dunkle Overlays auf Bildern/Videos */
  --rgba-dark-06: rgba(13, 53, 0, 0.06);         /* hauchdünne grüne Konturen (Notice, Inputs) */
  --rgba-dark-08: rgba(13, 53, 0, 0.08);         /* dezente Rahmen bei Cards/Listen */
  --rgba-dark-12: rgba(13, 53, 0, 0.12);         /* Standard-Rand für Tabellen/Formularfelder */
  --rgba-dark-18: rgba(13, 53, 0, 0.18);         /* betonte Linien/Outlines im Dark-Green-Ton */

  --rgba-soft-green-06: rgba(90, 94, 90, 0.06);  /* neutral-graue Flächen (Hinweise) */
  --rgba-soft-green-20: rgba(90, 94, 90, 0.20);  /* zarter neutraler Rahmen/Hintergrund */
  --rgba-soft-green-45: rgba(90, 94, 90, 0.45);  /* mittlerer neutraler Text/Icons (Success) */
  --rgba-gold-16: rgba(212, 175, 55, 0.16);      /* heller Gold-Hintergrund/Shadow */
  --rgba-gold-35: rgba(212, 175, 55, 0.35);      /* Outline/Buttons im Gold-Mittelton */
  --rgba-gold-50: rgba(212, 175, 55, 0.50);      /* halbtransparente Gold-Kanten/Badges */
  --rgba-gold-60: rgba(212, 175, 55, 0.60);      /* intensive Goldflächen/Hover-States */

  --rgba-white-50: rgba(255, 255, 255, 0.50);    /* Schimmer/Glanz-Effekt in progress bars */
  --rgba-white-85: rgba(255, 255, 255, 0.85);    /* helle Overlays über Bilder */
  --rgba-white-95: rgba(255, 255, 255, 0.95);    /* fast deckende Overlays (Floating Card) */

  --rgba-error-45: rgba(200, 50, 50, 0.45);      /* rötliche Linien/Hintergrund bei Fehlern */

  --rgba-success-35: rgba(47, 141, 87, 0.35);    /* mittlerer Grünschatten für Erfolgskarten */
  --rgba-success-50: rgba(47, 141, 87, 0.50);    /* stärkerer Erfolgsschatten/Outline */
}


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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--grad-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--heading);
  margin: 0 0 12px;
  letter-spacing: 0.4px;
}

p {
  margin: 0 0 14px;
  color: var(--muted);
}

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

.page {
  max-width: 1600px;
  margin: 0 auto;
}

/* === Utilities & Helpers ===
   Basis-Helfer für Abstände, Max-Breiten, Farben. */
.container-max {
  max-width: var(--max-width);
  margin: 0 auto;
}
.mx-auto { margin-left: auto; margin-right: auto; }
.my-60 { margin: 60px auto; }
.maxw-container { max-width: var(--max-width); }
.maxw-920 { max-width: 920px; }
.maxw-720 { max-width: 720px; }
.maxw-600 { max-width: 600px; }

.bg-cream {
  background: var(--cream);
}

.border-gold-2 {
  border: 2px solid var(--gold);
}

.pill-hidden {
  display: none;
}

.m-0 {
  margin: 0;
}

.link-gold {
  color: var(--gold);
}

.link-dark {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-underline {
  text-decoration: underline;
}

.mt-16 {
  margin-top: 16px;
}

.mt-20 {
  margin-top: 20px;
}
.mt-12 {
  margin-top: 12px;
}
.mt-10 { margin-top: 10px; }

.mb-10 {
  margin-bottom: 10px;
}

.mt-8 {
  margin-top: 8px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mb-18 {
  margin-bottom: 18px;
}

.ml-8 {
  margin-left: 8px;
}

.hidden {
  display: none;
}

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

.minh-80 {
  min-height: 80px;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-500 {
  font-weight: 500;
}

.ml-10 {
  margin-left: 10px;
}

.mt-18 {
  margin-top: 18px;
}

.fs-108 {
  font-size: 1.08em;
}

.fs-40 {
  font-size: 40px;
}

.stat-highlight {
  background: var(--cream);
  border: 2px solid var(--gold);
  padding: 18px 20px;
  border-radius: 14px;
  font-size: 1.08em;
  font-weight: 600;
}

.cta-plain {
  border: 2px solid var(--gold);
  padding: 28px;
  border-radius: 12px;
  background: var(--cream);
}

.text-muted {
  color: var(--muted);
}

.text-gold {
  color: var(--gold);
}

.text-green {
  color: var(--text-strong);
}
.text-crimson { color: crimson; }
.text-meta { font-size: 12px; color: var(--muted); word-break: break-all; }

.container-card {
  max-width: var(--max-width);
  margin: 0 auto;
}

.border-gold-1 {
  border: 1px solid var(--rgba-dark-08);
}

.split-wide {
  gap: 32px;
  align-items: flex-start;
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: var(--rgba-white-95);
  border-bottom: 1px solid var(--rgba-dark-08);
  border-radius: 0 0 22px 22px;
  margin: 0 12px;
  box-shadow: 0 2px 16px var(--rgba-gold-16);
  transition: transform 0.25s ease, box-shadow 0.2s ease;
}
.header-hidden { transform: translateY(-120%); }

.nav {
  font-family: var(--font-body);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  position: relative;
}

/* === Navigation & Logo ===
   Header, Markenauftritt und mobile Navigation. */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 15px;
  white-space: nowrap;
  font-family: var(--font-body);
  margin-left: -32px;
}

.logo img {
  height: 88px;
  width: auto;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 13px;
  font-family: var(--font-body);
  align-items: flex-start;
}
.footer-logo img {
  height: 40px;
  width: auto;
}

.cta-card {
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 28px;
}

.card-highlight {
  background: var(--cream);
  border: 2px solid var(--gold);
}

.funnel-hero-bg {
  background: var(--grad-cream);
  padding: 0 0 8px 0;
}

.funnel-section {
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--grad-cream);
}

.funnel-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 0 0 0;
}

.funnel-intro {
  background: var(--cream);
  border: 1.5px solid var(--gold);
  box-shadow: 0 4px 18px var(--rgba-gold-16);
  padding: 24px 60px 18px 60px;
  margin-bottom: 18px;
}

.funnel-intro-title {
  font-size: 2.1em;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-strong);
}

.funnel-intro-text {
  font-size: 1.13em;
  line-height: 1.5;
  margin-bottom: 0;
}

.funnel-intro-claim {
  margin-top: 10px;
  color: var(--gold);
  font-weight: 600;
}

.funnel-grid-immotype {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
}

.funnel-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.funnel-card {
  box-shadow: 0 10px 28px var(--rgba-gold-16), 0 1px 8px var(--rgba-black-08);
  border: 1.5px solid var(--gold);
  background: var(--grad-cream);
  padding: 24px 20px;
  min-height: 0;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.funnel-grid-immotype .btn {
  flex-direction: column;
  align-items: center;
  padding: 18px 8px;
  gap: 8px;
  font-size: 1.08em;
  font-weight: 600;
  min-height: 92px;
  white-space: normal;
  word-break: break-word;
}

.funnel-option-icon {
  display: block;
  width: 44px;
  height: 64px;
}

.funnel-option-icon.square {
  height: 44px;
}

.funnel-option-label {
  display: inline-block;
  text-align: center;
  max-width: 100%;
}

.funnel-note {
  margin-bottom: 14px;
  margin-top: 8px;
  background: var(--cream);
  padding: 16px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--gold);
}

.funnel-note-title {
  font-size: 1.04em;
  color: var(--text-strong);
  margin-bottom: 12px;
  line-height: 1.5;
  text-align: left;
  width: 100%;
  font-weight: 500;
}

.funnel-checkbox-row {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: flex-start !important;
  column-gap: 12px !important;
  row-gap: 4px;
  width: 100%;
  min-width: 0;
}

.funnel-checkbox {
  margin-right: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.privacy-label {
  display: block;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
  font-weight: normal;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}

.funnel-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

label.funnel-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  line-height: 1.3;
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
  flex-wrap: wrap;
  width: auto;
  max-width: none;
}

/* Lead funnel responsive tweaks
   Verkleinerungen für Buttons/Intro auf sehr kleinen Screens. */
@media (max-width: 600px) {
  .funnel-grid-immotype {
    grid-template-columns: 1fr !important;
  }
  .funnel-intro {
    padding: 14px 8px 8px 8px !important;
  }
  .funnel-intro-text {
    font-size: 1em !important;
    margin-bottom: 0 !important;
  }
  .funnel-intro-claim {
    font-size: 0.98em !important;
    margin-top: 6px !important;
  }
  .funnel-grid-immotype .btn {
    font-size: 0.98em !important;
    padding: 10px 4px !important;
    min-height: 56px !important;
    gap: 4px !important;
  }
  .funnel-grid-immotype .btn span {
    width: 32px !important;
    height: 32px !important;
  }
  .funnel-grid-immotype .btn[data-type="Mehrfamilienhaus"] span:last-child {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 1em !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 430px) {
  .funnel-intro {
    display: none !important;
  }
}

.funnel-progressbar {
  width: 100%;
  margin-bottom: 22px;
}

.funnel-progress-track {
  height: 10px;
  background: var(--border);
  border-radius: 8px;
  overflow: hidden;
}

#funnel-progress {
  height: 10px;
  width: 0;
  background: var(--grad-gold-banner);
  transition: width 0.5s cubic-bezier(.6, 1.5, .5, 1);
  border-radius: 8px;
}

#funnel-progress-label {
  text-align: right;
  font-size: 0.98em;
  color: var(--gold);
  margin-top: 2px;
  font-weight: 600;
  min-height: 18px;
}

.funnel-goodie {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.goodie-checkmark {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  flex: 0 0 auto;
}

.goodie-checkmark.large {
  width: 38px;
  height: 38px;
}

.goodie-text {
  display: inline-flex;
  align-items: center;
  font-size: 0.8em;
  line-height: 1.2;
  vertical-align: middle;
  white-space: normal;
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
}
.funnel-subtext {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.funnel-step-title {
  margin-bottom: 6px;
  font-size: 1.25em;
}

.funnel-step-text {
  color: var(--muted);
  margin-bottom: 12px;
  font-size: 1em;
}

.error-text {
  color: var(--error);
  font-size: 0.98em;
  margin-bottom: 12px;
}
.site-footer {
  background: var(--bg-1);
  border: 1.5px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding: 32px 0;
  margin: 48px 12px 0 12px;
  box-shadow: 0 -2px 16px var(--rgba-gold-16);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 24px;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footer-brand img {
  height: 40px;
  width: auto;
}

.footer-brand-title {
  font-family: var(--font-body);
  font-weight: 550;
  font-size: 15px;
  letter-spacing: 0.6px;
  color: var(--text);
}

.footer-brand-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

.footer-section-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95em;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.footer-section-body {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--muted);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82em;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-logo .logo-text {
  line-height: 1.2;
  font-family: var(--font-body);
  text-align: left;
}

.footer-logo .logo-sub {
  font-size: 10px;
  text-align: left;
}

.footer-grid > div:first-child {
  text-align: left;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.logo-main {
  font-weight: 600;
  font-family: var(--font-body);
  font-size: 17px;
}

.logo-sub {
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-body);
}

@media (max-width: 900px) {
  .logo img {
    height: 64px;
  }
  .logo-main {
    font-size: 15px;
  }
  .logo-sub {
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .nav {
    padding: 10px 12px;
    gap: 8px;
  }
  header {
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .logo img {
    height: 64px;
  }
  .logo-main {
    font-size: 13px;
    line-height: 1.1;
  }
  .logo-sub {
    font-size: 11px;
  }
  .logo {
    margin-left: 0 !important;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .site-footer {
    padding: 16px 0 !important;
  }
  .footer-inner {
    padding: 0 16px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  .footer-grid > div {
    text-align: center;
  }
  .footer-brand {
    justify-content: center;
  }
  .footer-brand img {
    height: 36px !important;
  }
  .footer-logo img {
    height: 36px !important;
  }
  .footer-brand-title {
    font-size: 13px !important;
    text-align: center;
  }
  .footer-brand-sub {
    font-size: 11px !important;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    font-size: 0.82em !important;
    padding-top: 12px !important;
  }
  .footer-bottom > div {
    width: 100%;
    margin: 2px 0;
  }
}


.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.nav-links a {
  font-family: var(--font-body);
  color: var(--text);
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
  font-size: 15px;
  white-space: nowrap;
}

.nav .btn {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 16px;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  .nav-links a[href*="#contact"],
  .nav-links a[href*="index.html#contact"],
  .nav-links a[href*="/index.html#contact"] {
    display: none;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  header { margin: 0 6px; }
  .nav { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
  .nav-links { flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
  .nav-links a { padding: 6px 10px; font-size: 13px; }
  .nav .btn { padding: 8px 10px; font-size: 13px; }
  .logo img { height: 32px; }
  .logo .logo-main { font-size: 12px; }
  .logo .logo-sub { font-size: 9px; letter-spacing: 0; }
  .nav-toggle { width: 40px; height: 40px; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  header { margin: 0 12px; }
  .nav { padding-left: 10px; padding-right: 14px; justify-content: space-around; }
  .logo { padding-left: 10px; margin-left: 8px; }
  .nav-links a[href*="qna"],
  .nav-links a[href*="#contact"],
  .nav-links a[href*="index.html#contact"] {
    display: none;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--rgba-gold-50);
  background: var(--grad-gold-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 10px 24px var(--rgba-black-12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  padding: 0;
  line-height: 1;
}

.nav-toggle:hover {
  box-shadow: 0 12px 28px var(--rgba-black-12);
}

.nav-toggle:active {
  transform: translateY(1px);
}

.nav-toggle .icon-burger,
.nav-toggle .icon-house {
  display: inline-block;
  line-height: 0;
  font-size: 18px;
}

.nav-toggle .icon-house {
  display: none;
}

.nav-toggle.is-open .icon-burger {
  display: none;
}

.nav-toggle.is-open .icon-house {
  display: inline-block;
}

.nav-links a:hover {
  color: var(--heading);
  background: var(--rgba-gold-35);
}

@media (max-width: 1100px) {
  .logo {
    font-size: 12px;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 14px;
    left: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--rgba-dark-12);
    box-shadow: 0 18px 36px var(--rgba-black-12);
    padding: 14px;
    border-radius: 14px;
    z-index: 15;
  }
  .nav-links.is-open {
    display: flex;
  }
  .nav-links a,
  .nav-links .btn {
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
  }
  header .nav {
    justify-content: space-between;
  }
}

/* === Buttons ===
   Primär-, Sekundär- und Outline-Buttons mit Fokus-/Hover-States. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border 0.2s ease;
  font-size: 15px;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-compact {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
}

.btn-gold {
  background: var(--grad-gold-135);
  color: var(--deep);
  box-shadow: 0 12px 30px var(--rgba-gold-35);
}

.btn-gold:hover {
  box-shadow: 0 16px 46px var(--rgba-gold-50);
  transform: translateY(-1px);
}

@media (min-width: 901px) {
  .hero-ctas .btn-gold {
    min-width: 320px;
    padding-left: 26px;
    padding-right: 26px;
    font-size: 17px;
  }
}

/* Wackel-Effekt nur für die "Kostenloses Erstgespräch"-Buttons (Hero & Navbar) */
.hero-ctas .btn-gold:hover,
.nav .btn-gold:hover {
  animation: btn-wobble 0.4s ease;
}

@keyframes btn-wobble {
  0% { transform: translateY(-1px) rotate(0deg); }
  30% { transform: translateY(-1px) rotate(-1.5deg); }
  60% { transform: translateY(-1px) rotate(1.5deg); }
  100% { transform: translateY(-1px) rotate(0deg); }
}

.btn-outline {
  border-color: var(--rgba-gold-60);
  color: var(--text);
  background: var(--rgba-gold-16);
}

.btn-outline:hover {
  background: var(--rgba-gold-16);
}

/* === Sections & Cards ===
   Seitenabstände, Grids und Karten-Grundlayout. */
.section {
  padding: 80px 22px;
  position: relative;
}

.section.narrow {
  padding: 60px 22px;
}

.section-header {
  max-width: var(--max-width);
  margin: 0 auto 32px;
}

.section-header h2 {
  font-size: 29px;
}

.section-header p {
  max-width: 720px;
}

.grid {
  display: grid;
  gap: 22px;
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card {
  background: var(--paper);
  border: 1px solid var(--rgba-dark-08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
  color: var(--text);
}

.pill {
  display: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--rgba-gold-16);
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
}

/* === Hero ===
   Einstiegsbereiche mit Headline, Bullets und CTA-Blöcken. */
.hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 22px 44px;
}

.hero-head {
  display: grid;
  gap: 8px;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.hero-heading {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.5;
  margin-top: -20px; /* zieht die Headline etwas nach oben */
}

.hero-bullets {
  display: grid;
  gap: 35px;
  margin: 16px 0 20px;
  list-style: none;
  padding: 0;
}

/* Lead page specific small utilities */
.lead-form input,
.lead-form select,
.lead-form textarea {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--rgba-dark-08);
  background: #fff;
  margin: 8px 0 12px;
  font-family: var(--font-body);
}

/* Sticky aside fallback for small screens */
@media (max-width: 900px) {
  .lead-form.card { position: static; top: auto; }
}

.notice { background: var(--rgba-soft-green-06); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rgba-dark-06); }

/* Multi-step form visuals */
form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.progressbar { margin-bottom: 12px; }
.progressbar .progress-track { box-shadow: inset 0 1px 0 var(--rgba-white-50); }

/* small-step labels inline on large screens */
@media (min-width: 720px) {
  .progressbar { display:block; }
}

/* tighten inputs inside forms */
.lead-form input, .lead-form select, .lead-form textarea { font-size: 16px; }



@media (max-width: 700px) {
.hero-heading {
  font-size: clamp(28px, 6vw, 38px);
}
}

.hero-bullet {
  display: flex;
  align-items: center;
  gap: 25px;
  color: var(--text);
  list-style: none;
  line-height: 1.4;
}

.hero-bullet span {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--heading);
  font-size: 50px;
  font-weight: 200;
  line-height: 1;
}

.hero-bullet span::before {
  content: '✓';
}

.hero-visual {
  position: relative;
  overflow: visible;
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1080px;
}

.hero-visual img:not(.hero-map-img),
.hero-visual video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 18px 38px var(--rgba-black-28);
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 40px;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
}

.btn-ghost:hover {
  color: var(--text-strong);
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(360px, 1fr) minmax(540px, 1.6fr);
  }
}

.hero-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--grad-paper-glow);
  border: 1px solid var(--rgba-dark-12);
  box-shadow: 0 18px 38px var(--rgba-black-18);
  padding: 18px 20px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.hero-map h3 {
  margin: 0;
  color: var(--heading);
}

.hero-map .map-text {
  margin: 0;
  color: var(--muted);
}

.hero-map-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  display: block;
  margin: 0 auto;
  background: transparent !important;
  mix-blend-mode: normal;
  object-position: center center;
}

/* === Exposé ===
   Galerie, Slideshow, Thumbs und Infobereich. */
.expose-hero {
  display: grid;
  grid-template-columns: minmax(420px, 1.4fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 0;
}
.expose-hero-wrap {
  margin-bottom: 0;
  padding-bottom: 0;
  display: grid;
  gap: 12px;
}
.expose-hero-wrap + .section {
  padding-top: 20px;
  margin-top: -20px;
}
.section.expose-description {
  padding: 20px 22px;
  margin-top: -10px;
}
.section.expose-description .maxw-container {
  max-width: var(--max-width);
  width: 100%;
}
#expose-contact.section {
  padding-top: 20px;
}
.expose-gallery {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  margin-bottom: 10px;
}
.expose-main { display: grid; }
.expose-slide { display: none; }
.expose-slide.is-active { display: block; }
.expose-slide img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.expose-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.expose-nav button,
.lightbox-nav button {
  pointer-events: all;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rgba-dark-12);
  background: var(--rgba-white-85);
  color: var(--text);
  cursor: pointer;
  margin: 0 8px;
  font-size: 20px;
  line-height: 1;
}
.lightbox-trigger {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rgba-dark-12);
  background: var(--rgba-white-85);
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
}
.expose-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  background: var(--bg-1);
}
.expose-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  background: none;
  cursor: pointer;
  min-width: 80px;
  max-width: 120px;
  overflow: hidden;
}
.expose-thumb img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.expose-thumb.is-active { border-color: var(--gold); }
.expose-summary { display: grid; gap: 12px; }

@media (max-width: 900px) {
  .expose-hero { grid-template-columns: 1fr; }
  .expose-hero-wrap { padding-bottom: 10px; }
  .expose-gallery { min-height: 320px; }
  .expose-slide img { min-height: 320px; object-fit: cover; }
  .section.expose-description { padding-top: 4px; margin-top: -60px; }
}
@media (min-width: 901px) {
  .expose-hero { grid-template-columns: minmax(440px, 1.5fr) minmax(320px, 1fr); }
  .expose-gallery { min-height: 520px; }
  .expose-slide img { min-height: 520px; object-fit: cover; }
  .expose-thumb { min-width: 100px; max-width: 140px; }
  .expose-thumb img { height: 90px; }
}

.price-badge {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--rgba-gold-16);
  color: var(--heading);
  font-weight: 700;
  font-size: 18px;
  border: 1px solid var(--rgba-gold-35);
}

.expose-summary .muted {
  color: var(--muted);
}

.expose-keyfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.expose-keyfacts div {
  padding: 10px 12px;
  border: 1px solid var(--rgba-dark-08);
  border-radius: 12px;
  background: #fff;
}

.expose-keyfacts strong {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.expose-keyfacts span {
  display: block;
  font-weight: 700;
  color: var(--text);
}

.lightbox {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 999;
}

.lightbox[hidden] {
  display: none !important;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: var(--rgba-black-70);
}

.lightbox-content {
  position: relative;
  max-width: 960px;
  width: 92%;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.lightbox-track img {
  width: 100%;
  display: none;
  border-radius: 12px;
}

.lightbox-track img.is-active {
  display: block;
}

.lightbox-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: var(--rgba-black-60);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

/* Lead-Wizard Styles */
.wizard-card {
  padding: 24px;
  margin-top: 12px;
  position: sticky;
  top: 92px;
  padding: 38px 32px 32px 32px;
  max-width: 520px;
  min-width: 340px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 18px 48px var(--rgba-gold-35), 0 2px 16px var(--rgba-black-12);
  border: 2.5px solid var(--gold);
  background: var(--cream);
  z-index: 10;
}
  .lead-form.card {
    max-width: 98vw;
    min-width: unset;
    padding: 22px 8px 18px 8px;
    border-width: 1.5px;
  }
.wizard-step {
  display: none;
  gap: 12px;
  justify-items: center;
}
.wizard-step.is-active {
  display: grid;
}

.lead-funnel input,
.lead-funnel select,
.lead-funnel textarea {
  width: 100%;
  padding: 16px 18px;
  font-size: 17px;
  border-radius: 12px;
  border: 1px solid var(--rgba-dark-12);
  min-height: 56px;
}
.lead-funnel textarea {
  min-height: 140px;
}
.lead-funnel input:focus,
.lead-funnel select:focus,
.lead-funnel textarea:focus {
  outline: 2px solid var(--rgba-gold-35);
}

.wizard-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.wizard-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}
.wizard-select,
.wizard-input {
  width: min(520px, 100%);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--rgba-dark-18);
  font-size: 17px;
  font-family: var(--font-body);
}
.wizard-select:focus,
.wizard-input:focus {
  outline: 3px solid var(--rgba-gold-35);
}

/* Kontaktbereich */
.contact-left {
  display: grid;
  gap: 14px;
  align-content: start;
}
.contact-hero-img {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  object-fit: cover;
}
.contact-info-body {
  margin-top: 8px;
}

.wizard-options-icons .btn {
  min-width: 220px;
  justify-content: flex-start;
  font-size: 17px;
  gap: 12px;
  padding: 14px 18px;
}

.lead-progress {
  display: grid;
  gap: 6px;
}
.lead-progress .progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--rgba-gold-16);
  overflow: hidden;
}
.lead-progress .progress-bar {
  width: 0%;
  height: 100%;
  background: var(--grad-gold-135);
  transition: width 0.25s ease;
}
.lead-progress .progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.lead-progress .progress-labels span.is-active {
  color: var(--heading);
  font-weight: 700;
}

/* Lead funnel layout tuning */
#lead-funnel {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#lead-funnel label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

#lead-funnel input,
#lead-funnel select,
#lead-funnel textarea {
  width: 100%;
  margin-bottom: 14px;
}

.funnel-step {
  display: none;
  gap: 16px;
}

#lead-funnel .wizard-actions {
  justify-content: flex-end;
  gap: 12px;
}

#lead-funnel .funnel-grid-immotype .btn {
  min-height: 92px;
  padding: 16px 10px;
}

@media (max-width: 900px) {
  #lead-funnel {
    padding: 24px 18px;
  }
  #lead-funnel .wizard-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  #lead-funnel {
    padding: 18px 12px;
  }
  #lead-funnel .btn {
    padding: 12px 12px;
    font-size: 15px;
    min-height: 68px;
  }
  #lead-funnel .wizard-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  .funnel-grid-immotype {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }
  #lead-funnel .funnel-grid-immotype .btn {
    min-height: 82px;
  }
  .funnel-option-icon {
    width: 40px;
    height: 50px;
  }
  .funnel-option-icon.square {
    height: 40px;
  }
}
/* === Lead hero ===
   Einleitungstext im Lead-Funnel (Start-Sektion). */
.lead-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}
.lead-hero-copy h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.2;
  margin: 6px 0 10px;
}
.lead-hero-copy p {
  max-width: 680px;
}
.lead-trust {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
}

.floating-card { position: absolute; bottom: 20px; left: 0px; background: var(--rgba-white-95); color: var(--heading); border: 1px solid var(--rgba-gold-35); padding: 14px 16px; border-radius: 12px; backdrop-filter: blur(6px); }
.floating-card strong { color: var(--gold); display: block; }

.usp-card {
  display: grid;
  gap: 10px;
  border: 2px solid var(--gold);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 18px 36px var(--rgba-black-12);
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--rgba-gold-35);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-weight: 700;
}
.icon-circle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* === Lists & text blocks ===
   Aufzählungen, USPs und kleine Text-Helfer. */
.list {
  padding-left: 0;
  color: var(--muted);
  list-style: none;
  margin: 0 0 18px 0;
}

.list li {
  margin-bottom: 12px;
  padding-left: 32px;
  position: relative;
  font-size: 1.08rem;
}

@media (max-width: 640px) {
  .cta-block .list li {
    font-size: 0.98rem;
    padding-left: 26px;
    margin-bottom: 10px;
  }
  .cta-block .list li::before {
    top: 0.15em;
  }
}
.list li::before {
  content: '•';
  color: var(--gold);
  font-size: 1.2em;
  position: absolute;
  left: 0;
  top: 0.1em;
}

.qa-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

.qa-cta .btn {
  flex: 1 1 220px;
  max-width: 320px;
  text-align: center;
}

.qa-search {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.qa-search-row input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--rgba-dark-08);
  background: var(--white);
  color: var(--text);
  font-size: 15px;
}

.qa-search-row input::placeholder {
  color: var(--rgba-soft-green-45);
}

.qa-search-row input:focus {
  outline: 1px solid var(--gold);
}

.qa-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.qa-list {
  display: grid;
  gap: 12px;
}

.qa-section-title {
  margin: 18px 0 8px;
  font-size: 20px;
  color: var(--deep);
}

.qa-list::after {
  content: 'Keine Treffer für Ihre Suche. Versuchen Sie einen anderen Begriff oder stellen Sie Ihre Frage direkt.';
  display: none;
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed var(--rgba-gold-50);
  background: var(--rgba-gold-16);
  color: var(--text);
}

body.qa-empty .qa-list::after {
  display: block;
}

.qa-item {
  border: 1px solid var(--rgba-dark-08);
  border-radius: 12px;
  background: var(--white);
  padding: 10px 14px;
}

.qa-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--deep);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  position: relative;
  padding-left: 26px;
}

.qa-item summary::-webkit-details-marker {
  display: none;
}

.qa-item summary::after {
  content: '+';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-weight: 800;
  font-size: 18px;
}

.qa-item[open] summary::after {
  content: '-';
}

.qa-question {
  flex: 1;
}

.qa-item[open] summary {
  color: var(--gold);
}

.qa-item p {
  color: var(--muted);
  margin-bottom: 8px;
}

.qa-answer {
  padding: 6px 0 4px 26px;
  color: var(--muted);
}

.qa-footer-cta {
  margin-top: 26px;
  padding: 18px;
  border-radius: 14px;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  text-align: center;
  box-shadow: var(--shadow);
}

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

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.team .portrait {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--grad-gold-dark);
}

.case-grid,
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.offer-grid .card {
  border: 3px solid var(--gold);
  box-shadow: 0 16px 42px var(--rgba-gold-35);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--rgba-gold-16);
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
}

.card img {
  width: 100%;
  border-radius: 12px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 12px;
}

/* Größeres Bild, wenn nur ein Angebot dargestellt wird */
.offer-grid > :only-child img {
  height: 400px;
}

@media (min-width: 900px) {
  .card img {
    height: 220px;
  }
  .offer-grid > :only-child img {
    height: 480px;
  }
}

@media (max-width: 700px) {
  /* Mobile: quadratische Bilder in den Angebotskarten */
  .offer-grid .card img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .offer-grid > :only-child img {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
}

.card-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.filters select,
.filters input {
  background: var(--white);
  border: 1px solid var(--rgba-gold-35);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text);
  min-width: 190px;
  font-size: 15px;
}

.filters select:focus,
.filters input:focus {
  outline: 1px solid var(--gold);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.step {
  padding: 18px;
  border-radius: 16px;
  border: 2px solid var(--gold);
  background: var(--cream);
  box-shadow: 0 10px 28px var(--rgba-dark-12);
  position: relative;
  overflow: hidden;
}

.step-number {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.4px;
}

.step h4 {
  color: var(--gold);
  margin-bottom: 8px;
  padding-top: 0;
}

.step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}


.cta-block {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 30px;
  background: var(--grad-soft-light);
  border: 1px solid var(--rgba-dark-08);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.coming-wrapper {
  margin-top: 22px;
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed var(--rgba-gold-35);
  background: var(--grad-soft-vertical);
}

.coming-header h3 {
  margin: 0 0 6px;
}

.coming-header p {
  margin: 0 0 12px;
  color: var(--muted);
}

.muted-grid .card {
  background: var(--white);
  border-width: 1px;
  box-shadow: none;
}

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

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text);
}

.form input,
.form textarea,
.form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--rgba-dark-08);
  background: var(--white);
  color: var(--text);
  resize: vertical;
  min-height: 48px;
  font-size: 16px;
  font-family: var(--font-body);
}

/* Dropdown gezielt höher, ohne andere Felder zu vergrößern */
.form select {
  min-height: 56px;
}

.form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.form textarea {
  min-height: 120px;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: 1px solid var(--gold);
}

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

.form .checkbox label {
  margin: 0;
  line-height: 1.4;
  display: inline-block;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* === Global form styles === */
.notice {
  padding: 12px 14px;
  background: var(--rgba-gold-16);
  border: 1px solid var(--rgba-gold-35);
  border-radius: 12px;
  color: #fff;
}

/* === Cookie Banner ===
   Positioniert den Banner unten mittig, mit Buttons zum Zustimmen/Ablehnen. */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, calc(100vw - 24px));
  background: var(--cream);
  color: var(--text);
  border: 1.5px solid var(--rgba-error-45);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 12px 32px var(--rgba-black-12);
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.cookie-banner p {
  margin: 0;
  line-height: 1.4;
}
.cookie-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-banner .btn {
  padding: 10px 14px;
  font-size: 0.95em;
}
.cookie-banner .btn-gold {
  background: var(--grad-success);
  color: var(--paper);
  box-shadow: 0 10px 26px var(--rgba-success-35);
}
.cookie-banner .btn-gold:hover {
  box-shadow: 0 12px 32px var(--rgba-success-50);
  transform: translateY(-1px);
}
.cookie-banner .btn-outline {
  border-color: var(--rgba-soft-green-20);
  color: var(--text);
  background: var(--bg-2);
}
.cookie-banner .btn-outline:hover {
  background: var(--bg-1);
}
@media (max-width: 640px) {
  .cookie-banner {
    grid-template-columns: 1fr;
    padding: 14px 14px;
  }
  .cookie-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* === Admin UI ===
   Admin-Grid, Kopfzeile, Karten und kleine Status-Elemente. */
.admin-topbar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rgba-dark-08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-plain { background: var(--white); }
.flash-box { padding: 24px; border-radius: 8px; }
.flash-success { background: var(--bg-success); color: var(--text-strong); }
.flash-error { background: var(--error-soft); color: var(--error-dark); }

.admin-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
}

.admin-panel {
  background: var(--white);
}

.admin-side {
  display: grid;
  gap: 16px;
}

.admin-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pill-admin {
  background: var(--rgba-gold-35);
  color: var(--gold);
}

.pill-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--rgba-dark-12);
  background: var(--rgba-dark-06);
  color: var(--text);
  font-weight: 600;
}

button.pill-ghost {
  cursor: pointer;
}

.offer-preview {
  background: var(--white);
  border: 1px dashed var(--rgba-dark-12);
  padding: 8px;
  border-radius: 12px;
}

.code-block {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--rgba-dark-12);
  background: var(--text);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
}

.import-box {
  margin-top: 10px;
}

.import-box label {
  display: block;
  font-weight: 600;
  margin: 12px 0 6px;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.small-hint {
  font-size: 12px;
  color: var(--muted);
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--rgba-dark-08);
  background: var(--white);
}

.admin-meta {
  color: var(--muted);
  font-size: 13px;
}

.admin-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.gallery-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.gallery-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--rgba-dark-08);
  border-radius: 12px;
  background: #fff;
  cursor: grab;
}

.gallery-item img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.gallery-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gallery-actions button {
  border: 1px solid var(--rgba-dark-12);
  background: var(--paper);
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

.gallery-cover {
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
}

.gallery-pending {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.gallery-pending .pending-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px dashed var(--rgba-dark-18);
  border-radius: 12px;
  background: var(--bg-1);
  cursor: grab;
}

.gallery-pending img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.upload-progress {
  margin-top: 10px;
  background: var(--rgba-gold-16);
  border: 1px solid var(--rgba-gold-35);
  border-radius: 10px;
  overflow: hidden;
  height: 10px;
}

.upload-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--grad-gold-135);
  transition: width 0.2s ease;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: center;
}

.stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stat {
  padding: 14px 16px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--rgba-dark-08);
  color: var(--text);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
  /* gleiche Höhe für beide Spalten */
  align-content: start;
}

#contact-form.card.form {
  background: var(--cream);
  border: 2.5px solid var(--gold);
  box-shadow: 0 10px 40px var(--rgba-gold-35), 0 2px 16px var(--rgba-black-12);
  border-radius: 18px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  /* bündig oben mit Bild */
  align-self: start;
}

.testimonial {
  background: var(--white);
  border: 1px solid var(--rgba-dark-08);
  padding: 18px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--text);
}

.testimonial strong {
  color: var(--gold);
}

.slider {
  position: relative;
}

.slider-track {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.slider-card {
  min-width: 280px;
  flex: 1 0 280px;
}

.slider-controls {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

.slider-controls button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rgba-dark-12);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
}

/* === Global responsive helpers ===
   Allgemeine Breakpoint-Anpassungen für Buttons, Sections, Hero und Admin. */
@media (max-width: 900px) {
  .section {
    padding: 64px 18px;
  }
  .hero {
    padding-top: 40px;
  }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-row { flex-direction: column; align-items: flex-start; }
  .admin-row-actions { width: 100%; }
}

@media (min-width: 901px) {
  .floating-card { bottom: -105px; }
}

@media (max-width: 600px) {
  .btn {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
  }
  .section {
    padding: 52px 16px;
  }
  .section.expose-description {
    padding: 20px 16px;
    margin-top: -44px;
  }
}

/* Badge – verborgen aber Platz reserviert */
.badge-hidden {
  visibility: hidden;
}

@media (max-width: 900px) {
  /* Video nicht links/rechts beschneiden auf kleineren Screens */
  .hero-visual {
    overflow: hidden;
  }
  .hero-visual video {
    object-fit: contain;
    background: var(--bg-1);
  }
}

/* Exposé: Formular-Lesbarkeit */
#expose-contact .form input,
#expose-contact .form textarea,
#expose-contact .form select {
  font-size: 16px;
  line-height: 1.6;
}

/* Exposé: Matterport-Embed */
.matterport-card {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}
.matterport-card .matterport-header {
  padding: 24px 28px 0;
}
.matterport-embed {
  position: relative;
  padding-top: 56.25%;
}
.matterport-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 900px) {
  .matterport-card .matterport-header {
    padding: 20px 20px 0;
  }
}
@media (max-width: 640px) {
  .matterport-card {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 12px;
  }
  .matterport-card .matterport-header {
    padding: 16px 16px 0;
  }
  .matterport-embed {
    padding-top: 62.5%;
  }
}