/* Salon Endless Hair – Entwurf «Girlie Hybrid»
   Mischung aus der alten Seite (Glaskarte, runde Elemente, Cormorant + Schreibschrift)
   und der aktuellen Seite (Struktur, Preise, Tracking, Rosé-Beige). */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Geist-Bold.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/CormorantGaramond-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/CormorantGaramond-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/PinyonScript-Regular.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/CormorantGaramond-500-italic.woff2") format("woff2"); }

:root {
  --paper: #f4ece6;
  --blush: #ece1d8;
  --petal: #faf6f2;
  --rose: #d8c6ba;
  --rose-soft: #ece1d8;
  --rosewood: #765f50;
  --rosewood-dk: #5f4b3f;
  --ink: #3e322c;
  --ink-soft: #6e5f57;
  --line: rgba(62, 50, 44, .16);
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --edge: clamp(20px, 4.4vw, 72px);
  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 20px;
  --shadow: 0 18px 50px rgba(70, 55, 48, .14);
  --shadow-sm: 0 8px 24px rgba(70, 55, 48, .10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rosewood); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--rose); color: var(--ink); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 999px; font: 500 13px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linklike { padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* Typografie */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rosewood); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.h2 { font: 500 clamp(34px, 4.2vw, 58px)/1.06 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.h2 em, .hero-headline em, blockquote em { font-style: italic; font-weight: 400; color: var(--rosewood); }
.sec-head { text-align: center; max-width: 820px; margin: 0 auto; }
.sec-head .h2 { margin-top: 16px; }
.sec-sub { margin: 16px auto 0; max-width: 34em; font-size: 17px; color: var(--ink-soft); }

/* Buttons: alles rund */
.btn-cta, .btn-soft, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 14px 26px; border-radius: 999px; font: 500 15px/1.15 var(--sans); text-decoration: none; transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.btn-cta, .btn-solid { background: var(--rosewood); color: #fff; box-shadow: 0 10px 26px rgba(118, 95, 80, .28); border: 0; }
.btn-cta:hover, .btn-solid:hover { background: var(--rosewood-dk); transform: translateY(-1px); }
.btn-soft, .btn { background: rgba(255, 255, 255, .7); color: var(--ink); border: 1px solid var(--rose); }
.btn-soft:hover, .btn:hover { background: #fff; }
.btn-cta .wa-ic, .m-cta-wa .wa-ic { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Header: schwebende Glas-Pille */
.site-header { position: relative; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; margin: 18px var(--edge) 0; padding: 0 12px 0 22px; border-radius: 999px; background: rgba(250, 246, 242, .78); border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: var(--ink); }
.home .site-header { position: absolute; top: 0; left: 0; right: 0; }
.logo { grid-column: 1; justify-self: start; display: block; height: 50px; }
.logo img { height: 100%; width: auto; }
.nav { grid-column: 2; display: flex; gap: 6px; }
.nav a, .nav-contact { padding: 9px 14px; border-radius: 999px; font: 500 13.5px/1.2 var(--sans); color: inherit; text-decoration: none; transition: background-color .2s ease; }
.nav a:hover, .nav-contact:hover { background: var(--blush); }
.nav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
.book { display: inline-flex; align-items: center; gap: 6px; padding: 13px 22px; border-radius: 999px; background: var(--rosewood); color: #fff; font: 500 13.5px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.book:hover { background: var(--rosewood-dk); }
.book-short { display: none; }
.burger { display: none; }
@media (min-width: 768px) and (max-width: 1099px) {
  .nav a { padding: 9px 10px; }
  .nav-contact, .book-long { display: none; }
  .book-short { display: inline; }
}

/* Hero: echtes Salonfoto, Glaskarte in der Mitte, schwebende Pillen */
.s-hero { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 120px var(--edge) 64px; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero-bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(244, 236, 230, .30), rgba(236, 225, 216, .18) 45%, rgba(244, 236, 230, .55)); }
.hero-card { position: relative; width: min(760px, 100%); padding: 44px clamp(24px, 5vw, 64px) 46px; border-radius: var(--r-xl); background: rgba(250, 246, 242, .72); border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 30px 80px rgba(62, 50, 44, .18); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); text-align: center; }
.hero-script { margin-top: 10px; font: 400 clamp(54px, 7.4vw, 104px)/1 var(--script); color: var(--rosewood); }
.hero-headline { margin-top: 14px; font: 500 clamp(28px, 3.1vw, 44px)/1.12 var(--serif); color: var(--ink); text-wrap: balance; }
.hero-sub { margin: 16px auto 0; max-width: 30em; font-size: 16.5px; color: var(--ink-soft); }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.float-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(250, 246, 242, .86); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 13.5px/1 var(--sans); color: var(--ink); animation: float 6s ease-in-out infinite; }
.float-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--rosewood); box-shadow: 0 0 0 4px var(--rose-soft); }
.fp-1 { left: max(var(--edge), calc(50% - 560px)); top: 30%; }
.fp-2 { right: max(var(--edge), calc(50% - 560px)); bottom: 18%; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* Sektionen allgemein */
.s-work, .s-gallery, .s-prices, .s-faq { padding: clamp(80px, 9vw, 130px) var(--edge); }
.s-work { background: var(--paper); }
.s-gallery { background: var(--blush); border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* Karten «So arbeite ich» */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1180px; margin: 56px auto 0; }
.card { position: relative; padding: 36px 32px 34px; border-radius: var(--r-lg); background: var(--petal); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-sm); }
.card:nth-child(2) { transform: translateY(26px); background: #fff; }
.card-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blush); font: 500 italic 22px/1 var(--serif); color: var(--rosewood); }
.card-title { margin-top: 22px; font: 600 26px/1.15 var(--serif); }
.card p { margin-top: 12px; font-size: 15.5px; color: var(--ink-soft); }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1280px; margin: 56px auto 0; }
.g { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 6 / 7; }
.g:nth-child(even) { margin-top: 48px; }
.g-arch { border-radius: 999px 999px var(--r-lg) var(--r-lg); }
.g img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.g:hover img { transform: scale(1.04); }
.g figcaption { position: absolute; left: 14px; bottom: 14px; padding: 9px 16px; border-radius: 999px; background: rgba(250, 246, 242, .9); font: 500 13px/1 var(--sans); color: var(--ink); }

/* Über mich */
.s-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(80px, 9vw, 130px) var(--edge); background: var(--blush); }
.about-img { position: relative; max-width: 480px; justify-self: end; width: 100%; }
.about-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 60%; border-radius: 999px 999px var(--r-xl) var(--r-xl); box-shadow: var(--shadow); }
.about-badge { position: absolute; right: -24px; bottom: 48px; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--rosewood); color: #fff; text-align: center; font: 500 italic 19px/1.15 var(--serif); box-shadow: var(--shadow); transform: rotate(-8deg); }
.about-copy { max-width: 560px; }
.about-copy .h2 { margin: 16px 0 22px; }
.about-copy > p:not(.eyebrow):not(.signature) { color: var(--ink-soft); font-size: 16.5px; }
.about-copy > p + p { margin-top: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pills li { padding: 9px 16px; border-radius: 999px; background: var(--petal); border: 1px solid var(--rose-soft); font: 500 13.5px/1 var(--sans); }
.signature { margin: 18px 0 18px; font: 400 64px/1 var(--script); color: var(--rosewood); }

/* Zitat */
.s-quote { position: relative; padding: clamp(90px, 10vw, 140px) var(--edge); text-align: center; background: var(--paper); overflow: hidden; }
.quote-orn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font: 400 clamp(140px, 20vw, 300px)/1 var(--script); color: rgba(216, 198, 186, .28); white-space: nowrap; pointer-events: none; }
.s-quote blockquote { position: relative; max-width: 900px; margin: 0 auto; font: 400 italic clamp(28px, 3.4vw, 46px)/1.2 var(--serif); color: var(--ink); text-wrap: balance; }

/* Preise: runde Karte, Kategorien als Pillen */
.s-prices { background: var(--blush); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.prices-card { max-width: 900px; margin: 48px auto 0; padding: clamp(14px, 2.4vw, 28px); border-radius: var(--r-xl); background: var(--petal); box-shadow: var(--shadow); }
.acc { display: grid; gap: 10px; }
.acc-item { border-radius: var(--r-md); background: #fff; border: 1px solid var(--rose-soft); overflow: hidden; }
.acc-head { font: inherit; }
.acc-btn { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 70px; padding: 16px 18px 16px 26px; text-align: left; font: 600 22px/1.2 var(--serif); color: var(--ink); }
.acc-btn:focus-visible { outline-offset: -3px; }
.acc-icon { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--blush); transition: background-color .25s ease; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 12px; right: 12px; top: 18.5px; height: 1.5px; border-radius: 2px; background: var(--rosewood); transition: transform .3s ease; }
.acc-icon::after { transform: rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-icon { background: var(--rosewood); }
.acc-btn[aria-expanded="true"] .acc-icon::before, .acc-btn[aria-expanded="true"] .acc-icon::after { background: #fff; }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.acc-panel.is-closed { grid-template-rows: 0fr; }
.acc-inner { overflow: hidden; padding: 0 26px; }
.svc-intro { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }
.svc-group { margin: 20px 0 4px; font: 500 italic 19px/1.3 var(--serif); color: var(--rosewood); }
.acc-inner li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.acc-inner li:last-child { border-bottom: 0; }
.svc-name small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
.svc-price { flex: none; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.acc-link { display: inline-flex; margin: 16px 8px 24px 0; padding: 10px 18px; border-radius: 999px; background: var(--blush); font: 500 13.5px/1 var(--sans); text-decoration: none; color: var(--rosewood-dk); }
.acc-link:hover { background: var(--rose-soft); }
.price-note { margin: 18px 10px 4px; font-size: 13.5px; color: var(--ink-soft); text-align: center; }

/* Besuch */
.s-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; padding: clamp(80px, 9vw, 130px) var(--edge); background: var(--paper); }
.visit-copy { max-width: 540px; justify-self: end; }
.visit-copy .h2 { margin: 16px 0 18px; }
.visit-copy > p:not(.eyebrow) { color: var(--ink-soft); }
.hours-card { margin-top: 26px; padding: 24px 26px; border-radius: var(--r-lg); background: var(--petal); border: 1px solid #fff; box-shadow: var(--shadow-sm); }
.hours-title { font: 600 22px/1.2 var(--serif); }
.hours-card ul { margin-top: 10px; }
.hours-card li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.hours-card li:last-child { border-bottom: 0; }
.hours-card li span:last-child { font-variant-numeric: tabular-nums; }
.hours-note { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--blush); font: 500 12.5px/1 var(--sans); color: var(--rosewood-dk); }
.contact-phone { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }
.contact-phone a { color: var(--ink); text-underline-offset: 3px; }
.visit-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 999px; box-shadow: var(--shadow); max-width: 560px; }

/* FAQ */
.s-faq { background: var(--blush); }
.faq-list { display: grid; gap: 10px; max-width: 860px; margin: 48px auto 0; }
.faq { border-radius: var(--r-md); background: var(--petal); border: 1px solid #fff; overflow: hidden; }
.faq-btn { font: 500 16.5px/1.35 var(--sans); min-height: 66px; }
.faq .acc-inner p { padding: 0 40px 22px 0; font-size: 15.5px; color: var(--ink-soft); }
.faq a { color: var(--rosewood-dk); text-underline-offset: 3px; }

/* Footer: hell, rosé, abgerundet */
.site-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 72px var(--edge) 40px; background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -40px; position: relative; color: var(--ink); }
.f-label { font: 500 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rosewood); }
.f-brand { display: flex; gap: 28px; align-items: flex-start; margin-top: 22px; }
.f-logo { width: 120px; height: auto; flex: none; }
.f-brand address { font-size: 15.5px; line-height: 1.75; }
.f-brand address a { text-decoration: none; }
.f-name { font: 600 20px/1.2 var(--serif); }
.f-gais { width: 130px; height: auto; margin-top: 26px; }
.f-links { margin-top: 22px; }
.f-links li { font-size: 15px; }
.f-links li + li { margin-top: 10px; }
.f-hours li { display: flex; justify-content: space-between; gap: 12px; max-width: 260px; }
.f-links a { text-underline-offset: 4px; }
.f-bottom { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.f-bottom + .f-bottom { border: 0; padding-top: 0; }

/* Mobilmenü */
.menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: 130px 24px 40px; background: var(--paper); }
.menu-links { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.menu-links a { font: 500 38px/1.15 var(--serif); text-decoration: none; }
.menu-cta { display: grid; gap: 14px; justify-items: center; }
.menu .btn { width: 100%; }
.menu-tel { font-size: 14px; text-underline-offset: 4px; }

/* Mobiler Terminbutton */
.m-cta { display: none; }

/* Promo und Einwilligung */
.promo { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; left: 0; width: min(410px, calc(100% - 40px)); margin: auto; padding: 38px 30px 30px; border: 0; border-radius: var(--r-xl); background: var(--petal); color: var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(62, 50, 44, .3); }
.promo::backdrop { background: rgba(62, 50, 44, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.promo[open] { display: block; }
.promo:focus { outline: none; }
.promo-eyebrow { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--blush); font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--rosewood-dk); }
.promo-title { margin-top: 16px; font: 500 32px/1.1 var(--serif); text-wrap: balance; }
.promo-text { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); }
.promo-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blush); font-size: 22px; line-height: 1; }
.promo .btn { margin-top: 22px; }
.consent { position: fixed; z-index: 35; left: 16px; bottom: 16px; width: min(420px, calc(100% - 32px)); padding: 22px; border-radius: var(--r-lg); background: var(--petal); box-shadow: 0 16px 50px rgba(62, 50, 44, .2); font-size: 14px; line-height: 1.5; }
.consent-title { font: 600 20px/1.2 var(--serif); margin-bottom: 6px; }
.consent a { text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; margin-top: 14px; }
.consent-actions .btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }

/* Unterseiten */
.sub .site-header { margin-bottom: 8px; }
.page { padding: 64px var(--edge) 120px; }
.page .inner { max-width: 760px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: var(--petal); box-shadow: var(--shadow-sm); }
.page h1 { font: 500 clamp(36px, 4vw, 52px)/1.1 var(--serif); margin-bottom: 28px; }
.rtext h2 { font: 600 22px/1.3 var(--serif); margin: 30px 0 8px; }
.rtext p { margin-bottom: 12px; }
.rtext .fein { font-size: 14px; color: var(--ink-soft); }
.page .btn { margin-top: 28px; }
.label { font: 500 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rosewood); }
.statement { font: 500 clamp(22px, 2vw, 28px)/1.3 var(--serif); }
.lp { padding: 0 var(--edge) 40px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; font-size: 13px; color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.lp-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; padding: 40px 0 80px; }
.lp-title { font: 500 clamp(40px, 5vw, 72px)/1.04 var(--serif); }
.lp-hero .statement { margin-top: 18px; max-width: 30em; }
.lp-hero .btn-cta { margin-top: 28px; }
.lp-note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.lp-price { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-top: 26px; }
.lp-price-val { font: 600 26px/1.2 var(--serif); color: var(--rosewood); }
.lp-hero-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px var(--r-xl) var(--r-xl); }
.lp-hero-img figcaption, .lp-img figcaption { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.lp-sec { display: grid; grid-template-columns: 300px 1fr; gap: 48px; margin-top: 16px; padding: 40px; border-radius: var(--r-lg); background: var(--petal); }
.lp-h2 { font: 600 26px/1.2 var(--serif); }
.lp-text { max-width: 720px; font-size: 16.5px; }
.lp-text p + p { margin-top: 14px; }
.lp-text .fein { margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); }
.lp-text .btn, .lp-text .btn-row { margin-top: 24px; }
.lp-compare > div { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.lp-compare dt { font-weight: 500; }
.lp-compare dd { margin: 4px 0 0; color: var(--ink-soft); }
.lp-prices li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.lp-steps { list-style: decimal; padding-left: 1.2em; }
.lp-steps li + li { margin-top: 10px; }
.lp-img { margin-bottom: 18px; }
.lp-img img { width: 100%; border-radius: var(--r-lg); }
.links-page { min-height: 100vh; padding: 56px 23px 40px; }
.links-page .inner { width: min(460px, 100%); margin: 0 auto; }
.links-page .logo { height: auto; width: 130px; margin-bottom: 32px; }
.link-list { display: grid; gap: 10px; }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-md); background: var(--petal); text-decoration: none; }
.link-list strong { display: block; font: 600 20px/1.3 var(--serif); }
.link-list svg { width: 16px; height: 16px; flex: none; }
.small-mono { font-size: 13px; color: var(--ink-soft); }

/* Tablet */
@media (min-width: 768px) and (max-width: 1100px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .card:nth-child(2) { transform: none; }
  .card:nth-child(3) { grid-column: 1 / -1; }
  .gallery { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .fp-1 { top: 18%; }
  .fp-2 { bottom: 9%; }
  .about-badge { right: -12px; width: 112px; height: 112px; font-size: 17px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .f-contact { grid-column: 1 / -1; }
}

/* Mobil */
@media (max-width: 767px) {
  .nav { display: none; }
  .site-header { height: 62px; margin: 12px 12px 0; padding: 0 6px 0 16px; grid-template-columns: 1fr auto auto; column-gap: 4px; }
  .logo { height: 40px; }
  .nav-end { grid-column: 2; }
  .nav-contact, .book-long { display: none; }
  .book-short { display: inline; }
  .book { padding: 11px 16px; font-size: 13px; }
  .burger { position: relative; grid-column: 3; z-index: 60; display: block; width: 46px; height: 46px; border-radius: 50%; }
  .burger i { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .3s ease; }
  .burger i:first-child { top: 19px; }
  .burger i:last-child { top: 26px; }
  .burger[aria-expanded="true"] { position: fixed; right: 18px; top: 20px; }
  .burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-header .book, body.home.menu-open .site-header .logo { visibility: hidden; }

  .s-hero { padding: 96px 14px 110px; align-items: center; }
  .hero-bg img { object-position: 38% 50%; }
  .hero-card { padding: 30px 20px 28px; border-radius: 32px; }
  .eyebrow { font-size: 11px; letter-spacing: .16em; }
  .hero-script { font-size: 60px; }
  .hero-headline { font-size: 27px; }
  .hero-sub { font-size: 15.5px; }
  .hero-btns { flex-direction: column; }
  .hero-btns > * { width: 100%; }
  .float-pill { font-size: 12.5px; padding: 10px 15px; }
  .fp-1 { left: 14px; top: auto; bottom: 64px; }
  .fp-2 { right: 14px; bottom: 18px; }

  .cards { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .card { padding: 28px 24px; }
  .card:nth-child(2) { transform: none; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
  .g:nth-child(even) { margin-top: 28px; }
  .g figcaption { left: 8px; bottom: 8px; padding: 7px 11px; font-size: 11.5px; }

  .s-about { grid-template-columns: 1fr; gap: 44px; }
  .about-img { justify-self: center; width: 84%; }
  .about-badge { right: -18px; bottom: 28px; width: 104px; height: 104px; font-size: 15.5px; }
  .signature { font-size: 54px; }
  .about-copy .btn-cta { width: 100%; }

  .s-quote blockquote { font-size: 27px; }
  .prices-card { margin-top: 32px; padding: 10px; border-radius: 30px; }
  .acc-btn { min-height: 62px; padding: 12px 12px 12px 18px; font-size: 20px; }
  .acc-icon { width: 34px; height: 34px; }
  .acc-icon::before, .acc-icon::after { left: 11px; right: 11px; top: 16.5px; }
  .acc-inner { padding: 0 18px; }
  .acc-inner li { gap: 14px; }

  .s-visit { grid-template-columns: 1fr; }
  .visit-copy { justify-self: stretch; }
  .btn-row { flex-direction: column; }
  .btn-row > * { width: 100%; }
  .visit-img { order: -1; }
  .visit-img img { aspect-ratio: 1 / 1; }
  .faq-list { margin-top: 32px; }
  .faq .acc-inner p { padding-right: 0; }

  .site-footer { grid-template-columns: 1fr 1fr; gap: 36px 20px; padding: 64px 22px calc(40px + 64px + env(safe-area-inset-bottom)); }
  .f-contact { grid-column: 1 / -1; }
  .f-brand { flex-direction: column; gap: 18px; }
  .f-hours li { display: block; }
  .f-hours li span { display: block; }

  .m-cta { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(250, 246, 242, .9); box-shadow: 0 10px 30px rgba(62, 50, 44, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .3s ease, transform .3s ease; }
  .m-cta.is-hidden { opacity: 0; transform: translateY(20px); visibility: hidden; }
  body.menu-open .m-cta { display: none; }
  .m-cta-wa { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; background: var(--rosewood); color: #fff; font: 500 14px/1.1 var(--sans); text-decoration: none; }
  .m-cta-tel { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blush); color: var(--rosewood-dk); }
  .m-cta-tel svg { width: 18px; height: 18px; }
  .consent { bottom: calc(76px + env(safe-area-inset-bottom)); }

  .lp-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 48px; }
  .lp-sec { grid-template-columns: 1fr; gap: 16px; padding: 26px 22px; }
  .lp-hero-img img { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
}

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

/* Feinschliff */
.s-about { padding-top: clamp(32px, 4vw, 56px); }
.visit-img img { border-radius: 999px 999px var(--r-xl) var(--r-xl); aspect-ratio: 4 / 5; }
.logo { height: 60px; }
.site-header { height: 80px; }
@media (max-width: 767px) { .logo { height: 44px; } .site-header { height: 64px; } .visit-img img { aspect-ratio: 4 / 4.4; } }
.about-img img, .visit-img img, .lp-hero-img img { height: auto; }


/* Keine Punkte vor oder zwischen Texten */
.eyebrow::before, .float-pill i { display: none; }
.eyebrow { gap: 0; }

/* Eine Schrift (Geist), keine Farbwechsel im Satz, keine schwebenden Leisten */
:root { --serif: var(--sans); }
.h2 { font: 400 clamp(30px, 3.4vw, 48px)/1.1 var(--sans); letter-spacing: -.025em; }
.hero-headline { margin-top: 18px; font: 400 clamp(30px, 3.2vw, 46px)/1.1 var(--sans); letter-spacing: -.03em; }
.card-num { font: 500 15px/1 var(--sans); }
.card-title { font: 500 20px/1.25 var(--sans); letter-spacing: -.01em; }
.about-badge { font: 500 14px/1.25 var(--sans); }
.acc-btn { font: 500 17px/1.3 var(--sans); }
.svc-group { font: 500 14px/1.3 var(--sans); color: var(--ink); }
.hours-title, .consent-title { font: 500 18px/1.3 var(--sans); }
.promo-title { font: 400 28px/1.15 var(--sans); letter-spacing: -.02em; }
.f-name { font: 500 16px/1.4 var(--sans); }
.s-quote blockquote { font: 400 clamp(24px, 2.6vw, 36px)/1.3 var(--sans); letter-spacing: -.02em; }
.menu-links a { font: 400 34px/1.15 var(--sans); letter-spacing: -.02em; }
.faq a, .contact-phone a, .lp-note a { color: inherit; }
.acc-link { color: var(--ink); }

/* Header: feste Leiste oben über die ganze Breite statt schwebender Pille */
.site-header, .home .site-header { position: relative; top: auto; left: auto; right: auto; margin: 0; height: 80px; padding: 0 var(--edge); border-radius: 0; background: var(--paper); border: 0; border-bottom: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.s-hero { min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); padding-top: 64px; }
@media (max-width: 767px) {
  .site-header, .home .site-header { height: 64px; padding: 0 8px 0 18px; }
  .s-hero { min-height: calc(100svh - 64px); padding-top: 40px; padding-bottom: 48px; }
  .hero-headline { font-size: 30px; }
  /* Terminbutton unten bündig angedockt, nicht schwebend */
  .m-cta { left: 0; right: 0; bottom: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-radius: 0; background: var(--paper); border-top: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Hybrid mit der aktuellen Seite ---------- */
/* Hero der aktuellen Seite: drei randlose Bildspalten über die volle Höhe, darauf die Glaskarte der alten Seite, Ortskreis unten rechts */
.hero-cols { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-col { position: relative; overflow: hidden; }
.hero-col img { width: 100%; height: 100%; object-fit: cover; }
.hero-cols::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(62, 50, 44, .10), rgba(62, 50, 44, .18)); }
.hero-card { background: rgba(250, 246, 242, .80); }
.hero-badge { position: absolute; z-index: 2; right: clamp(24px, 3.4vw, 56px); bottom: clamp(24px, 3.4vw, 56px); display: grid; place-items: center; width: clamp(104px, 9vw, 136px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; background: rgba(45, 34, 28, .26); color: #fff; text-align: center; font: 500 11px/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

/* Matter Papierschimmer der aktuellen Seite, in Sandbeige */
.s-work, .s-gallery, .s-about, .s-quote, .s-prices, .s-visit, .s-faq { position: relative; isolation: isolate; }
.s-work::before, .s-gallery::before, .s-about::before, .s-quote::before, .s-prices::before, .s-visit::before, .s-faq::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; background: url("../img/paper-grain.png") 0 0 / 128px repeat, url("../img/sand.webp") center / cover no-repeat; background-blend-mode: overlay, normal; pointer-events: none; }
.s-gallery::before, .s-about::before, .s-prices::before, .s-faq::before { background-image: url("../img/paper-grain.png"), url("../img/sand-dark.webp"); }
.s-about::before, .s-faq::before { transform: scaleX(-1); }

/* Grosse Aussage-Typografie der aktuellen Seite */
.h2 { font: 400 clamp(30px, 3.2vw, 46px)/1.12 var(--sans); letter-spacing: -.03em; }
.sec-sub, .about-copy > p:not(.eyebrow), .visit-copy > p:not(.eyebrow) { letter-spacing: -.01em; }

/* Kontakt wie auf der aktuellen Seite: Bild läuft bis an den rechten Rand */
.s-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-right: 0; }
.visit-img { align-self: stretch; }
.visit-img img { width: 100%; height: 100%; max-width: none; min-height: 560px; aspect-ratio: auto; border-radius: 999px 0 0 999px; box-shadow: none; }

/* Dunkler Footer der aktuellen Seite, in warmem Braun */
.site-footer { background: var(--ink); color: #f4ece6; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.site-footer .f-label { color: #d8c6ba; }
.site-footer .f-bottom { color: #d8c6ba; border-color: rgba(244, 236, 230, .2); }

@media (max-width: 767px) {
  .hero-cols { grid-template-columns: 1fr 1fr 1fr; }
  .hero-badge { display: none; }
  .s-visit { padding-right: var(--edge); }
  .visit-img img { min-height: 0; height: auto; aspect-ratio: 4 / 4.4; border-radius: 999px 999px var(--r-xl) var(--r-xl); }
}
.visit-img img { height: auto; min-height: 0; aspect-ratio: 5 / 6; object-position: 50% 60%; }

/* Weiblichere Schrift: eine Familie für alles */
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/JosefinSans-400.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/JosefinSans-500.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/JosefinSans-600.woff2") format("woff2"); }
:root { --sans: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; --serif: var(--sans); }
body { font-weight: 500; }
.h2, .hero-headline, .s-quote blockquote, .promo-title, .menu-links a { font-weight: 500; letter-spacing: -.02em; }
.card-title, .acc-btn, .hours-title, .f-name, .faq-btn { font-weight: 600; letter-spacing: 0; }
.btn-cta, .btn-soft, .btn, .book, .nav a, .nav-contact { font-weight: 600; }
body { font-size: 16.5px; }
.about-copy > p:not(.eyebrow), .visit-copy > p:not(.eyebrow), .sec-sub { font-size: 17.5px; }
.card p, .faq .acc-inner p, .svc-intro, .acc-inner li { font-size: 16px; }
/* Schnürchenschrift wie im Logo: Hero, Unterschrift, Zitat-Hintergrund */
.hero-script { margin-top: 6px; font: 400 clamp(56px, 7vw, 100px)/1.05 var(--script); letter-spacing: 0; color: var(--rosewood); }
.hero-script + .hero-headline { margin-top: 10px; }
.signature { margin: 20px 0 6px; font: 400 64px/1 var(--script); color: var(--rosewood); }
.quote-orn { font-family: var(--script); color: rgba(216, 198, 186, .45); }
@media (max-width: 767px) { .hero-script { font-size: 58px; } .signature { font-size: 54px; } }
.about-copy > p.signature { font-size: 64px; line-height: 1; color: var(--rosewood); }
@media (max-width: 767px) { .about-copy > p.signature { font-size: 54px; } }
/* Hero: echtes Salonfoto, gut erkennbar (nur leichte Aufhellung, keine Verwaschung) */
.hero-bg img { object-position: 50% 50%; }
.hero-bg::after { background: linear-gradient(180deg, rgba(62, 50, 44, .06), rgba(62, 50, 44, .12)); }
.hero-card { width: min(680px, 100%); background: rgba(250, 246, 242, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 767px) {
  .hero-bg img { object-position: 30% 50%; }
  .s-hero { align-items: end; padding-top: 38vh; }
}
.hero-bg picture { display: contents; }
@media (max-width: 767px) {
  .hero-bg { bottom: auto; height: 64%; }
  .hero-bg img { object-position: 50% 70%; }
  .s-hero { padding-top: 46vh; background: var(--paper); }
  .hero-card { padding: 26px 20px 24px; }
}

/* ===================== Luxuriös und seriös ===================== */
/* Ruhe statt Weichheit: feine Linien statt Schatten, kleine Radien, dünne Schriftschnitte, mehr Luft */
:root { --r-xl: 4px; --r-lg: 3px; --r-md: 2px; --shadow: none; --shadow-sm: none; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --line: rgba(62, 50, 44, .14); }
body { font-weight: 400; }

/* Typografie: leicht, gross, eng gesetzt; kleine Versal-Labels mit weiter Laufweite */
.h2 { font: 300 clamp(32px, 3.6vw, 52px)/1.08 var(--sans); letter-spacing: -.02em; }
.hero-headline { font: 300 clamp(30px, 3vw, 44px)/1.12 var(--sans); letter-spacing: -.015em; }
.hero-sub, .sec-sub { font-weight: 400; }
.eyebrow { font: 500 11.5px/1.3 var(--sans); letter-spacing: .28em; color: var(--ink-soft); }
.card-title, .acc-btn, .hours-title, .f-name, .faq-btn { font-weight: 400; letter-spacing: .01em; }
.card-title { font-size: 22px; }
.acc-btn { font-size: 18px; }
.s-quote blockquote { font: 300 clamp(26px, 2.8vw, 40px)/1.3 var(--sans); letter-spacing: -.01em; }
.nav a, .nav-contact { font: 500 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 10px 12px; }
.nav a:hover, .nav-contact:hover { background: none; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Buttons: rechteckig, Versalien, dunkel gefüllt oder fein umrandet */
.btn-cta, .btn-soft, .btn, .book { border-radius: 2px; min-height: 50px; padding: 15px 28px; font: 500 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; box-shadow: none; transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
.btn-cta, .btn-solid, .book { background: var(--ink); color: #faf6f2; border: 1px solid var(--ink); }
.btn-cta:hover, .btn-solid:hover, .book:hover { background: #2a221e; transform: none; }
.btn-soft, .btn { background: transparent; color: var(--ink); border: 1px solid rgba(62, 50, 44, .55); }
.btn-soft:hover, .btn:hover { background: var(--ink); color: #faf6f2; }
.btn-cta:active, .btn-soft:active, .btn:active, .book:active { transform: scale(.98); }
.book { min-height: 44px; padding: 13px 22px; font-size: 11.5px; }
.btn-cta .wa-ic { width: 16px; height: 16px; }

/* Header: schlanke Leiste mit Haarlinie */
.site-header, .home .site-header { height: 84px; background: var(--paper); border-bottom: 1px solid var(--line); }

/* Hero: klare Tafel statt Glas-Kissen */
.hero-card { border-radius: 2px; background: rgba(250, 246, 242, .9); border: 1px solid rgba(255, 255, 255, .6); box-shadow: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 52px clamp(24px, 5vw, 72px) 54px; }
.hero-script { font-size: clamp(48px, 5.6vw, 82px); }
.hero-btns { gap: 14px; margin-top: 32px; }
.hero-badge { background: rgba(45, 34, 28, .2); font-size: 10.5px; letter-spacing: .2em; }

/* Karten: Haarlinien, keine Schatten, keine Kreise */
.cards { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card { background: transparent; border: 0; border-radius: 0; padding: 40px 36px 44px; }
.card + .card { border-left: 1px solid var(--line); }
.card:nth-child(2) { transform: none; background: transparent; }
.card-num { display: block; width: auto; height: auto; background: none; border-radius: 0; font: 400 13px/1 var(--sans); letter-spacing: .2em; color: var(--ink-soft); }
.card-title { margin-top: 26px; }

/* Galerie: ruhiges Raster, Bögen bleiben als einziges weiches Motiv, Bildtitel darunter in Versalien */
.gallery { gap: 24px; }
.g, .g img { border-radius: 2px; box-shadow: none; }
.g { aspect-ratio: auto; overflow: visible; }
.g img { aspect-ratio: 6 / 7; height: auto; }
.g:nth-child(even) { margin-top: 0; }
.g-arch img { border-radius: 999px 999px 2px 2px; }
.g:hover img { transform: none; }
.g figcaption { position: static; margin-top: 14px; padding: 0; background: none; border-radius: 0; font: 500 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }

/* Über mich */
.about-img img { box-shadow: none; border-radius: 999px 999px 2px 2px; }

/* Preise und FAQ: Liste mit Haarlinien statt einzelner Kissen */
.prices-card { background: transparent; box-shadow: none; border: 0; padding: 0; border-radius: 0; }
.acc, .faq-list { gap: 0; border-top: 1px solid rgba(62, 50, 44, .35); }
.acc-item, .faq { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.acc-btn { padding: 22px 0; min-height: 76px; }
.faq-btn { padding: 20px 0; }
.acc-inner { padding: 0; }
.faq .acc-inner p { padding: 0 48px 24px 0; }
.acc-icon { width: 14px; height: 14px; background: none !important; border-radius: 0; }
.acc-icon::before, .acc-icon::after { left: 0; right: 0; top: 6.5px; height: 1px; background: var(--ink) !important; }
.acc-link { border-radius: 2px; background: transparent; border: 1px solid rgba(62, 50, 44, .4); padding: 12px 18px; font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.acc-link:hover { background: var(--ink); color: #faf6f2; }
.svc-group { font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.acc-inner li { border-bottom: 1px solid var(--line); }
.price-note { text-align: left; margin: 20px 0 0; }

/* Kontakt */
.hours-card { background: transparent; border: 0; border-top: 1px solid rgba(62, 50, 44, .35); border-radius: 0; box-shadow: none; padding: 20px 0 0; }
.hours-card li { border-bottom: 1px solid var(--line); padding: 11px 0; }
.hours-title { font: 500 11.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.hours-note { padding: 0; background: none; border-radius: 0; font: 400 14px/1.4 var(--sans); color: var(--ink-soft); }
.visit-img img { box-shadow: none; }

/* Footer und Pop-up */
.site-footer { border-radius: 0; }
.promo { border-radius: 2px; }
.promo-close { border-radius: 0; background: none; }
.promo-eyebrow { border-radius: 0; background: none; padding: 0; letter-spacing: .24em; }

@media (max-width: 1100px) {
  .cards { border-bottom: 0; }
  .card + .card { border-left: 0; }
  .card { border-bottom: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .site-header, .home .site-header { height: 66px; }
  .card { padding: 30px 4px 34px; }
  .hero-card { padding: 30px 22px 28px; }
  .m-cta-wa { border-radius: 2px; background: var(--ink); font: 500 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
  .m-cta-tel { border-radius: 2px; background: transparent; border: 1px solid rgba(62, 50, 44, .4); color: var(--ink); }
  .g figcaption { font-size: 10px; letter-spacing: .16em; margin-top: 10px; }
}
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/JosefinSans-300.woff2") format("woff2"); }
.visit-img img { border-radius: 2px 0 0 2px; aspect-ratio: 5 / 6; }
@media (max-width: 767px) { .visit-img img { border-radius: 2px; aspect-ratio: 4 / 4.4; } }

/* Leicht gerundet statt ganz eckig */
:root { --r-xl: 14px; --r-lg: 12px; --r-md: 10px; }
.btn-cta, .btn-soft, .btn, .book, .acc-link { border-radius: 10px; }
.hero-card { border-radius: 16px; }
.g, .g img { border-radius: 12px; }
.g-arch img { border-radius: 999px 999px 12px 12px; }
.about-img img { border-radius: 999px 999px 12px 12px; }
.visit-img img { border-radius: 14px 0 0 14px; }
.promo { border-radius: 14px; }
.promo-close { border-radius: 8px; }
@media (max-width: 767px) {
  .visit-img img { border-radius: 12px; }
  .m-cta-wa, .m-cta-tel { border-radius: 10px; }
}
/* Header: Schriftzug in der Schnürchenschrift als Logo */
.logo.logo-word { height: auto; display: inline-flex; align-items: center; text-decoration: none; }
.logo-script { display: block; padding: 4px 6px 0 0; font: 400 40px/1 var(--script); color: var(--rosewood); white-space: nowrap; }
@media (max-width: 767px) { .logo-script { font-size: 32px; } }

/* ===================== Hero: Feinschliff nach Apple (Material, Typografie) und Emil Kowalski (Bewegung) ===================== */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* Bild: Salon bleibt klar, nur ein weicher Verlauf unten für Tiefe und eine leichte Vignette zur Mitte hin */
.hero-bg::after { background:
  radial-gradient(ellipse 60% 55% at 50% 50%, rgba(45, 34, 28, .10), rgba(45, 34, 28, 0) 70%),
  linear-gradient(180deg, rgba(45, 34, 28, .06) 0%, rgba(45, 34, 28, 0) 30%, rgba(45, 34, 28, .16) 100%); }

/* Tafel als echtes Material: durchscheinend, sattere Unschärfe, helle Oberkante wie einfallendes Licht,
   Schatten passend zur Grösse der Fläche */
.hero-card {
  width: min(700px, 100%);
  background: rgba(250, 246, 242, .78);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(45, 34, 28, .06), 0 24px 60px -12px rgba(45, 34, 28, .28);
}

/* Typografie mit grössenabhängiger Laufweite: gross eng, klein weit; Text auf Material etwas kräftiger */
.hero-card .eyebrow { font-size: 11px; letter-spacing: .3em; color: var(--ink-soft); }
.hero-script { margin-top: 14px; line-height: .95; letter-spacing: 0; }
.hero-headline { margin-top: 14px; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; }
.hero-sub { margin-top: 18px; font-weight: 400; color: #5a4c44; letter-spacing: .005em; text-wrap: pretty; }
.hero-btns { margin-top: 34px; }

/* Buttons: Rückmeldung beim Drücken, Hover nur mit echter Maus */
.hero-card .btn-cta, .hero-card .btn-soft { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out); }
.hero-card .btn-cta:active, .hero-card .btn-soft:active { transform: scale(.97); }
@media (hover: none) { .hero-card .btn-soft:hover { background: transparent; color: var(--ink); } .hero-card .btn-cta:hover { background: var(--ink); } }

/* Auftritt beim ersten Laden: Bild setzt sich langsam, Tafel materialisiert (Unschärfe und Grösse zusammen),
   Inhalte folgen gestaffelt. Nur einmal pro Besuch sichtbar, daher darf es etwas Ruhe haben. */
@keyframes eh-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes eh-materialize { from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes eh-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-bg img { animation: eh-settle 1.6s var(--ease-out) both; }
.hero-card { animation: eh-materialize .7s var(--ease-out) .1s both; }
.hero-card > * { animation: eh-rise .5s var(--ease-out) both; }
.hero-card > :nth-child(1) { animation-delay: .32s; }
.hero-card > :nth-child(2) { animation-delay: .38s; }
.hero-card > :nth-child(3) { animation-delay: .44s; }
.hero-card > :nth-child(4) { animation-delay: .50s; }
.hero-card > :nth-child(5) { animation-delay: .56s; }
.hero-badge { animation: eh-rise .6s var(--ease-out) .7s both; }

/* Weniger Bewegung: nur sanftes Einblenden, keine Verschiebung, keine Skalierung */
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { animation: none; }
  .hero-card, .hero-card > *, .hero-badge { animation: eh-fade .3s ease both !important; transform: none !important; filter: none !important; }
}
@keyframes eh-fade { from { opacity: 0; } to { opacity: 1; } }
/* Weniger Transparenz: Tafel wird fest */
@media (prefers-reduced-transparency: reduce) {
  .hero-card { background: #faf6f2; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 767px) {
  .hero-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 16px 40px -12px rgba(45, 34, 28, .25); }
  .hero-headline { font-size: 29px; }
}
.nw { white-space: nowrap; }
.hero-card { width: min(780px, 100%); }
.hero-headline { font-size: clamp(30px, 2.7vw, 39px); text-wrap: wrap; }
@media (max-width: 900px) { .br-d { display: none; } .hero-headline { text-wrap: balance; } }
@media (max-width: 767px) { .hero-card .eyebrow { font-size: 10px; letter-spacing: .2em; } .hero-headline { font-size: 28px; } }

/* ===================== Hero ohne Tafel: Studio als Hintergrund, H1, H2, Buchung, Fakten ===================== */
.hero-x { display: block; place-items: initial; min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); padding: 0; color: #faf6f2; overflow: hidden; }
.hero-x .hero-bg img { object-position: 50% 50%; }
/* Lesbarkeit: dunkler Verlauf von links und unten, rechts bleibt der Salon hell und erkennbar */
.hero-x .hero-bg::after { background:
  linear-gradient(90deg, rgba(30, 22, 18, .72) 0%, rgba(30, 22, 18, .48) 34%, rgba(30, 22, 18, .08) 62%, rgba(30, 22, 18, 0) 78%),
  linear-gradient(180deg, rgba(30, 22, 18, 0) 55%, rgba(30, 22, 18, .55) 100%); }
.hx-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: inherit; padding: clamp(72px, 11vh, 140px) var(--edge) 0; }
.hx-copy { max-width: 640px; }
.hx-eyebrow { font: 500 12px/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(250, 246, 242, .8); }
.hx-h1 { margin-top: 22px; font: 300 clamp(44px, 5.4vw, 80px)/1.02 var(--sans); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.hx-h2 { margin-top: 24px; max-width: 30em; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--sans); letter-spacing: 0; color: rgba(250, 246, 242, .88); text-wrap: pretty; }
.hx-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 38px; }
.hero-x .btn-cta { background: #faf6f2; color: var(--ink); border-color: #faf6f2; }
.hero-x .btn-cta:hover { background: #fff; }
.hx-tel { display: inline-flex; align-items: center; min-height: 50px; padding: 15px 26px; border: 1px solid rgba(250, 246, 242, .6); border-radius: 10px; font: 500 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #faf6f2; text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
.hx-tel:active, .hero-x .btn-cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .hx-tel:hover { background: #faf6f2; color: var(--ink); } }
.hx-link { display: inline-block; margin-top: 22px; font: 500 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #faf6f2; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* Fakten unten auf der Haarlinie */
.hx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 56px 0 0; padding: 26px 0 34px; border-top: 1px solid rgba(250, 246, 242, .3); }
.hx-facts dt { font: 500 11px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(250, 246, 242, .7); }
.hx-facts dd { margin: 10px 0 0; font: 400 15.5px/1.5 var(--sans); color: #faf6f2; font-variant-numeric: tabular-nums; }

/* Auftritt: Bild setzt sich, Text erscheint gestaffelt von unten, Faktenleiste zuletzt */
.hx-copy > *, .hx-facts { animation: eh-rise .6s var(--ease-out) both; }
.hx-copy > :nth-child(1) { animation-delay: .15s; }
.hx-copy > :nth-child(2) { animation-delay: .22s; }
.hx-copy > :nth-child(3) { animation-delay: .29s; }
.hx-copy > :nth-child(4) { animation-delay: .36s; }
.hx-copy > :nth-child(5) { animation-delay: .43s; }
.hx-facts { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) { .hx-copy > *, .hx-facts { animation: eh-fade .3s ease both !important; transform: none !important; } }

@media (max-width: 1100px) { .hx-facts { gap: 20px; } }
@media (max-width: 767px) {
  .hero-x { min-height: calc(100svh - 66px); padding: 0; background: #2a201b; }
  .hero-x .hero-bg { bottom: 0; height: auto; }
  .hero-x .hero-bg img { object-position: 50% 30%; }
  .hero-x .hero-bg::after { background: linear-gradient(180deg, rgba(30, 22, 18, .05) 0%, rgba(30, 22, 18, .25) 35%, rgba(30, 22, 18, .82) 70%, rgba(30, 22, 18, .9) 100%); }
  .hx-inner { justify-content: flex-end; padding: 34vh 20px 0; }
  .hx-eyebrow { font-size: 10.5px; letter-spacing: .24em; }
  .hx-h1 { margin-top: 14px; font-size: 40px; line-height: 1.04; }
  .hx-h2 { margin-top: 16px; font-size: 16px; }
  .hx-btns { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 26px; }
  .hx-btns > * { width: 100%; justify-content: center; }
  .hx-link { margin-top: 18px; }
  .hx-facts { grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 30px; padding: 20px 0 26px; }
  .hx-facts > div:last-child { grid-column: 1 / -1; }
  .hx-facts dd { font-size: 14px; }
}
@media (max-width: 767px) { .hero-x .btn-cta, .hx-tel { padding: 15px 14px; letter-spacing: .12em; font-size: 12px; white-space: nowrap; } .hx-link { letter-spacing: .12em; font-size: 12px; } }

/* Hero ruhig und hell wie der Rest der Seite: helles Beige von links, dunkle Schrift, Salon rechts frei */
.hero-x { color: var(--ink); background: var(--paper); }
.hero-x .hero-bg::after { background: linear-gradient(90deg, rgba(244, 236, 230, .97) 0%, rgba(244, 236, 230, .9) 30%, rgba(244, 236, 230, .45) 52%, rgba(244, 236, 230, 0) 70%); }
.hx-inner { justify-content: center; padding: 0 var(--edge); }
.hx-copy { max-width: 600px; }
.hx-eyebrow { color: var(--ink-soft); }
.hx-h1 { margin-top: 20px; color: var(--ink); font-size: clamp(44px, 5vw, 74px); }
.hx-h2 { margin-top: 20px; font: 300 clamp(20px, 1.8vw, 26px)/1.35 var(--sans); letter-spacing: -.01em; color: var(--ink-soft); }
.hx-btns { margin-top: 40px; }
.hero-x .btn-cta { background: var(--ink); color: #faf6f2; border-color: var(--ink); }
.hero-x .btn-cta:hover { background: #2a221e; }
.hero-x .btn-soft { color: var(--ink); border-color: rgba(62, 50, 44, .55); background: transparent; }
@media (max-width: 767px) {
  .hero-x { background: var(--paper); min-height: 0; }
  .hero-x .hero-bg { position: relative; top: auto; right: auto; bottom: auto; left: auto; height: 58svh; z-index: 0; }
  .hero-x .hero-bg img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-position: 50% 45%; }
  .hero-x .hero-bg::after { background: linear-gradient(180deg, rgba(244, 236, 230, 0) 60%, rgba(244, 236, 230, 1) 100%); }
  .hx-inner { padding: 4px 20px 56px; justify-content: flex-start; }
  .hx-h1 { font-size: 38px; margin-top: 12px; }
  .hx-h2 { font-size: 19px; margin-top: 12px; }
  .hx-btns { margin-top: 26px; }
  .hero-x .btn-cta, .hero-x .btn-soft { padding: 15px 14px; letter-spacing: .12em; font-size: 12px; white-space: nowrap; }
}

/* Hero clean: geteilte Fläche, Text links auf dem Seitenbeige, Studiofoto rechts klar ohne Schleier */
.hero-x { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); }
.hero-x .hx-inner { display: flex; align-items: center; min-height: 0; padding: 64px clamp(32px, 5vw, 88px) 64px var(--edge); }
.hero-x .hero-bg { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 0; padding: 20px var(--edge) 20px 0; }
.hero-x .hero-bg::after { content: none; }
.hero-x .hero-bg img { position: absolute; top: 20px; right: var(--edge); bottom: 20px; left: 0; width: calc(100% - var(--edge)); height: calc(100% - 40px); object-fit: cover; object-position: 62% 50%; border-radius: 14px; }
.hx-copy { max-width: 520px; }
.hx-h1 { font-size: clamp(42px, 4.4vw, 68px); }
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-x { grid-template-columns: 1fr 1fr; min-height: 640px; }
}
@media (max-width: 767px) {
  .hero-x { display: flex; flex-direction: column-reverse; min-height: 0; }
  .hero-x .hero-bg { height: 52svh; padding: 12px 12px 0; }
  .hero-x .hero-bg img { top: 12px; right: 12px; bottom: 0; left: 12px; width: calc(100% - 24px); height: calc(100% - 12px); border-radius: 12px; object-position: 50% 45%; }
  .hero-x .hx-inner { padding: 30px 20px 56px; }
}
@media (min-width: 768px) { .hx-copy { max-width: 580px; } .hx-btns { flex-wrap: nowrap; } .hero-x .btn-cta, .hero-x .btn-soft { padding: 15px 22px; white-space: nowrap; } }
.hero-x .hx-inner { justify-content: flex-start; }
.hero-x .hx-copy { min-width: 0; }
.hero-x .hx-inner { flex-direction: column; justify-content: center; align-items: flex-start; }

/* ===================== Hero final: Bild über die ganze Fläche, eine saubere, feste Tafel unten links ===================== */
.hero-x { display: block; position: relative; min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); }
.hero-x .hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; z-index: 0; }
.hero-x .hero-bg img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: 50% 50%; }
.hero-x .hero-bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(30, 22, 18, 0) 60%, rgba(30, 22, 18, .18) 100%); }
.hero-x .hx-inner { position: absolute; z-index: 1; left: var(--edge); bottom: var(--edge); min-height: 0; padding: 0; display: block; }
.hero-x .hx-copy { width: min(560px, calc(100vw - 2 * var(--edge))); max-width: none; padding: 44px 48px 46px; background: var(--paper); border-radius: 12px; }
.hx-h1 { font-size: clamp(38px, 3.6vw, 56px); }
.hx-h2 { margin-top: 16px; font-size: clamp(18px, 1.4vw, 21px); }
.hx-btns { margin-top: 32px; }
@media (min-width: 768px) { .hero-x .btn-cta, .hero-x .btn-soft { padding: 15px 20px; } }
@media (min-width: 768px) and (max-width: 1100px) { .hero-x { min-height: 620px; } }
@media (max-width: 767px) {
  .hero-x { display: block; min-height: calc(100svh - 66px); }
  .hero-x .hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; padding: 0; }
  .hero-x .hero-bg img { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0; object-position: 50% 35%; }
  .hero-x .hx-inner { left: 12px; right: 12px; bottom: 12px; padding: 0; }
  .hero-x .hx-copy { width: auto; padding: 26px 22px 24px; border-radius: 12px; }
  .hx-h1 { font-size: 34px; margin-top: 10px; }
  .hx-h2 { font-size: 17px; margin-top: 10px; }
  .hx-btns { margin-top: 22px; }
}
.hero-x .hx-copy { width: min(620px, calc(100vw - 2 * var(--edge))); }
@media (min-width: 768px) { .hero-x .btn-cta, .hero-x .btn-soft { letter-spacing: .14em; } }
@media (max-width: 767px) {
  .hero-x { background: var(--paper); }
  .hero-x .hero-bg img { top: auto; bottom: 30%; height: 100%; object-position: 50% 100%; }
}
@media (max-width: 767px) {
  .hero-x .hero-bg img { bottom: 22%; }
  .hero-x .hx-inner { left: 0; right: 0; bottom: 0; }
  .hero-x .hx-copy { border-radius: 16px 16px 0 0; padding: 28px 22px 30px; }
}
@media (max-width: 767px) { .hero-x .hx-copy { width: auto; } }

/* Hero ohne Box: Text direkt auf dem Foto, unten links; nur dort ein weicher Verlauf für die Lesbarkeit */
.hero-x .hx-copy { background: none; padding: 0; border-radius: 0; width: min(640px, calc(100vw - 2 * var(--edge))); }
.hero-x .hx-inner { bottom: clamp(48px, 8vh, 96px); }
.hero-x .hero-bg::after { background:
  linear-gradient(0deg, rgba(28, 21, 17, .78) 0%, rgba(28, 21, 17, .45) 32%, rgba(28, 21, 17, 0) 62%),
  linear-gradient(90deg, rgba(28, 21, 17, .35) 0%, rgba(28, 21, 17, 0) 55%); }
.hero-x .hx-eyebrow { color: rgba(250, 246, 242, .82); }
.hero-x .hx-h1 { color: #fff; }
.hero-x .hx-h2 { color: rgba(250, 246, 242, .9); }
.hero-x .btn-cta { background: #faf6f2; color: var(--ink); border-color: #faf6f2; }
.hero-x .btn-cta:hover { background: #fff; }
.hero-x .btn-soft { color: #faf6f2; border-color: rgba(250, 246, 242, .65); background: transparent; }
@media (hover: hover) and (pointer: fine) { .hero-x .btn-soft:hover { background: #faf6f2; color: var(--ink); } }
@media (max-width: 767px) {
  .hero-x { background: #2a201b; }
  .hero-x .hero-bg img { top: 0; bottom: 0; height: 100%; object-position: 30% 50%; }
  .hero-x .hero-bg::after { background: linear-gradient(0deg, rgba(28, 21, 17, .85) 0%, rgba(28, 21, 17, .55) 38%, rgba(28, 21, 17, 0) 66%); }
  .hero-x .hx-inner { left: 20px; right: 20px; bottom: 32px; }
  .hero-x .hx-copy { width: auto; padding: 0; border-radius: 0; }
}
@media (min-width: 768px) { .hero-x .hx-h1 { font-size: clamp(44px, 4.8vw, 74px); } .hero-x .hx-copy { width: min(720px, calc(100vw - 2 * var(--edge))); } }

/* Startseite: Originallogo, Navigation und Terminbutton liegen im Bild (kein eigener Header-Streifen) */
.home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; height: 96px; background: transparent; border: 0; color: #faf6f2; }
.home .site-header .logo { height: 72px; }
.home .site-header .logo img { filter: drop-shadow(0 1px 6px rgba(20, 14, 10, .35)); }
.home .site-header .nav a, .home .site-header .nav-contact { color: #faf6f2; text-shadow: 0 1px 8px rgba(20, 14, 10, .35); }
.home .site-header .book { background: #faf6f2; color: var(--ink); border-color: #faf6f2; }
.home .site-header .book:hover { background: #fff; }
.home .hero-x { min-height: 100vh; min-height: 100svh; }
/* Zusätzlicher sanfter Verlauf oben, damit Logo und Navigation auf dem hellen Deckenbereich lesbar bleiben */
.home .hero-x .hero-bg::before { content: ""; position: absolute; top: 0; right: 0; bottom: auto; left: 0; z-index: 1; height: 200px; background: linear-gradient(180deg, rgba(28, 21, 17, .5), rgba(28, 21, 17, 0)); pointer-events: none; }
@media (max-width: 767px) {
  .home .site-header { height: 72px; }
  .home .site-header .logo { height: 54px; }
  .home .site-header .burger { color: #faf6f2; }
  .burger[aria-expanded="true"], .home .site-header .burger[aria-expanded="true"] { color: var(--ink); }
}
@media (min-width: 768px) { .home .site-header { height: 108px; } .home .site-header .logo { height: 84px; } .home .hero-x .hero-bg::before { height: 240px; background: linear-gradient(180deg, rgba(28, 21, 17, .58), rgba(28, 21, 17, 0)); } }
/* Terminbutton im Bild: dezent umrandet wie die Navigation, kein heller Block */
.home .site-header .book { background: transparent; color: #faf6f2; border: 1px solid rgba(250, 246, 242, .7); min-height: 40px; padding: 11px 18px; font-size: 11.5px; letter-spacing: .18em; text-shadow: 0 1px 8px rgba(20, 14, 10, .35); }
@media (hover: hover) and (pointer: fine) { .home .site-header .book:hover { background: #faf6f2; color: var(--ink); text-shadow: none; } }
@media (max-width: 767px) { .home .site-header .book { min-height: 36px; padding: 9px 14px; font-size: 11px; } }

/* ===================== So arbeite ich: drei Versprechen mit interaktiver Strichzeichnung ===================== */
:root { --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }
.s-promise { padding: clamp(90px, 10vw, 150px) var(--edge); }
.pr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 110px); align-items: center; max-width: 1320px; margin: 0 auto; }
.pr-h2 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); }
.pr-list { margin-top: 44px; border-top: 1px solid rgba(62, 50, 44, .3); }
.pr-item { position: relative; border-bottom: 1px solid var(--line); }
.pr-head { font: inherit; }
.pr-btn { display: flex; align-items: baseline; gap: 22px; width: 100%; padding: 24px 0; text-align: left; color: var(--ink-soft); transition: color .3s ease; }
.pr-item.is-active .pr-btn { color: var(--ink); }
.pr-num { flex: none; width: 26px; font: 500 12px/1 var(--sans); letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.pr-title { font: 300 clamp(22px, 2vw, 28px)/1.2 var(--sans); letter-spacing: -.01em; transition: transform .45s var(--ease-out); }
.pr-item.is-active .pr-title { transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) { .pr-btn:hover { color: var(--ink); } }
/* Text klappt weich auf, nur beim aktiven Versprechen */
.pr-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-in-out); }
.pr-item.is-active .pr-body { grid-template-rows: 1fr; }
.pr-body > div { overflow: hidden; }
.pr-body p { padding: 0 0 26px 54px; max-width: 34em; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .5s var(--ease-out); }
.pr-item.is-active .pr-body p { opacity: 1; transform: none; transition-delay: .12s; }
/* Fortschrittslinie: wechselt automatisch zum nächsten Versprechen, pausiert bei Maus oder Fokus */
.pr-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.s-promise.is-running .pr-item.is-active .pr-bar i { animation: pr-fill 7s linear forwards; }
.s-promise.is-paused .pr-item.is-active .pr-bar i { animation-play-state: paused; }
@keyframes pr-fill { to { transform: scaleX(1); } }

/* Bühne mit Strichzeichnung */
.pr-stage { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; background: var(--petal); border: 1px solid var(--line); overflow: hidden; touch-action: pan-y; user-select: none; }
.pr-art { position: absolute; top: 12%; right: 12%; bottom: 12%; left: 12%; width: 76%; height: 76%; overflow: visible; fill: none; stroke: var(--rosewood); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .4s ease; }
.pr-art .dr { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pr-art .dot { fill: var(--rosewood); stroke: none; }
.pr-art.is-active { opacity: 1; }
.pr-art.is-active .dr { animation: pr-draw 1.6s var(--ease-in-out) forwards; }
.pr-art.is-active .dr:nth-of-type(2) { animation-delay: .12s; }
.pr-art.is-active g .dr { animation-delay: .5s; }
@keyframes pr-draw { to { stroke-dashoffset: 0; } }
.pr-clock .hand-m, .pr-clock .hand-h { transform-origin: 120px 120px; transform-box: view-box; }
.pr-scissors .blade-a, .pr-scissors .blade-b { transform-origin: 120px 116px; transform-box: view-box; }
.pr-arch .shine path { stroke: var(--rose); stroke-width: 10; opacity: .5; vector-effect: none; }
.pr-arch .shine { transform-box: view-box; }
/* Ruhige Eigenbewegung auf Touch-Geräten (dort folgt nichts dem Finger) */
@media (hover: none), (pointer: coarse) {
  .pr-clock .hand-m { animation: pr-spin 12s linear infinite; }
  .pr-clock .hand-h { animation: pr-spin 144s linear infinite; }
  .pr-scissors .blade-a { animation: pr-snip-a 2.4s var(--ease-in-out) infinite alternate; }
  .pr-scissors .blade-b { animation: pr-snip-b 2.4s var(--ease-in-out) infinite alternate; }
  .pr-arch .shine { animation: pr-sweep 4s var(--ease-in-out) infinite alternate; }
}
@keyframes pr-spin { to { transform: rotate(360deg); } }
@keyframes pr-snip-a { from { transform: rotate(-2deg); } to { transform: rotate(-14deg); } }
@keyframes pr-snip-b { from { transform: rotate(2deg); } to { transform: rotate(14deg); } }
@keyframes pr-sweep { from { transform: translateX(-60px); } to { transform: translateX(80px); } }
/* Beschriftung oben links und grosse Nummer unten links, rollt wie ein Zähler */
.pr-cap { position: absolute; left: 28px; top: 26px; height: 1.3em; font: 500 11.5px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.pr-cap span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .4s var(--ease-out); }
.pr-cap span.is-active { opacity: 1; transform: none; transition-delay: .15s; }
.pr-big { position: absolute; left: 22px; bottom: 14px; height: 1em; overflow: hidden; font: 300 clamp(72px, 9vw, 132px)/1 var(--sans); letter-spacing: -.04em; color: rgba(118, 95, 80, .2); font-variant-numeric: tabular-nums; }
.pr-digits { display: flex; flex-direction: column; transition: transform .8s var(--ease-in-out); }
.pr-digits b { font-weight: inherit; height: 1em; line-height: 1; }

@media (max-width: 900px) {
  .pr-grid { grid-template-columns: 1fr; gap: 36px; }
  .pr-stage { order: -1; aspect-ratio: 5 / 4; }
  .pr-left { text-align: left; }
}
@media (max-width: 767px) {
  .pr-btn { gap: 16px; padding: 20px 0; }
  .pr-body p { padding-left: 42px; font-size: 16px; }
  .pr-cap { left: 20px; top: 18px; }
  .pr-big { left: 16px; bottom: 8px; }
}
/* Weniger Bewegung: Zeichnung steht sofort, kein Automatikwechsel, keine Eigenbewegung */
@media (prefers-reduced-motion: reduce) {
  .pr-art .dr { stroke-dashoffset: 0 !important; animation: none !important; }
  .pr-art g, .pr-art .shine { animation: none !important; }
  .pr-bar { display: none; }
  .pr-digits, .pr-title, .pr-body, .pr-body p { transition: opacity .2s ease !important; transform: none !important; }
}
/* Striche in Zeichnungseinheiten, damit das Nachzeichnen (pathLength) überall exakt aufgeht */
.pr-art { stroke-width: .6; }
.pr-art .dr { vector-effect: none; }
@media (max-width: 900px) {
  .pr-left { display: contents; }
  .pr-grid > .pr-left > .eyebrow { order: 1; }
  .pr-grid > .pr-left > .pr-h2 { order: 2; margin-top: -18px; }
  .pr-stage { order: 3; }
  .pr-grid > .pr-left > .pr-list { order: 4; margin-top: -8px; }
  .pr-art { stroke-width: .8; }
}

/* Echte Fotos statt Strichzeichnungen: Aufdecken mit Rundbogen-Maske, ruhiges Einzoomen, Maus-Parallaxe, Lichtschein */
.pr-stage { background: var(--ink); }
.pr-art.pr-ph { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 1; overflow: hidden; clip-path: inset(100% 0 0 0 round 0); transition: clip-path 0s linear .95s; z-index: 0; stroke: none; }
.pr-art.pr-ph.is-active { clip-path: inset(0 0 0 0 round 0); z-index: 1; transition: clip-path .9s var(--ease-in-out); }
.pr-ph img { position: absolute; top: -2.5%; right: -2.5%; bottom: -2.5%; left: -2.5%; width: 105%; height: 105%; max-width: none; object-fit: cover; translate: var(--px, 0px) var(--py, 0px); scale: 1.05; transition: scale 1.6s var(--ease-out); will-change: scale, translate; }
.pr-ph.is-active img { scale: 1; }
.pr-ph:nth-of-type(1) img { object-position: 50% 50%; }
.pr-ph:nth-of-type(2) img { object-position: 50% 30%; }
.pr-ph:nth-of-type(3) img { object-position: 50% 22%; }
.pr-stage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(28,21,17,.45) 0%, rgba(28,21,17,0) 28%, rgba(28,21,17,0) 55%, rgba(28,21,17,.6) 100%); }
.pr-glow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,240,225,.28), rgba(255,240,225,0) 70%); transition: opacity .5s ease; mix-blend-mode: soft-light; }
.pr-stage.is-hover .pr-glow { opacity: 1; }
.pr-cap { z-index: 3; color: #faf6f2; }
.pr-big { z-index: 3; color: rgba(250, 246, 242, .85); }
@media (prefers-reduced-motion: reduce) {
  .pr-art.pr-ph { transition: opacity .3s ease; clip-path: none; opacity: 0; }
  .pr-art.pr-ph.is-active { opacity: 1; }
  .pr-ph img, .pr-ph.is-active img { scale: 1; translate: none; transition: none; }
  .pr-glow { display: none; }
}

/* Bühne im Hochformat wie die Fotos, damit nichts abgeschnitten wirkt */
.pr-stage { aspect-ratio: 6 / 7; }
@media (max-width: 900px) { .pr-stage { aspect-ratio: 6 / 7; } }
@media (min-width: 901px) { .pr-stage { max-height: 80vh; } }
@media (min-width: 901px) { .pr-stage { justify-self: end; width: 100%; } }

/* Einblicke: vier gleiche Rundbogen-Bilder, gleiche Höhe, ruhig in einer Reihe */
.gallery { align-items: start; }
.g img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; border-radius: 999px 999px 12px 12px; }
.g-arch img { border-radius: 999px 999px 12px 12px; }
.g figcaption { text-align: center; }
.about-copy > p.signature, .signature { font-size: 40px; }
@media (max-width: 767px) { .about-copy > p.signature, .signature { font-size: 34px; } }

/* Einblicke, Redaktions-Layout: ein grosser Rundbogen links, rechts breites Bild und zwei Hochformate.
   Beschriftung liegt im Bild, nummeriert und ruhig. Gleiche Abstände, gleiche Radien. */
.gallery { counter-reset: g; display: grid; grid-template-columns: 1.1fr 1fr .95fr; grid-template-rows: repeat(2, clamp(240px, 24vw, 340px)); gap: 16px; max-width: 1240px; margin: 56px auto 0; align-items: stretch; }
.g { counter-increment: g; position: relative; margin: 0; height: 100%; aspect-ratio: auto; overflow: hidden; border-radius: 12px; box-shadow: none; background: var(--blush); isolation: isolate; }
.g:nth-child(n) { margin-top: 0; }
.g img, .g-arch img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; transition: transform 1s var(--ease-out); }
.g:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; border-radius: 999px 999px 12px 12px; }
.g:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.g:nth-child(3) { grid-column: 3; grid-row: 1; }
.g:nth-child(4) { grid-column: 3; grid-row: 2; }
.g:nth-child(1) img { object-position: 38% 50%; }
.g:nth-child(2) img { object-position: 50% 50%; }
.g:nth-child(3) img { object-position: 50% 55%; }
.g:nth-child(4) img { object-position: 50% 40%; }
.g::after { content: ""; position: absolute; top: auto; right: 0; bottom: 0; left: 0; height: 46%; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(28, 21, 17, .62), rgba(28, 21, 17, 0)); }
.g figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; margin: 0; padding: 0; background: none; border-radius: 0; text-align: left; display: flex; align-items: baseline; gap: 12px; font: 500 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #faf6f2; }
.g figcaption::before { content: counter(g, decimal-leading-zero); font-variant-numeric: tabular-nums; opacity: .7; }
.g:nth-child(1) figcaption { left: 0; right: 0; bottom: 22px; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .g:hover img { transform: scale(1.035); } }
/* Beim Erscheinen: Bild deckt sich von unten auf, gestaffelt */
.gallery.rv .g { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path .9s var(--ease-in-out); }
.gallery.rv .g:nth-child(1) { clip-path: inset(0 0 100% 0 round 999px 999px 12px 12px); }
.gallery.rv.in .g { clip-path: inset(0 0 0 0 round 12px); }
.gallery.rv.in .g:nth-child(1) { clip-path: inset(0 0 0 0 round 999px 999px 12px 12px); }
.gallery.rv.in .g:nth-child(2) { transition-delay: .08s; }
.gallery.rv.in .g:nth-child(3) { transition-delay: .16s; }
.gallery.rv.in .g:nth-child(4) { transition-delay: .24s; }
@media (max-width: 900px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 12px; margin-top: 36px; }
  .g { aspect-ratio: 4 / 5; height: auto; }
  .g:nth-child(1) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 5 / 6; border-radius: 999px 999px 12px 12px; }
  .g:nth-child(2), .g:nth-child(3), .g:nth-child(4) { grid-column: auto; grid-row: auto; }
  .g:nth-child(2) { aspect-ratio: 4 / 5; }
  .g figcaption { left: 14px; bottom: 12px; font-size: 10px; letter-spacing: .18em; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .gallery.rv .g, .gallery.rv .g:nth-child(1) { clip-path: none !important; transition: none !important; } .g img { transition: none !important; } }

/* ===== Responsive-Feinschliff (steht zuletzt, gewinnt gegen ältere Regeln) ===== */
/* Besuch uns: unter 900px untereinander, Bild oben als Rundbogen */
@media (max-width: 900px) {
  .s-visit { grid-template-columns: 1fr; padding-right: var(--edge); gap: 36px; }
  .visit-copy { max-width: none; justify-self: stretch; }
  .visit-img { order: -1; align-self: auto; }
  .visit-img img { width: 100%; max-width: 560px; margin: 0 auto; display: block; min-height: 0; height: auto; aspect-ratio: 5 / 6; border-radius: 999px 999px 12px 12px; }
  .hours-card li { gap: 12px; }
  .btn-row { flex-direction: row; }
  .btn-row > * { width: auto; flex: 1 1 220px; justify-content: center; text-align: center; }
}
@media (max-width: 520px) { .btn-row { flex-direction: column; } .btn-row > * { flex: none; width: 100%; } }
/* Über mich: Bild nie breiter als Spalte */
@media (max-width: 900px) { .about-img { max-width: 420px; margin-inline: auto; } }
/* So arbeite ich: auf Tablet Bühne begrenzen und zentrieren */
@media (min-width: 601px) and (max-width: 900px) {
  .pr-stage { max-width: 560px; width: 100%; margin-inline: auto; aspect-ratio: 1 / 1; }
  .pr-grid > .pr-left > .pr-list { width: 100%; max-width: 640px; margin-inline: auto; }
}
/* Einblicke: Tablet = Rundbogen gross, darunter drei in einer Reihe; Handy = zwei plus ein breites */
@media (min-width: 601px) and (max-width: 900px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .g:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16 / 11; max-width: 560px; width: 100%; justify-self: center; }
  .g:nth-child(2), .g:nth-child(3), .g:nth-child(4) { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
  .g:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .g:nth-child(4) img { object-position: 50% 38%; }
  .g figcaption { flex-direction: column; gap: 2px; align-items: flex-start; left: 12px; right: 10px; }
  .g:nth-child(1) figcaption { flex-direction: row; align-items: baseline; }
}
/* Hero und Buttons auf sehr schmalen Handys */
@media (max-width: 380px) {
  .hero-x .btn-cta, .hero-x .btn-soft { padding-inline: 14px; font-size: 11px; letter-spacing: .1em; }
  .hx-h1 { font-size: clamp(34px, 11vw, 44px); }
  .pr-title { font-size: 21px; }
  .pr-body p { padding-left: 0; }
}
/* Sehr breite Bildschirme: Inhalte bleiben mittig und ruhig */
@media (min-width: 1600px) {
  .pr-grid, .gallery { max-width: 1320px; }
  .s-visit { padding-right: max(var(--edge), calc((100vw - 1500px) / 2)); }
}
@media (max-width: 900px) { .about-img { width: 100%; } .about-img img { width: 100%; } }
@media (max-width: 600px) { .about-img { max-width: none; } }


/* ===== Runde 2: Scroll-gesteuert, Fotos ohne Zuschnitt-Fehler, Über mich, Zitat ===== */

/* So arbeite ich: Bereich klebt beim Scrollen, Scrollen wechselt das Versprechen (runter 01 > 03, hoch 03 > 01) */
.s-promise { --pr-steps: 3; padding: 0; height: calc(100vh + (var(--pr-steps) - 1) * 62vh); }
.s-promise .pr-grid { position: sticky; top: 0; height: 100vh; max-width: 1320px; margin: 0 auto; padding: 0 var(--edge); box-sizing: border-box; align-content: center; }
.pr-stage { aspect-ratio: 4 / 5; height: min(76vh, 780px); width: auto; max-width: 100%; max-height: none; justify-self: center; }
.pr-bar i { transform: scaleX(var(--p, 0)); transition: none; }
.s-promise.is-running .pr-item.is-active .pr-bar i { animation: none; }
.pr-ph img { top: -1.5%; right: -1.5%; bottom: -1.5%; left: -1.5%; width: 103%; height: 103%; }
.pr-ph:nth-of-type(1) img { object-position: 50% 50%; }
.pr-ph:nth-of-type(2) img { object-position: 50% 50%; }
.pr-ph:nth-of-type(3) img { object-position: 50% 40%; }
@media (max-width: 900px) {
  .s-promise .pr-grid { display: flex; flex-direction: column; gap: 0; height: 100svh; height: 100dvh; padding-top: 24px; padding-bottom: 16px; justify-content: flex-start; }
  .pr-grid > .pr-left { display: contents; }
  .pr-grid > .pr-left > .eyebrow { order: 1; }
  .pr-grid > .pr-left > .pr-h2 { order: 2; margin: 8px 0 14px; font-size: clamp(21px, 5.6vw, 28px); }
  .pr-stage { order: 3; flex: 1 1 0; min-height: 150px; height: auto; width: 100%; max-width: 560px; aspect-ratio: auto; align-self: center; }
  .pr-grid > .pr-left > .pr-list { order: 4; margin-top: 14px; width: 100%; max-width: 640px; align-self: center; }
  .pr-btn { padding: 12px 0; }
  .pr-body p { padding-bottom: 14px; font-size: 15px; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) {
  .s-promise { height: auto; padding: clamp(60px, 8vw, 110px) 0; }
  .s-promise .pr-grid { position: static; height: auto; }
}

/* Einblicke: alles ruhige Rechtecke, kein Halbrund */
.g:nth-child(1), .gallery.rv .g:nth-child(1), .gallery.rv.in .g:nth-child(1) { border-radius: 12px; }
.gallery.rv .g:nth-child(1) { clip-path: inset(0 0 100% 0 round 12px); }
.gallery.rv.in .g:nth-child(1) { clip-path: inset(0 0 0 0 round 12px); }
.g:nth-child(1) figcaption { left: 22px; right: 22px; justify-content: flex-start; bottom: 18px; }
.g:nth-child(1) img { object-position: 45% 50%; }
@media (max-width: 900px) { .g:nth-child(1) { border-radius: 12px; } }
@media (min-width: 601px) and (max-width: 900px) { .g:nth-child(1) { aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .g:nth-child(1) { aspect-ratio: 4 / 5; } .g:nth-child(1) figcaption { left: 12px; flex-direction: column; align-items: flex-start; } }

/* Über mich: Unterschrift tiefer, Button auf Höhe der Unterkante des Bildes */
@media (min-width: 901px) {
  .s-about { align-items: stretch; }
  .about-copy { display: flex; flex-direction: column; align-self: stretch; }
  .about-copy .signature { margin-top: auto; padding-top: 28px; margin-bottom: 20px; }
  .about-copy .btn-cta { align-self: flex-start; margin-bottom: 0; }
}
@media (max-width: 900px) { .about-copy .signature { margin-top: 28px; margin-bottom: 18px; } }

/* Zitat: gross, füllt den Bildschirm, Wörter blenden beim Scrollen ein */
.s-quote { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: clamp(100px, 14vw, 200px) var(--edge); }
.s-quote blockquote { max-width: 1180px; font: 300 clamp(36px, 5.6vw, 88px)/1.14 var(--sans); letter-spacing: -.025em; }
.s-quote blockquote p { margin: 0; }
.quote-orn { font-size: clamp(220px, 34vw, 560px); color: rgba(216, 198, 186, .4); }
.qw { display: inline-block; opacity: calc(.14 + .86 * var(--o, 1)); transform: translateY(calc((1 - var(--o, 1)) * 18px)); will-change: opacity, transform; }
@media (max-width: 600px) { .s-quote blockquote { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.16; } .s-quote { min-height: 85vh; } }
@media (prefers-reduced-motion: reduce) { .qw { opacity: 1; transform: none; } }

/* Über mich, sauber: Bild und Text gleich hoch, kein Leerraum; Button schliesst bündig mit dem Bild ab */
@media (min-width: 901px) {
  .s-about { align-items: stretch; }
  .about-img { align-self: stretch; max-width: 480px; }
  .about-img img { height: 100%; min-height: 520px; aspect-ratio: auto; object-position: 50% 38%; }
  .about-copy { align-self: center; justify-content: flex-start; }
  .about-copy .signature { margin-top: 36px; padding-top: 0; margin-bottom: 22px; }
}
@media (min-width: 901px) {
  .about-img { position: relative; min-height: 520px; }
  .about-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; min-height: 0; }
  .about-copy { align-self: stretch; justify-content: center; }
}
@media (min-width: 901px) { .about-copy { justify-content: flex-start; } .about-copy .signature { margin-top: auto; padding-top: 32px; } }

/* Über mich, final: ganzes Foto im Hochformat ohne Beschnitt, ruhige Ecken, Text daneben mit klarem Rhythmus */
.s-about { gap: clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 400px) minmax(0, 560px); justify-content: center; align-items: stretch; }
.about-img { position: static; min-height: 0; max-width: 400px; width: 100%; justify-self: start; margin: 0; }
.about-img img { position: static; width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 50%; border-radius: 12px; box-shadow: none; display: block; }
.about-copy { display: flex; flex-direction: column; align-self: stretch; justify-content: flex-start; max-width: 560px; }
.about-copy .h2 { margin: 14px 0 26px; }
.about-copy .signature { margin: auto 0 0; padding-top: 36px; line-height: 1; }
.about-copy .btn-cta { align-self: flex-start; margin-top: 18px; }
@media (max-width: 900px) {
  .s-about { grid-template-columns: 1fr; gap: 36px; }
  .about-img { max-width: 440px; margin-inline: auto; justify-self: center; }
  .about-copy { max-width: none; }
  .about-copy .signature { margin-top: 28px; padding-top: 0; }
  .about-copy .btn-cta { align-self: stretch; }
}

/* Über mich, Vollbild-Hälfte: Foto füllt die linke Hälfte der Sektion von Kante zu Kante, Text rechts */
.s-about { padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; align-items: stretch; min-height: clamp(620px, 50vw, 800px); }
.about-img { position: relative; width: 100%; max-width: none; min-height: 100%; justify-self: stretch; margin: 0; overflow: hidden; }
.about-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 58%; }
.about-copy { align-self: stretch; justify-self: start; max-width: 660px; padding: clamp(56px, 7vw, 110px) var(--edge) clamp(56px, 7vw, 110px) clamp(40px, 6vw, 100px); box-sizing: border-box; }
@media (max-width: 900px) {
  .s-about { grid-template-columns: 1fr; min-height: 0; }
  .about-img { min-height: 0; aspect-ratio: 4 / 5; max-width: none; margin: 0; }
  .about-img img { object-position: 50% 55%; }
  .about-copy { max-width: none; padding: 40px var(--edge) 64px; }
}

/* Über mich, final: ruhiges Rechteck, Text direkt daneben, Unterschrift und Button dicht unter dem Text */
.s-about { padding: clamp(72px, 8vw, 120px) var(--edge); gap: clamp(40px, 6vw, 88px); grid-template-columns: minmax(0, 400px) minmax(0, 540px); justify-content: center; align-items: center; min-height: 0; }
.about-img { position: static; min-height: 0; aspect-ratio: 4 / 5; max-width: 400px; width: 100%; overflow: hidden; border-radius: 12px; justify-self: end; }
.about-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: 50% 55%; }
.about-img { position: relative; }
.about-copy { align-self: center; justify-self: start; max-width: 540px; padding: 0; display: block; }
.about-copy .signature { margin: 22px 0 0; padding: 0; }
.about-copy .btn-cta { margin-top: 18px; align-self: auto; }
@media (max-width: 900px) {
  .s-about { grid-template-columns: 1fr; padding: 56px var(--edge) 64px; gap: 32px; }
  .about-img { justify-self: center; max-width: 440px; aspect-ratio: 4 / 5; border-radius: 12px; }
  .about-copy { max-width: none; padding: 0; }
  .about-copy .btn-cta { width: 100%; }
}

/* Über mich: grosses Bild */
@media (min-width: 901px) {
  .s-about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); max-width: none; gap: clamp(48px, 6vw, 96px); padding-inline: max(var(--edge), calc((100vw - 1320px) / 2)); }
  .about-img { max-width: none; width: 100%; aspect-ratio: 5 / 6; justify-self: stretch; }
  .about-copy { max-width: 520px; }
}

/* ===== Mobile-Optimierung ===== */
@media (max-width: 767px) {
  /* Kopfzeile: Termin nur noch als Textlink */
  .home .site-header .book, .site-header .book { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 6px; min-height: 0; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; color: inherit; }
  .home .site-header .book svg, .site-header .book svg { display: none; }

  /* Hero: Foto steht oben unbeschnitten (Hocker sichtbar), Text darunter auf dunklem Grund */
  .hero-x { background: #1c1511; }
  .hero-x .hero-bg { position: absolute; top: 0; right: 0; bottom: auto; left: 0; height: 64svh; }
  .hero-x .hero-bg img { object-position: 50% 78%; }
  .hero-x .hero-bg::after { background: linear-gradient(180deg, rgba(28, 21, 17, .5) 0%, rgba(28, 21, 17, 0) 22%, rgba(28, 21, 17, 0) 48%, #1c1511 99%); }
  .hero-x .hero-bg::before { display: none; }
  /* Hero-Links: nur Text */
  .hx-btns { gap: 4px; margin-top: 18px; align-items: flex-start; }
  .hero-x .btn-cta, .hero-x .btn-soft { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 10px 0 !important; min-height: 0; width: auto; justify-content: flex-start; color: #faf6f2 !important; font-size: 12px; letter-spacing: .2em; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
  .hero-x .btn-cta svg { display: none; }
  .hero-x .btn-soft { opacity: .75; }

  /* So arbeite ich: quadratische Bühne */
  .pr-stage { flex: none; width: min(100%, max(220px, calc(100svh - 470px))); height: auto; aspect-ratio: 1 / 1; max-width: 560px; align-self: center; }
  .pr-ph:nth-of-type(1) img { object-position: 50% 55%; }
  .pr-ph:nth-of-type(2) img { object-position: 50% 32%; }
  .pr-ph:nth-of-type(3) img { object-position: 50% 52%; }

  /* Einblicke: immer sichtbar, kein Aufdecken */
  .gallery.rv .g, .gallery.rv .g:nth-child(n) { clip-path: none !important; transition: none !important; }
}
/* Ältere Browser ohne aspect-ratio: Bilder trotzdem anzeigen */
@supports not (aspect-ratio: 1 / 1) {
  .g { height: 0; padding-bottom: 125%; }
  .g:nth-child(1) { padding-bottom: 125%; }
  .pr-stage { height: 0; padding-bottom: 100%; }
  .about-img { height: 0; padding-bottom: 125%; }
}
@media (max-width: 767px) {
  .hero-x .hero-bg { height: min(64svh, max(300px, calc(100svh - 340px))); }
  .hero-x .hero-bg img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
  .hero-x .hero-bg::after { background: linear-gradient(180deg, rgba(28, 21, 17, .5) 0%, rgba(28, 21, 17, 0) 22%); }
}

/* Einblicke auf Handy/Tablet: bewusst einfachste Technik (Bilder im normalen Fluss, ohne Überlagerungen),
   damit sie auf jedem iPhone zuverlässig erscheinen */
@media (max-width: 900px) {
  .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; align-items: start; }
  .gallery .g, .gallery .g:nth-child(n) { position: static; display: block; height: auto; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; isolation: auto; clip-path: none; margin: 0; grid-column: auto; grid-row: auto; }
  .gallery .g:nth-child(1), .gallery .g:nth-child(4) { grid-column: 1 / -1; }
  .gallery .g::after { display: none; }
  .gallery .g img { position: static; display: block; width: 100%; height: auto; max-width: 100%; object-fit: cover; border-radius: 12px; opacity: 1; transform: none; }
  .gallery .g:nth-child(1) img { aspect-ratio: 4 / 3; }
  .gallery .g:nth-child(4) img { aspect-ratio: 4 / 3; }
  .gallery .g:nth-child(2) img, .gallery .g:nth-child(3) img { aspect-ratio: 4 / 5; }
  .gallery .g figcaption { position: static; display: flex; gap: 10px; margin: 10px 2px 0; padding: 0; color: var(--ink-soft); font: 500 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
  .gallery .g figcaption::before { opacity: .6; }
}
@media (max-width: 900px) { .gallery .g figcaption, .gallery .g:nth-child(1) figcaption { flex-direction: row; align-items: baseline; left: auto; right: auto; } }

/* Grosse Nummer: Überblenden statt Hochrollen (zuverlässig auch auf iPhone) */
.pr-big { width: 1.7em; height: 1em; overflow: hidden; }
.pr-digits { display: block; position: relative; height: 1em; transform: none !important; transition: none; }
.pr-digits b { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(38%); transition: opacity .35s ease, transform .6s var(--ease-out); }
.pr-digits b.is-active { opacity: 1; transform: none; transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .pr-digits b, .pr-digits b.is-active { transform: none; transition: opacity .2s ease; } }