/* PM Beauty — Farben/Typo dokumentiert in styleguide.html, Layout-Muster angelehnt an Lucas' Referenz (Karten, Labels mit Punkt, Bilderstreifen).
   Mobile first: Basis-Regeln gelten fürs Handy, größere Bildschirme per min-width. */
:root{
  /* Two palettes. The tuning panel edits only these source values. */
  --brown-hue:16; --brown-saturation:38; --brown-brightness:-1;
  --brown-text:37; --brown-button:51; --brown-opacity:100; --brown-border:19.2;
  --pink-hue:351; --pink-saturation:35; --pink-brightness:-4;
  --pink-text:32; --pink-button:47; --pink-opacity:100; --pink-border:17.6;
  --hero-wall:#A39588;              /* Wandton des Hero-Fotos */

  --font-display:"Italiana",Georgia,serif;
  --font-sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;

  --type-display:clamp(2.4rem,7.4vw,4.4rem);
  --type-h2:clamp(1.7rem,4.6vw,2.6rem);
  --type-h3:1.15rem;

  --rounded-sm:8px; --rounded-md:16px; --rounded-lg:24px; --rounded-xl:32px; --rounded-full:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:72px; --space-9:112px;

  --header-h:72px;
  --brand-w:96px;
  --gutter:20px;
}
/* Scope every role together so nested pink panels inherit a complete palette. */
:root,.theme-brown{
  --tone-h:var(--brown-hue);--tone-s:var(--brown-saturation);--tone-light:var(--brown-brightness);
  --tone-text:var(--brown-text);--tone-button:var(--brown-button);--tone-opacity:var(--brown-opacity);--tone-border:var(--brown-border);
}
.theme-pink,.services,.reviews{
  --tone-h:var(--pink-hue);--tone-s:var(--pink-saturation);--tone-light:var(--pink-brightness);
  --tone-text:var(--pink-text);--tone-button:var(--pink-button);--tone-opacity:var(--pink-opacity);--tone-border:var(--pink-border);
}
:root,.theme-brown,.theme-pink,.services,.reviews{
  --color-background:hsl(var(--tone-h) calc(var(--tone-s) * 1%) calc((95 + var(--tone-light)) * 1%));
  --color-surface-raised:hsl(var(--tone-h) calc(var(--tone-s) * 1%) calc((96 + var(--tone-light)) * 1%));
  --color-surface:color-mix(in srgb,hsl(var(--tone-h) calc(var(--tone-s) * 1%) calc((90 + var(--tone-light)) * 1%)) calc(var(--tone-opacity) * 1%),var(--color-background));
  --color-surface-deep:color-mix(in srgb,hsl(var(--tone-h) calc(var(--tone-s) * 1%) calc((86 + var(--tone-light)) * 1%)) calc(var(--tone-opacity) * 1%),var(--color-background));
  --color-primary:hsl(var(--tone-h) calc(var(--tone-s) * .6%) calc(var(--tone-text) * 1%));
  --color-on-surface:var(--color-primary);
  --color-on-surface-muted:hsl(var(--tone-h) calc(var(--tone-s) * .55%) calc((var(--tone-text) + 9) * 1%));
  --color-accent:hsl(var(--tone-h) calc(var(--tone-s) * .8%) calc((var(--tone-text) + 8) * 1%));
  --color-button:hsl(var(--tone-h) calc(var(--tone-s) * .65%) calc(var(--tone-button) * 1%));
  --color-button-hover:hsl(var(--tone-h) calc(var(--tone-s) * .65%) calc((var(--tone-button) - 5) * 1%));
  --color-on-primary:hsl(var(--tone-h) calc(var(--tone-s) * 1%) 97%);
  --color-border:hsl(var(--tone-h) calc(var(--tone-s) * .65%) 42% / calc(var(--tone-border) * .01));
  --color-accent-pink:hsl(var(--pink-hue) calc(var(--pink-saturation) * 1%) 72%);
  --color-accent-pink-soft:hsl(var(--pink-hue) calc(var(--pink-saturation) * 1%) calc((90 + var(--pink-brightness)) * 1%));
}
.theme-brown,.theme-pink,.services,.reviews{color:var(--color-on-surface)}
@media(min-width:900px){:root{--brand-w:112px;--gutter:32px}}
/* Handy: Rahmen von Panels und Fotos ca. 30 % weniger rund (Buttons und Kacheln bleiben) */
@media(max-width:899px){:root{--rounded-lg:17px;--rounded-xl:22px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  overflow-x:clip;
  background:var(--color-background);color:var(--color-on-surface);
  font-family:var(--font-sans);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.container{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
section{padding:104px 0}            /* Handy: mehr Luft zwischen den Abschnitten */
@media(min-width:900px){section{padding:var(--space-9) 0}}
h2{font-size:var(--type-h2);font-weight:500;letter-spacing:-.025em;line-height:1.1;margin:var(--space-3) 0 var(--space-4)}
h3{font-size:var(--type-h3);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.muted{color:var(--color-on-surface-muted)}
.small{font-size:.85rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-on-surface-muted)}

/* Label mit Punkt (statt [ Klammern ]) */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-surface-muted);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Buttons: Pille mit Pfeil-Kreis */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:8px 26px;border-radius:var(--rounded-full);
  font-size:.95rem;font-weight:500;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
/* Pfeil ohne Kreis, in Textfarbe (auf dunklen Buttons weiß) */
.btn-ic{display:grid;place-items:center;width:14px;height:14px;flex-shrink:0;color:currentColor;transition:transform .3s ease}
.btn-ic svg{width:14px;height:14px}
.btn:hover .btn-ic{transform:translate(2px,-2px)}
.btn:hover .btn-ic.down{transform:translateY(2px)}
.btn-primary{background:var(--color-button);color:var(--color-on-primary)}
.btn-primary:hover{background:var(--color-button-hover)}
.btn-soft{background:color-mix(in srgb,var(--color-surface-raised) 55%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 18%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-soft:hover{background:var(--color-surface-raised)}
.btn-sm{min-height:44px;padding:4px 20px;font-size:.88rem;gap:10px}
.btn-block{width:100%}
.icon-btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:color-mix(in srgb,var(--color-surface-raised) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary) 12%,transparent);
  color:var(--color-primary);text-decoration:none;transition:background-color .2s ease;
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--color-surface-raised)}
.icon-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.icon-btn-primary{background:var(--color-button);border-color:var(--color-border);color:var(--color-on-primary)}   /* wie „Termin buchen" */
.icon-btn-primary:hover{background:var(--color-button-hover)}

.badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--rounded-full);
  background:color-mix(in srgb,var(--color-surface-raised) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary) 10%,transparent);
  font-size:.8rem;color:var(--color-on-surface);white-space:nowrap;
}

/* ---------- Header: transparent, volle Breite ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h)}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--color-background) 68%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--color-border) 70%,transparent);
}
/* Handy: über dem Hero gleichmäßig transparent; erst nach dem Hero (Klasse .over-hero fehlt, js/main.js)
   läuft das obere Drittel von deckend (Oberkante) in die normale Transparenz */
@media(max-width:899px){
  .site-header:not(.over-hero)::before{
    background:linear-gradient(to bottom,var(--color-background) 0%,color-mix(in srgb,var(--color-background) 68%,transparent) 33%,color-mix(in srgb,var(--color-background) 68%,transparent) 100%);
  }
}
/* Liegt der Header über einem pinken Abschnitt (Behandlungen, Bewertungen; .over-pink aus js/main.js), wechseln
   Schrift, Logo und Buttons in 1 s auf die Pink-Palette. Die Leiste selbst bleibt (--color-background unverändert). */
.site-header.over-pink{
  --color-primary:hsl(var(--pink-hue) calc(var(--pink-saturation) * .6%) calc(var(--pink-text) * 1%));
  --color-on-surface:var(--color-primary);
  --color-on-surface-muted:hsl(var(--pink-hue) calc(var(--pink-saturation) * .55%) calc((var(--pink-text) + 9) * 1%));
  --color-accent:hsl(var(--pink-hue) calc(var(--pink-saturation) * .8%) calc((var(--pink-text) + 8) * 1%));
  --color-button:hsl(var(--pink-hue) calc(var(--pink-saturation) * .65%) calc(var(--pink-button) * 1%));
  --color-button-hover:hsl(var(--pink-hue) calc(var(--pink-saturation) * .65%) calc((var(--pink-button) - 5) * 1%));
  --color-on-primary:hsl(var(--pink-hue) calc(var(--pink-saturation) * 1%) 97%);
}
.site-header :is(.brand,.site-nav > a,.nav-dd-btn,.btn,.icon-btn){transition:color 1s ease,background-color 1s ease,border-color 1s ease}
@media(prefers-reduced-motion:reduce){.site-header :is(.brand,.site-nav > a,.nav-dd-btn,.btn,.icon-btn){transition:none}}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.brand{display:block;flex-shrink:0;width:var(--brand-w);color:var(--color-primary);-webkit-tap-highlight-color:transparent}
.brand svg{display:block;width:100%;height:auto;overflow:visible}
.brand:focus-visible{outline:2px solid var(--color-accent);outline-offset:6px;border-radius:var(--rounded-sm)}
/* Dynamisches Logo im Header: Der Mittelstrich des E wächst beim Hovern auf die doppelte Höhe (nach oben, Fuß bleibt). */
.brand .mid-bar{transform-box:fill-box;transform-origin:50% 100%}
.brand .mid-bar{transition:transform .35s cubic-bezier(.4,0,.2,1)}
@media(hover:hover){.brand:hover .mid-bar,.brand:focus-visible .mid-bar{transform:scaleY(2);transition-duration:.45s}}
@media(prefers-reduced-motion:reduce){.brand .mid-bar{transition:none}}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
/* Nur ausblenden, nie ein display setzen: sonst verliert z. B. der Instagram-Kreis seine Grid-Zentrierung */
@media(max-width:1023px){.hide-mobile{display:none}}
@media(min-width:1024px){.show-mobile{display:none}}

.site-nav{display:none}
@media(min-width:1024px){
  .site-nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px)}
}
.site-nav > a,.nav-dd-btn{text-decoration:none;font-size:.93rem;color:var(--color-on-surface);transition:color .2s ease}
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 0}
.nav-dd-btn .chev{width:12px;height:12px;transition:transform .25s ease}
.nav-dd-panel{
  position:absolute;top:calc(100% + 10px);left:-18px;min-width:230px;
  display:flex;flex-direction:column;padding:10px;
  background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--rounded-md);
  box-shadow:0 18px 40px color-mix(in srgb,var(--color-primary) 12%,transparent);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}   /* Hover-Brücke */
.nav-dd-panel a{padding:10px 12px;border-radius:var(--rounded-sm);text-decoration:none;font-size:.92rem}
.nav-dd-panel a:hover,.nav-dd-panel a:focus-visible{background:var(--color-surface)}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd.open .nav-dd-panel{opacity:1;visibility:visible;transform:none}
.nav-dd:hover .chev,.nav-dd.open .chev{transform:rotate(180deg)}

/* ---------- Mobiles Menü (Vollbild, Zeilen mit Trennlinien) ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;gap:var(--space-6);
  padding:0 var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
  background:var(--color-background);overflow-y:auto;
  animation:mm-in .25s ease;
}
.mobile-menu[hidden]{display:none}
@keyframes mm-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-menu-head{height:var(--header-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.mobile-menu-list{display:flex;flex-direction:column}
.mobile-menu-list > a,.mm-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 2px;border-bottom:1px solid var(--color-border);
  font-size:1.2rem;letter-spacing:-.01em;text-decoration:none;text-align:left;
}
.row-ic{font-size:1.1rem;color:var(--color-on-surface-muted)}
.row-ic.plus{position:relative;width:16px;height:16px}
.row-ic.plus::before,.row-ic.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.4px;background:currentColor;transition:transform .25s ease}
.row-ic.plus::after{transform:rotate(90deg)}
.mm-toggle[aria-expanded="true"] .row-ic.plus::after{transform:rotate(0)}
.mm-sub{display:flex;flex-direction:column;padding:6px 0 10px 14px;border-bottom:1px solid var(--color-border)}
.mm-sub[hidden]{display:none}
.mm-sub a{padding:11px 2px;font-size:1.02rem;color:var(--color-on-surface-muted);text-decoration:none}
body.menu-open{overflow:hidden}

/* ---------- Hero: Paula rechts, Text links; Handy: Bild oben, Text darunter ---------- */
.hero{padding:0;margin-top:calc(-1 * var(--header-h));position:relative}
.hero-media{display:block;background:var(--hero-wall)}
.hero-media img{width:100%;height:auto;aspect-ratio:1033/1795;object-fit:cover;object-position:50% 18%}   /* Handy: links und rechts je 5 % weg (1148 px Bildbreite → 1033) */
.hero-content{padding-top:var(--space-6);padding-bottom:var(--space-7)}
.hero h1{font-size:var(--type-display);font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:var(--space-4) 0}
.hero h1 em{font-style:normal;color:var(--color-accent)}
.hero .lead{color:var(--color-on-surface-muted);max-width:46ch;margin-bottom:var(--space-6)}
.hero-actions{display:flex;flex-direction:column;gap:var(--space-3)}
.hero-actions .btn{justify-content:space-between}
@media(min-width:560px){.hero-actions{flex-direction:row;flex-wrap:wrap}.hero-actions .btn{justify-content:center}}
@media(min-width:900px){
  .hero{min-height:max(min(92vh,880px),calc(100vw * 1091 / 2400 + var(--header-h)));display:flex;align-items:center;background:var(--hero-wall)}
  .hero-media{position:absolute;inset:var(--header-h) 0 0}
  .hero-media img{height:100%;aspect-ratio:auto;object-position:100% 0}
  .hero-content{position:relative;width:100%;padding-top:calc(var(--header-h) + var(--space-7));padding-bottom:var(--space-8)}
  .hero-content > *{max-width:540px}
  /* Warm tinted veil keeps the fine display type readable on the photograph. */
  .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,color-mix(in srgb,var(--color-background) 96%,transparent) 0%,color-mix(in srgb,var(--color-background) 86%,transparent) 30%,transparent 64%)}
  .hero-content{color:var(--color-on-surface)}
  .hero .lead{color:var(--color-on-surface-muted)}
  .hero .eyebrow{color:var(--color-on-surface-muted)}
  .hero h1 em{color:var(--color-accent)}
  .hero-actions .btn{text-shadow:none}
}

/* ---------- Auszeichnungen: Lorbeer-Badges unter dem Hero ---------- */
.awards{padding:var(--space-7) 0 0}
.awards-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);max-width:820px;margin:0 auto}
.award{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:220px;width:100%;margin:0 auto;color:var(--color-on-surface)}
.award .laurel{position:absolute;inset:0;width:100%;height:100%;color:var(--color-accent);fill:currentColor;opacity:.8}
.award-text{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:62%;margin-top:-6%}
.award-text strong{font-size:clamp(1.3rem,6.4vw,2.1rem);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.award-text span{margin-top:2px;font-size:.6rem;letter-spacing:0;line-height:1.35;color:var(--color-on-surface-muted)}
@media(min-width:900px){.awards{padding-top:var(--space-8)}.awards-grid{gap:var(--space-6)}.award-text span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}}
/* Erreicht man den Abschnitt, wachsen die Kränze in ca. 1 s aus der Mitte (js/main.js setzt .grown), leicht versetzt.
   Startzustand nur mit JS (html.js) und ohne „Bewegung reduzieren“ */
@media(prefers-reduced-motion:no-preference){
  .js .award .laurel{transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s ease}
  .js .award-text{transition:opacity .7s ease .35s,transform .7s ease .35s}
  .js .awards-grid:not(.grown) .award .laurel{transform:scale(.45);opacity:0}
  .js .awards-grid:not(.grown) .award-text{opacity:0;transform:translateY(6px)}
  .js .award:nth-child(2) .laurel{transition-delay:.15s}
  .js .award:nth-child(2) .award-text{transition-delay:.5s}
  .js .award:nth-child(3) .laurel{transition-delay:.3s}
  .js .award:nth-child(3) .award-text{transition-delay:.65s}
}

/* ---------- Ergebnisse: horizontaler Streifen ---------- */
.results{padding-bottom:var(--space-6)}
.strip{
  display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:var(--space-5) var(--gutter) var(--space-2);scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.strip figure{flex:0 0 62%;scroll-snap-align:start;scroll-margin-left:var(--gutter);border-radius:var(--rounded-lg);overflow:hidden}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1)}
@media(min-width:600px){.strip figure{flex-basis:38%}}
/* Desktop: versetzte Collage wie die Referenz (NovaFaces). 4 Spalten, 10 Zeilen-Einheiten:
   Spalte 1 kurz + hoch, 2 hoch + kurz, 3 kurz + hoch, 4 hoch mit Luft darunter */
@media(min-width:900px){
  .strip{
    display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(10,clamp(40px,4.6vw,64px));gap:10px;
    overflow:visible;max-width:1240px;margin:0 auto;padding:var(--space-5) var(--gutter) 0;
  }
  .strip figure:nth-child(1){grid-column:1;grid-row:1 / 4}
  .strip figure:nth-child(2){grid-column:1;grid-row:4 / 11}
  .strip figure:nth-child(3){grid-column:2;grid-row:1 / 8}
  .strip figure:nth-child(4){grid-column:2;grid-row:8 / 11}
  .strip figure:nth-child(5){grid-column:3;grid-row:1 / 4}
  .strip figure:nth-child(6){grid-column:3;grid-row:4 / 11}
  .strip figure:nth-child(7){grid-column:4;grid-row:1 / 8}
  .strip img{height:100%;aspect-ratio:auto}
}
/* Maus: Bild zoomt im festen Rahmen leicht hinein */
@media(hover:hover){.strip figure:hover img{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.strip img{transition:none}}

/* ---------- Bereichs-Karten ---------- */
.tiles{padding-top:var(--space-5)}
.tiles-grid{display:grid;gap:var(--space-4)}
@media(min-width:900px){.tiles-grid{grid-template-columns:repeat(3,1fr)}}
.tile{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-5) var(--space-5) 0;border-radius:var(--rounded-xl);
  background:var(--color-surface);text-decoration:none;overflow:hidden;
  transition:transform .3s ease;
}
.tile:hover{transform:translateY(-3px)}
.tile-head{display:flex;justify-content:space-between;align-items:center}
.tile-arrow{font-size:1.5rem;line-height:1;transition:transform .3s ease}
.tile:hover .tile-arrow{transform:translate(2px,-2px)}
.tile h3{font-size:1.3rem;line-height:1.25}
.tile p{color:var(--color-on-surface-muted);font-size:.95rem}
.tile img{margin:var(--space-3) calc(-1 * var(--space-5)) 0;width:calc(100% + 2 * var(--space-5));max-width:none;aspect-ratio:4/3;object-fit:cover}

/* ---------- Über Paula ---------- */
/* Panel-Look (Referenz NovaFaces): Bild und Text je eigene abgerundete Fläche, dicht nebeneinander */
.about-grid{display:grid;gap:8px}
.about-figure{border-radius:var(--rounded-xl);overflow:hidden}
.about-figure img{display:block;width:100%;aspect-ratio:675/925;object-fit:cover}
.about-panel{background:var(--color-surface);border-radius:var(--rounded-xl);padding:var(--space-6) var(--space-5)}
@media(min-width:900px){
  .about-grid{grid-template-columns:.9fr 1.1fr;gap:10px}
  .about-figure{position:relative;min-height:560px}
  .about-figure img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .about-panel{display:flex;flex-direction:column;justify-content:center;padding:var(--space-8) var(--space-7)}
}
/* Handy: ein Rahmen von Rand zu Rand, das Foto sitzt mit 10 px Abstand darin (Radius innen = außen − Abstand) */
@media(max-width:899px){
  .about-grid{padding:0;gap:0;background:var(--color-surface);border-radius:var(--rounded-xl);overflow:hidden}
  .about-figure{padding:10px 10px 0;border-radius:0;overflow:visible}
  .about-figure img{border-radius:calc(var(--rounded-xl) - 10px)}
  .about-panel{background:none;border-radius:0}
}
.about blockquote{font-size:clamp(1.1rem,2.6vw,1.3rem);line-height:1.5;letter-spacing:-.01em;margin:0 0 var(--space-6)}
.facts{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--color-border)}
.fact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-4);padding:14px 0;border-bottom:1px solid var(--color-border);font-size:.95rem}
.fact span:first-child{color:var(--color-on-surface-muted);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.fact span:last-child{text-align:right;overflow-wrap:anywhere}
.fact a{text-decoration:none}

/* ---------- Behandlungen ---------- */
.services{background:var(--color-surface);border-radius:var(--rounded-xl)}   /* gleiches Pink wie Bewertungen */
.section-head{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}
@media(min-width:900px){.section-head{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.section-head p{max-width:54ch}
.accordion{display:flex;flex-direction:column;gap:var(--space-3);overflow-anchor:none}   /* Scroll-Ausgleich macht main.js */
.accordion details{background:var(--color-surface-raised);border-radius:var(--rounded-lg);border:1px solid var(--color-border);overflow:hidden}
.accordion summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:20px 22px;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary h3{font-size:clamp(1.15rem,3.2vw,1.45rem);flex:0 1 auto;min-width:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.accordion summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;border-radius:var(--rounded-lg)}
.summary-meta{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.count{font-size:.78rem;color:var(--color-on-surface-muted);white-space:nowrap}
@media(max-width:400px){.count{display:none}}
.indicator{position:relative;width:34px;height:34px;border-radius:50%;background:var(--color-surface);flex-shrink:0}
.indicator::before,.indicator::after{content:"";position:absolute;left:11px;right:11px;top:50%;height:1.4px;margin-top:-.7px;background:currentColor;transition:transform .25s ease}
.indicator::after{transform:rotate(90deg)}
.accordion details[open] .indicator::after{transform:rotate(0)}
.service-panel{overflow:hidden}   /* Höhe wird beim Öffnen/Schließen animiert (js/main.js) */
.service-list{list-style:none;display:flex;flex-direction:column;padding:0 22px}
.service-list li{display:flex;flex-direction:column;gap:2px;padding:18px 0;border-top:1px solid var(--color-border)}
.service-list .name{font-weight:500}
.service-list .desc{color:var(--color-on-surface-muted);font-size:.92rem;max-width:62ch}
.book-link{margin:6px 22px 22px;font-size:.92rem;text-decoration:none;font-weight:500}

/* ---------- Schulungen: Kurs-Karten ---------- */
.courses{display:grid;gap:var(--space-5)}
/* Handy: eine Karte. Desktop: zwei Rahmen dicht nebeneinander, Bild und Text je eigene Fläche (Referenz NovaFaces) */
.course{display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--rounded-xl);overflow:hidden}
.course-heading{order:0;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.course-title{display:flex;align-items:center;gap:var(--space-3)}
.course-title h3{flex:1;min-width:0}
.course-toggle[hidden]{display:none}
.course-toggle svg{transition:transform .25s ease}
.course-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.course-media{order:-1}
.course-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.course-content{order:2;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5)}
@media(max-width:899px){
  .course.is-collapsed .course-content{display:none}
  .course-heading{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .course-heading .badges{gap:6px}
  .course-heading .badge{font-size:.7rem;padding:6px 9px}
  .course-media{padding:10px 10px 0}   /* Foto mit Abstand im Kartenrahmen, alle Ecken rund */
  .course-media img{border-radius:calc(var(--rounded-xl) - 10px)}
}
@media(min-width:900px){
  .courses{gap:var(--space-6)}
  .course{display:grid;grid-template-columns:45fr 55fr;grid-template-rows:auto 1fr;column-gap:10px;background:none;border-radius:0;overflow:visible}
  .course-media{grid-column:1;grid-row:1 / 3;position:relative;border-radius:var(--rounded-xl);overflow:hidden}
  .course-media img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .course-heading{grid-column:2;grid-row:1;padding:var(--space-6) var(--space-6) 0;background:var(--color-surface);border-radius:var(--rounded-xl) var(--rounded-xl) 0 0}
  .course-content{grid-column:2;grid-row:2;padding:var(--space-4) var(--space-6) var(--space-6);background:var(--color-surface);border-radius:0 0 var(--rounded-xl) var(--rounded-xl)}
  .course:nth-child(even){grid-template-columns:55fr 45fr}
  .course:nth-child(even) .course-media{grid-column:2}
  .course:nth-child(even) .course-heading,.course:nth-child(even) .course-content{grid-column:1}
  .course-toggle{display:none}
}
.course h3{font-size:clamp(1.35rem,3.4vw,1.7rem);line-height:1.2;letter-spacing:-.02em}
.course p{font-size:.97rem}
.perks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
@media(min-width:560px){.perks{grid-template-columns:repeat(4,1fr)}}
.perks li{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:12px 6px;border-radius:var(--rounded-md);background:transparent;border:1px solid var(--color-border);   /* nur Kontur, Fläche wie die Karte */
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-on-surface-muted);line-height:1.3;
}
.perks svg{width:22px;height:22px;color:var(--color-accent)}
.btn-brown{background:var(--color-button);color:var(--color-on-primary)}   /* bräunlich wie die Referenz, Pfeil ohne Kreis */
.btn-brown:hover{background:var(--color-button-hover)}
.course .btn{align-self:stretch;justify-content:space-between}
@media(min-width:560px){.course .btn{align-self:flex-start;justify-content:center}}

/* ---------- Gutscheine ---------- */
/* Handy: versetzt (links, rechts, links), schmaler als die volle Breite, 100 € etwas größer.
   Desktop: 100 € ca. 30 % breiter; beim Erreichen des Abschnitts driften die Karten senkrecht auseinander (js/main.js) */
.vouchers-grid{display:grid;gap:var(--space-4)}
.voucher{
  position:relative;width:80%;
  background:var(--color-surface);border-radius:var(--rounded-xl);padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-4);
}
.voucher:nth-child(odd){justify-self:start}
.voucher:nth-child(even){justify-self:end}
.voucher-featured{width:90%;padding:var(--space-6) var(--space-5)}
.voucher-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.voucher-ic{width:30px;height:30px;color:var(--color-accent)}
.badge-accent{background:var(--color-button);border-color:var(--color-border);color:var(--color-on-primary);font-weight:500;letter-spacing:.02em}
.voucher .amount{font-size:2.3rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.voucher-featured .amount{font-size:3rem}
@media(min-width:900px){
  .vouchers-grid{grid-template-columns:1fr 1.3fr 1fr;align-items:center;gap:var(--space-4)}
  .voucher,.voucher-featured{width:auto;justify-self:stretch}
  .voucher-featured{padding:var(--space-7) var(--space-6)}
  .voucher .amount{font-size:2.6rem}
  .voucher-featured .amount{font-size:3.4rem}
  .voucher-featured .voucher-ic{width:36px;height:36px}
  .vouchers-grid .voucher{transition:opacity .6s ease,transform .6s ease,translate 1.4s cubic-bezier(.4,0,.2,1)}
  .vouchers-grid.spread .voucher{translate:0 36px}
  .vouchers-grid.spread .voucher-featured{translate:0 -14px}
  .voucher-hint{margin-top:calc(var(--space-5) + 36px)}   /* Platz für die abgesenkten Karten */
}
.voucher p{color:var(--color-on-surface-muted);font-size:.95rem}
.voucher .btn{margin-top:auto;justify-content:space-between}
.voucher-hint{margin-top:var(--space-5);color:var(--color-on-surface-muted);font-size:.92rem;max-width:70ch}

/* ---------- Bewertungen ---------- */
.reviews{background:var(--color-surface);border-radius:var(--rounded-xl)}
.rating-badge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin:var(--space-4) 0}
.rating-badge .score{font-size:clamp(3.2rem,9vw,4.6rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.rating-badge .stars{color:var(--color-accent);font-size:1.3rem;letter-spacing:.15em}
/* Abstand wie im Kontakt: 8 px Handy, 10 px Desktop. Desktop 3 Spalten; „Alle Bewertungen“ füllt den Rest der letzten Reihe */
.reviews-grid{display:grid;gap:8px;margin-top:var(--space-6)}
@media(min-width:900px){.reviews-grid{grid-template-columns:repeat(3,1fr);gap:10px}.review-all{grid-column:span 2}}
.review.review-all{background:color-mix(in srgb,var(--color-surface-deep) 86%,var(--color-accent));text-decoration:none;color:inherit;justify-content:space-between;min-height:180px;transition:filter .25s ease}
.review-all:hover{filter:brightness(.97)}
.review-all:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.review-all-score{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.4rem);line-height:1}
.review-all-score span{color:var(--color-accent);font-size:.6em;vertical-align:.25em}
.review-all-cta{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.review-all:hover .btn-ic{transform:translate(2px,-2px)}
.review{background:var(--color-surface-raised);border-radius:var(--rounded-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.review p{font-size:1.02rem;line-height:1.55}
.review footer{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:.82rem;color:var(--color-on-surface-muted)}

/* ---------- Kontakt / Footer ---------- */
/* Handy: Text, Kontaktdaten, zwei Bilder nebeneinander, Öffnungszeiten mit „Termin buchen“.
   Desktop: 3 Spalten × 2 Reihen, Öffnungszeiten rechts über beide Reihen (Lucas' Skizze) */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.contact-intro,.contact-facts,.hours{grid-column:1 / -1}
.contact-intro{order:1}.contact-facts{order:2}.contact-figure-a{order:3}.contact-figure-b{order:4}.hours{order:5}
.contact-figure{border-radius:var(--rounded-xl);overflow:hidden;aspect-ratio:1;position:relative}
.contact-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact-figure-b img{object-position:50% 40%}   /* Bild ist auf den Lichtschrank zugeschnitten, ohne die Tür mit Schrift */
@media(min-width:900px){
  .contact-grid{grid-template-columns:1.2fr 1.2fr .85fr;grid-template-rows:auto auto;gap:10px}
  .contact-intro,.contact-facts,.contact-figure,.hours{order:0}
  .contact-intro{grid-column:1;grid-row:1}
  .contact-figure-a{grid-column:2;grid-row:1;aspect-ratio:auto;min-height:220px}
  .contact-figure-b{grid-column:1;grid-row:2;aspect-ratio:auto;min-height:220px}
  .contact-facts{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center}
  .hours{grid-column:3;grid-row:1 / 3;display:flex;flex-direction:column}
  .hours .hours-actions{margin-top:auto;padding-top:var(--space-6)}
}
.contact-panel{background:var(--color-surface);border-radius:var(--rounded-xl);padding:var(--space-6) var(--space-5)}
@media(min-width:900px){.contact-panel,.hours{padding:var(--space-7)}}
.contact .muted{max-width:46ch}
.hours-actions{margin-top:var(--space-6)}
.fact-address{flex-wrap:nowrap;align-items:flex-start}   /* Label links, Adresse rechts; „München“ in der Zeile darunter */
.fact-address a{line-height:1.45}
/* Zweizeiliger Link: Linie pro Zeile, jeweils so lang wie der Text, wächst von der Mitte (statt ::after unter dem ganzen Block) */
.fact.fact-address a{
  display:inline;padding-bottom:.12em;
  background:linear-gradient(currentColor,currentColor) no-repeat 50% 100% / 0 1px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .35s cubic-bezier(.4,0,.2,1);
}
.fact.fact-address a::after{content:none}
.fact.fact-address a:focus-visible{background-size:100% 1px;transition-duration:.45s}
@media(hover:hover){.fact.fact-address a:hover{background-size:100% 1px;transition-duration:.45s}}
.hours{background:var(--color-surface-deep);border-radius:var(--rounded-xl);padding:var(--space-6) var(--space-5)}   /* etwas dunkler als das Kontakt-Panel */
.hours table{width:100%;border-collapse:collapse;margin-top:var(--space-4);font-size:.95rem}
.hours td{padding:10px 0}
.hours td:last-child{text-align:right}
.hours tr+tr td{border-top:1px solid var(--color-border)}

.site-footer{border-top:1px solid var(--color-border);padding:var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom))}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-5);align-items:center}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.footer-links a{text-decoration:none;font-size:.92rem;color:var(--color-on-surface-muted);transition:color .2s}
.footer-links a:hover{color:var(--color-primary)}

/* ---------- Hover-Linie: wächst von der Mitte nach außen, dünn, ohne Serifen ---------- */
:is(.ul,.footer-links a,.fact a,.voucher-hint a,.accordion summary h3){position:relative;display:inline-block;text-decoration:none}
:is(.ul,.footer-links a,.fact a,.voucher-hint a,.accordion summary h3)::after{
  content:"";position:absolute;left:0;right:0;bottom:-.22em;height:1px;background:currentColor;pointer-events:none;
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s cubic-bezier(.4,0,.2,1);
}
:is(.ul,.footer-links a,.fact a,.voucher-hint a):focus-visible::after,
.accordion summary:focus-visible h3::after,
.nav-dd.open .nav-dd-btn::after{transform:scaleX(1);transition-duration:.45s}
/* Hover nur auf Geräten mit Maus (auf Touch bleibt ein Tipp-„Hover" sonst hängen) */
@media(hover:hover){
  :is(.ul,.footer-links a,.fact a,.voucher-hint a):hover::after,
  .accordion summary:hover h3::after,
  .nav-dd:hover .nav-dd-btn::after{transform:scaleX(1);transition-duration:.45s}
}
/* Touch: Linie unter der Kategorie gehört zum Zustand „offen", halb so schnell */
/* Geöffnete Kategorie: Linie bleibt stehen, auch wenn die Maus weggeht */
.accordion details[open] summary h3::after{transform:scaleX(1)}
@media(hover:none){
  .accordion summary h3::after{transition-duration:.7s}
  .accordion details[open] summary h3::after{transform:scaleX(1);transition-duration:.9s}
  .accordion details.closing summary h3::after{transform:scaleX(0);transition-duration:.7s}
}
.nav-dd-btn.ul::after{bottom:0}

/* ---------- Rechtsseiten ---------- */
.legal{max-width:760px;margin:0 auto;padding:var(--space-7) var(--space-5) var(--space-9)}
.legal h1{font-size:var(--type-h2);font-weight:500;letter-spacing:-.02em;margin-bottom:var(--space-6)}
.legal h2{font-size:var(--type-h3);margin:var(--space-6) 0 var(--space-3)}
.legal p{margin-bottom:var(--space-4)}
.legal .placeholder{background:var(--color-accent-pink-soft);padding:2px 8px;border-radius:var(--rounded-sm);font-family:var(--font-mono);font-size:.85em}
.legal .back{display:inline-block;margin-bottom:var(--space-6)}

/* ---------- Bewegung ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* Italiana is reserved for display hierarchy; body and functional labels stay sans. */
h1,h2,h3,.hero h1,.legal h1,.award-text strong,.voucher .amount,.rating-badge .score{
  font-family:var(--font-display);font-weight:400;font-synthesis:none;letter-spacing:0;   /* wie in Figma */
}
.hero h1{line-height:1.08}
.tile h3{font-size:1.6rem}
.accordion summary h3{font-size:clamp(1.35rem,3.5vw,1.65rem)}
/* One quiet outline per visual frame, including photo frames. */
.tile,.strip figure,.services,.reviews,.accordion details,.voucher,.review,.contact-panel,.contact-figure,.hours,.sg-panel,.sg-demo-panels .img{
  border:1px solid var(--color-border);
}
@media(max-width:899px){
  .about-grid,.course{border:1px solid var(--color-border)}
  .about-figure img,.course-media img{border:1px solid var(--color-border)}
}
@media(min-width:900px){
  .about-figure,.about-panel,.course-media{border:1px solid var(--color-border)}
  .course-heading{border:1px solid var(--color-border);border-bottom:0}
  .course-content{border:1px solid var(--color-border);border-top:0}
}

/* Desktop cursor tint: a background image, below all text, controls and photos.
   Each panel clips its own background naturally to its rounded border. */
@media(min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .panel-glow-active{
    background-image:radial-gradient(circle 240px at var(--panel-glow-x) var(--panel-glow-y),
      hsl(var(--tone-h) calc(var(--tone-s) * 1%) 42% / .12) 0%,
      hsl(var(--tone-h) calc(var(--tone-s) * 1%) 42% / .048) 45%,
      transparent 100%);
    background-origin:border-box;
  }
}