/* ============================================================
   NUBA — Christoph Nussbaumer · Design-System (dunkle Variante)
   Schriften LOKAL (kein Google-CDN, DSGVO-konform)
   ============================================================ */

@font-face{
  font-family:'Fraunces';src:url('fonts/Fraunces.ttf') format('truetype');
  font-weight:300 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';src:url('fonts/Fraunces-Italic.ttf') format('truetype');
  font-weight:300 500;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk.ttf') format('truetype');
  font-weight:300 600;font-style:normal;font-display:swap;
}

:root{
  --black:#070B1C;
  --navy:#000E3D;      /* CI-Kernblau – nur noch für kleine Akzente / Text auf Gold */
  --panel:#0A1228;     /* ruhiger, dunkler Blauton für Flächen-Inseln (statt kräftigem Kernblau) */
  --gold:#EFC980;
  --cream:#FFFAEC;
  --text:rgba(255,250,236,.88);
  --text-soft:rgba(255,250,236,.66);
  --hairline:rgba(239,201,128,.28);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:dark only;}
html,body{background:var(--black) !important;}
body{
  color:var(--text);
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;
}
section,footer{background:var(--black);}
h1,h2,h3,.serif{font-family:'Fraunces',serif;font-weight:300;line-height:1.15;letter-spacing:-.01em;color:var(--cream);}
em{font-style:italic;color:var(--gold);font-weight:300;}
a{color:inherit;}
img{display:block;}

/* ---------- Barrierefreiheit (a11y) ---------- */
/* Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;
}
/* "Zum Inhalt springen"-Link – nur für Tastatur/Screenreader sichtbar */
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  background:var(--gold);color:var(--navy);font-weight:500;
  padding:.7rem 1.3rem;text-decoration:none;transition:top .2s ease;
}
.skip-link:focus{top:1rem;}
/* Nur für Screenreader (unsichtbar, aber vorlesbar) */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
#main:focus{outline:none;}
.wrap{max-width:1100px;margin:0 auto;padding:0 6vw;}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 6vw;}
.eyebrow{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);font-weight:500;}

/* ---------- Navigation ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(7,11,28,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:1100px;margin:0 auto;padding:1.05rem 6vw;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.logo{font-family:'Fraunces',serif;font-size:1.05rem;letter-spacing:.02em;text-decoration:none;color:var(--cream);line-height:1.1;}
.logo span{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-top:.18rem;}
.logo{display:inline-flex;align-items:center;}
.logo-img{height:38px;width:auto;display:block;}
@media(max-width:760px){.logo-img{height:28px;}}
.nav-links{display:flex;gap:1.4rem;list-style:none;align-items:center;}
.nav-links a{font-size:.85rem;letter-spacing:.06em;text-decoration:none;color:var(--text-soft);transition:color .25s;}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn):focus-visible,.nav-links a:not(.btn)[aria-current="page"]{color:var(--cream);}
.btn{
  display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-weight:500;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.9rem;border:1px solid var(--gold);color:var(--cream);
  background:transparent;transition:background .3s,color .3s;cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--navy);}
.btn.solid{background:var(--gold);color:var(--navy);}
.btn.solid:hover{background:transparent;color:var(--gold);}

/* Mobil-Menü */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:.4rem;min-width:44px;min-height:44px;align-items:center;justify-content:center;}
.nav-toggle span{width:26px;height:1.5px;background:var(--cream);transition:.3s;}
.mobile-menu{display:none;}
@media(max-width:1080px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{
    display:block;position:fixed;inset:0;z-index:49;background:rgba(7,11,28,.98);
    backdrop-filter:blur(8px);padding:6rem 8vw 3rem;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateY(-100%);visibility:hidden;
    transition:transform .4s cubic-bezier(.4,0,.2,1),visibility .4s;
  }
  .mobile-menu.open{transform:translateY(0);visibility:visible;}
  .mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:1.6rem;}
  .mobile-menu a{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--cream);text-decoration:none;}
  .mobile-menu a.btn{font-family:'Hanken Grotesk',sans-serif;font-size:.85rem;margin-top:1rem;text-align:center;}
  body.menu-open{overflow:hidden;}
}

/* ---------- Hero (Startseite) ---------- */
header.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;background:var(--black);overflow:hidden;}
header.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.55;transform-origin:center top;animation:heroZoom 22s ease-out both;}
@keyframes heroZoom{from{transform:scale(1.0);}to{transform:scale(1.08);}}
/* Netlify-Fix Hero-Crop: Tablet-Bereich 761-860px (Zoom-Animation laeuft hier noch,
   die 861px-Desktop-Regel greift erst darueber) ~56px tiefer setzen, damit der Kopf
   nicht an der Navi klebt. translateY in die Keyframes integriert. Mobil (<=760px) bleibt unberuehrt. */
@media(min-width:761px) and (max-width:860px){
  header.hero img.bg{animation:heroZoomDown 22s ease-out both;}
  @keyframes heroZoomDown{from{transform:translateY(56px) scale(1.0);}to{transform:translateY(56px) scale(1.08);}}
}
header.hero::after{
  content:"";position:absolute;inset:0;
  /* links ruhiger + blauer (bessere Lesbarkeit), unten weicher Verlauf */
  background:
    linear-gradient(90deg,rgba(0,14,61,.85) 0%,rgba(8,14,40,.5) 42%,rgba(7,11,28,0) 74%),
    linear-gradient(180deg,rgba(7,11,28,.15) 0%,rgba(7,11,28,.5) 58%,rgba(7,11,28,.97) 100%);
}
@media(max-width:760px){
  /* Handy: Vollbild-Hero (Text über Bild). Eyebrow dreizeilig → Gesicht oben frei.
     X 73.25% = Gesicht leicht Richtung Mitte; translateY schiebt Bild ~0.5cm runter,
     damit die Frisur nicht von der Menüleiste angeschnitten wird (Streifen oben liegt hinter der Leiste). */
  header.hero{min-height:100svh;align-items:flex-end;}
  header.hero img.bg{object-position:73.25% top;opacity:.72;animation:none;transform:translateY(40px);}
  header.hero h1{font-size:clamp(1.95rem,7.2vw,2.55rem);}
  /* hero-content padding + claim-Abstand siehe Block NACH den Basis-Regeln (sonst gewinnt 9vh/9rem) */
  header.hero::after{
    background:linear-gradient(180deg,rgba(7,11,28,.12) 0%,rgba(7,11,28,.2) 38%,rgba(7,11,28,.78) 66%,rgba(7,11,28,.97) 100%);
  }
  /* Eyebrow dreizeilig untereinander (Privatsalon / St. Pölten / Intercoiffure) */
  .hero-eyebrow .eb-sep{display:none;}
  .hero-eyebrow .eb-part{display:block;line-height:1.5;}
  /* Unterseiten-Hero-Eyebrow: „Thema | St. Pölten" sauber zweizeilig statt hängendem | beim Umbruch */
  .page-head .eyebrow{line-height:1.6;}
  .page-head .eyebrow .eb-sep{display:block;font-size:0;line-height:0;}
  /* Creme-Insel mobil siehe weiter unten (muss NACH der Grund-Regel stehen, sonst gewinnt das | wieder) */
}
.titles .cred{white-space:nowrap;}
.hero-content{position:relative;z-index:2;padding:0 6vw 9vh;max-width:1100px;margin:0 auto;width:100%;}
.hero-content .eyebrow{margin-bottom:1.4rem;}
header.hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);max-width:18ch;}
.hero-sub{margin-top:1.6rem;max-width:46ch;color:var(--text-soft);font-size:1.02rem;}
.hero-cta{margin-top:2.4rem;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;}

/* ---------- Seiten-Kopf (Unterseiten) ---------- */
.page-head{padding:7.5rem 6vw 4rem;text-align:center;border-bottom:1px solid var(--hairline);}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:20ch;margin:1.2rem auto 0;}
.page-head p{max-width:52ch;margin:1.6rem auto 0;color:var(--text-soft);}

html{scroll-behavior:smooth;}

/* KI-Bild-Kennzeichnung: immer sichtbares Overlay (überlebt den object-fit:cover-Zuschnitt) */
.ai-band{position:relative;}
.ai-band::after{content:"KI-generiert";position:absolute;right:.85rem;bottom:.7rem;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:.34rem;letter-spacing:.04em;color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;z-index:2;}

/* ---------- Intro-Claim ---------- */
.claim{padding:5.5rem 0;text-align:center;}
/* EINE Sektions-Überschriften-Stufe site-weit (Single Source) */
section h2{font-size:clamp(1.7rem,3.4vw,2.7rem);}
.claim h2{max-width:24ch;margin:1.6rem auto 0;}
.claim p{max-width:54ch;margin:2rem auto 0;color:var(--text-soft);}
/* Erstes Element im Claim ohne Top-Abstand -> Bild->Text symmetrisch zum Abstand ueber dem Bild (kein +32px) */
.claim > .wrap > :first-child,.claim > .wrap-narrow > :first-child{margin-top:0;}

/* Rechtstexte (AGB, Stornierungsrichtlinien): linksbündig statt zentriert */
.legal{text-align:left;}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:2.6rem 0 .7rem;max-width:none;}
.legal p,.legal ul,.legal blockquote{max-width:none;margin-left:0;margin-right:0;color:var(--text-soft);}
.legal p{margin-top:.9rem;}
.legal .meta{color:var(--cream);}
.rule{width:64px;height:1px;background:var(--gold);margin:3rem auto 0;}

/* Mobil: Hero-Inhalt tiefer (Buttons näher zur nächsten Sektion, „mehr" raus aus dem Kinn)
   + Intro-Claim kompakter. Steht NACH den Basis-Regeln, damit es per Quell-Reihenfolge gewinnt. */
@media(max-width:760px){
  .hero-content{padding-bottom:2vh;}
  .claim{padding-top:4.5rem;}
  .page-head{padding-top:5.5rem;padding-bottom:3rem;}
}

/* ---------- Leistungen-Grid ---------- */
.services{padding:5.5rem 0;}
.works{padding:5.5rem 0;text-align:center;}
.works h2{max-width:22ch;margin:1.4rem auto 0;}
/* Magazin-Artikel-Cover: ein Bild oben, einheitlich 3:2, sanft beschnitten (Haar/Gesicht bleibt) */
.mag-cover{display:block;width:100%;max-width:760px;margin:.6rem auto 0;aspect-ratio:3/2;object-fit:cover;object-position:center 32%;border:1px solid var(--hairline);}
@media(max-width:760px){.mag-cover{aspect-ratio:4/3;}}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.6rem;counter-reset:svc;}
.service{
  position:relative;
  overflow:hidden;
  background:rgba(255,250,236,.035);
  border:1px solid var(--hairline);
  padding:2.6rem 2rem 2.3rem;
  display:flex;flex-direction:column;
  counter-increment:svc;
  transition:background .4s ease,transform .6s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .6s ease;
}
/* Karten-Interaktion (ueberall): dickerer Goldrand + Karte wird groesser beim Hover (Desktop) bzw. aktiv beim Scrollen (Mobil). KEIN Glanz-Sweep. */
.card,.step{position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .4s ease,background .35s ease;}
.service:hover,.service.is-active,
.card:hover,.card.is-active,
.step:hover,.step.is-active{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 18px 44px rgba(0,0,0,.34);}
.service:hover .card-link,.service.is-active .card-link{border-color:var(--gold);}
@media(hover:hover) and (min-width:861px){
  .service:hover,.card:hover,.step:hover{transform:translateY(-6px) scale(1.035);z-index:2;}
}
@media(max-width:860px){
  .service.is-active,.card.is-active,.step.is-active{transform:translateY(-4px);}
}
@media(prefers-reduced-motion:reduce){.service,.card,.step{transition:none;}}
/* Edle Fraunces-Kursiv-Nummer statt Clipart-Icon (greift auf allen .service-Karten) */
.service-icon{margin-bottom:1.5rem;}
.service-icon svg{display:none;}
.service-icon::before{
  content:counter(svc,decimal-leading-zero);
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  color:var(--gold);font-size:1.7rem;line-height:1;letter-spacing:.02em;
}
.service-icon::after{content:"";display:block;width:26px;height:1px;background:var(--hairline);margin-top:1rem;}
.service h3{font-size:1.3rem;margin-bottom:.9rem;font-weight:400;}
.service p{font-size:.94rem;color:var(--text-soft);flex:1;}
.service a{display:inline-block;align-self:flex-start;margin-top:1.5rem;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:.3rem;transition:border-color .3s;}
.service a:hover{border-color:var(--gold);}
@media(max-width:860px){.services-grid{grid-template-columns:1fr;gap:1.2rem;}}

/* ---------- Salon (Navy-Insel) ---------- */
.salon{background:var(--panel);padding:6rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.salon-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:center;}
.salon h2{margin-top:1.4rem;}
.salon p{color:var(--text-soft);margin-top:1.5rem;max-width:46ch;}
.salon .one{font-family:'Fraunces',serif;font-style:italic;color:var(--gold);font-size:1.15rem;margin-top:2.2rem;}
.salon-photos{display:grid;gap:1.2rem;}
.salon-photos img{width:100%;border:1px solid var(--hairline);}
.salon-photos img:last-child{width:78%;justify-self:end;margin-top:-3rem;box-shadow:0 20px 50px rgba(0,0,0,.4);}
.salon .btn{margin-top:2.6rem;}
@media(max-width:860px){.salon-grid{grid-template-columns:1fr;gap:3.5rem;}}

/* ---------- FAQ (sichtbar, GEO) ---------- */
.faq{padding:5.5rem 0;}
.faq h2{margin-top:1.2rem;max-width:22ch;}
.faq-list{margin-top:3rem;border-top:1px solid var(--hairline);}
.faq-item{border-bottom:1px solid var(--hairline);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.6rem 0;display:flex;justify-content:space-between;
  align-items:center;gap:2rem;font-family:'Fraunces',serif;font-size:1.2rem;color:var(--cream);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--gold);font-size:1.5rem;transition:transform .3s;flex:none;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--text-soft);padding:0 0 1.7rem;max-width:64ch;}
.faq-item a{color:var(--gold);}

/* ---------- Preise ---------- */
.price-wrap{max-width:920px;margin:0 auto;padding:0 6vw;}
.price-section{padding:4rem 0;}
.price-section:not(:last-of-type){border-bottom:1px solid var(--hairline);}
.price-cat{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.3rem;}
.price-cat h2{font-size:clamp(1.85rem,3.6vw,2.6rem);font-weight:400;}
.price-section > .wrap-desc{color:var(--text-soft);max-width:60ch;margin:1.1rem 0 .5rem;font-size:.95rem;}
.col-labels{display:flex;justify-content:flex-end;gap:1.2rem;margin-top:1.6rem;}
.col-labels span{width:5.5rem;text-align:center;font-size:.66rem;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.price-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.25rem 0;border-top:1px solid var(--hairline);}
.price-row:first-of-type{border-top:0;}
/* Keine Linie direkt unter der Überschrift bei Sektionen ohne Beschreibungstext (z.B. Haarglättung) */
.price-cat + .col-labels + .price-row, .price-cat + .price-row{border-top:0 !important;}
.price-info{flex:1;}
.price-info .name{display:block;font-weight:500;color:var(--cream);font-size:1rem;letter-spacing:.01em;}
.price-info .name b{color:var(--text-soft);font-weight:400;}
.wrap-desc b{color:var(--text-soft);font-weight:400;}
.price-info .desc{display:block;color:var(--text-soft);font-size:.88rem;margin-top:.3rem;max-width:52ch;line-height:1.5;}
.price-values{display:flex;gap:1.2rem;flex:none;font-family:'Fraunces',serif;color:var(--cream);font-size:1.05rem;white-space:nowrap;padding-top:.05rem;}
.price-values .v{width:5.5rem;text-align:right;}
.price-values .single{text-align:right;}
.price-note{font-size:.8rem;color:var(--text-soft);margin:1rem 0 .5rem;font-style:italic;}
.price-foot{padding:3.5rem 0 1rem;text-align:center;color:var(--text-soft);font-size:.85rem;}
@media(max-width:560px){
  .price-row{flex-direction:column;gap:.5rem;}
  .price-values{padding-top:.2rem;}
  .col-labels{display:none;}
  .price-values .v{width:auto;}
  .price-values .v::before{font-family:'Hanken Grotesk',sans-serif;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:block;}
  .price-values .v.s::before{content:"bis zur Schulter";}
  .price-values .v.l::before{content:"über die Schulter";}
}

/* ---------- Expertise-Leiste (helle Creme-Insel) ---------- */
.titles{padding:5rem 0;background:var(--cream);text-align:center;}
.titles .serif{font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.04em;color:var(--navy);}
.titles .dot{color:rgba(184,137,62,.5);margin:0 .7rem;font-size:.8em;vertical-align:middle;}
.titles .sep{color:rgba(184,137,62,.42);margin:0 .5rem;font-size:.82em;font-weight:300;vertical-align:middle;}
.eyebrow .eb-sep{opacity:.45;font-weight:300;margin:0 .1em;}
.titles-ornament{display:block;width:52px;height:1px;margin:0 auto 1.6rem;background:linear-gradient(90deg,transparent,#C2974A,transparent);position:relative;}
.titles-ornament::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:var(--cream);border:1px solid #C2974A;transform:translate(-50%,-50%) rotate(45deg);}
.titles small{display:block;margin-top:1.2rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}

/* Creme-Insel MOBIL: jeder Eintrag eigene Zeile. Senkrechtes | wird KOMPLETT versteckt
   (font-size:0 + transparent), Trenner rein über ::before. Steht bewusst NACH der Grund-Regel
   .titles .sep (oben), damit es per Quell-Reihenfolge gewinnt. Desktop bleibt unverändert. */
@media(max-width:760px){
  .titles .serif,.titles small{line-height:1.35;}
  .titles .sep{display:block;font-size:0;line-height:0;color:transparent;margin:0;border:0;}
  .titles .serif .sep::before{content:"·";display:block;font-size:.85rem;line-height:1;color:rgba(194,151,74,.5);margin:.05rem 0;}
  .titles small .sep::before{content:"";display:block;width:18px;height:1px;margin:.38rem auto;background:rgba(194,151,74,.5);}
}

/* ---------- Abschluss ---------- */
.closing{background:var(--black);padding:6rem 0;text-align:center;}
.closing .stack{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.5;color:var(--cream);}
.closing .stack em{display:block;margin-top:.4rem;font-size:clamp(1.8rem,4vw,3rem);}
.closing .sign{font-family:'Fraunces',serif;font-style:italic;color:var(--gold);margin-top:2.6rem;font-size:1.1rem;}
.closing .btn{margin-top:3rem;}

footer{padding:3.5rem 0;font-size:.82rem;color:var(--text-soft);border-top:1px solid var(--hairline);}
.foot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;}
.foot p{margin:0;}
.foot-mark{width:34px;height:auto;opacity:.8;margin-bottom:.7rem;}
.foot .hours{color:var(--text-soft);}
.foot .copy{font-size:.72rem;letter-spacing:.04em;color:var(--text-soft);opacity:.65;margin-top:.5rem;}
footer a{color:var(--text-soft);text-decoration:none;}
footer a:hover{color:var(--cream);}
.foot-name{font-family:'Fraunces',serif;color:var(--gold);font-size:1.55rem;letter-spacing:.01em;line-height:1.1;margin-bottom:.15rem;}
.foot-tag{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.7rem;}
.foot-h{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:.7rem;}
.foot-nav{position:static;background:none;backdrop-filter:none;border:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem 1.4rem;margin:1.4rem auto .4rem;max-width:660px;}
.foot-nav a{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);}
.foot-nav a:hover{color:var(--gold);}
.foot-insta{display:inline-flex;color:var(--gold);margin:.7rem 0 .2rem;}
.foot-insta:hover{color:var(--cream);}

/* ---------- Bewertungen ---------- */
.reviews{padding:5.5rem 0;}
.reviews .trust{font-family:'Fraunces',serif;color:var(--cream);font-size:clamp(1.4rem,3vw,2.1rem);margin-top:1rem;}
.reviews .trust b{color:var(--gold);font-weight:300;}
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:3rem;}
.review{border:1px solid var(--hairline);background:rgba(255,250,236,.03);padding:2rem 1.9rem;display:flex;flex-direction:column;}
.review .rstars{color:var(--gold);font-size:.9rem;letter-spacing:.2em;}
.review p{color:var(--text);font-size:.96rem;margin:.9rem 0 1.2rem;line-height:1.7;flex:1;}
.review .who{font-family:'Fraunces',serif;color:var(--cream);font-size:1rem;}
.review .src{font-size:.7rem;color:var(--text-soft);letter-spacing:.12em;text-transform:uppercase;margin-top:.2rem;}
.reviews .more{display:inline-block;margin-top:2.4rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:.3rem;}
@media(max-width:760px){.reviews-grid{grid-template-columns:1fr;}}

/* ---------- Slideshow (sanftes Überblenden) ---------- */
.slideshow{position:relative;margin:3rem auto 0;max-width:520px;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--hairline);}
.slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;}
.slideshow .slide.active{opacity:1;}
.slideshow .slide img{width:100%;height:100%;object-fit:cover;display:block;}
.slideshow .dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.55rem;z-index:2;}
.slideshow .dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,250,236,.4);transition:background .3s;}
.slideshow .dots button.active{background:var(--gold);}
.slideshow .dots button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---------- Vorher / Nachher ---------- */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;}
.ba-pair figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--hairline);}
.ba-pair img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4;}
.ba-pair figcaption{position:absolute;top:1rem;left:1rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(7,11,28,.72);backdrop-filter:blur(4px);color:var(--gold);padding:.45rem .9rem;}
@media(max-width:760px){.ba-pair figcaption{font-size:.5rem;letter-spacing:.1em;padding:.28rem .5rem;top:.5rem;left:.5rem;}}

/* Eyebrow-Label IMMER gold (gewinnt gegen .section p Überschreibungen) */
p.eyebrow{color:var(--gold);}

.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}header.hero img.bg{animation:none;}}

/* ---------- MOBIL: Sektions-Abstände kappen (gegen Riesen-Leerräume zwischen Sektionen; steht am Dateiende = gewinnt Quell-Reihenfolge) ---------- */
@media(max-width:760px){
  .claim{padding:3.5rem 0 3rem;}
  .services{padding:1.5rem 0 3.5rem;}
  .works{padding:.5rem 0 3.5rem;}
  .salon{padding:3.75rem 0;}
  .faq{padding:3.75rem 0;}
  .titles{padding:3.75rem 0;}
  .closing{padding:4rem 0;}
  .reviews{padding:3.75rem 0;}
  .price-section{padding:2.75rem 0;}
}

/* ===== Dropdown-Navigation (Desktop) ===== */
.nav-links .has-sub{position:relative;}
.nav-links .has-sub>a{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;}
.nav-links .has-sub>a::after{content:"";width:.4em;height:.4em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .2s ease,opacity .2s ease;}
.nav-links .has-sub:hover>a::after,.nav-links .has-sub:focus-within>a::after{transform:translateY(0) rotate(225deg);opacity:1;}
.nav-links .sub{list-style:none;position:absolute;top:calc(100% + 4px);left:-1.1rem;min-width:248px;background:var(--panel);border:1px solid var(--hairline);padding:.5rem 0;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:200;box-shadow:0 24px 54px rgba(0,0,0,.5);}
.nav-links .has-sub:hover .sub,.nav-links .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav-links .sub li{margin:0;}
.nav-links .sub a{display:block;padding:.62rem 1.35rem;font-size:.92rem;white-space:nowrap;color:var(--text-soft);}
.nav-links .sub a:hover,.nav-links .sub a[aria-current="page"]{background:rgba(255,255,255,.05);color:var(--gold);}
.nav-links .has-sub:has(a[aria-current="page"])>a{color:var(--gold);}

/* ===== Mobile-Menü: Gruppen-Label ===== */
.mobile-menu .m-group{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.75;margin-top:1.15rem;padding-left:.2rem;}
.mobile-menu ul>.m-group:first-child{margin-top:0;}
.mobile-menu a[aria-current="page"]{color:var(--gold);}

/* ===== Sitemap-Seite ===== */
.sitemap-list{list-style:none;padding:0;margin:.4rem 0 2.2rem;display:grid;gap:.55rem;}
.sitemap-list a{color:var(--cream);}
.sitemap-list a:hover{color:var(--gold);}



/* Bild + Text nebeneinander (z.B. Experten-Abschnitt) */
.split{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;}
.split-img img{width:100%;height:auto;display:block;border:1px solid var(--hairline);}
@media(min-width:820px){.split{grid-template-columns:.8fr 1.2fr;gap:4rem;}}


/* Linksbündiger Text, Block mittig zentriert (gleicher Rand l/r) */
.text-centered{max-width:640px;margin-left:auto;margin-right:auto;}
.text-centered h2,.text-centered p{max-width:none;}


/* === Layout-System: Text-Köpfe einspaltiger Sektionen mittig (Text bleibt links), Grids/Karten voll breit === */
.salon > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > .eyebrow,
.salon > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > h2,
.salon > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > p,
.salon > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > ul,
.salon > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > .one,
.services > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > .eyebrow,
.services > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > h2,
.services > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > p,
.services > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > ul,
.services > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > .one{
  max-width:640px !important;margin-left:auto;margin-right:auto;
}
@media(max-width:860px){
  .salon-grid > *{max-width:640px;margin-left:auto;margin-right:auto;}
  .salon-grid h2,.salon-grid p{max-width:none !important;}
}


/* CTA-Buttons in zentrierten Text-Sektionen mittig */
.salon > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > .btn,
.services > .wrap:not(:has(.salon-grid,.services-grid,.offer,.edu-ba-grid,.ba-pair,.ba-grid,.salon-photos,.slideshow,.reviews-grid,.visit-grid,.visit,.approach,.steps,.ingredients,.vs,.rituals,.lines,.badge,.contact-grid,.mag-grid)) > .btn{display:block;width:max-content;margin-left:auto;margin-right:auto;}


/* VERTIKALE RHYTHMIK: zwei aufeinanderfolgende transparente Inhalts-Sektionen -> oberes Polster der zweiten
   kollabieren, damit der Abstand = EIN konsistentes unteres Polster (5.5rem/88px) ist (kein doppelter Abstand).
   An harten Bruechen (Bild-Band padding:0 / Panel .salon / .titles) bleibt das volle obere Polster = symmetrisches Feld. */
:is(.claim,.services,.works,.faq,.reviews,.closing,.reveal):not(.salon):not(.titles):not([style*="padding:0;"])
+ :is(.claim,.services,.works,.faq,.reviews,.closing,.reveal):not(.salon):not(.titles):not(.price-section):not([style*="padding:0;"])
{padding-top:0 !important;}
/* Preise: Sektionen + Bilder symmetrisch, nicht kollabieren (nur diese Seite) */
.price-wrap section:has(> .wrap > .portrait-shot):not(#_){padding-top:5.5rem !important;padding-bottom:5.5rem !important;}

/* === Editoriales Desktop-Raster: breiter + Bild/Text nebeneinander (alternierend) === */
.wrap-wide{max-width:1280px;margin:0 auto;padding:0 6vw;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,5vw,5rem);align-items:center;}
.duo-text{max-width:54ch;}
.duo-media{margin:0;}
.duo-media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;display:block;border:1px solid var(--hairline);}
.duo--reverse .duo-text{order:2;}
@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:1.8rem;}
  .duo--reverse .duo-text{order:0;}
  .duo--media-first .duo-media{order:-1;}
  .duo-media img{aspect-ratio:3/2;}

  .duo-media.media-shiatsu img{object-position:center bottom;}
  .duo-media.media-stuhl img{object-position:65% bottom;}
}

/* Desktop-2-Spalter ohne Mobil-Eingriff (display:contents = mobil komplett inert) */
.pair-desktop{display:contents;}
.pair-desktop > section > .wrap-narrow > p:not(.eyebrow){margin-top:1.4rem;}
@media(min-width:861px){
  .pair-desktop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,5vw,5rem);align-items:start;max-width:1280px;margin:0 auto;padding:0 6vw;}
  .pair-desktop > section{padding:0 0 4.5rem !important;margin-top:4.5rem;}
  .pair-desktop > section > .wrap-narrow > .eyebrow,
  .pair-desktop > section .text-centered > .eyebrow{margin-top:0 !important;}
  .pair-desktop > section > .wrap-narrow{max-width:none;padding:0;margin:0;text-align:left;}
  .pair-desktop > section > .wrap{max-width:none;padding:0;margin:0;}
  .pair-desktop .works .slideshow{max-width:none;}
  .pair-desktop > section .ba-cap{max-width:none;}
  /* Bild+Text-Duo: Bild fuellt seine Spalte (4:5), vertikal zentriert wie privatsalon */
  .pair-desktop.pair-desktop--media{align-items:center;}
  .pair-desktop.pair-desktop--center{align-items:center;}
  /* Eyebrow im Seitenkopf auf EINER Zeile (Desktop) - mobil bleibt der saubere Umbruch */
  .page-head .eyebrow{white-space:nowrap;max-width:none;}
  /* Duo umgekehrt: erstes Element (Bild) auf Desktop nach rechts, Text links */
  .pair-desktop--flip > section:first-child{order:2;}
  /* Startseite-Hero (Desktop): Christoph etwas tiefer + leicht groesser
     +56px gegenueber 50px (Netlify-Fix): Kopf klebt nicht mehr an der Navi. */
  header.hero img.bg{animation:none !important;transform:scale(1.14) translateY(106px) !important;transform-origin:center center !important;}
  /* Startseite-Duo: EINE Hierarchie -> rechte Headline als leises Eyebrow-Label, "Aus meinem Salon" weg (nur Desktop) */
  .pair-desktop--center .works > .wrap > .eyebrow{display:none;}
  .pair-desktop--center .works > .wrap > h2{font-family:'Hanken Grotesk',sans-serif;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;font-weight:500;font-style:normal;color:var(--gold);max-width:none;margin:0 0 1.6rem;line-height:1.6;}
  .pair-desktop--center .works > .wrap > h2 em{font-family:inherit;font-size:inherit;font-style:normal;color:inherit;letter-spacing:inherit;}
  .pair-desktop--media > section > .wrap{max-width:none;padding:0;margin:0;}
  .pair-desktop--media .intro-shot,.pair-desktop--media .inline-figure{max-width:none;width:100%;margin:0;}
  .pair-desktop > section.salon{background:transparent !important;border:0 !important;}
}

/* Einzelnes Hochformat-Foto ohne Text-Partner: zentriert + unbeschnitten statt Vollbreit-Streifen */
.portrait-shot{display:block;width:100%;max-width:560px;margin:0 auto;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border:1px solid var(--hairline);}

/* Konsistenter Fließtext-Abstand in Text-Blöcken/Duos (gleicher Rhythmus wie .salon p = 1.5rem) */
.text-centered p:not(.eyebrow),
.duo-text p:not(.eyebrow){margin-top:1.5rem;}

/* Einzelne Hochformat-Portraits: einheitliches vertikales Polster (sonst kleben sie an der nächsten Sektion) */
section:has(> .wrap > .portrait-shot),
section:has(> .wrap > .inline-figure),
section:has(> .wrap > .intro-shot){padding:5.5rem 0;}

/* Slideshow aus Vorher/Nachher-PAAREN (jede Slide = ein .ba-pair) */
.slideshow--pairs{max-width:760px;aspect-ratio:16/10;border:0;}
.slideshow--pairs .ba-pair{height:100%;margin:0;gap:.7rem;}
.slideshow--pairs .ba-pair figure{height:100%;}
.slideshow--pairs .ba-pair img{aspect-ratio:auto;height:100%;width:100%;object-fit:cover;}

/* Contained, zentrierte Bild-Figur statt vollbreitem Band (kein Crop, einheitlich, kein „langes" Bild) */
.inline-figure{display:block;max-width:760px;margin:0 auto;position:relative;}
.inline-figure img{display:block;width:100%;height:auto;border:1px solid var(--hairline);}
.inline-figure.ai::after{content:"KI-generiert";position:absolute;right:.7rem;bottom:.6rem;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:.34rem;letter-spacing:.04em;color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;}

/* Einheitlicher Intro-Bildrahmen: ALLE Seiten gleich groß (4:5, max 560px) */
.intro-shot{display:block;width:100%;max-width:560px;margin:0 auto;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--hairline);position:relative;}
.intro-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;border:0;}
.intro-shot.ai::after{content:"KI-generiert";position:absolute;right:.7rem;bottom:.6rem;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:.34rem;letter-spacing:.04em;color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;}


/* Milbon-Gold: gestapelte Detailbilder neben dem Text (Duo) */
.gold-stack{display:flex;flex-direction:column;gap:1.8rem;justify-content:center;}
.gold-stack figure{margin:0;max-width:340px;width:100%;align-self:center;}
.gold-stack img{width:100%;height:auto;display:block;border:1px solid var(--hairline);}
.gold-stack figcaption{margin-top:.55rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-align:center;}
@media(max-width:860px){.gold-stack{flex-direction:row;flex-wrap:wrap;justify-content:center;}.gold-stack figure{max-width:none;flex:1;min-width:150px;}}


/* KI-Badge auf Duo-Bildern (z.B. expertise hero-christoph) */
.duo-media.ai{position:relative;}
.duo-media.ai::after{content:"KI-generiert";position:absolute;right:.6rem;bottom:.6rem;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:.34rem;letter-spacing:.04em;color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;}


/* KI-Kennzeichnung Startseite-Hero + balayage Portrait (gleiche dezente Marke) */
.hero .ki-tag{position:absolute;right:1.1rem;bottom:.9rem;z-index:3;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:.5rem;letter-spacing:.04em;color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;}
.split-img.ai{position:relative;}
.split-img.ai::after{content:"KI-generiert";position:absolute;right:.6rem;bottom:.6rem;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:.34rem;letter-spacing:.04em;color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;}


/* Magazin-Artikel: editoriales 2-Spalten-Layout (Lesespalte links + Sticky-CTA rechts) statt zentrierter Mobil-Säule */
.article-grid{display:grid;grid-template-columns:minmax(0,64ch) 230px;gap:clamp(2.4rem,5vw,4.5rem);justify-content:center;align-items:start;}
.article-grid > .article{max-width:none;}
.article-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:1.1rem;border-left:1px solid var(--hairline);padding-left:1.8rem;}
.article-aside .aside-back{font-size:.82rem;letter-spacing:.04em;color:var(--text-soft);text-decoration:none;transition:color .25s;}
.article-aside .aside-back:hover{color:var(--gold);}
@media(max-width:900px){.article-grid{grid-template-columns:1fr;}.article-aside{position:static;border-left:0;padding-left:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:2rem;}}

/* Storno-Schluss: Firma + Adresse mobil 2-zeilig */
@media(max-width:680px){.biz-sep{display:none;}.biz-addr{display:block;margin-top:.3rem;}}

/* Duo-Abstaende mobil symmetrisch: Bild- und Text-Section gleicher unterer Abstand + erster Rand genullt */
@media(max-width:860px){
  .pair-desktop--media > section{padding-bottom:3rem !important;}
  .pair-desktop--media > section > .wrap > :first-child,
  .pair-desktop--media > section > .wrap-narrow > :first-child{margin-top:0 !important;}
}

/* ===== Mobil-Abstand-Wurzelfix (Agenten-Audit): Bild-Sektionen auf Rhythmus + pair-desktop-Grenzen kollabieren ===== */
@media(max-width:760px){
  section:has(> .wrap > .intro-shot),
  section:has(> .wrap > .inline-figure),
  section:has(> .wrap > .portrait-shot){padding-top:3rem !important;padding-bottom:3rem !important;}
  :is(.claim,.services,.works,.faq,.reviews,.closing,.reveal):not(.salon):not(.titles):not([style*="padding:0;"]) + .pair-desktop > section:first-child{padding-top:0 !important;}
  .pair-desktop + :is(.claim,.services,.works,.faq,.reviews,.closing,.reveal):not(.salon):not(.titles):not(.price-section):not([style*="padding:0;"]){padding-top:0 !important;}
}

/* Duo-Salon mobil: Panel neutralisieren + Grenze zum Bild kollabieren (sonst 108px statt 48) */
@media(max-width:760px){
  .pair-desktop--media > section.salon{background:transparent !important;border:0 !important;padding-top:0 !important;}
  .pair-desktop--media > section.salon + section{padding-top:0 !important;}
}

/* Duo-Sektionen mobil einheitlich 3rem unten (auch plain pair-desktop wie haarausfall); --center=Startseite ausgenommen */
@media(max-width:760px){
  .pair-desktop:not(.pair-desktop--center) > section{padding-bottom:3rem !important;}
}