/* ─────────── DESIGN TOKENS — Cavicchi & Preinfalk ─────────── */
  :root {
    /* Höhe der Sticky-Mobile-CTA-Leiste (10px + 48px Button + 10px) — wird genutzt,
       um den Hero auf Mobil exakt darüber enden zu lassen und unten Platz zu schaffen. */
    --cta-bar-h: 68px;
    --navy:        #0B1C3F;
    --navy-deep:   #07142E;
    --navy-soft:   #1B2C4F;
    --navy-line:   rgba(11, 28, 63, 0.12);

    --gold:        #C4973C;
    --gold-soft:   #D9B768;
    --gold-deep:   #9C7423;
    --gold-tint:   rgba(196, 151, 60, 0.10);

    --linen:       #F5F0E6;
    --paper:       #FBF8F2;
    --sand:        #ECE4D2;
    --ink:         #1A1A1A;
    --ink-soft:    #4A4A4A;
    --ink-mute:    #8A8478;

    --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;
  }

  /* Tweak modes — Voice */
  body[data-voice="sans"] {
    --serif: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  body[data-voice="sans"] .display,
  body[data-voice="sans"] h2, body[data-voice="sans"] h3, body[data-voice="sans"] h4,
  body[data-voice="sans"] .footer-brand-name,
  body[data-voice="sans"] .nav-brand-name,
  body[data-voice="sans"] .trust-letter,
  body[data-voice="sans"] .trust-signature-name,
  body[data-voice="sans"] .contact-stats .value {
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.035em;
  }
  body[data-voice="sans"] .display em,
  body[data-voice="sans"] h3 em,
  body[data-voice="sans"] .footer-brand-name em,
  body[data-voice="sans"] .nav-brand-name span {
    font-style: normal;
    font-weight: 700;
  }

  body[data-voice="brutal"] {
    --serif: 'Space Grotesk', 'Inter Tight', sans-serif;
  }
  body[data-voice="brutal"] .display,
  body[data-voice="brutal"] h2, body[data-voice="brutal"] h3, body[data-voice="brutal"] h4 {
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.045em;
    text-transform: none;
  }
  body[data-voice="brutal"] .display em,
  body[data-voice="brutal"] h3 em {
    font-style: normal;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
  }
  body[data-voice="brutal"] .eyebrow {
    font-weight: 700;
    letter-spacing: 0.22em;
  }
  body[data-voice="brutal"] .nav-brand-name,
  body[data-voice="brutal"] .footer-brand-name,
  body[data-voice="brutal"] .trust-signature-name {
    font-weight: 600;
    letter-spacing: -0.02em;
    font-style: normal;
  }
  body[data-voice="brutal"] .service-card,
  body[data-voice="brutal"] .booker,
  body[data-voice="brutal"] .hero-badge {
    border-radius: 0;
    border-width: 1.5px;
    border-color: var(--navy);
  }

  /* Tweak modes — Density */
  body[data-density="compact"] {
    --section-py: 72px;
    --hero-pt: 110px;
    --display-scale: 0.82;
    --gap-lg: 48px;
    --gap-md: 32px;
  }
  body[data-density="regular"] {
    --section-py: 120px;
    --hero-pt: 140px;
    --display-scale: 1;
    --gap-lg: 80px;
    --gap-md: 56px;
  }
  body[data-density="airy"] {
    --section-py: 180px;
    --hero-pt: 180px;
    --display-scale: 1.18;
    --gap-lg: 120px;
    --gap-md: 80px;
  }
  body[data-density] section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
  body[data-density] .hero { padding-top: var(--hero-pt); }
  body[data-density] .display { font-size: calc(clamp(48px, 6vw, 72px) * var(--display-scale) * var(--hero-scale, 1)); }
  body[data-density] .hero-title { font-size: calc(clamp(64px, 9vw, 124px) * var(--display-scale) * var(--hero-scale, 1)); }
  body[data-density] .contact-title { font-size: calc(clamp(56px, 7vw, 96px) * var(--display-scale) * var(--hero-scale, 1)); }
  body[data-density] .section-head { gap: var(--gap-lg); margin-bottom: var(--gap-md); }
  body[data-density] .trust-inner,
  body[data-density] .contact-inner { gap: var(--gap-lg); }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 88px; }
  html, body { overflow-x: hidden; }
  body {
    margin: 0;
    background: var(--linen);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  /* Nur für Screenreader / Heading-Struktur sichtbar (visuell verborgen) */
  .sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* ─── Reusable primitives ─── */
  .eyebrow {
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 500;
  }
  .eyebrow.light { color: var(--gold-soft); }

  .display {
    font-family: var(--serif); font-weight: 500;
    letter-spacing: -0.025em; line-height: 1.0;
    color: var(--navy);
  }
  .display em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
  .display.on-dark { color: white; }
  .display.on-dark em { color: var(--gold-soft); }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-weight: 500; font-size: 15px;
    padding: 16px 28px;
    border-radius: 2px;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
  }
  .btn .arr { transition: transform 0.18s ease; }
  .btn:hover .arr { transform: translateX(3px); }
  .btn--gold { background: var(--gold); color: white; }
  .btn--gold:hover { background: var(--gold-deep); }
  .btn-icon { flex: none; opacity: 0.95; }
  .contact-actions--three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .contact-actions--three .btn {
    justify-content: center;
    gap: 10px;
    padding: 16px 18px;
    text-align: center;
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
  }
  .contact-actions--three .btn .btn-label { white-space: nowrap; }
  @media (max-width: 720px) {
    .contact-actions--three { grid-template-columns: 1fr; }
  }
  .btn--navy { background: var(--navy); color: white; }
  .btn--navy:hover { background: var(--navy-deep); }
  .btn--ghost-dark {
    color: var(--navy);
    border-bottom: 1px solid var(--navy);
    border-radius: 0;
    padding: 12px 4px;
  }
  .btn--ghost-dark:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
  .btn--ghost-light {
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    border-radius: 0;
    padding: 12px 4px;
  }
  .btn--ghost-light:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

  /* ─── NAV ─── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 56px;
    transition: background 0.4s ease, box-shadow 0.4s ease;
  }
  .nav.scrolled {
    background: rgba(245, 240, 230, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--navy-line);
  }
  .nav-brand { display: flex; align-items: center; gap: 18px; }
  .nav-brand-mark {
    height: 52px; width: auto;
    display: block;
  }
  .nav.scrolled .nav-brand-mark { /* keep VKB logo readable on the linen scrolled bar */ }
  .nav-brand-name {
    font-family: var(--serif); font-size: 23px; font-weight: 500;
    letter-spacing: -0.01em; color: var(--navy); line-height: 1.1;
  }
  .nav-brand-name span { color: var(--gold-deep); }
  .nav-brand-sub {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-mute); margin-top: 3px;
  }
  .nav-links {
    display: flex; gap: 36px; align-items: center;
  }
  .nav-links a {
    font-size: 13px; font-weight: 500; color: var(--navy);
    opacity: 0.75; transition: opacity 0.2s ease, color 0.2s ease;
    white-space: nowrap;
  }
  .nav-links a:hover { opacity: 1; color: var(--gold-deep); }
  .nav-cta {
    background: var(--navy); color: white !important;
    padding: 11px 20px; font-size: 13px; font-weight: 500;
    opacity: 1 !important;
    transition: background 0.18s ease;
  }
  .nav-cta:hover { background: var(--gold); color: white !important; }

  /* „Startseite" nur im mobilen Burger-Menü zeigen (auf Desktop unsichtbar) */
  .nav-home-mobile { display: none; }

  /* Dropdown „Leistungen" */
  .nav-has-sub { position: relative; }
  .nav-caret { font-size: 9px; opacity: 0.7; margin-left: 4px; display: inline-block; transition: transform 0.2s ease; }
  .nav-sub {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 248px; list-style: none;
    background: var(--paper); border: 1px solid var(--navy-line); border-radius: 5px;
    box-shadow: 0 26px 54px -26px rgba(11, 28, 63, 0.45);
    padding: 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease; z-index: 120;
  }
  .nav-has-sub:hover .nav-sub,
  .nav-has-sub:focus-within .nav-sub,
  .nav-has-sub.open .nav-sub {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-has-sub:hover .nav-caret,
  .nav-has-sub:focus-within .nav-caret,
  .nav-has-sub.open .nav-caret { transform: rotate(180deg); }
  .nav-sub li { width: auto; }
  .nav-sub a {
    display: block; padding: 11px 16px; border-radius: 3px;
    font-size: 14px; color: var(--navy) !important; opacity: 1 !important;
    white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-sub a:hover { background: var(--gold-tint); color: var(--gold-deep) !important; }

  /* Mobile-Menü-Button (nur unter 1024px sichtbar) */
  .nav-toggle {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin: -10px -6px;
    flex: none; z-index: 95;
  }
  .nav-toggle span {
    display: block; width: 100%; height: 2px;
    background: var(--navy); border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease;
  }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-scrim { display: none; }

  /* ─── HERO ─── */
  .hero {
    position: relative;
    min-height: 100vh;
    background: var(--linen);
    overflow: hidden;
    padding: 140px 80px 0;
    display: flex; flex-direction: column;
  }
  .hero-skyline {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 80% 55% at 78% 18%, rgba(217,183,104,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 65% 45% at 12% 85%, rgba(11,28,63,0.09) 0%, transparent 65%),
      linear-gradient(180deg, #FBF8F2 0%, #F5F0E6 55%, #ECE4D2 100%);
  }
  .hero-skyline svg { display: none; }
  .hero-skyline::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(11,28,63,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(11,28,63,0.05) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 0%, transparent 78%);
            mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 0%, transparent 78%);
  }
  .hero-skyline::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 45% 35% at 50% 50%, rgba(251,248,242,0.5) 0%, transparent 75%);
  }
  .hero-watermark { display: none; }
  .hero-content {
    position: relative; z-index: 2;
    margin: auto; padding-top: 60px; padding-bottom: 80px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    max-width: 1200px;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--navy-line);
    margin-bottom: 36px;
  }
  .hero-badge::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%; background: var(--gold);
  }
  .hero-title { font-size: clamp(64px, 9vw, 124px); margin-bottom: 0; }
  .hero-sub {
    font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 400; color: var(--ink-soft);
    margin-top: 28px; max-width: 680px; line-height: 1.45;
  }
  .hero-actions { display: flex; gap: 24px; align-items: center; margin-top: 44px; }

  .hero-strip {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 16px; align-items: end;
    margin: 0 -80px; padding: 0 56px 32px;
  }
  .hero-strip-img { height: 160px; background: var(--sand); }
  .hero-strip-img--office { background: var(--linen); }
  .hero-strip-img--office img { object-fit: cover !important; object-position: center !important; }
  .hero-strip-img img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 15%;
  }
  .hero-strip-credit {
    background: var(--navy); color: white;
    padding: 20px 24px; height: 160px;
    display: flex; align-items: center; gap: 20px;
  }
  .hero-strip-credit .vkb-logo {
    height: 68px; width: auto;
    filter: brightness(0) invert(1); opacity: 0.92;
  }
  .hero-strip-credit-text {
    flex: 1; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 20px;
  }
  .hero-strip-credit-text .label {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--gold-soft);
  }
  .hero-strip-credit-text .meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.5); margin-top: 10px; text-transform: uppercase;
  }

  /* ─── SECTION SHELL ─── */
  section {
    padding: 120px 80px;
    position: relative;
  }
  section.dark {
    background: var(--navy); color: white;
  }
  section.paper { background: var(--paper); }
  section.linen { background: var(--linen); }

  .section-head {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: end;
    margin-bottom: 72px;
  }
  .section-head h2 { font-size: clamp(48px, 6vw, 72px); }
  .section-head p {
    font-size: 17px; line-height: 1.7;
    color: var(--ink-soft); max-width: 460px; justify-self: end;
  }

  /* ─── LEISTUNGEN ─── */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(220px, auto) minmax(220px, auto) auto;
    gap: 16px;
  }
  .service-spotlight {
    grid-column: span 2; grid-row: span 2;
    background: var(--navy); color: white;
    padding: 28px;
    display: flex; flex-direction: column; gap: 20px;
    position: relative; overflow: hidden;
  }
  .service-spotlight-top {
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .service-spotlight-icon {
    color: var(--gold-soft); opacity: 0.85;
  }
  .service-spotlight-img {
    position: absolute; inset: 0;
    background: url('assets/family-warm.jpg') center/cover no-repeat;
  }
  .service-spotlight-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,28,63,0.2) 0%, var(--navy) 95%);
  }
  .service-spotlight > * { position: relative; z-index: 1; }
  .service-spotlight h3 {
    font-family: var(--serif); font-size: 40px; font-weight: 500;
    line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 16px;
  }
  .service-spotlight h3 em {
    color: var(--gold-soft); font-style: italic; font-weight: 400;
  }
  .service-spotlight p {
    font-size: 14px; line-height: 1.65;
    color: rgba(255,255,255,0.7); margin-bottom: 24px;
  }
  .service-spotlight-cta {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--gold-soft); text-transform: uppercase;
  }

  .service-card {
    grid-column: span 2;
    background: white; padding: 28px;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 1px solid var(--navy-line);
    position: relative; overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .service-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
  }
  .service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(11,28,63,0.08); }
  .service-card:hover::before { transform: scaleX(1); }
  .service-card-top {
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .service-card-num {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--ink-mute); text-transform: uppercase;
  }
  .service-card h3 {
    font-family: var(--serif); font-size: 24px; font-weight: 500;
    color: var(--navy); letter-spacing: -0.01em; margin-bottom: 10px;
  }
  .service-card p {
    font-size: 14px; line-height: 1.6; color: var(--ink-soft);
  }

  .service-card--wide {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 0;
    align-self: stretch;
  }
  .service-card--wide { padding-top: 22px; padding-bottom: 22px; }

  /* ─── GESCHICHTE (Timeline · paper) ─── */
  .history-head {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: end;
    margin-bottom: 72px;
  }
  .history-head h2 { font-size: clamp(48px, 6vw, 72px); }
  .history-head p {
    font-size: 17px; line-height: 1.7;
    color: var(--ink-soft); max-width: 460px; justify-self: end;
  }
  .history-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 48px;
    max-width: 1100px;
  }
  .history-row { display: contents; }
  .history-row > * {
    padding: 32px 0;
    border-top: 1px solid var(--navy-line);
  }
  .history-row:last-child > * { border-bottom: 1px solid var(--navy-line); }
  /* nur vertikale Polsterung — sonst wird das padding-left:32px der .history-event (Absatz) der Schlüsseljahre überschrieben */
  .history-row.is-major > * { padding-top: 40px; padding-bottom: 40px; }
  .history-year {
    font-family: var(--mono); font-size: 13px;
    letter-spacing: 0.16em; color: var(--gold-deep);
    text-transform: uppercase;
    padding-top: 38px;
  }
  .history-row.is-major .history-year {
    font-family: var(--serif); font-style: italic;
    font-size: 32px; letter-spacing: -0.01em;
    color: var(--navy); text-transform: none;
    padding-top: 36px;
  }
  .history-event {
    padding-left: 32px;
    border-left: 1px solid var(--navy-line);
    position: relative;
  }
  .history-event::before {
    content: '';
    position: absolute;
    left: -5px; top: 44px;
    width: 9px; height: 9px;
    background: var(--paper);
    border: 1.5px solid var(--gold-deep);
    border-radius: 50%;
  }
  .history-row.is-major .history-event::before {
    background: var(--gold);
    border-color: var(--gold);
    width: 11px; height: 11px;
    left: -6px;
  }
  .history-event h4 {
    font-family: var(--serif); font-size: 24px; font-weight: 500;
    color: var(--navy); letter-spacing: -0.015em;
    margin-bottom: 8px;
  }
  .history-row.is-major .history-event h4 { font-size: 28px; }
  .history-event p {
    font-size: 15px; line-height: 1.65;
    color: var(--ink-soft); max-width: 62ch;
  }
  .history-row.is-today .history-year { color: var(--navy); }
  .history-coda {
    margin-top: 80px;
    padding: 40px 48px;
    background: var(--navy);
    color: rgba(255,255,255,0.85);
    display: grid; grid-template-columns: 1fr auto;
    gap: 56px; align-items: center;
  }
  .history-coda p {
    font-family: var(--serif); font-size: 22px;
    line-height: 1.45; font-weight: 400;
    color: rgba(255,255,255,0.92);
    max-width: 56ch;
  }
  .history-coda em { font-style: italic; color: var(--gold-soft); font-weight: 400; }
  .history-coda-mark {
    display: flex; align-items: center; gap: 16px;
    flex: none;
  }
  .history-coda-mark img {
    height: 44px; width: auto;
    filter: brightness(0) invert(1); opacity: 0.85;
  }
  .history-coda-mark-text {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.16em; color: var(--gold-soft);
    text-transform: uppercase;
  }
  @media (max-width: 1024px) {
    .history-list { grid-template-columns: 90px 1fr; column-gap: 24px; }
    .history-event { padding-left: 24px; }
    .history-event h4 { font-size: 19px; }
    .history-event p { font-size: 13.5px; }
    .history-year { font-size: 12px; }
    .history-row.is-major .history-year { font-size: 21px; }
    .history-row.is-major .history-event h4 { font-size: 21px; }
    /* kompakter, damit der Besucher weniger scrollen muss */
    .history-row > * { padding-top: 22px; padding-bottom: 22px; }
    .history-row.is-major > * { padding-top: 26px; padding-bottom: 26px; }
    .history-event::before { top: 28px; }
    .history-coda { grid-template-columns: 1fr; padding: 28px 32px; }
    .history-coda p { font-size: 18px; }
  }

  /* ─── GESCHICHTE — Variant switcher (Default: Kapitel-Erzählung) ─── */
  .history-list, .history-generations { display: none; }
  .history-chapters { display: block; }
  body[data-history-style="timeline"] .history-list { display: grid; }
  body[data-history-style="timeline"] .history-chapters,
  body[data-history-style="timeline"] .history-generations { display: none; }
  body[data-history-style="chapters"] .history-chapters { display: block; }
  body[data-history-style="chapters"] .history-list,
  body[data-history-style="chapters"] .history-generations { display: none; }
  body[data-history-style="generations"] .history-generations { display: block; }
  body[data-history-style="generations"] .history-list,
  body[data-history-style="generations"] .history-chapters { display: none; }

  /* ─── Variant A · Kapitel-Erzählung ─── */
  .history-chapters { max-width: 1200px; }
  .history-chapter {
    display: grid;
    grid-template-columns: 280px 1fr;
    column-gap: 72px;
    padding: 64px 0;
    border-top: 1px solid var(--navy-line);
  }
  .history-chapter:first-child { border-top: none; padding-top: 0; }
  .history-chapter:last-child { padding-bottom: 16px; }
  .history-chapter-marker .num {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; color: var(--gold-deep);
    text-transform: uppercase; margin-bottom: 16px;
  }
  .history-chapter-marker .years {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(44px, 4.4vw, 64px); font-weight: 500;
    color: var(--navy); letter-spacing: -0.025em; line-height: 0.95;
  }
  .history-chapter-marker .years span {
    display: block; color: var(--gold-deep); font-size: 0.55em;
    margin-top: 6px;
  }
  .history-chapter-title {
    font-family: var(--serif);
    font-size: clamp(32px, 3vw, 44px);
    font-weight: 500; color: var(--navy);
    letter-spacing: -0.02em; line-height: 1.05;
    margin-bottom: 24px;
  }
  .history-chapter-title em { color: var(--gold-deep); font-style: italic; }
  .history-chapter-body p {
    font-family: var(--serif);
    font-size: 19px; line-height: 1.6;
    color: var(--ink-soft); max-width: 62ch;
  }
  .history-chapter-body p em { color: var(--navy); font-style: italic; }
  .history-chapter-body p + p { margin-top: 14px; }
  .history-chapter-people {
    margin-top: 32px;
    display: flex; flex-wrap: wrap;
    gap: 12px 28px;
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.16em; color: var(--ink-mute);
    text-transform: uppercase;
  }
  .history-chapter-people .key {
    color: var(--gold-deep); display: inline-flex; align-items: center; gap: 10px;
    font-weight: 500;
  }
  .history-chapter-people .key::before {
    content: ''; width: 6px; height: 6px;
    background: var(--gold); border-radius: 50%;
  }

  /* ─── Variant B · Drei Generationen ─── */
  .gen-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .gen-card {
    background: var(--linen);
    border: 1px solid var(--navy-line);
    padding: 36px 32px 32px;
    display: flex; flex-direction: column;
    position: relative;
  }
  .gen-card-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 22px;
  }
  .gen-card-num {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.16em; color: var(--gold-deep);
    text-transform: uppercase;
  }
  .gen-card-born {
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.12em; color: var(--ink-mute);
    text-transform: uppercase;
  }
  .gen-card-name {
    font-family: var(--serif); font-size: 32px; font-weight: 500;
    color: var(--navy); letter-spacing: -0.015em; line-height: 1.05;
    margin-bottom: 6px;
  }
  .gen-card-name em { font-style: italic; color: var(--gold-deep); font-weight: 400; }
  .gen-card-role {
    font-family: var(--serif); font-style: italic;
    font-size: 17px; color: var(--gold-deep);
  }
  .gen-card-arc {
    margin-top: 28px;
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 14px;
  }
  .gen-card-arc .from {
    font-family: var(--serif); font-size: 36px;
    font-weight: 500; color: var(--navy);
    letter-spacing: -0.02em; line-height: 1;
  }
  .gen-card-arc .line {
    height: 1px; background: var(--gold); position: relative;
  }
  .gen-card-arc .line::after {
    content: ''; position: absolute; right: -1px; top: -3px;
    width: 7px; height: 7px; background: var(--gold);
    border-radius: 50%;
  }
  .gen-card-arc .to {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.14em; color: var(--ink-mute);
    text-transform: uppercase;
  }
  .gen-card-list {
    margin-top: 28px; flex: 1;
  }
  .gen-card-list li {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--navy-line);
    align-items: baseline;
  }
  .gen-card-list li:last-child { border-bottom: 1px solid var(--navy-line); }
  .gen-card-list li .year {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.14em; color: var(--gold-deep);
  }
  .gen-card-list li .what {
    font-family: var(--sans); font-size: 13px;
    line-height: 1.45; color: var(--ink-soft);
  }
  .gen-card-quote {
    margin-top: 24px;
    font-family: var(--serif); font-style: italic;
    font-size: 17px; line-height: 1.5;
    color: var(--ink-soft);
  }
  .gen-card-vkb {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--navy-line);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.18em; color: var(--gold-deep);
    text-transform: uppercase;
  }
  /* Highlight current generation (Valentino) */
  .gen-card.is-active { background: var(--navy); color: white; }
  .gen-card.is-active .gen-card-num { color: var(--gold-soft); }
  .gen-card.is-active .gen-card-born { color: rgba(255,255,255,0.5); }
  .gen-card.is-active .gen-card-name { color: white; }
  .gen-card.is-active .gen-card-name em { color: var(--gold-soft); }
  .gen-card.is-active .gen-card-role { color: var(--gold-soft); }
  .gen-card.is-active .gen-card-arc .from { color: white; }
  .gen-card.is-active .gen-card-arc .to { color: rgba(255,255,255,0.55); }
  .gen-card.is-active .gen-card-list li { border-color: rgba(255,255,255,0.13); }
  .gen-card.is-active .gen-card-list li:last-child { border-bottom-color: rgba(255,255,255,0.13); }
  .gen-card.is-active .gen-card-list li .what { color: rgba(255,255,255,0.72); }
  .gen-card.is-active .gen-card-list li .year { color: var(--gold-soft); }
  .gen-card.is-active .gen-card-quote { color: rgba(255,255,255,0.85); }
  .gen-card.is-active .gen-card-vkb {
    color: var(--gold-soft); border-color: rgba(255,255,255,0.15);
  }

  .gen-aside {
    margin-top: 16px;
    background: var(--paper);
    border: 1px solid var(--navy-line);
    padding: 28px 32px;
    display: grid; grid-template-columns: 220px 1fr;
    column-gap: 48px; align-items: center;
  }
  .gen-aside-label {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; color: var(--gold-deep);
    text-transform: uppercase;
  }
  .gen-aside-text {
    font-family: var(--serif); font-size: 18px; line-height: 1.55;
    color: var(--ink-soft);
  }
  .gen-aside-text strong {
    font-style: normal; font-weight: 500; color: var(--navy);
  }

  @media (max-width: 1024px) {
    .history-chapter { grid-template-columns: 1fr; row-gap: 16px; padding: 40px 0; }
    .gen-grid { grid-template-columns: 1fr; }
    .gen-aside { grid-template-columns: 1fr; row-gap: 8px; padding: 20px; }
  }

  /* ─── Extended tweak modes ─── */

  /* Card style variants */
  body[data-card-style="lifted"] .service-card {
    border: none;
    box-shadow: 0 4px 14px rgba(11,28,63,0.06), 0 1px 3px rgba(11,28,63,0.04);
    background: white;
  }
  body[data-card-style="lifted"] .service-card:hover {
    box-shadow: 0 22px 52px rgba(11,28,63,0.14);
  }
  body[data-card-style="accent"] .service-card {
    border: 1px solid var(--navy-line);
    border-top: 3px solid var(--gold);
  }
  body[data-card-style="accent"] .service-card::before { display: none; }
  body[data-card-style="outline"] .service-card {
    background: transparent;
    border: 1.5px solid var(--navy);
  }
  body[data-card-style="outline"] .service-card:hover {
    background: white;
  }

  /* Border radius */
  body[data-radius] .service-card,
  body[data-radius] .service-spotlight,
  body[data-radius] .hero-badge,
  body[data-radius] .booker,
  body[data-radius] .nav-cta,
  body[data-radius] .btn--gold,
  body[data-radius] .btn--navy,
  body[data-radius] .gen-card,
  body[data-radius] .map-canvas,
  body[data-radius] .map-legend-row,
  body[data-radius] .gen-aside,
  body[data-radius] .history-coda,
  body[data-radius] .hero-strip-img,
  body[data-radius] .hero-strip-credit,
  body[data-radius] .map-card,
  body[data-radius] .team-card {
    border-radius: var(--radius, 0px);
  }
  body[data-radius] .team-card img { border-radius: var(--radius, 0px); }
  body[data-radius] .map-canvas { overflow: hidden; }

  /* Section dividers */
  body[data-dividers="hairline"] section.linen + section.paper,
  body[data-dividers="hairline"] section.paper + section.linen,
  body[data-dividers="hairline"] section.linen + section.linen,
  body[data-dividers="hairline"] section.paper + section.paper {
    border-top: 1px solid var(--navy-line);
  }
  body[data-dividers="gold"] section + section:not(.hero) {
    border-top: 2px solid var(--gold);
  }
  body[data-dividers="gold"] section.dark + section { border-top: none; }

  /* Photo treatment */
  body[data-photo-look="bw"] .team-card img,
  body[data-photo-look="bw"] .trust-signature-avatars img,
  body[data-photo-look="bw"] .hero-strip-img img,
  body[data-photo-look="bw"] .service-spotlight-img {
    filter: grayscale(1) contrast(1.04);
  }
  body[data-photo-look="duotone"] .team-card img,
  body[data-photo-look="duotone"] .trust-signature-avatars img,
  body[data-photo-look="duotone"] .hero-strip-img img,
  body[data-photo-look="duotone"] .service-spotlight-img {
    filter: grayscale(1) brightness(0.96) sepia(0.5) hue-rotate(190deg) saturate(2.6);
  }
  body[data-photo-look="warm"] .team-card img,
  body[data-photo-look="warm"] .trust-signature-avatars img,
  body[data-photo-look="warm"] .hero-strip-img img,
  body[data-photo-look="warm"] .service-spotlight-img {
    filter: sepia(0.18) saturate(1.05) contrast(1.02);
  }

  /* Hero skyline opacity (alpine + grid + munich silhouette) */
  .hero-skyline { opacity: var(--skyline-opacity, 1); }

  /* Hero grid pattern toggle */
  body[data-hero-grid="off"] .hero-skyline::before { display: none; }
  body[data-hero-grid="dense"] .hero-skyline::before {
    background-size: 44px 44px;
  }

  /* Reveal animation toggle */
  body[data-reveal="off"] .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hover intensity */
  body[data-hover="off"] .service-card:hover {
    transform: none;
    box-shadow: none;
  }
  body[data-hover="off"] .service-card::before { display: none; }
  body[data-hover="strong"] .service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 32px 64px rgba(11,28,63,0.18);
  }
  body[data-hover="strong"] .team-card:hover { transform: translateY(-6px); }
  body[data-hover="strong"] .map-legend-row:hover { transform: translateX(4px); }

  /* Eyebrow style */
  body[data-eyebrow="bracket"] .eyebrow::before {
    content: '['; margin-right: 4px; color: var(--gold);
  }
  body[data-eyebrow="bracket"] .eyebrow::after {
    content: ']'; margin-left: 4px; color: var(--gold);
  }
  body[data-eyebrow="line"] .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
  }
  body[data-eyebrow="line"] .eyebrow::before {
    content: ''; width: 32px; height: 1px;
    background: var(--gold);
  }

  /* ─── TRUST (A-Layout, hell) ─── */
  .trust-inner {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px;
    align-items: center;
  }
  .trust-letter {
    font-family: var(--serif); font-size: clamp(36px, 3.5vw, 48px);
    line-height: 1.18; font-weight: 400;
    letter-spacing: -0.015em; color: var(--navy);
  }
  .trust-letter .quote-mark {
    color: var(--gold); font-style: italic;
  }
  .trust-letter em { color: var(--gold-deep); font-style: italic; font-weight: 400; }
  .trust-signature {
    margin-top: 56px; display: flex; align-items: center; gap: 20px;
  }
  .trust-signature-avatars {
    display: flex; align-items: center;
  }
  .trust-signature-avatars img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    object-position: center 22%;
    border: 2px solid var(--paper);
    box-shadow: 0 2px 8px rgba(11, 28, 63, 0.12);
  }
  .trust-signature-avatars img + img { margin-left: -16px; }
  .trust-signature-name {
    font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--navy);
  }

  .pillars { display: flex; flex-direction: column; padding-top: 8px; }
  .pillar {
    display: grid; grid-template-columns: 60px 1fr; gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--navy-line);
  }
  .pillar:last-child { border-bottom: 1px solid var(--navy-line); }
  .pillar-num {
    font-family: var(--serif); font-style: italic; font-size: 28px;
    color: var(--gold-deep); letter-spacing: -0.02em;
  }
  .pillar h4 {
    font-family: var(--serif); font-size: 22px; font-weight: 500;
    margin-bottom: 6px; letter-spacing: -0.01em; color: var(--navy);
  }
  .pillar p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

  /* ─── ABLAUF (A · horizontal timeline) ─── */
  .process-head {
    display: grid; grid-template-columns: 1fr auto;
    gap: 80px; align-items: end; margin-bottom: 80px;
  }
  .process-head .meta {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--ink-mute); text-transform: uppercase;
  }
  .process-steps {
    position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr);
  }
  .process-line {
    position: absolute; top: 22px; left: 12.5%; right: 12.5%;
    height: 1px; background: var(--navy-line);
  }
  .process-step { padding-right: 32px; position: relative; }
  .process-step-num {
    width: 44px; height: 44px;
    background: var(--paper);
    border: 1px solid var(--navy-line);
    color: var(--navy);
    display: grid; place-items: center;
    font-family: var(--serif); font-style: italic; font-size: 18px; font-weight: 500;
    margin-bottom: 28px; position: relative; z-index: 1;
  }
  .process-step:first-child .process-step-num {
    background: var(--navy); color: var(--gold); border-color: var(--navy);
  }
  .process-step h4 {
    font-family: var(--serif); font-size: 28px; font-weight: 500;
    color: var(--navy); margin-bottom: 12px; letter-spacing: -0.015em;
  }
  .process-step p {
    font-size: 14px; line-height: 1.65;
    color: var(--ink-soft); max-width: 280px;
  }
  .process-step-time {
    margin-top: 14px; font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.14em; color: var(--gold-deep); text-transform: uppercase;
  }

  /* ─── TEAM (B-Layout · hell) ─── */
  .team-head { margin-bottom: 64px; }
  .team-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 72px;
  }
  .team-card {
    position: relative; overflow: hidden;
    background: var(--linen);
    aspect-ratio: 4 / 5;
    transition: transform 0.3s ease;
  }
  .team-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 22%;
  }
  .team-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(245,240,230,0.96) 100%);
  }
  .team-card-text {
    position: absolute; left: 18px; bottom: 16px; right: 18px;
  }
  .team-card-role {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--gold-deep); text-transform: uppercase;
    margin-top: 6px;
  }
  .team-card-role.former { color: var(--ink-mute); }
  .team-card h3 {
    font-family: var(--serif); font-weight: 500;
    color: var(--navy); letter-spacing: -0.015em;
    font-size: 32px;
  }
  .team-card p {
    font-family: var(--serif); font-style: italic; font-size: 15px;
    line-height: 1.5; color: var(--ink-soft);
    margin-top: 10px; max-width: 320px;
  }
  .team-card:hover { transform: translateY(-3px); }

  /* Team roster — Mitarbeiter ohne Foto */
  .team-roster-head {
    display: flex; align-items: baseline; gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--navy-line);
    margin-bottom: 4px;
  }
  .team-roster-head .eyebrow { color: var(--gold-deep); }
  .team-roster-head .num {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--ink-mute); margin-left: auto; text-transform: uppercase;
  }
  .team-roster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 56px;
  }
  .team-roster-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 18px;
    padding: 26px 0;
    border-bottom: 1px solid var(--navy-line);
    align-items: baseline;
  }
  .team-roster-row .idx {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--ink-mute);
  }
  .team-roster-row .name {
    font-family: var(--serif); font-weight: 500;
    color: var(--navy); letter-spacing: -0.015em;
    font-size: 26px; line-height: 1.1;
  }
  .team-roster-row .role {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--gold-deep); text-transform: uppercase;
    margin-top: 6px;
  }
  .team-roster-row .bio {
    font-family: var(--serif); font-style: italic; font-size: 15px;
    color: var(--ink-soft); line-height: 1.55;
    margin-top: 10px; max-width: 36ch;
  }

  /* ─── KONTAKT (B-Layout · hell) ─── */
  .contact {
    background: var(--linen);
    overflow: hidden;
    position: relative;
  }
  .contact::before {
    content: '';
    position: absolute; bottom: -200px; right: -200px;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(196,151,60,0.15) 0%, transparent 65%);
    pointer-events: none;
  }
  .contact-inner {
    position: relative;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 80px; align-items: start;
  }
  /* Grid-Items dürfen unter ihre Min-Content-Breite schrumpfen (sonst sprengt die Leaflet-Karte die Spalte auf Mobil) */
  .contact-inner > * { min-width: 0; }
  .contact-title { font-size: clamp(56px, 7vw, 96px); }
  .contact-title span.line { display: block; }
  .contact-desc {
    margin-top: 32px; font-size: 17px; line-height: 1.7;
    color: var(--ink-soft); max-width: 480px;
  }
  /* display:flex würde das Grid von .contact-actions--three überschreiben (verhinderte das Stapeln ≤720px) */
  .contact-actions { margin-top: 48px; }
  .contact-actions .btn--ghost-dark { color: var(--navy); }
  .contact-stats {
    margin-top: 64px; display: grid;
    grid-template-columns: repeat(3, auto); gap: 56px;
  }
  .contact-locations {
    margin-top: 56px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    padding-top: 32px; border-top: 1px solid var(--navy-line);
    max-width: 580px;
  }
  .contact-loc-name {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--gold-deep); text-transform: uppercase;
    margin-bottom: 14px;
  }
  .contact-loc-addr {
    font-family: var(--serif); font-size: 19px; line-height: 1.45;
    color: var(--navy); letter-spacing: -0.01em;
    margin-bottom: 14px;
  }
  .contact-loc-hours {
    font-family: var(--sans); font-size: 14px; line-height: 1.7;
    color: var(--ink-soft);
  }
  .contact-loc-hours .row { display: flex; gap: 14px; }
  .contact-loc-hours .row .day {
    width: 48px; color: var(--ink-mute);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; padding-top: 3px;
  }
  .contact-loc-hours .note {
    margin-top: 8px; font-size: 13px; font-style: italic; color: var(--ink-mute);
  }
  /* Klickbare Kontaktdaten beim Standort (tel: / mailto:) */
  .contact-loc-links {
    margin-top: 14px; display: flex; flex-direction: column; gap: 5px;
  }
  .contact-loc-links a {
    font-family: var(--sans); font-size: 14px; color: var(--navy);
    width: fit-content; overflow-wrap: anywhere;
    transition: color 0.18s ease;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .contact-loc-links a svg { flex: none; color: var(--gold-deep); }
  .contact-loc-links a:hover { color: var(--gold-deep); }
  .contact-stats .label {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--gold-deep); margin-bottom: 10px; text-transform: uppercase;
  }
  .contact-stats .value {
    font-family: var(--serif); font-style: italic; font-size: 32px;
    font-weight: 500; color: var(--navy); letter-spacing: -0.02em;
  }

  /* Map card (replaces booker) */
  .map-card { padding: 24px; }
  .map-card-head {
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: 20px;
  }
  .map-card-distance {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--ink-mute); text-transform: uppercase;
    margin-left: auto;
  }
  .map-canvas {
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--linen);
    position: relative;
    border: 1px solid var(--navy-line);
  }
  .map-leaflet {
    width: 100%; height: 100%;
    background: var(--linen);
    /* Mobile: Ein-Finger-Pan/Pinch-Zoom auf der Karte erlauben, ohne den Browser-Zoom auszulösen */
    touch-action: pan-x pan-y pinch-zoom;
  }
  .map-leaflet .leaflet-tile-pane { filter: saturate(0.85) contrast(0.96); }
  .map-marker {
    position: relative;
    filter: drop-shadow(0 4px 6px rgba(11,28,63,0.35));
  }
  .map-marker svg { display: block; }
  .map-marker-label {
    position: absolute;
    left: 50%; top: 100%;
    transform: translate(-50%, 4px);
    background: var(--navy);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    white-space: nowrap;
    pointer-events: none;
  }
  .leaflet-popup-content-wrapper {
    border-radius: 0 !important;
    background: var(--paper) !important;
    box-shadow: 0 16px 40px rgba(11,28,63,0.18) !important;
    border: 1px solid var(--navy-line) !important;
  }
  .leaflet-popup-tip { background: var(--paper) !important; border: 1px solid var(--navy-line) !important; }
  .leaflet-popup-content { margin: 14px 18px !important; font-family: var(--sans) !important; }
  .leaflet-popup-content .pp-name { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--navy); margin-bottom: 4px; }
  .leaflet-popup-content .pp-addr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 8px; }
  .leaflet-popup-content .pp-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gold-deep); text-decoration: none; text-transform: uppercase; }
  .leaflet-popup-content .pp-link:hover { color: var(--navy); }
  .leaflet-container a.leaflet-popup-close-button { color: var(--ink-mute) !important; }
  .leaflet-control-attribution { font-family: var(--mono) !important; font-size: 9px !important; }
  .map-legend {
    margin-top: 18px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .map-legend-row {
    display: grid; grid-template-columns: 14px 1fr 14px;
    align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--navy-line);
    color: var(--navy);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
  }
  .map-legend-row:hover { border-color: var(--gold); background: white; }
  .map-legend-pin {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--navy);
    box-shadow: 0 0 0 3px rgba(11, 28, 63, 0.18);
  }
  .map-legend-name {
    font-family: var(--serif); font-style: italic;
    font-size: 18px; color: var(--navy); line-height: 1.1;
  }
  .map-legend-addr {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--ink-mute); text-transform: uppercase;
    margin-top: 4px;
  }
  .map-legend-arr {
    font-family: var(--mono); font-size: 14px;
    color: var(--gold-deep); justify-self: end;
  }
  @media (max-width: 720px) {
    .map-legend { grid-template-columns: 1fr; }
  }

  /* Calendar booker */
  .booker {
    background: white;
    padding: 32px;
    border: 1px solid var(--navy-line);
    box-shadow: 0 24px 48px rgba(11,28,63,0.08);
  }
  .booker .label {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--gold-deep); text-transform: uppercase;
    margin-bottom: 20px;
  }
  .booker-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 4px; margin-bottom: 24px;
  }
  .booker-dow {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--ink-mute); text-align: center; padding: 6px;
    text-transform: uppercase;
  }
  .booker-day {
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
    font-family: var(--serif); font-size: 16px;
    color: var(--ink-mute);
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .booker-day.free {
    background: var(--linen); color: var(--navy);
    border-color: var(--gold); font-weight: 600;
    cursor: pointer;
  }
  .booker-day.free:hover { background: var(--gold); color: white; }
  .booker-day.today { background: var(--navy); color: var(--gold); font-weight: 600; }
  .booker-day.selected {
    background: var(--gold); color: white; font-weight: 600;
    border-color: var(--gold);
  }
  .booker-times-section { border-top: 1px solid var(--navy-line); padding-top: 20px; }
  .booker-times {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 12px;
  }
  .booker-time {
    padding: 12px 8px; text-align: center;
    border: 1px solid var(--navy-line); background: white;
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    color: var(--navy); cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .booker-time:hover { border-color: var(--gold); }
  .booker-time.selected { background: var(--navy); color: white; border-color: var(--navy); }
  .booker-confirm {
    margin-top: 20px; width: 100%;
    background: var(--navy); color: white;
    padding: 14px;
    transition: background 0.18s;
    cursor: pointer;
    font-weight: 500;
  }
  .booker-confirm:hover { background: var(--navy-deep); }
  .booker-confirm:disabled { background: var(--ink-mute); cursor: not-allowed; opacity: 0.5; }

  /* ─── FOOTER ─── */
  footer {
    background: var(--navy); color: rgba(255,255,255,0.6);
    padding: 80px 80px 40px;
  }
  .footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1.1fr;
    gap: 48px; padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .footer-brand-name {
    font-family: var(--serif); font-size: 26px;
    color: white; letter-spacing: -0.01em; font-weight: 500;
  }
  .footer-brand-name em { color: var(--gold-soft); font-style: italic; }
  .footer-brand-sub {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
    color: rgba(255,255,255,0.4); margin-top: 8px; text-transform: uppercase;
  }
  .footer-vkb {
    margin-top: 28px;
    height: 56px; width: auto;
    filter: brightness(0) invert(1); opacity: 0.85;
  }
  .footer-col-title {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--gold-soft); margin-bottom: 18px; text-transform: uppercase;
  }
  .footer-col li { padding: 4px 0; font-size: 14px; }
  .footer-col a { transition: color 0.15s; }
  .footer-col a:hover { color: white; }
  .footer-legal {
    padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: rgba(255,255,255,0.4);
  }
  .footer-legal-links { display: flex; gap: 24px; align-items: center; }
  .footer-legal-links a, .footer-legal-links .cc-reopen {
    display: inline-flex; align-items: center; min-height: 44px;
    transition: color 0.15s ease;
  }
  .footer-legal-links a:hover, .footer-legal-links .cc-reopen:hover { color: #fff; }

  /* Reveal animation */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  @media (max-width: 1024px) {
    .nav { padding: 16px 24px; }
    .nav-toggle { display: flex; }
    .nav-scrim {
      display: block;
      position: fixed; inset: 0;
      background: rgba(7, 20, 46, 0.45);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 80;
    }
    .nav.open .nav-scrim { opacity: 1; pointer-events: auto; }
    .nav-links {
      display: flex;
      position: fixed; top: 0; right: 0;
      width: min(80vw, 320px); height: 100vh; height: 100dvh;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: 84px 26px 24px;
      background: var(--linen);
      box-shadow: -10px 0 44px rgba(11, 28, 63, 0.20);
      transform: translateX(100%);
      transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
      z-index: 90;
    }
    .nav.open .nav-links { transform: translateX(0); }
    .nav-links li { width: 100%; }
    .nav-home-mobile { display: block; }
    .nav-links a {
      display: block; width: 100%;
      font-size: 15px; opacity: 1;
      padding: 12px 0;
      border-bottom: 1px solid var(--navy-line);
    }
    .nav-links .nav-cta {
      margin-top: 16px; text-align: center;
      padding: 13px 20px; font-size: 14px;
      border-bottom: 0;
    }
    /* Termin-CTA bleibt am unteren Rand des Menüs sichtbar, während die Linkliste
       darüber scrollt — so ist der Button auch auf niedrigen Displays (iPhone SE)
       immer erreichbar, ohne Tap-Targets zu verkleinern. Auf hohen Displays sitzt
       er ohne Lücke direkt unter „Standorte" (Sticky greift nur bei Überlauf). */
    .nav-links > li:last-child {
      position: sticky; bottom: 0;
      background: var(--linen);
      padding-top: 10px;
      box-shadow: 0 -16px 18px -8px var(--linen);
    }
    /* Dropdown im mobilen Menü: EINKLAPPBAR (Akkordeon) — standardmäßig zu,
       damit alle Top-Level-Punkte inkl. „Termin" ohne Scrollen sichtbar sind.
       Antippen des Eltern-Punkts klappt das Untermenü auf (siehe main.js). */
    .nav-has-sub > a {
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-caret {
      display: inline-block; font-size: 11px; opacity: 0.55;
      margin-left: 8px; transition: transform 0.25s ease;
    }
    .nav-has-sub.open > a .nav-caret { transform: rotate(180deg); }
    .nav-has-sub .nav-sub {
      position: static; transform: none; min-width: 0; margin: 0;
      opacity: 1; visibility: visible; pointer-events: auto;
      background: transparent; border: 0; box-shadow: none;
      padding: 0 0 0 14px;
      max-height: 0; overflow: hidden;
      transition: max-height 0.3s ease;
    }
    /* transform:none MUSS hier wiederholt werden: die Desktop-Regel
       „.nav-has-sub.open .nav-sub" (translateX(-50%)) ist spezifischer als die
       mobile Basis-Regel und würde das Untermenü sonst 130px nach links schieben
       (→ linksbündig abgeschnitten). */
    .nav-has-sub.open .nav-sub { max-height: 60vh; padding-bottom: 6px; transform: none; }
    .nav-sub a {
      border-bottom: 0; padding: 9px 0; font-size: 14px;
      color: var(--ink-soft) !important;
    }
    .nav-sub a:hover { background: transparent; }
    .hero { padding: 120px 24px 0; }
    /* Hero-Fotos: immer drei nebeneinander, VKB-Credit volle Breite darunter */
    .hero-strip { grid-template-columns: repeat(3, 1fr); margin: 0 -24px; padding: 0 24px 24px; }
    .hero-strip-credit { grid-column: 1 / -1; }
    section { padding: 80px 24px; }
    .section-head, .history-head, .trust-inner, .contact-inner { grid-template-columns: 1fr; gap: 32px; }
    .section-head p, .history-head p, .trust-inner p { justify-self: start; }
    /* Leistungen: sauberes 2-Spalten-Raster (Spotlight + breite Karte volle Breite) */
    .services-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .service-spotlight { grid-column: 1 / -1; grid-row: auto; }
    .service-card { grid-column: auto; grid-row: auto; }
    .service-card--wide { grid-column: 1 / -1; }
    /* Team & Roster bleiben auf dem Tablet mehrspaltig (wie am PC) */
    .team-roster { column-gap: 40px; }
    /* Roster auf Tablet kompakter (weniger Scrollen für den Überblick) */
    .team-roster-row { padding: 18px 0; }
    .team-roster-row .name { font-size: 20px; }
    .team-roster-row .bio { font-size: 13px; line-height: 1.5; margin-top: 8px; }
    /* GF-Kacheln auf Tablet: Schrift deutlich kleiner, Text im unteren Drittel */
    .team-card h3 { font-size: 20px; }
    .team-card p { font-size: 12.5px; margin-top: 6px; }
    .team-card-role { font-size: 10px; margin-top: 4px; }
    .team-card-text { left: 16px; right: 16px; bottom: 14px; }
    /* Ablauf bleibt auf Tablet horizontaler Zeitstrahl (wie Desktop), nur kompakter */
    .process-step { padding-right: 16px; }
    .process-step h4 { font-size: 20px; }
    .process-step p { font-size: 13px; }
    .process-step-num { margin-bottom: 22px; }
    .contact-stats { gap: 20px; }
    footer { padding: 56px 24px 24px; }
    /* Footer kompakter: Marke oben über volle Breite, dann 4 Spalten (München + Ruhpolding nebeneinander) */
    .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .footer-legal { flex-direction: column; gap: 16px; }
  }

  /* Kleine Tablets im Hochformat: GF-Kacheln sind schmal → langes Zitat ausblenden,
     damit nur Rolle + Name im unteren Drittel des Fotos stehen */
  @media (min-width: 641px) and (max-width: 900px) {
    .team-card p { display: none; }
    .team-card-text { bottom: 16px; }
  }

  /* Tablet-Hochformat MIT Sticky-Leiste (z. B. iPad mini 768): Homepage-Hero endet
     an der Bar-Oberkante — Fotos etwas kleiner, damit Hero + Fotos + Credit-Banner
     vollständig darüber passen. (min-height überschreibt die Basis-Regel 100vh.) */
  @media (min-width: 641px) and (max-width: 768px) and (orientation: portrait) {
    .hero {
      height: auto;
      min-height: calc(100svh - var(--cta-bar-h));
      padding-top: clamp(100px, 12vh, 132px); padding-bottom: 0;
      box-sizing: border-box;
    }
    .hero-content { margin: auto; padding-bottom: clamp(8px, 1.6vh, 24px); }
    .hero-strip-img { height: clamp(64px, 8.5vh, 104px); }
  }

  /* ─── SMARTPHONE ─── */
  @media (max-width: 640px) {
    html { scroll-padding-top: 72px; }

    .nav { padding: 14px 18px; }
    .nav-brand { gap: 10px; min-width: 0; }
    .nav-brand-mark { height: 38px; }
    .nav-brand-name { font-size: 19px; }
    /* Untertitel immer in einer Zeile, ohne den Menü-Button zu überlappen */
    .nav-brand-sub { white-space: nowrap; font-size: clamp(6px, 1.9vw, 9px); letter-spacing: 0.02em; }

    /* Überschriften auf Handygröße begrenzen — wirkt mit UND ohne data-density */
    .section-head h2, .history-head h2, .process-head h2,
    body[data-density] .display { font-size: clamp(30px, 8vw, 44px); }
    .contact-title,
    body[data-density] .contact-title { font-size: clamp(34px, 9vw, 50px); }
    .hero-title,
    body[data-density] .hero-title { font-size: clamp(32px, min(11.5vw, 6.6vh), 56px); }

    /* Startseite füllt genau eine (sichtbare) Bildschirmhöhe — Inhalt + die drei
       Fotos immer vollständig sichtbar, Abschnitt endet knapp unter den Fotos.
       svh = sichtbare Höhe inkl. Browserleiste, damit nichts dahinter verschwindet. */
    .hero {
      padding-top: clamp(74px, 12.5vh, 110px); padding-bottom: 0;
      /* Höhe um die Sticky-CTA-Leiste reduzieren, damit Hero + Fotos + VKB-Credit
         immer vollständig DARÜBER liegen (Oberkante der Leiste = Unterkante des
         Credit-Banners). */
      height: calc(100vh - var(--cta-bar-h));
      height: calc(100svh - var(--cta-bar-h));
      min-height: 480px;
    }
    .hero-content { margin: auto; padding-top: clamp(6px, 1.5vh, 24px); padding-bottom: clamp(8px, 2vh, 40px); }
    .hero-badge { margin-bottom: clamp(8px, 1.8vh, 22px); padding: 6px 13px; max-width: 100%; }
    /* "Persönlich · Unabhängig · Bayerisch" immer in einer Zeile */
    .hero-badge .eyebrow { white-space: nowrap; font-size: clamp(8px, 2.7vw, 12px); letter-spacing: 0.08em; }
    .hero-sub { margin-top: clamp(10px, 1.7vh, 20px); font-size: clamp(13.5px, 1.9vh, 17px); line-height: 1.45; }
    .hero-actions {
      flex-direction: column; align-items: stretch;
      gap: clamp(8px, 1.3vh, 14px); margin-top: clamp(14px, 2.4vh, 32px); width: 100%;
    }
    .hero-actions .btn { justify-content: center; width: 100%; padding-top: clamp(11px, 1.5vh, 16px); padding-bottom: clamp(11px, 1.5vh, 16px); }
    /* Hero-Fotos: immer drei nebeneinander (nie zwei Spalten), Höhe skaliert mit dem Display */
    .hero-strip {
      grid-template-columns: repeat(3, 1fr);
      margin: 0 -18px; padding: 0 18px clamp(12px, 2vh, 20px); gap: 8px;
    }
    .hero-strip-img { height: clamp(72px, 12vh, 132px); }
    .hero-strip-credit { grid-column: 1 / -1; height: auto; padding: clamp(9px, 1.5vh, 16px) 18px; gap: 12px; }
    .hero-strip-credit .vkb-logo { height: clamp(34px, 5vh, 48px); }

    section { padding: 56px 18px; }
    .section-head { gap: 20px; margin-bottom: 36px; }

    /* Branchen: eine je Zeile, kompakt — schneller Überblick über alle 6 */
    .services-grid { grid-template-columns: 1fr; gap: 10px; }
    .service-spotlight, .service-card, .service-card--wide { grid-column: 1 / -1; }
    .service-spotlight { padding: 20px; gap: 10px; }
    .service-spotlight h3 { font-size: 22px; margin-bottom: 6px; }
    .service-spotlight h3 br { display: none; }
    .service-spotlight p { font-size: 12.5px; line-height: 1.5; margin-bottom: 0; }
    .service-card { padding: 15px 18px; }
    .service-card > div { margin-top: 8px !important; }
    .service-card h3 { font-size: 17px; margin-bottom: 4px; }
    .service-card p { font-size: 12.5px; line-height: 1.5; }
    .service-card--wide > div { grid-template-columns: 1fr !important; gap: 6px !important; margin-top: 8px !important; }

    /* Über uns: kompakter & kleinere Schrift */
    .trust-letter { font-size: clamp(18px, 5vw, 23px); }
    .trust-signature { margin-top: 28px; gap: 14px; flex-wrap: wrap; }
    .trust-signature-avatars img { width: 50px; height: 50px; }
    .trust-signature-name { font-size: 16px; }
    .pillar { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; }
    .pillar-num { font-size: 22px; }
    .pillar h4 { font-size: 18px; }
    .pillar p { font-size: 13px; }

    /* Ablauf: gestapelt, Nummer NEBEN dem Text + durchgezogene Verbindungslinie */
    .process-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
    .process-line { display: none; }
    .process-steps { grid-template-columns: 1fr; gap: 24px; }
    .process-step {
      display: grid; grid-template-columns: 44px 1fr; column-gap: 18px;
      padding-right: 0;
    }
    .process-step::after {
      content: ''; position: absolute;
      left: 21px; top: 22px; bottom: -24px;
      width: 1px; background: var(--navy-line); z-index: 0;
    }
    .process-step:last-child::after { display: none; }
    .process-step-num { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; align-self: start; }
    .process-step h4 { grid-column: 2; font-size: 19px; margin-bottom: 6px; }
    .process-step p { grid-column: 2; font-size: 13px; max-width: none; }
    .process-step-time { grid-column: 2; margin-top: 8px; }

    /* Team: GF-Kacheln einspaltig & quadratisch; Text im unteren Drittel */
    .team-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
    .team-card { aspect-ratio: 1 / 1; }
    .team-card h3 { font-size: 25px; }
    .team-card p { font-size: 13px; margin-top: 8px; }
    .team-card-role { font-size: 10px; }
    /* Roster: kompakt & kleinere Schrift für schnellen Überblick */
    .team-roster { grid-template-columns: 1fr; column-gap: 0; }
    .team-roster-head { padding-bottom: 14px; }
    .team-roster-row { grid-template-columns: 22px 1fr; column-gap: 12px; padding: 15px 0; }
    .team-roster-row .name { font-size: 18px; }
    .team-roster-row .role { font-size: 9.5px; margin-top: 3px; }
    .team-roster-row .bio { width: auto !important; max-width: none; font-size: 12px; line-height: 1.45; margin-top: 6px; }

    /* Geschichte: deutlich kleinere Schrift, näher an Desktop-Optik */
    .history-list { grid-template-columns: 60px 1fr; column-gap: 16px; }
    .history-year { font-size: 11px; letter-spacing: 0.1em; padding-top: 28px; }
    .history-row.is-major .history-year { font-size: 18px; padding-top: 26px; }
    /* Absätze klar rechts vom Punkt/der Linie (padding-left NICHT per Kurzform überschreiben!) */
    .history-event { padding-left: 24px; }
    .history-event h4 { font-size: 16px; }
    .history-row.is-major .history-event h4 { font-size: 18px; }
    .history-event p { font-size: 13px; line-height: 1.55; }
    .history-row > * { padding-top: 22px; padding-bottom: 22px; }
    .history-row.is-major > * { padding-top: 26px; padding-bottom: 26px; }
    .history-event::before { top: 28px; }
    .history-coda { padding: 22px; gap: 20px; }
    .history-coda p { font-size: 17px; }

    /* Kontakt: Einleitungstext kleiner, Kennzahlen 3-spaltig, Standorte 2-spaltig */
    .contact-desc { font-size: 14px; line-height: 1.6; margin-top: 24px; }
    .contact-actions--three .btn { padding: 15px 16px; }
    .contact-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
    .contact-stats .label { font-size: 9px; letter-spacing: 0.1em; margin-bottom: 6px; }
    .contact-stats .value { font-size: clamp(15px, 4.5vw, 22px); }
    .contact-locations { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
    .contact-loc-name { font-size: 10px; margin-bottom: 10px; }
    .contact-loc-addr { font-size: clamp(13px, 4vw, 19px); margin-bottom: 10px; }
    .contact-loc-hours { font-size: 12px; }
    .contact-loc-hours .row .day { width: 40px; }
    .contact-loc-links { margin-top: 10px; gap: 4px; }
    .contact-loc-links a { font-size: 12px; gap: 6px; }

    .map-card { padding: 18px; }
    /* Feste Höhe statt aspect-ratio: Leaflet (height:100%) braucht eine definite
       Höhe, sonst rendert die Karte mit 0px. Reicht zugleich für den Platzhalter. */
    .map-canvas { aspect-ratio: auto; height: 360px; }

    footer { padding: 48px 18px 24px; }
    /* Marke volle Breite, darunter 2 Spalten → beide Standorte nebeneinander */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-bottom: 32px; }
    .footer-col-title { font-size: 10px; margin-bottom: 14px; }
    .footer-col li { font-size: 12.5px; padding: 2px 0; }
    .footer-col a { display: inline-block; padding: 7px 0; }
    .footer-brand-name { font-size: 22px; }
    .footer-vkb { height: 48px; margin-top: 22px; }
    /* Rechtliche Links gestapelt & gut tippbar (44px Touch-Ziel, ≥8px Abstand) */
    .footer-legal { gap: 12px; }
    .footer-legal-links { flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-legal-links a, .footer-legal-links .cc-reopen { min-height: 44px; }
  }

  /* ─── KLEINSTGERÄTE ─── */
  @media (max-width: 380px) {
    .nav { padding: 12px 14px; }
    .nav-brand { gap: 8px; }
    .nav-brand-mark { height: 32px; }
    .nav-brand-name { font-size: 17px; }
    /* Hero-Fotos bleiben drei nebeneinander; Höhe regelt der vh-Wert aus dem ≤640-Block */
    .hero-strip { gap: 6px; }
  }

  /* ─── DESKTOP: Hero füllt genau eine Bildschirmhöhe ───
     Inhalt + die drei Fotos sind immer vollständig sichtbar,
     der Abschnitt endet knapp unterhalb der Fotos. Größen
     skalieren mit der Viewport-Höhe (vh), damit nichts abgeschnitten
     wird – auch auf flacheren Laptop-Displays. */
  @media (min-width: 1025px) {
    .hero {
      height: 100vh;
      min-height: 640px;
      padding-top: clamp(96px, 11vh, 140px);
      padding-bottom: 0;
    }
    .hero-content {
      margin: auto;
      padding-top: clamp(8px, 2vh, 48px);
      padding-bottom: clamp(16px, 3vh, 56px);
    }
    .hero-badge { margin-bottom: clamp(14px, 2.4vh, 36px); }
    .hero-title { font-size: clamp(52px, 8.6vh, 112px); }
    .hero-sub { margin-top: clamp(14px, 2.2vh, 28px); font-size: clamp(17px, 2vh, 24px); }
    .hero-actions { margin-top: clamp(20px, 3.4vh, 44px); }
    .hero-strip-img { height: clamp(120px, 17vh, 200px); }
    .hero-strip-credit { height: clamp(120px, 17vh, 200px); }
    .hero-strip { padding-bottom: clamp(20px, 3vh, 36px); }
  }

  /* ─── QUERFORMAT-SMARTPHONES & iPad-QUERFORMAT ───
     Niedrige, breite Viewports bis 1024px: Der Hero skaliert mit der
     SICHTBAREN Höhe (svh), damit die drei Geschäftsführer-Fotos UND der
     VKB-Streifen darunter immer vollständig sichtbar bleiben – ohne dass
     man scrollen muss und ohne dass etwas abgeschnitten wird. Greift z. B.
     bei Smartphones im Querformat (375–430px hoch) und iPad-Querformat (768px). */
  @media (max-width: 1024px) and (orientation: landscape) and (max-height: 820px) {
    /* height:auto + min-height:100svh + overflow:visible: passt der Inhalt in die
       sichtbare Höhe, sitzt der Streifen am unteren Rand (voll sichtbar); ist die
       Höhe extrem knapp (z. B. iPhone SE quer, 320px), wächst der Hero und die Seite
       scrollt minimal — der Streifen wird nie abgeschnitten. */
    .hero {
      height: auto; min-height: 100vh; min-height: 100svh;
      overflow: visible;
      padding: clamp(58px, 14vh, 92px) 24px 0;
    }
    .hero-content { margin: auto; padding-top: clamp(2px, 1vh, 12px); padding-bottom: clamp(4px, 1.2vh, 16px); }
    .hero-badge { margin-bottom: clamp(4px, 1.4vh, 16px); }
    .hero-badge .eyebrow { white-space: nowrap; font-size: clamp(8px, 1.6vw, 11px); }
    .hero-title,
    body[data-density] .hero-title { font-size: clamp(28px, 7vh, 64px); margin-bottom: 0; }
    .hero-sub { margin-top: clamp(4px, 1.6vh, 16px); font-size: clamp(12px, 2.3vh, 17px); line-height: 1.4; }
    .hero-actions {
      flex-direction: row; align-items: center; justify-content: center;
      gap: 12px; margin-top: clamp(6px, 1.8vh, 20px); width: auto;
    }
    .hero-actions .btn { width: auto; }
    .hero-strip {
      grid-template-columns: repeat(3, 1fr); gap: 8px;
      margin: 0 -24px; padding: 0 24px clamp(8px, 1.6vh, 18px); align-items: end;
    }
    .hero-strip-img { height: clamp(48px, 13vh, 130px); }
    .hero-strip-credit {
      grid-column: 1 / -1; height: auto;
      padding: clamp(7px, 1.4vh, 14px) 16px; gap: 14px;
    }
    .hero-strip-credit .vkb-logo { height: clamp(30px, 6vh, 56px); }
  }

  /* ─── STICKY MOBILE-CTA-LEISTE [Anrufen][Termin] ───
     Wird per main.js auf jeder Seite eingehängt (kein zusätzliches Markup-
     Duplikat) und nur auf Mobil eingeblendet. Liegt unter dem Consent-Banner
     (z-index 1000) und blendet sich bei offenem Mobil-Menü aus. */
  .cta-bar { display: none; }
  @media (max-width: 768px) {
    .cta-bar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      background: rgba(251, 248, 242, 0.94);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border-top: 1px solid var(--navy-line);
      box-shadow: 0 -10px 28px -18px rgba(11, 28, 63, 0.55);
    }
    .cta-bar a {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; border-radius: 3px;
      font-family: var(--sans); font-size: 15px; font-weight: 500;
      letter-spacing: 0.01em;
      transition: transform 0.15s ease, background-color 0.18s ease;
    }
    .cta-bar svg { width: 17px; height: 17px; flex: none; }
    .cta-bar-call { background: var(--navy); color: #fff; }
    .cta-bar-book { background: var(--gold); color: var(--navy-deep); }
    .cta-bar-call:hover { background: var(--navy-soft); }
    .cta-bar-book:hover { background: var(--gold-soft); }
    .cta-bar a:active { transform: scale(0.985); }
    .cta-bar a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
    /* Platz schaffen, damit die Leiste keine Inhalte verdeckt */
    body { padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px)); }
    /* Bei offenem Mobil-Menü ausblenden (Leiste ist Sibling nach #nav) */
    #nav.open ~ .cta-bar { display: none; }
  }

  /* ─── DESKTOP-NAV bei knapper Breite (z. B. iPad Air quer 1180px, kleinere
     Laptops): Abstände/Schrift verdichten und den langen Marken-Untertitel
     ausblenden, damit die Nav-Punkte in EINER Zeile bleiben (keine umbrechenden
     „Über uns" / „Wie wir arbeiten" / „Termin vereinbaren"). */
  @media (min-width: 1025px) and (max-width: 1366px) {
    .nav { padding: 16px 30px; }
    .nav-brand { gap: 12px; }
    .nav-brand-mark { height: 46px; }
    .nav-brand-name { font-size: 20px; }
    .nav-brand-sub { display: none; }
    .nav-links { gap: 20px; }
    .nav-links a { font-size: 12.5px; }
    .nav-cta { padding: 10px 16px; }
  }