/* ===== Lokale Schriften (self-hosted, DSGVO: kein Google-CDN) ===== */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --burgundy: #4F1B26;
    --burgundy-deep: #3A131C;
    --burgundy-light: #5E2230;
    --lime: #FFFFFF;          /* Pure White — UI-Akzent + Hervorhebungen auf dunklen Bereichen */
    --lime-soft: #F0F0F0;     /* Off-white für Hover-States */
    --accent: #4F1B26;        /* Burgunder-Highlight für Fakten-Hervorhebungen in hellen Sections */
    --cream: #F5EFE7;
    --cream-warm: #EFE6D5;
    --white: #ffffff;
    --ink: #1a1a1a;
    --muted: #6b6b6b;
    --line: #e8e0d4;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  /* Skip-Link — sichtbar nur bei Tab-Focus für Tastatur-Navigation */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--burgundy);
    color: var(--white);
    padding: 12px 20px;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    z-index: 100;
    border-bottom-right-radius: 6px;
  }
  .skip-link:focus {
    top: 0;
    outline: 2px solid var(--accent, var(--lime));
    outline-offset: 2px;
  }
  body {
    font-family: 'Manrope', sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ===== LOGO ===== */
  .kuks-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
  }
  .kuks-logo-img {
    height: 44px;
    width: auto;
    display: block;
  }
  footer .kuks-logo-img {
    height: 56px;
    margin-bottom: 8px;
  }
  @media (min-width: 720px) {
    .kuks-logo-img {
      height: 48px;
    }
  }

  /* ===== HERO ===== */
  .hero-nav-wrap {
    background: var(--burgundy);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    gap: 16px;
  }
  @media (min-width: 720px) {
    .nav { padding: 14px 48px; }
  }
  .nav-links {
    display: none;
    gap: 28px;
  }
  .nav-links a {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--lime); }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lime);
    color: var(--burgundy);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 100px;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
  }
  .nav-cta:hover { background: var(--lime-soft); }
  .nav-cta:active { transform: scale(0.97); }
  .nav-cta svg { width: 14px; height: 14px; }
  .nav-cta-num { font-weight: 600; }
  @media (min-width: 720px) {
    .nav-links { display: flex; }
  }

  /* Full-Bleed Hero mit Bild-Background + Text-Overlay */
  .hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('../img/hero-portrait.jpg') right center / cover no-repeat;
  }

  /* Lesbarkeits-Gradient: links stärker für Text auf hellem Bild */
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
      linear-gradient(95deg,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.62) 22%,
        rgba(0,0,0,0.32) 42%,
        rgba(0,0,0,0.05) 60%,
        rgba(0,0,0,0.0) 75%),
      linear-gradient(180deg,
        rgba(0,0,0,0.0) 50%,
        rgba(0,0,0,0.35) 100%);
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 80px 24px 48px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .hero-content-inner {
    max-width: 580px;
  }
  @media (min-width: 720px) {
    .hero-content { padding: 80px 48px 56px; }
  }

  .hero-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .hero-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--lime);
  }

  .hero-headline {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 8vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--white);
    margin-bottom: 20px;
    text-shadow: 0 2px 32px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  }
  .hero-headline > span { display: block; }
  .hero-headline .accent {
    color: var(--lime);
    display: inline;
  }

  .hero-sub {
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 32px;
    max-width: 560px;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 16px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.3);
  }
  .hero-sub strong {
    font-weight: 700;
    color: var(--lime);
  }

  /* 3 Fakten Strip im Hero */
  .hero-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
    max-width: 560px;
  }
  .hero-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    font-weight: 500;
  }
  .hero-fact-mark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    flex-shrink: 0;
  }
  @media (min-width: 540px) {
    .hero-facts {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .hero-fact {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding-left: 12px;
      border-left: 2px solid var(--lime);
    }
    .hero-fact-mark { display: none; }
  }

  .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }
  .hero-cta-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
  }
  .hero-cta-meta strong {
    color: var(--white);
    font-weight: 700;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--lime);
    color: var(--burgundy);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 24px;
    border-radius: 100px;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
    border: none;
    cursor: pointer;
  }
  .btn-primary:hover { background: var(--lime-soft); }
  .btn-primary:active { transform: scale(0.97); }
  .btn-primary svg { width: 18px; height: 18px; }

  /* ===== USP STRIP ===== */
  .usp-strip {
    background: var(--ink);
    color: var(--cream);
    padding: 16px 0;
    overflow: hidden;
    border-top: 1px solid var(--lime);
  }
  .usp-track {
    display: flex;
    gap: 48px;
    animation: scroll 38s linear infinite;
    white-space: nowrap;
    width: max-content;
  }
  .usp-item {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 48px;
  }
  .usp-item::after {
    content: '✻';
    color: var(--lime);
    font-size: 14px;
  }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ===== SECTIONS BASE ===== */
  .section {
    padding: 80px 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .section-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .section-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent);
  }
  .section-headline {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 8vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--burgundy);
    margin-bottom: 16px;
  }
  .section-headline .lime-accent {
    font-family: 'Caveat', cursive;
    color: var(--accent);
    font-weight: 700;
    display: inline-block;
    transform: rotate(-2deg);
    font-size: 0.7em;
    margin-left: 4px;
  }
  /* Lookbook hat dunklen Hintergrund — Caveat-Akzent bleibt weiß */
  .lookbook .section-headline .lime-accent { color: var(--lime); }
  .section-lead {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 40px;
    max-width: 520px;
  }

  /* ===== USP CARDS (Was uns ausmacht) ===== */
  .usp-cards {
    display: grid;
    gap: 16px;
    margin-top: 32px;
  }
  .usp-card {
    background: var(--white);
    padding: 28px 24px;
    border-radius: 4px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
  }
  .usp-card-num {
    font-family: 'Caveat', cursive;
    font-size: 24px;
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
  }
  .usp-card h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--burgundy);
    margin-bottom: 16px;
  }
  .usp-card p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
  }
  .usp-card p strong {
    color: var(--burgundy);
    font-weight: 700;
  }

  /* ===== LOOK BOOK ===== */
  .lookbook {
    background: var(--burgundy-deep);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .lookbook .pattern-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.07;
    pointer-events: none;
  }
  .lookbook .pattern-bg span {
    position: absolute;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 320px;
    color: var(--white);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .lookbook .pattern-bg span:nth-child(1) { top: -120px; left: -60px; }
  .lookbook .pattern-bg span:nth-child(2) { top: 38%; right: -110px; transform: rotate(-8deg); }
  .lookbook .pattern-bg span:nth-child(3) { bottom: -180px; left: 28%; transform: rotate(4deg); }
  .lookbook-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    position: relative;
    z-index: 1;
  }
  @media (min-width: 720px) {
    .lookbook-inner { padding: 100px 48px; }
  }
  .lookbook .section-eyebrow { color: var(--lime); }
  .lookbook .section-eyebrow::before { background: var(--lime); }
  .lookbook .section-headline {
    color: var(--white);
  }
  .lookbook-lead {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    max-width: 540px;
    margin-top: 16px;
    margin-bottom: 48px;
  }
  .lookbook-lead strong { color: var(--lime); font-weight: 700; }

  .lookbook-grid {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }
  .lookbook-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  @media (min-width: 720px) {
    .lookbook-pair {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .lookbook-pair.reverse {
      direction: rtl;
    }
    .lookbook-pair.reverse > * {
      direction: ltr;
    }
  }
  .lookbook-img {
    aspect-ratio: 4 / 5;
    background-color: var(--burgundy-deep);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  /* Look-Pair Bildquellen */
  .lookbook-pair[data-look="04"] .lookbook-img:not(.detail) { background-image: url('../img/look-04-front.jpg'); }
  .lookbook-pair[data-look="04"] .lookbook-img.detail       { background-image: url('../img/look-04-detail.jpg'); }
  .lookbook-pair[data-look="05"] .lookbook-img:not(.detail) { background-image: url('../img/look-05-front.jpg'); }
  .lookbook-pair[data-look="05"] .lookbook-img.detail       { background-image: url('../img/look-05-detail.jpg'); }
  .lookbook-pair[data-look="06"] .lookbook-img:not(.detail) { background-image: url('../img/look-06-front.jpg'); }
  .lookbook-pair[data-look="06"] .lookbook-img.detail       { background-image: url('../img/look-06-detail.jpg'); }
  .lookbook-pair-info {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
  }
  .lookbook-pair-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(44px, 6vw, 64px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--lime);
    flex-shrink: 0;
  }

  /* ===== SALON STORY ===== */
  .salon-story {
    background: var(--cream-warm);
  }
  .salon-story-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    gap: 32px;
  }
  @media (min-width: 720px) {
    .salon-image-slot {
      aspect-ratio: 4 / 5;
      max-width: 380px;
      width: 100%;
      justify-self: center;
      align-self: center;
    }
  }
  @media (min-width: 720px) {
    .salon-photowall {
      max-width: 420px;
      justify-self: center;
      align-self: center;
    }
  }
  @media (min-width: 720px) {
    .salon-photowall {
      max-width: 420px;
      justify-self: center;
      align-self: center;
    }
  }

  /* Promise-Grid (Salon-Section) — Pillars mit großen Nummern links */
  .promise-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .promise-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-top: 1px solid rgba(79, 27, 38, 0.18);
    padding-top: 20px;
  }
  .promise-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6vw, 56px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--lime);
    flex-shrink: 0;
    min-width: 56px;
  }
  .promise-content {
    flex: 1;
    min-width: 0;
  }
  .promise-content h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(19px, 2.8vw, 22px);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--burgundy);
    margin-bottom: 16px;
  }
  .promise-content p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    opacity: 0.85;
  }

  /* Salon-Content (Pillars, kein Bild mehr) */
  .salon-content-grid {
    max-width: 720px;
    margin-bottom: 32px;
  }
  .anti-promise-conclusion .lime {
    color: var(--accent);
  }
  .salon-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
    border-top: 1px solid rgba(79, 27, 38, 0.15);
    padding-top: 32px;
  }
  .salon-meta-item {
    border-top: none;
    padding-top: 0;
  }
  .salon-meta-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--burgundy);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .salon-meta-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
  }
  .staff-card.featured {
    border-color: var(--lime);
    border-width: 2px;
  }
  .staff-card.active {
    border-color: var(--burgundy);
    box-shadow: 0 0 0 4px rgba(79, 27, 38, 0.08);
  }
  .staff-card.active .staff-select-btn {
    background: var(--lime);
    color: var(--burgundy);
  }
  .staff-card.active .staff-select-btn::before {
    content: '✓';
    font-size: 16px;
  }

  /* Einheitliches Team-Grid (5 Personen, 3+2 zentriert) */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* Mobile: 2 Spalten */
    gap: 28px 16px;
    margin-top: 36px;
  }
  .team-member {
    text-align: left;
    min-width: 0;
  }
  .team-member-photo-wrap {
    position: relative;
    margin-bottom: 14px;
  }
  .team-member-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: var(--cream-warm);
    filter: grayscale(100%);
  }
  .team-member-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 3vw, 22px);
    color: var(--burgundy);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
  }
  .team-member-role {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  @media (min-width: 720px) {
    .staff-cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
    .staff-body {
      display: flex;
      flex-direction: column;
    }
    .staff-card .staff-select-btn {
      margin-top: auto;
    }
  }

  /* ===== REVIEWS ===== */
  .reviews {
    background: var(--burgundy-deep);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .reviews-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    position: relative;
    z-index: 2;
  }
  .reviews .section-eyebrow { color: var(--lime); }
  .reviews .section-eyebrow::before { background: var(--lime); }
  .reviews .section-headline { color: var(--white); }
  .reviews-grid {
    display: grid;
    gap: 16px;
    margin-top: 32px;
  }
  .review {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 24px;
  }
  .review-stars {
    color: var(--lime);
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
  }
  .review p {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 14px;
    opacity: 0.95;
  }
  .review-author {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0.7;
  }
  .reviews-google {
    margin-top: 32px;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
  }
  .reviews-google a {
    color: var(--lime);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--lime);
    padding-bottom: 1px;
  }

  /* ===== CTA SECTION (Anruf statt Form) ===== */
  .cta-section {
    background: var(--burgundy);
    color: var(--white);
    padding: 80px 24px 100px;
    position: relative;
    overflow: hidden;
  }
  .cta-section .pattern-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.07;
    pointer-events: none;
  }
  .cta-section .pattern-bg span {
    position: absolute;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 320px;
    color: var(--white);
    letter-spacing: -0.04em;
  }
  .cta-section .pattern-bg span:nth-child(1) { top: -100px; left: -50px; }
  .cta-section .pattern-bg span:nth-child(2) { bottom: -160px; right: -40px; transform: rotate(-12deg); }

  .cta-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .cta-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .cta-eyebrow::before, .cta-eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--lime);
  }
  .cta-headline {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 9vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
  }
  .cta-headline .accent { color: var(--lime); }
  .cta-sub {
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 36px;
    color: rgba(255,255,255,0.85);
  }
  .cta-sub strong { color: var(--lime); font-weight: 700; }

  /* Großer Telefon-Block */
  .cta-phone-block {
    background: var(--lime);
    color: var(--burgundy);
    border-radius: 8px;
    padding: 28px 24px;
    margin-bottom: 16px;
    text-decoration: none;
    display: block;
    transition: transform 0.2s, background 0.2s;
  }
  .cta-phone-block:hover { background: var(--lime-soft); transform: translateY(-2px); }
  .cta-phone-block:active { transform: translateY(0); }
  .cta-phone-label {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.7;
  }
  .cta-phone-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 8vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .cta-phone-num svg { width: 32px; height: 32px; flex-shrink: 0; }
  @media (min-width: 540px) {
    .cta-trust { grid-template-columns: repeat(3, 1fr); }
  }

  /* ===== INFO SECTION ===== */
  .info-section {
    background: var(--cream);
  }
  .info-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    gap: 28px;
  }
  .info-block {
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  .info-block h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: var(--burgundy);
    margin-bottom: 16px;
    text-transform: uppercase;
  }
  .info-block p, .info-block a {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    text-decoration: none;
  }
  .info-block a {
    color: var(--burgundy);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
    font-weight: 600;
  }
  .info-block .small {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.5;
  }

  /* ===== FOOTER ===== */
  footer {
    background: var(--ink);
    color: var(--white);
    padding: 48px 24px 32px;
    text-align: center;
  }
  footer p {
    font-size: 12px;
    opacity: 0.55;
    line-height: 1.7;
  }
  footer p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
  .footer-credit { opacity: 0.5; }

  /* ===== FAQ ===== */
  .faq-section {
    background: var(--cream);
  }
  .faq-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
  }
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
  }
  @media (min-width: 720px) {
    .faq-inner { padding: 100px 48px; }
    .faq-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0 48px;
    }
  }
  .faq-item {
    border-bottom: 1px solid rgba(79, 27, 38, 0.18);
  }
  .faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 22px 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 2.4vw, 19px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--burgundy);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: color 0.2s;
  }
  .faq-question:hover { color: var(--burgundy-deep); }
  .faq-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.3s, background 0.2s;
    font-family: 'Manrope', sans-serif;
  }
  .faq-item[open] .faq-toggle {
    transform: rotate(45deg);
  }
  .faq-answer {
    padding: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.88;
    max-width: 540px;
  }
  .faq-answer strong {
    color: var(--burgundy);
    font-weight: 700;
  }

  /* ===== RESPONSIVE ===== */
  @media (min-width: 720px) {
    .section { padding: 100px 48px; }
    .cta-section { padding: 100px 48px; }
    .info-grid { padding: 100px 48px; }
    .reviews-inner { padding: 100px 48px; }
    .salon-story-grid { padding: 100px 48px; }
    .usp-cards { grid-template-columns: repeat(3, 1fr); }
    .reviews-grid { grid-template-columns: repeat(3, 1fr); }
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .salon-meta { grid-template-columns: repeat(4, 1fr); }
  }

  /* ===== STICKY MOBILE PHONE-CTA ===== */
  /* Initial versteckt – erscheint erst, wenn der Hero aus dem Viewport scrollt */
  .sticky-call {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--lime);
    color: var(--burgundy);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.15s ease;
  }
  body.is-past-hero .sticky-call {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Sticky verschwindet wieder, wenn der CTA-Block ins Bild kommt */
  body.is-near-cta .sticky-call {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
  }
  .sticky-call:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }
  .sticky-call svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  @media (min-width: 720px) {
    .sticky-call { display: none; }
  }
  @media (max-width: 719px) {
    body.is-past-hero { padding-bottom: 76px; }
  }

  /* ===== HERO MOBILE TUNING ===== */
  /* Personen-Bild ist Hero-Background (Desktop + Mobile). Auf Mobile wird das
     Bild horizontal so positioniert, dass beide Personen rechts sichtbar bleiben.
     Text-Block links, schmaler, am unteren Rand verankert (justify-content: flex-end),
     spart vertikalen Platz. Drei "facts" ausgeblendet — USP-Strip drunter zeigt sie. */
  @media (max-width: 719px) {
    .hero {
      /* Volle Höhe minus Sticky-Nav */
      min-height: calc(100vh - 72px);
      justify-content: flex-end;
    }
    .hero-bg {
      background-image: url('../img/hero-portrait-mobile.jpg');
      /* Bild nach oben ziehen, damit die Köpfe über dem Text sitzen */
      background-position: center -110px;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-color: #000;
    }
    .hero-overlay {
      /* Weicher Übergang am unteren Bildrand zum schwarzen Bereich */
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0.0)  0%,
          rgba(0,0,0,0.0) 55%,
          rgba(0,0,0,0.65) 72%,
          rgba(0,0,0,0.95) 88%);
    }
    .hero-content {
      padding: 24px 20px 80px;
    }
    .hero-content-inner {
      max-width: 100%;
    }
    .hero-eyebrow {
      margin-bottom: 12px;
      font-size: 11px;
    }
    .hero-headline {
      font-size: clamp(34px, 10vw, 52px);
      margin-bottom: 14px;
    }
    .hero-sub {
      font-size: 16px;
      line-height: 1.55;
      max-width: none;
      margin-bottom: 20px;
    }
    .hero-facts { display: none; }
    .hero-cta-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 18px;
      margin-top: 4px;
    }
    .hero-cta-row .btn-primary {
      padding: 20px 30px;
      font-size: 18px;
      letter-spacing: -0.01em;
    }
    .hero-cta-row .btn-primary svg {
      width: 22px;
      height: 22px;
    }
    .hero-cta-meta {
      font-size: 13px;
      text-align: left;
    }
  }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sticky-call { transition: none; }
  }

  /* ===== LEGAL PAGES (Impressum / Datenschutz) ===== */
  .legal-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 24px 80px;
  }
  @media (min-width: 720px) {
    .legal-main { padding: 80px 48px 100px; }
  }
  .legal-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .legal-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent);
  }
  .legal-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 7vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--burgundy);
    margin-bottom: 32px;
  }
  .legal-main h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 3.5vw, 26px);
    letter-spacing: -0.02em;
    color: var(--burgundy);
    margin: 36px 0 12px;
  }
  .legal-main h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--burgundy);
    margin: 24px 0 8px;
  }
  .legal-main p,
  .legal-main li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .legal-main ul {
    padding-left: 22px;
    margin-bottom: 14px;
  }
  .legal-main li { margin-bottom: 6px; }
  .legal-main a {
    color: var(--burgundy);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 2px;
  }
  .legal-main strong { color: var(--burgundy); font-weight: 700; }
  .legal-contact-block {
    background: var(--cream-warm);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 20px 22px;
    margin: 20px 0 28px;
  }
  .legal-contact-block p { margin-bottom: 4px; }
  .legal-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--burgundy);
    text-decoration: none;
  }
  .legal-back::before { content: '←'; }
  .legal-updated {
    font-size: 13px;
    color: var(--muted);
    margin-top: 32px;
    font-style: italic;
  }