/* ============================================================
   Friseur 2000 — site-custom.css
   ARCHITECTURE: postcard-stack / scrapbook · playful-scrapbook preset
   Hero: cinematic-v2 crossfade + coral brand-illustration motif
   Coral #f3a26d · Mint #9ed0c0 · Cream #fffaf3
   ============================================================ */

/* ---------- Warm image treatment (color-warm) ---------- */
.img-warm img, .km, .pcard-img img, .team-pc-img img,
.bleed-strip > img, .look-tile img, .hero-photo .km {
  filter: saturate(1.05) contrast(1.02) brightness(1.01);
}

/* soft blobby background washes used on sections */
.blob-bg { position: relative; overflow-x: clip; }
.blob-bg::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width: 46vw; max-width: 560px; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(158,208,192,0.30), transparent 68%);
  top: -8%; right: -10%; filter: blur(4px);
}
.blob-bg.coral::before { background: radial-gradient(circle, rgba(243,162,109,0.26), transparent 68%); }
.blob-bg > .shell, .blob-bg > .shell-wide, .blob-bg > .shell-tight { position: relative; z-index: 1; }

/* section bg helpers */
.bg-cream-warm { background: var(--c-cream-warm); }
.bg-mint { background: var(--c-mint-tint); }
.bg-coral { background: var(--c-coral-tint); }

/* ============================================================
   HERO — postcard-stack: photo crossfade panel + text + coral illo
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1340px; margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  min-height: clamp(540px, 84vh, 820px);
  overflow-x: clip;
}
/* decorative big coral blob behind hero */
.hero::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width: 62vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,162,109,0.20), transparent 66%);
  top: -16%; right: -16%;
}
.hero::after {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width: 40vw; max-width: 460px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(158,208,192,0.24), transparent 66%);
  bottom: -22%; left: -14%;
}
.hero-text { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-size: 0.76rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-coral-dark); font-weight: 700;
  background: #fff; border-radius: var(--radius-pill); padding: 0.45rem 1rem;
  box-shadow: var(--shadow-card); margin-bottom: var(--gap-md);
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-mint-deep); }
.hero-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.7rem, 5.4vw, 4.9rem);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--c-ink);
  margin: 0 0 var(--gap-md);
}
.hero-title em { font-style: normal; color: var(--c-coral-deep); position: relative; display: inline-block; }
.hero-title em::after {
  content:""; position:absolute; left:2%; right:2%; bottom: 0.04em; height: 0.16em;
  background: var(--c-mint); border-radius: 6px; z-index: -1; opacity: 0.85;
  transform: scaleX(0); transform-origin: left; animation: hl-grow .9s cubic-bezier(.2,.7,.2,1) 1s forwards;
}
@keyframes hl-grow { to { transform: scaleX(1); } }
.hero-sub {
  font-family: var(--f-body); font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  color: var(--c-ink-mute); max-width: 44ch; line-height: 1.62; margin: 0 0 var(--gap-lg);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--gap-lg); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-trust .chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--c-rule-soft); border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem; box-shadow: var(--shadow-card);
  font-family: var(--f-body); font-size: 0.8rem; color: var(--c-ink-mute);
}
.hero-trust .chip b { color: var(--c-ink); font-weight: 600; }
.hero-trust .chip .ic { color: var(--c-coral-deep); }

/* staggered soft reveal on hero text */
.hero-text > * { opacity: 0; transform: translateY(20px); animation: soft-in 0.85s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-text > .hero-eyebrow { animation-delay: 0.12s; }
.hero-text > .hero-title   { animation-delay: 0.26s; }
.hero-text > .hero-sub     { animation-delay: 0.44s; }
.hero-text > .hero-actions { animation-delay: 0.58s; }
.hero-text > .hero-trust   { animation-delay: 0.72s; }
@keyframes soft-in { to { opacity: 1; transform: translateY(0); } }

/* hero media — photo postcard with crossfade stack + coral illo sticker */
.hero-media { position: relative; z-index: 1; }
.hero-photo {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/4.3; box-shadow: var(--shadow-lift);
  transform: rotate(2deg);
  background: var(--c-cream-deep);
}
.hero-photo .km {
  position: absolute; inset: -5%;
  background-size: cover; background-position: 32% 30%;
  opacity: 0;
  animation: km-zoom 18s ease-in-out infinite alternate, km-fade 21s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero-photo .km.k1 { animation-name: km-zoom, km-fade1; }
.hero-photo .km.k2 { animation-name: km-zoom, km-fade2; }
.hero-photo .km.k3 { animation-name: km-zoom, km-fade3; }
@keyframes km-zoom { 0%{ transform: scale(1.0) translate(0,0);} 100%{ transform: scale(1.1) translate(-1.5%,-2%);} }
@keyframes km-fade1 { 0%,28%{opacity:1} 38%,94%{opacity:0} 100%{opacity:1} }
@keyframes km-fade2 { 0%,28%{opacity:0} 38%,60%{opacity:1} 70%,100%{opacity:0} }
@keyframes km-fade3 { 0%,60%{opacity:0} 70%,94%{opacity:1} 100%{opacity:0} }
.hero-photo::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, transparent 55%, rgba(51,48,44,0.18));
}
/* coral brand illustration sticker overlapping the photo */
.hero-illo {
  position: absolute; z-index: 3; left: -13%; bottom: -7%;
  width: 46%; max-width: 250px;
  filter: drop-shadow(0 14px 26px rgba(207,115,56,0.28));
  transform: rotate(-4deg);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{ transform: rotate(-4deg) translateY(0);} 50%{ transform: rotate(-4deg) translateY(-10px);} }
/* floating chip on media */
.hero-media-chip {
  position: absolute; z-index: 4; right: -6%; top: 8%;
  background: var(--c-mint-deep); color: #fff;
  border-radius: var(--radius-pill); padding: 0.6rem 1.05rem;
  font-family: var(--f-body); font-size: 0.78rem; font-weight: 700;
  box-shadow: var(--shadow-card); transform: rotate(4deg);
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; animation: pop-in 0.7s cubic-bezier(.34,1.56,.64,1) 1.2s forwards;
}
@keyframes pop-in { from { opacity:0; transform: rotate(4deg) scale(0.8);} to { opacity:1; transform: rotate(4deg) scale(1);} }
.hero-media-chip .star { color: #fff; }

.scroll-cue { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-family: var(--f-body); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-ink-faint); z-index: 5; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform: translate(-50%,0); opacity:.55 } 50%{ transform: translate(-50%,6px); opacity:1 } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--gap-lg); min-height: 0; padding-top: var(--gap-lg); }
  .hero-media { order: -1; max-width: 420px; margin: 0 auto var(--gap-md); width: 100%; }
  .hero-photo { aspect-ratio: 4/3.4; transform: rotate(0deg); }
  .hero-illo { width: 36%; max-width: 150px; left: -6%; bottom: -10%; }
  .hero-media-chip { right: 2%; top: 5%; }
  .hero-title { font-size: clamp(2.3rem, 9vw, 3.2rem); }
  .scroll-cue { display: none; }
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-head { max-width: 660px; margin: 0 0 var(--gap-xl); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.section-head p { color: var(--c-ink-mute); font-size: 1.08rem; }
.tag-pill {
  display: inline-block; font-family: var(--f-body); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--c-coral-dark); background: var(--c-coral-soft);
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: var(--gap-sm);
}
.tag-pill.mint { color: var(--c-mint-dark); background: var(--c-mint-soft); }

/* ============================================================
   VORTEILE strip — playful chips
   ============================================================ */
.vorteile { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-md); }
.vorteil {
  background: #fff; border-radius: var(--radius-sm); padding: var(--gap-md);
  box-shadow: var(--shadow-card); display: flex; gap: 13px; align-items: center;
  transition: transform .35s, box-shadow .35s;
}
.vorteil:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.vorteil .vic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px;
  background: var(--c-coral-soft); color: var(--c-coral-dark);
  display: grid; place-items: center; font-size: 1.15rem;
}
.vorteil:nth-child(even) .vic { background: var(--c-mint-soft); color: var(--c-mint-dark); }
.vorteil p { margin: 0; font-size: 0.94rem; color: var(--c-ink); font-weight: 500; }
@media (max-width: 820px) { .vorteile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vorteile { grid-template-columns: 1fr; } }

/* ============================================================
   POSTCARD-STACK — Leistungen as scrapbook postcards
   ============================================================ */
.pstack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  gap: 18px;
}
.pcard {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--c-cream-deep); box-shadow: var(--shadow-card);
  display: flex; isolation: isolate;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.pcard:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: var(--shadow-lift); }
.pcard a { position: absolute; inset: 0; z-index: 4; }
.pcard-img { position: absolute; inset: 0; }
.pcard-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover .pcard-img img { transform: scale(1.07); }
.pcard.has-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(51,48,44,0.04) 0%, rgba(51,48,44,0.0) 28%, rgba(51,48,44,0.66) 100%);
}
.pcard .pc-body { position: relative; z-index: 2; margin-top: auto; padding: var(--gap-md); }
.pcard.has-img .pc-body { color: #fff; }
.pcard .pc-kicker {
  font-family: var(--f-body); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 5px;
}
.pcard.has-img .pc-kicker { color: var(--c-coral-soft); }
.pcard .pc-title { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1.08; margin: 0; }
.pcard.has-img .pc-title { color: #fff; }
.pcard .pc-note { font-family: var(--f-body); font-size: 0.82rem; margin-top: 6px; }
.pcard.has-img .pc-note { color: rgba(255,255,255,0.85); }
.pcard .pc-arrow {
  position: absolute; z-index: 3; top: 14px; right: 14px; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--c-coral-dark);
  display: grid; place-items: center; font-weight: 700;
  transform: translateY(-6px); opacity: 0; transition: .35s;
}
.pcard:hover .pc-arrow { transform: translateY(0); opacity: 1; }
/* tinted tiles (no photo) */
.pcard.tint-mint { background: linear-gradient(150deg, var(--c-mint) 0%, var(--c-mint-deep) 100%); }
.pcard.tint-coral { background: linear-gradient(150deg, var(--c-coral) 0%, var(--c-coral-deep) 100%); }
.pcard.tint-peach { background: linear-gradient(150deg, #f7c89e 0%, var(--c-coral) 100%); }
.pcard.tint-mint-soft { background: linear-gradient(150deg, var(--c-mint-soft) 0%, var(--c-mint) 100%); }
.pcard.tint-mint .pc-title, .pcard.tint-coral .pc-title, .pcard.tint-peach .pc-title { color: #fff; }
.pcard.tint-mint .pc-kicker, .pcard.tint-coral .pc-kicker, .pcard.tint-peach .pc-kicker { color: rgba(255,255,255,0.82); }
.pcard.tint-mint .pc-note, .pcard.tint-coral .pc-note, .pcard.tint-peach .pc-note { color: rgba(255,255,255,0.86); }
.pcard.tint-mint .pc-arrow, .pcard.tint-coral .pc-arrow, .pcard.tint-peach .pc-arrow { color: var(--c-coral-dark); }
.pcard.tint-mint-soft .pc-title { color: var(--c-mint-dark); }
.pcard.tint-mint-soft .pc-kicker { color: var(--c-mint-deep); }
.pcard.tint-mint-soft .pc-note { color: var(--c-mint-dark); }
/* decorative dot pattern on tinted tiles */
.pcard.tint-mint::before, .pcard.tint-coral::before, .pcard.tint-peach::before {
  content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%;
  background: rgba(255,255,255,0.16); z-index: 0;
}
/* spans (4-col math) */
.pcard.big  { grid-column: span 2; grid-row: span 2; }
.pcard.wide { grid-column: span 2; }
.pcard.tall { grid-row: span 2; }
.pcard.big .pc-title { font-size: 1.9rem; }
@media (max-width: 880px) {
  .pstack { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 176px; }
  .pcard.big { grid-column: span 2; grid-row: span 1; }
  .pcard.tall { grid-row: span 1; }
}
@media (max-width: 520px) {
  .pstack { grid-template-columns: 1fr; grid-auto-rows: 184px; }
  .pcard.wide, .pcard.big { grid-column: span 1; }
}

/* ============================================================
   SPLIT (editorial text + photo) — postcard frame
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.split + .split { margin-top: var(--gap-2xl); }
.split.reverse .sp-text { order: 2; }
.sp-text h3 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.sp-text .kicker { font-family: var(--f-body); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-coral-dark); font-weight: 700; display: block; margin-bottom: var(--gap-sm); }
.sp-text p { color: var(--c-ink-mute); }
.sp-text .perk-list { margin-top: var(--gap-md); }
.price-hint { display: inline-block; margin-top: var(--gap-md); font-family: var(--f-body); font-size: 0.88rem; color: var(--c-ink); background: var(--c-mint-soft); border-radius: var(--radius-pill); padding: 0.5rem 1.05rem; font-weight: 600; }
.sp-media { position: relative; }
.sp-media .frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lift); transform: rotate(-1.5deg);
}
.sp-media .frame img { width: 100%; aspect-ratio: 4/3.3; object-fit: cover; object-position: 28% center; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); transform: scale(1.07); }
.split.in-view .sp-media .frame img { transform: scale(1.0); }
.split.reverse .sp-media .frame { transform: rotate(1.5deg); }
.sp-media .tag { position: absolute; z-index: 2; top: 14px; left: 14px; background: #fff; color: var(--c-coral-dark); font-family: var(--f-body); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); font-weight: 700; box-shadow: var(--shadow-card); }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .split.reverse .sp-text { order: 0; }
  .sp-media .frame, .split.reverse .sp-media .frame { transform: rotate(0deg); }
}

/* ============================================================
   TEAM POSTCARDS
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.team-pc {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .4s, box-shadow .4s;
}
.team-pc:nth-child(2) { transform: translateY(-14px); }
.team-pc:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.team-pc:nth-child(2):hover { transform: translateY(-20px); }
.team-pc-img { aspect-ratio: 4/3.9; overflow: hidden; background: var(--c-cream-deep); position: relative; }
.team-pc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: grayscale(0.15) saturate(1.02) contrast(1.03); transition: transform 1s, filter .5s; }
.team-pc:hover .team-pc-img img { transform: scale(1.05); filter: grayscale(0) saturate(1.06); }
.team-pc-img .role-badge { position: absolute; bottom: 12px; left: 12px; background: var(--c-coral-deep); color: #fff; font-family: var(--f-body); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
.team-pc:nth-child(even) .team-pc-img .role-badge { background: var(--c-mint-deep); }
.team-pc-body { padding: var(--gap-md); }
.team-pc-body h3 { font-size: 1.5rem; margin-bottom: 4px; }
.team-pc-body .spec { font-family: var(--f-body); font-size: 0.84rem; color: var(--c-coral-dark); font-weight: 600; margin-bottom: var(--gap-sm); }
.team-pc-body .quote { font-family: var(--f-body); font-style: italic; font-size: 0.98rem; color: var(--c-ink-mute); line-height: 1.55; }
@media (max-width: 820px) { .team-grid { grid-template-columns: repeat(2,1fr); } .team-pc:nth-child(2) { transform: none; } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PRICE TABLES
   ============================================================ */
.price-block { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: var(--gap-lg); }
.price-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md); padding: var(--gap-lg) var(--gap-lg) var(--gap-sm); border-bottom: 2px solid var(--c-coral-soft); flex-wrap: wrap; }
.price-block-head h3 { font-size: 1.6rem; margin: 0; }
.price-block-head .cols { display: flex; gap: var(--gap-lg); font-family: var(--f-body); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-faint); font-weight: 700; }
.price-block-head .cols span { min-width: 80px; text-align: right; }
.price-row { display: grid; grid-template-columns: 1fr 80px 80px 80px; gap: var(--gap-md); align-items: baseline; padding: 0.85rem var(--gap-lg); border-bottom: 1px solid var(--c-rule-soft); transition: background .2s; }
.price-row.single { grid-template-columns: 1fr 100px; }
.price-row:last-child { border-bottom: 0; }
.price-row:hover { background: var(--c-cream-warm); }
.price-row .svc { font-family: var(--f-body); font-size: 0.98rem; color: var(--c-ink); }
.price-row .pr { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--c-coral-dark); text-align: right; white-space: nowrap; }
.price-row.note-row { grid-template-columns: 1fr; }
.price-row.note-row .svc { font-style: italic; color: var(--c-ink-mute); font-size: 0.88rem; }
@media (max-width: 640px) {
  .price-block-head .cols span { min-width: 56px; }
  .price-row { grid-template-columns: 1fr 52px 52px 52px; gap: 8px; padding: 0.8rem var(--gap-md); }
  .price-row.single { grid-template-columns: 1fr 72px; }
  .price-row .svc { font-size: 0.88rem; }
  .price-row .pr { font-size: 0.86rem; }
}

/* ============================================================
   SERVICE GROUPS (leistungen page)
   ============================================================ */
.svc-group { padding: var(--gap-xl) 0; }
.svc-group-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--gap-lg); }
.svc-group-label .num { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: #fff; background: var(--c-coral-deep); width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; box-shadow: var(--shadow-card); }
.svc-group:nth-child(even) .svc-group-label .num { background: var(--c-mint-deep); }
.svc-group-label h2 { margin: 0; font-size: clamp(1.8rem,3vw,2.6rem); }
.svc-items { display: grid; gap: var(--gap-2xl); }

/* perk list */
.perk-list { list-style: none; padding: 0; margin: var(--gap-md) 0 0; }
.perk-list li { position: relative; padding: 0.5rem 0 0.5rem 2rem; color: var(--c-ink-mute); border-bottom: 1px solid var(--c-rule-soft); }
.perk-list li::before { content: "✓"; position: absolute; left: 0; top: 0.5rem; width: 22px; height: 22px; border-radius: 7px; background: var(--c-mint-soft); color: var(--c-mint-dark); font-size: 0.7rem; display: grid; place-items: center; font-weight: 700; }

/* ============================================================
   BLEED STRIP — full-bleed photo + statement (parallax)
   ============================================================ */
.bleed-strip { position: relative; min-height: clamp(420px, 58vh, 580px); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.bleed-strip > img { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; z-index: -2; will-change: transform; }
.bleed-strip::after { content:""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(51,48,44,0.62), rgba(207,115,56,0.34)); }
.bleed-strip .bs-inner { text-align: center; color: var(--c-cream); padding: 0 var(--gap-lg); max-width: 740px; }
.bleed-strip .bs-inner .eyebrow { color: var(--c-coral-soft); }
.bleed-strip .bs-inner h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.bleed-strip .bs-inner p { color: rgba(255,250,243,0.92); font-size: 1.1rem; max-width: 50ch; margin: 0 auto var(--gap-lg); }

/* ============================================================
   REVIEWS rail
   ============================================================ */
.reviews-rail { display: flex; gap: var(--gap-md); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px var(--gap-md); margin: 0 calc(-1 * clamp(1.25rem,4vw,2.5rem)); padding-left: clamp(1.25rem,4vw,2.5rem); padding-right: clamp(1.25rem,4vw,2.5rem); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reviews-rail::-webkit-scrollbar { display: none; }
.review-card { scroll-snap-align: start; flex: 0 0 min(340px, 82vw); background: #fff; border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; position: relative; }
.review-card::before { content:"“"; position: absolute; top: 10px; right: 20px; font-family: var(--f-display); font-size: 4rem; color: var(--c-coral-soft); line-height: 1; }
.review-card .stars { color: var(--c-coral-deep); letter-spacing: 2px; margin-bottom: var(--gap-sm); }
.review-card .body { font-family: var(--f-body); font-size: 1.05rem; color: var(--c-ink); line-height: 1.55; margin-bottom: var(--gap-md); position: relative; z-index: 1; }
.review-card .who { font-family: var(--f-body); font-size: 0.84rem; color: var(--c-ink-mute); font-weight: 600; margin-top: auto; }

/* ============================================================
   CTA banner (coral)
   ============================================================ */
.cta-banner { background: linear-gradient(135deg, var(--c-coral) 0%, var(--c-coral-deep) 100%); border-radius: clamp(24px, 4vw, 40px); padding: clamp(2.5rem, 6vw, 4.8rem); text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-banner::before { content:""; position:absolute; left:-60px; bottom:-70px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,0.12); }
.cta-banner::after { content:""; position:absolute; right:-50px; top:-50px; width:180px; height:180px; border-radius:50%; background:rgba(158,208,192,0.34); }
.cta-banner h2 { color: #fff; font-size: clamp(2rem,4vw,3.2rem); position: relative; z-index: 1; }
.cta-banner p { color: rgba(255,255,255,0.94); max-width: 48ch; margin: 0 auto var(--gap-lg); position: relative; z-index: 1; }
.cta-banner .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; position: relative; z-index: 1; }

/* ============================================================
   PAGE-HERO for sub-pages
   ============================================================ */
.page-hero { position: relative; overflow-x: clip; padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); background: var(--c-cream); }
.page-hero::before { content:""; position:absolute; z-index:0; width:48vw; max-width:560px; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(243,162,109,0.22), transparent 66%); top:-22%; right:-12%; }
.page-hero::after { content:""; position:absolute; z-index:0; width:34vw; max-width:400px; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(158,208,192,0.26), transparent 66%); bottom:-30%; left:-10%; }
.page-hero .ph-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.page-hero h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); }
.page-hero p { color: var(--c-ink-mute); max-width: 46ch; }
.page-hero .ph-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); transform: rotate(2deg); aspect-ratio: 4/3.3; }
.page-hero .ph-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% center; transform: scale(1.07); animation: km-zoom 20s ease-in-out infinite alternate; }
.page-hero .ph-illo { position: absolute; z-index: 2; right: -4%; bottom: -8%; width: 28%; max-width: 140px; filter: drop-shadow(0 10px 20px rgba(207,115,56,0.26)); transform: rotate(-5deg); }
@media (max-width: 820px) {
  .page-hero .ph-inner { grid-template-columns: 1fr; }
  .page-hero .ph-media { display: none; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: var(--gap-lg); } }
.info-card { background: #fff; border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow-card); }
.info-card + .info-card { margin-top: var(--gap-md); }
.info-card h3 { font-size: 1.4rem; margin-bottom: var(--gap-md); }
.info-row { display: flex; gap: 12px; padding: 0.5rem 0; align-items: baseline; }
.info-row .lbl { font-family: var(--f-body); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-faint); font-weight: 700; min-width: 88px; }
.info-row .val { color: var(--c-ink); }
.info-row a.val { border-bottom: 2px solid var(--c-coral-soft); transition: border-color .2s, color .2s; }
.info-row a.val:hover { color: var(--c-coral-dark); border-color: var(--c-coral); }
.hours-table { width: 100%; border-collapse: collapse; font-family: var(--f-body); }
.hours-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--c-rule-soft); font-size: 0.95rem; }
.hours-table td:last-child { text-align: right; color: var(--c-ink); font-weight: 500; }
.hours-table tr.closed td { color: var(--c-ink-faint); }
.hours-table tr.today td { color: var(--c-coral-dark); font-weight: 700; }
.hours-table tr.today td:first-child::before { content: "● "; color: var(--c-coral); }
.map-card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--c-cream-deep); aspect-ratio: 16/9; }
.map-card .map-pin { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-mint) 0%, var(--c-coral) 130%); color: #fff; text-align: center; transition: filter .3s; }
.map-card:hover .map-pin { filter: brightness(1.06); }
.map-card .map-pin .pin-ic { font-size: 2.2rem; margin-bottom: 8px; }
.map-card .map-pin .pin-label { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.02em; }
.map-card .map-pin .pin-sub { font-size: 0.8rem; opacity: 0.92; margin-top: 4px; }

/* form */
.form-grid { display: grid; gap: var(--gap-md); }
.form-grid .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
@media (max-width: 520px) { .form-grid .row2 { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--f-body); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-faint); font-weight: 700; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--f-body); font-size: 0.95rem; color: var(--c-ink);
  background: var(--c-cream); border: 1.5px solid var(--c-rule); border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-coral); box-shadow: 0 0 0 3px rgba(243,162,109,0.22); }
.field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.78rem; color: var(--c-ink-faint); }

/* online-booking highlight card */
.book-card { background: linear-gradient(150deg, var(--c-mint-soft) 0%, #fff 100%); border: 1.5px solid var(--c-mint); border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow-card); }
.book-card h3 { font-size: 1.5rem; }
.book-card .steps { list-style: none; padding: 0; margin: var(--gap-md) 0; counter-reset: step; }
.book-card .steps li { position: relative; padding: 0.55rem 0 0.55rem 2.6rem; color: var(--c-ink-mute); counter-increment: step; }
.book-card .steps li::before { content: counter(step); position: absolute; left: 0; top: 0.5rem; width: 26px; height: 26px; border-radius: 50%; background: var(--c-mint-deep); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 0.82rem; display: grid; place-items: center; }

/* ============================================================
   STORY paragraphs (team / über uns block)
   ============================================================ */
.story { max-width: 760px; }
.story p { color: var(--c-ink-mute); margin: 0 0 var(--gap-md); font-size: 1.06rem; }
.story p:first-of-type { font-size: 1.2rem; color: var(--c-ink); }

/* pull quote */
.pullquote { text-align: center; max-width: 760px; margin: 0 auto; }
.pullquote p { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem,3.6vw,2.7rem); line-height: 1.25; color: var(--c-ink); letter-spacing: -0.01em; }
.pullquote p em { color: var(--c-coral-deep); font-style: normal; }
.pullquote .attr { font-family: var(--f-body); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint); margin-top: var(--gap-md); font-weight: 600; }

/* stats strip */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
.stat { background: #fff; border-radius: var(--radius-sm); padding: var(--gap-lg); text-align: center; box-shadow: var(--shadow-card); }
.stat .num { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem,4vw,2.8rem); color: var(--c-coral-deep); line-height: 1; }
.stat .lbl { font-family: var(--f-body); font-size: 0.82rem; color: var(--c-ink-mute); margin-top: 8px; font-weight: 500; }
@media (max-width: 540px) { .stats { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL pages
   ============================================================ */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(2rem,4vw,3rem); margin-bottom: var(--gap-lg); }
.legal h2 { font-size: 1.4rem; margin-top: var(--gap-xl); }
.legal p, .legal li { color: var(--c-ink-mute); }
.legal ul { padding-left: 1.2rem; }
.legal-flag { background: var(--c-coral-tint); border: 1.5px solid var(--c-coral); border-radius: var(--radius-sm); padding: var(--gap-md); margin-bottom: var(--gap-xl); color: var(--c-ink); }
.legal-flag b { color: var(--c-coral-dark); }
.legal a { color: var(--c-coral-dark); border-bottom: 1px solid var(--c-rule); }