/*
  MG HAIRDESIGN — v5 (Aria / Flowcraft Brand-Engineering)
  Palette:  Silber & Anthrazit — logo-angeglichen, kühl-edel, kein warmer Ton
  Type:     DM Serif Display (Didone) + DM Sans — lokal gehostet (DSGVO)
  Doktrin:  großzügige Weißraum · soft contrast · 0 Akzentfarbe · dezenter Silber-Sheen
            0 border-radius (Editorial) · negative tracking · ghost CTAs
*/

/* ── FONTS (lokal, DSGVO) ────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('assets/fonts/dm-sans-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/dm-serif-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('assets/fonts/dm-serif-display-400i.woff2') format('woff2');
}

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Helle, silbrig-neutrale Basis (statt warm-putty) */
  --paper:      #F5F5F6;   /* primary background */
  --paper-2:    #ECEDEF;   /* secondary bg */
  --paper-3:    #FFFFFF;   /* cards / surfaces */
  --paper-4:    #E4E5E8;   /* sunken bg */

  --line:       #E2E2E6;   /* hairline borders */
  --line-2:     #D2D3D8;   /* stronger dividers */

  /* Text — kühles Anthrazit, nie pures Schwarz */
  --ink:        #18181B;   /* primary text */
  --ink-2:      #2A2A30;   /* secondary text — AA-strict für Body-Copy auf allen Paper-Tönen */
  --ink-3:      #1F1F23;   /* tertiary / captions — Hierarchie über Größe/Spacing, Farbe maximal AA-sicher */

  /* Dunkle Sektionen */
  --charcoal:   #1C1D21;
  --charcoal-2: #26272C;
  --charcoal-3: #34353B;

  --white:      #FFFFFF;

  /* Silber-Skala */
  --silver-1:   #E8E9EC;
  --silver-2:   #C9CACF;
  --silver-3:   #A0A1A8;
  --silver-4:   #76777E;

  /* Metallic sheens (wie Rund-Logo) — sparsam, nur Akzentflächen */
  --silver-sheen: linear-gradient(135deg, #FCFCFD 0%, #DDDEE2 38%, #B4B5BC 63%, #EAEBEE 100%);
  --dark-sheen:   linear-gradient(158deg, #2B2C31 0%, #1A1A1C 100%);

  /* Typography */
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1.0625rem;  /* 17px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.625rem;   /* 26px */
  --text-2xl:   2.25rem;    /* 36px */
  --text-3xl:   3.25rem;    /* 52px */
  --text-hero:  clamp(2.75rem, 7vw, 6.25rem);

  /* Spacing */
  --sp-xxs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 9rem;

  /* Layout */
  --max-w:  1300px;
  --nav-h:  68px;

  /* Motion */
  --t:      300ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-sm: 0 1px 2px rgba(24,24,27,0.04), 0 2px 8px rgba(24,24,27,0.04);
  --shadow-md: 0 4px 12px rgba(24,24,27,0.06), 0 12px 32px rgba(24,24,27,0.08);
  --shadow-lg: 0 20px 60px rgba(24,24,27,0.14);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  text-rendering: optimizeLegibility;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.65;
  min-height: 100dvh;
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
address { font-style: normal; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 400; }
p { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}
.section { padding-block: clamp(var(--sp-xl), 10vw, var(--sp-3xl)); }
.section--tight { padding-block: clamp(var(--sp-lg), 7vw, var(--sp-2xl)); }

/* ── REVEAL ──────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }

/* ── EYEBROW / HEADINGS ──────────────────────────────────────── */
.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: var(--sp-sm);
}
.section-h2 {
  font-family: var(--display);
  font-size: var(--text-3xl);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-h2 em { font-style: italic; }
.section-intro { margin-bottom: clamp(var(--sp-lg), 5vw, var(--sp-2xl)); }
.body-copy { color: var(--ink-2); font-size: var(--text-md); max-width: 46ch; margin-bottom: var(--sp-md); font-weight: 400; }
.body-copy--muted { font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--sp-lg); }
.body-copy--muted a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-solid, .btn-ghost, .btn-outline, .btn-submit {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; padding: 1.05em 2.2em; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--charcoal-2); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(2px); }
.btn-ghost:hover { background: var(--white); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-text-link { color: var(--white); font-size: var(--text-sm); letter-spacing: 0.06em; opacity: 0.9; transition: opacity var(--t); }
.btn-text-link:hover { opacity: 1; }

/* ── NAV ─────────────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background var(--t), box-shadow var(--t), border-color var(--t); border-bottom: 1px solid transparent; }
.nav.is-top { background: transparent; }
.nav.is-scrolled { background: rgba(245,245,246,0.85); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(24,24,27,0.02); }
.nav-inner { max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 5rem); height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-md); }
.nav-left { display: flex; gap: var(--sp-lg); }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-md); }
.nav-link { font-size: var(--text-sm); letter-spacing: 0.06em; color: var(--ink-2); position: relative; padding-block: 0.4em; transition: color var(--t); }
.nav-link::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: currentColor; transition: width var(--t); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { width: 100%; }
.nav.is-top .nav-link { color: rgba(255,255,255,0.92); }
.nav.is-top .nav-link:hover { color: #fff; }
.nav-logo { display: inline-flex; align-items: center; justify-self: center; height: 100%; }
.nav-logo img { height: 48px; width: auto; transition: filter var(--t), opacity var(--t); }
/* Logo ist schwarz auf transparentem PNG → über Hero invertieren auf Weiß */
.nav.is-top .nav-logo img { filter: brightness(0) invert(1); }
.nav-book { font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 0.7em 1.4em; border: 1px solid var(--ink); color: var(--ink); transition: background var(--t), color var(--t); }
.nav-book:hover { background: var(--ink); color: var(--paper); }
.nav.is-top .nav-book { border-color: rgba(255,255,255,0.6); color: #fff; }
.nav.is-top .nav-book:hover { background: #fff; color: var(--ink); }

.hamburger { display: none; width: 30px; height: 30px; flex-direction: column; justify-content: center; gap: 5px; }
.hamburger span { display: block; height: 1.5px; width: 22px; background: var(--ink); transition: transform var(--t), opacity var(--t); }
.nav.is-top .hamburger span { background: #fff; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mob-menu { position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--sp-md) clamp(1.25rem,5vw,5rem) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xs); transform: translateY(calc(-100% - var(--nav-h) - 2px)); transition: transform var(--t); z-index: 99; visibility: hidden; }
.mob-menu.open { transform: translateY(0); visibility: visible; }
.mob-link { font-size: var(--text-lg); padding: 0.6em 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.mob-link.mob-book { color: var(--ink); font-weight: 500; border-bottom: none; margin-top: var(--sp-xs); }

/* ── HERO ────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero-img { position: absolute; inset: 0; z-index: 0; }
.hero-img picture, .hero-img img, .hero-img svg, .hero-placeholder-svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-img img { object-position: center 45%; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,18,20,0.55) 0%, rgba(18,18,20,0.30) 35%, rgba(18,18,20,0.42) 65%, rgba(18,18,20,0.82) 100%); }
.hero-content { position: relative; z-index: 2; max-width: var(--max-w); width: 100%; margin-inline: auto; padding: 0 clamp(1.25rem,5vw,5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.hero-eyebrow { color: rgba(255,255,255,0.86); font-size: var(--text-xs); letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: var(--sp-md); }
.hero-h1 { font-family: var(--display); color: #fff; font-size: var(--text-hero); line-height: 0.98; letter-spacing: -0.02em; margin-bottom: var(--sp-lg); }
.hero-h1 em { font-style: italic; color: var(--silver-1); }
.hero-ctas { display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap; }

.hero-bar { position: relative; z-index: 2; max-width: var(--max-w); width: 100%; margin-inline: auto; padding: var(--sp-md) clamp(1.25rem,5vw,5rem); display: flex; align-items: center; gap: clamp(1rem,3vw,2.5rem); border-top: 1px solid rgba(255,255,255,0.16); }
.hero-rating { display: flex; align-items: center; gap: 0.7rem; color: #fff; }
.rating-num { font-family: var(--display); font-size: var(--text-xl); line-height: 1; }
.rating-detail { display: flex; flex-direction: column; }
.stars { color: var(--silver-1); font-size: var(--text-sm); letter-spacing: 1px; }
.rating-count { color: rgba(255,255,255,0.7); font-size: var(--text-xs); letter-spacing: 0.04em; }
.hero-bar-sep { width: 1px; height: 30px; background: rgba(255,255,255,0.18); }
.hero-bar-copy { color: rgba(255,255,255,0.82); font-size: var(--text-sm); letter-spacing: 0.04em; flex: 1; }
.hero-address { color: rgba(255,255,255,0.82); font-size: var(--text-sm); letter-spacing: 0.04em; }

/* ── SPLIT CARDS ─────────────────────────────────────────────── */
.split-section { display: grid; grid-template-columns: 1fr 1fr; }
.split-card { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.split-img { position: absolute; inset: 0; }
.split-img svg, .split-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.split-card:hover .split-img svg, .split-card:hover .split-img img { transform: scale(1.04); }
.split-label { position: absolute; left: clamp(1.25rem,3vw,2.5rem); bottom: clamp(1.25rem,3vw,2.5rem); display: flex; align-items: center; gap: 0.7em; color: #fff; font-family: var(--display); font-size: var(--text-xl); letter-spacing: -0.01em; }
.split-label--dark { color: var(--ink); }
.split-label svg { transition: transform var(--t); }
.split-card:hover .split-label svg { transform: translateX(6px); }

/* ── LEISTUNGEN ──────────────────────────────────────────────── */
.leistungen-section { background: var(--paper); }
.services-table { border-top: 1px solid var(--line-2); }
.service-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) 2.2fr 1fr auto; gap: var(--sp-md); align-items: center; padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); transition: padding-inline var(--t), background var(--t); }
.service-row:hover { background: var(--paper-3); padding-inline: var(--sp-md); }
.service-name h3 { font-family: var(--display); font-size: var(--text-2xl); letter-spacing: -0.01em; line-height: 1; }
.service-desc p { color: var(--ink-2); font-size: var(--text-base); font-weight: 400; max-width: 42ch; }
.service-tags { color: var(--ink-3); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.service-price { color: var(--ink-2); font-size: var(--text-sm); letter-spacing: 0.02em; white-space: nowrap; }
.service-cta { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line-2); color: var(--ink); transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); }
.service-cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateX(3px); }

/* ── QUOTE ───────────────────────────────────────────────────── */
.quote-section { background: var(--charcoal); color: var(--white); padding-block: clamp(var(--sp-2xl), 12vw, var(--sp-3xl)); position: relative; overflow: hidden; }
.quote-section::before { content:""; position:absolute; inset:0; background: var(--dark-sheen); opacity: 0.6; pointer-events:none; }
.big-quote { position: relative; text-align: center; max-width: 22ch; margin-inline: auto; }
.big-quote p { font-family: var(--display); font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.16; letter-spacing: -0.015em; }
.big-quote em { font-style: italic; color: var(--silver-2); }
.big-quote footer { margin-top: var(--sp-lg); }
.big-quote cite { font-style: normal; font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* ── ABOUT ───────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.about-visual { position: relative; }
.about-img-primary { aspect-ratio: 4/5; overflow: hidden; box-shadow: var(--shadow-md); }
.about-img-primary picture, .about-img-primary img, .about-img-primary svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img-secondary { position: absolute; right: -8%; bottom: -10%; width: 46%; aspect-ratio: 3/4; overflow: hidden; border: 6px solid var(--paper); box-shadow: var(--shadow-md); }
.about-img-secondary picture, .about-img-secondary img, .about-img-secondary svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin: var(--sp-lg) 0; }
.pillar { border-top: 1px solid var(--line-2); padding-top: var(--sp-sm); }
.pillar-label { font-family: var(--display); font-size: var(--text-lg); display: block; margin-bottom: 0.3em; }
.pillar p { font-size: var(--text-sm); color: var(--ink-3); font-weight: 400; }

/* ── GALLERY / LOOKBOOK ──────────────────────────────────────── */
.gallery-section { background: var(--paper-2); }
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: clamp(0.5rem, 1.4vw, 1rem); }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--paper-4); }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 3/2; }
.gallery-item picture, .gallery-item img, .gallery-item svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
.gallery-item:hover img, .gallery-item:hover svg, .gallery-item:hover picture img { transform: scale(1.05); }
.gallery-cap { position: absolute; left: 1rem; bottom: 0.85rem; color: #fff; font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; z-index: 2; opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); }
.gallery-item:hover .gallery-cap { opacity: 1; transform: translateY(0); }

/* ── TEAM ────────────────────────────────────────────────────── */
.team-section { background: var(--paper); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: var(--sp-lg); }
.team-card { display: flex; flex-direction: column; }
.team-photo { aspect-ratio: 3/4; overflow: hidden; background: var(--paper-4); margin-bottom: var(--sp-md); }
.team-photo img, .team-photo svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.team-card:hover .team-photo img, .team-card:hover .team-photo svg { transform: scale(1.04); }
.team-name { font-family: var(--display); font-size: var(--text-2xl); line-height: 1; margin-bottom: 0.15em; }
.team-role { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-sm); }
.team-bio { font-size: var(--text-base); color: var(--ink-2); font-weight: 400; }
@media (max-width: 760px) {
  .team-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .team-card { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-md); align-items: center; }
  .team-photo { margin-bottom: 0; }
}

/* ── REELS / IN BEWEGUNG ─────────────────────────────────────── */
.reels-section { background: var(--paper-2); }
.reels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.6vw, 1.25rem); margin-top: var(--sp-lg); }
.reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-sm); }
.reel-video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .reels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .reels-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
}

/* ── REVIEWS ─────────────────────────────────────────────────── */
.reviews-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.review-card { background: var(--paper-3); border: 1px solid var(--line); padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); transition: transform var(--t), box-shadow var(--t); }
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review-card--featured { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.review-stars { color: var(--silver-4); font-size: var(--text-sm); letter-spacing: 1px; }
.review-card--featured .review-stars { color: var(--silver-2); }
.review-card blockquote p { font-size: var(--text-base); line-height: 1.55; color: var(--ink-2); font-weight: 400; }
.review-card--featured blockquote p { color: rgba(255,255,255,0.9); }
.review-card footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.review-name { font-weight: 500; font-size: var(--text-sm); }
.review-location { font-size: var(--text-xs); color: var(--ink-3); letter-spacing: 0.06em; }
.review-card--featured .review-location { color: rgba(255,255,255,0.55); }

/* ── PRICING ─────────────────────────────────────────────────── */
.pricing-section { background: var(--paper); }
.pricing-note { font-size: var(--text-sm); color: var(--ink-3); max-width: 50ch; margin-top: var(--sp-sm); font-weight: 400; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 6vw, 5rem); margin-top: var(--sp-lg); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-md); padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.price-label { font-size: var(--text-md); }
.price-label small { display: block; font-size: var(--text-xs); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.price-dots { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.price-value { font-family: var(--display); font-size: var(--text-lg); white-space: nowrap; }

/* ── BOOKING ─────────────────────────────────────────────────── */
.booking-section { background: var(--paper-2); }
.booking-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); }
.booking-info .info-block { margin-top: var(--sp-lg); }
.info-label { font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-xs); }
.booking-info address { font-size: var(--text-md); color: var(--ink-2); line-height: 1.7; }
.hours-table { width: 100%; max-width: 340px; border-collapse: collapse; }
.hours-table td { padding: 0.5rem 0; font-size: var(--text-base); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.hours-table td:last-child { text-align: right; color: var(--ink); }
.hours-table tr.closed td { color: var(--ink-3); }
.hours-table--sm td { font-size: var(--text-sm); padding: 0.3rem 0; }

.contact-quick { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.quick-btn { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--text-sm); letter-spacing: 0.04em; padding: 0.85em 1.4em; border: 1px solid var(--line-2); background: var(--paper-3); transition: border-color var(--t), background var(--t), transform var(--t); }
.quick-btn:hover { border-color: var(--ink); transform: translateY(-2px); }
.quick-btn svg { width: 18px; height: 18px; }
.quick-btn--wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.quick-btn--call:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.booking-form-wrap { background: var(--paper-3); padding: clamp(1.5rem, 3vw, 2.75rem); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }

/* Salonkee-Buchungskarte */
.booking-card { background: var(--paper-3); padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-sm); }
.booking-eyebrow { font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.booking-card-title { font-family: var(--display); font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.booking-card-body { font-size: var(--text-md); color: var(--ink-2); font-weight: 400; max-width: 42ch; }
.booking-bullets { display: flex; flex-direction: column; gap: 0.45rem; margin: var(--sp-xs) 0 var(--sp-sm); }
.booking-bullets li { position: relative; padding-left: 1.4em; font-size: var(--text-base); color: var(--ink-2); font-weight: 400; }
.booking-bullets li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.btn-submit--link { text-decoration: none; }
.booking-fineprint { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--sp-xxs); }
.booking-fineprint a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.booking-form { display: flex; flex-direction: column; gap: var(--sp-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--silver-3); }
.field input, .field select, .field textarea { background: var(--paper); border: 1px solid var(--line-2); padding: 0.85em 1em; font-size: var(--text-base); color: var(--ink); transition: border-color var(--t), background var(--t); }
.field input::placeholder, .field textarea::placeholder { color: var(--silver-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); }
.field textarea { resize: vertical; min-height: 84px; }

.consent { flex-direction: row; align-items: flex-start; gap: 0.7rem; }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ink); }
.consent label { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--ink-3); line-height: 1.5; }
.consent label a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink-2); }

.btn-submit { justify-content: center; background: var(--ink); color: var(--paper); border: none; width: 100%; }
.btn-submit:hover:not(:disabled) { background: var(--charcoal-2); }
.btn-submit:disabled { opacity: 0.6; cursor: progress; }
.form-error { color: #a23b3b; font-size: var(--text-sm); display: none; }
.form-error.show { display: block; }

.booking-success { text-align: center; padding: var(--sp-xl) var(--sp-md); }
.success-icon { width: 56px; height: 56px; margin: 0 auto var(--sp-md); color: var(--ink); }
.success-title { font-family: var(--display); font-size: var(--text-2xl); margin-bottom: var(--sp-xs); }
.success-body { color: var(--ink-2); font-weight: 400; max-width: 40ch; margin-inline: auto; }

/* ── CONTACT / MAP ───────────────────────────────────────────── */
.contact-section { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: stretch; }
.contact-info .info-block { margin-top: var(--sp-lg); }
.map-wrap { position: relative; min-height: 380px; background: var(--paper-4); overflow: hidden; border: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-sm); text-align: center; padding: var(--sp-lg); background: var(--paper-4); }
.map-consent svg { width: 34px; height: 34px; color: var(--ink-3); }
.map-consent p { font-size: var(--text-sm); color: var(--ink-3); max-width: 36ch; font-weight: 400; }
.map-consent .map-consent-note { font-size: var(--text-xs); color: var(--ink-3); }

/* ── STICKY MOBILE CTA ───────────────────────────────────────── */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; grid-template-columns: 1fr 1fr 1fr; background: var(--paper-3); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(24,24,27,0.08); }
.mobile-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0.7rem 0.4rem; font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--ink-2); }
.mobile-cta a + a { border-left: 1px solid var(--line); }
.mobile-cta a svg { width: 19px; height: 19px; }
.mobile-cta .mc-book { background: var(--ink); color: var(--paper); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,0.7); padding-block: clamp(var(--sp-xl), 7vw, var(--sp-2xl)); position: relative; }
.footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-md); padding-bottom: var(--sp-lg); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); }
.footer-tagline { font-family: var(--display); font-size: var(--text-lg); color: rgba(255,255,255,0.85); letter-spacing: 0.02em; }
.footer-mid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--sp-lg); padding-block: var(--sp-lg); }
.footer-col-head { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--sp-sm); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a { color: rgba(255,255,255,0.75); font-size: var(--text-sm); transition: color var(--t); }
.footer-col a:hover { color: #fff; }
.footer-col--address address { color: rgba(255,255,255,0.75); font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--sp-sm); }
.footer-col--address .hours-table td { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.1); }
.footer-col--address .hours-table td:last-child { color: rgba(255,255,255,0.85); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); padding-top: var(--sp-lg); border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--text-xs); letter-spacing: 0.04em; color: rgba(255,255,255,0.5); }
.footer-legal { display: flex; gap: var(--sp-md); }
.footer-legal a { color: rgba(255,255,255,0.6); transition: color var(--t); }
.footer-legal a:hover { color: #fff; }

/* ── LEGAL PAGES (Impressum / Datenschutz) ───────────────────── */
.legal-main { max-width: 760px; margin-inline: auto; padding: calc(var(--nav-h) + var(--sp-2xl)) clamp(1.25rem,5vw,2rem) var(--sp-2xl); }
.legal-main h1 { font-family: var(--display); font-size: var(--text-3xl); letter-spacing: -0.02em; margin-bottom: var(--sp-lg); }
.legal-main h2 { font-family: var(--display); font-size: var(--text-xl); margin: var(--sp-lg) 0 var(--sp-xs); }
.legal-main h3 { font-size: var(--text-md); font-weight: 500; margin: var(--sp-md) 0 var(--sp-xxs); }
.legal-main p, .legal-main address, .legal-main li { color: var(--ink-2); font-size: var(--text-base); font-weight: 400; margin-bottom: var(--sp-xs); line-height: 1.7; }
.legal-main ul { padding-left: 1.2em; list-style: disc; }
.legal-main a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-back { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--sp-lg); }
.legal-back:hover { color: var(--ink); }
.legal-note { background: var(--paper-2); border-left: 2px solid var(--silver-3); padding: var(--sp-sm) var(--sp-md); font-size: var(--text-sm); color: var(--ink-3); margin: var(--sp-md) 0; }
.legal-back--end { margin-top: 2.5rem; }

/* Honeypot — visuell entfernt, für Bots erreichbar (CSP: keine inline-styles) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-left, .nav-right-links { display: none; }
  .nav-right .nav-book { display: none; }
  .hamburger { display: flex; }
  .nav-inner { grid-template-columns: 1fr auto 1fr; }
  .about-grid, .booking-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-img-secondary { right: 0; width: 40%; }
  .pricing-grid { grid-template-columns: 1fr; }
  .mobile-cta { display: grid; }
  body { padding-bottom: 64px; }  /* Platz für sticky CTA */
  .quote-section, .site-footer { padding-bottom: calc(clamp(var(--sp-xl),7vw,var(--sp-2xl)) + 64px); }
}
@media (max-width: 680px) {
  .split-section { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 1fr auto; gap: 0.4rem var(--sp-sm); padding: var(--sp-md) 0; }
  .service-desc { grid-column: 1 / -1; order: 3; }
  .service-tags { grid-column: 1; order: 4; }
  .service-cta { grid-row: 1; grid-column: 2; }
  .service-row:hover { padding-inline: 0; }
  .hero-bar { flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md); }
  .hero-bar-sep { display: none; }
  .hero-bar-copy { flex-basis: 100%; order: 3; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--wide { grid-column: span 1; }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-mid { grid-template-columns: 1fr; gap: var(--sp-md); }
  .footer-top { flex-direction: column; align-items: flex-start; }
}