/* =========================================================
   GRW Marketing — styles.css
   Brand foundation: logo-derived Navy #2B3350 on Oat #E7E4DB.
   Controlled, cinematic, editorial. Type: Clash Display (display)
   + Switzer (text) + Zodiak italic (short serif accent only).
   Motif: three rounded growth bars from the logo, monochrome.
   Prefer type, rules and real media over cards, shadows, effects.
   ========================================================= */

/* ---------- self-hosted fonts (Fontshare, variable woff2) ---------- */
@font-face{font-family:"Clash Grotesk";src:url("assets/fonts/ClashGrotesk-Variable.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Ranade";src:url("assets/fonts/Ranade-Variable.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"Ranade";src:url("assets/fonts/Ranade-VariableItalic.woff2") format("woff2");font-weight:100 700;font-style:italic;font-display:swap}
/* Apple Garamond italic — used only for the offer deliverable lines. Proprietary Apple font, self-hosted. */
@font-face{font-family:"Apple Garamond";src:url("assets/fonts/AppleGaramond-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* brand */
  --navy:#2B3350;                  /* logo-derived, palette source of truth */
  --navy-hover:#3a4468;
  --navy-90:rgba(43,51,80,.90);
  --navy-75:rgba(43,51,80,.75);    /* secondary text */
  --navy-55:rgba(43,51,80,.55);
  --navy-40:rgba(43,51,80,.40);
  --navy-20:rgba(43,51,80,.20);    /* form borders */
  --navy-12:rgba(43,51,80,.12);    /* rules */
  --navy-08:rgba(43,51,80,.08);    /* hairlines */

  --bg:#E7E4DB;                     /* oat, never pure white as a page ground */
  --white:#FFFFFF;                  /* only on dark surfaces */
  --rule-dark:rgba(231,228,219,.22);/* dividers on navy */

  --r-btn:10px;
  --r-input:8px;
  --r-media:8px;

  --sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Clash Grotesk","Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Ranade","Satoshi",Georgia,serif;

  --max:1400px;
  --pad:clamp(1.25rem,4vw,3rem);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--navy-75);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--navy);color:var(--white)}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);color:var(--navy);letter-spacing:-.02em;line-height:1.06;font-weight:600}
p{max-width:68ch}
strong{color:var(--navy);font-weight:500}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--navy);color:var(--white);padding:.6rem 1rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* section index label (micrographic) */
.kicker{font-size:.78rem;letter-spacing:.02em;color:var(--navy-55);font-weight:500;margin-bottom:1.1rem;font-variant-numeric:tabular-nums}

/* ---------- growth-bars motif ---------- */
.bars{display:inline-block;flex:none}
.bars rect{fill:currentColor}

/* ---------- buttons ---------- */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:var(--bh);padding:0 1.45rem;border-radius:var(--r-btn);border:1.5px solid transparent;
  font:inherit;font-weight:500;font-size:.98rem;cursor:pointer;background:transparent;color:var(--navy);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--primary:hover{background:var(--navy-hover);border-color:var(--navy-hover)}
.btn--onDark{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--onDark:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)}
.btn--ghostDark{border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghostDark:hover{background:#fff;border-color:#fff;color:var(--navy)}
.btn--sm{--bh:42px;padding:0 1.1rem;font-size:.9rem}
.btn--block{width:100%}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;height:72px;
  display:flex;align-items:center;transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;background:rgba(231,228,219,0);
}
.site-header.scrolled{background:rgba(231,228,219,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom-color:var(--navy-12)}
.header-inner{display:flex;align-items:center;gap:2rem;width:100%}
.brand{display:flex;align-items:center;gap:.6rem}
.brand .bars{color:var(--navy)}
.brand__name{color:var(--navy);font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.nav{display:flex;gap:1.9rem;margin-left:auto;font-size:.96rem}
.nav a{color:var(--navy-75);transition:color .2s;position:relative;padding:.25rem 0}
.nav a:hover{color:var(--navy)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.nav-cta{margin-left:.25rem}
.burger{display:none;flex-direction:column;gap:6px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;margin-left:auto}
.burger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:79;background:var(--bg);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;gap:1.4rem;text-align:center}
.mobile-menu a{color:var(--navy);font-family:var(--display);font-size:1.7rem;font-weight:600}
.mobile-menu .btn{margin-top:1rem;font-family:var(--sans);font-size:.98rem}

/* header over the dark hero (before scroll) -> light */
.site-header:not(.scrolled) .brand__name,
.site-header:not(.scrolled) .brand .bars{color:#fff}
.site-header:not(.scrolled) .nav a{color:rgba(255,255,255,.82)}
.site-header:not(.scrolled) .nav a:hover{color:#fff}
.site-header:not(.scrolled) .nav a::after{background:#fff}
.site-header:not(.scrolled) .burger span{background:#fff}
.site-header:not(.scrolled) .nav-cta{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.site-header:not(.scrolled) .nav-cta:hover{background:#fff;border-color:#fff;color:var(--navy)}

/* ---------- media placeholder (marked slot for real footage) ---------- */
.media-placeholder{
  position:relative;width:100%;height:100%;min-height:180px;border-radius:var(--r-media);overflow:hidden;
  background:var(--bg);border:1px solid var(--navy-12);
  display:grid;place-items:center;gap:.9rem;
}
.media-placeholder .bars{color:var(--navy-20)}
.media-placeholder__tag{
  font-size:.72rem;letter-spacing:.06em;color:var(--navy-55);font-weight:500;
  padding:.35rem .8rem;border:1px solid var(--navy-12);border-radius:999px;background:var(--bg);
}
.play{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--navy-20);display:grid;place-items:center}
.play::before{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--navy);margin-left:3px}

/* ---------- HERO (navy split: text left, showreel right) ---------- */
.hero{
  position:relative;background:var(--navy);color:rgba(255,255,255,.72);
  padding:calc(72px + clamp(2.5rem,6vw,4.5rem)) 0 clamp(3.5rem,7vw,5.5rem);
}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__head{max-width:none}
.hero__label{font-size:.8rem;letter-spacing:.02em;color:rgba(255,255,255,.6);font-weight:500;margin-bottom:1.4rem}
.hero__title{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:#fff}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .w{display:inline-block;transform:translateY(110%)}
.hero__sub{margin-top:1.6rem;font-size:clamp(1.05rem,1.5vw,1.24rem);color:rgba(255,255,255,.74);max-width:44ch;line-height:1.5}
.hero__cta{margin-top:2.2rem;display:flex;gap:.9rem;flex-wrap:wrap}
.hero__reel .media-placeholder{box-shadow:0 30px 80px rgba(0,0,0,.35)}
.media-placeholder--reel{aspect-ratio:16/9;min-height:0}
.media-placeholder--onDark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
.media-placeholder--onDark .bars{color:rgba(255,255,255,.3)}
.media-placeholder--onDark .play{border-color:rgba(255,255,255,.45)}
.media-placeholder--onDark .play::before{border-left-color:#fff}
.media-placeholder--onDark .media-placeholder__tag{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.25);background:transparent}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- section head / rhythm ---------- */
.section-head{max-width:52rem;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head h2{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:.9rem}
.section-head p{color:var(--navy-75);font-size:1.05rem;max-width:52ch}
section[id]{scroll-margin-top:84px}

/* ---------- ARBEITEN (work rail) ---------- */
.work{padding-block:clamp(4rem,8vw,7rem)}
.work-rail{
  display:flex;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;
  /* first tile aligns with the centered content column; rail bleeds off the right */
  padding-left:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  padding-right:var(--pad);padding-bottom:1rem;
  scrollbar-width:none;cursor:grab;
}
.work-rail::-webkit-scrollbar{display:none}
.work-rail.dragging{cursor:grabbing}
.work-rail.dragging *{pointer-events:none}
.work-tile{flex:0 0 min(78vw,540px);scroll-snap-align:start}
.work-tile__media{border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/10}
.work-tile__media .media-placeholder{min-height:0;height:100%}
.work-tile__meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--navy-12)}
.work-tile__name{font-family:var(--display);color:var(--navy);font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.work-tile__cat{font-size:.82rem;color:var(--navy-55);font-variant-numeric:tabular-nums}

/* ---------- ANSATZ (ruled numbered list) ---------- */
.approach{padding-block:clamp(4rem,8vw,7rem);border-top:1px solid var(--navy-12)}
.approach__block{margin-top:clamp(2rem,4vw,3rem)}
.approach__block:first-of-type{margin-top:0}
.approach__label{font-size:.82rem;letter-spacing:.02em;color:var(--navy-55);font-weight:500;margin-bottom:.5rem;padding-bottom:.9rem;border-bottom:1px solid var(--navy)}
.ruled{list-style:none}
.ruled li{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.5rem);padding:1.5rem 0;border-bottom:1px solid var(--navy-12);align-items:baseline}
.ruled__n{font-size:.9rem;color:var(--navy-40);font-weight:500;font-variant-numeric:tabular-nums;padding-top:.15rem}
.ruled__body{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:clamp(.4rem,2vw,2.5rem);align-items:baseline}
.ruled h3{font-size:1.25rem;font-weight:500}
.ruled__body p{color:var(--navy-75);font-size:1rem;max-width:52ch}

/* ---------- ANGEBOT (offer rows, serif deliverables, no price) ---------- */
.offer{padding-block:clamp(4rem,8vw,7rem);border-top:1px solid var(--navy-12)}
.offer__list{list-style:none}
.offer__row{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:baseline;padding:1.8rem 0;border-bottom:1px solid var(--navy-12)}
.offer__n{font-size:.9rem;color:var(--navy-40);font-weight:500;font-variant-numeric:tabular-nums}
.offer__main h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:500;margin-bottom:.4rem}
.offer__main p{color:var(--navy-75);font-size:1rem;max-width:40ch}
.offer__deliver{font-family:"Apple Garamond",var(--serif);font-style:italic;font-size:1.32rem;color:var(--navy);line-height:1.35}
.offer__note{margin-top:1.8rem;color:var(--navy-55);font-size:.98rem}

/* ---------- ÜBER (about + typographic team) ---------- */
.about{padding-block:clamp(4rem,8vw,7rem);border-top:1px solid var(--navy-12)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.about__intro h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:1.3rem}
.about__intro p{color:var(--navy-75);margin-bottom:1rem;font-size:1.05rem;max-width:46ch}
.about__note{color:var(--navy);font-family:var(--serif);font-style:italic;font-size:1.15rem;border-left:2px solid var(--navy);padding-left:1.1rem;max-width:44ch}
.team{list-style:none;border-top:1px solid var(--navy)}
.team__row{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--navy-12)}
.team__name{font-family:var(--display);color:var(--navy);font-weight:500;font-size:1.3rem;letter-spacing:-.01em}
.team__role{font-size:.86rem;color:var(--navy-55);align-self:center}
.team__row p{grid-column:1 / -1;color:var(--navy-75);font-size:.98rem;margin-top:.2rem;max-width:48ch}

/* ---------- KONTAKT (direct close + enquiry form) ---------- */
.contact{padding-block:clamp(4rem,8vw,7rem);border-top:1px solid var(--navy-12)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contact__intro h2{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:1.1rem;max-width:16ch}
.contact__intro p{color:var(--navy-75);font-size:1.05rem;max-width:42ch}
.contact__direct{margin-top:2rem;display:grid;gap:.4rem}
.contact__mail{font-family:var(--display);color:var(--navy);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:500;letter-spacing:-.01em;width:fit-content;border-bottom:1.5px solid var(--navy-20);transition:border-color .2s}
.contact__mail:hover{border-bottom-color:var(--navy)}
.contact__place{font-size:.9rem;color:var(--navy-55)}

.enquiry{display:grid;gap:1.1rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.enq-field{display:flex;flex-direction:column;gap:.45rem}
.enq-field label{font-size:.86rem;color:var(--navy);font-weight:500}
.enq-field .opt{color:var(--navy-55);font-weight:400}
.enq-field input,.enq-field textarea{
  background:var(--bg);border:1px solid var(--navy-20);border-radius:var(--r-input);
  padding:.85rem .95rem;color:var(--navy);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s;
}
.enq-field input::placeholder,.enq-field textarea::placeholder{color:var(--navy-40)}
.enq-field input:focus,.enq-field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08)}
.enq-field textarea{resize:vertical}
.enq-note{font-size:.85rem;color:var(--navy-55)}

/* ---------- FOOTER (navy) ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.7);padding-top:clamp(3rem,6vw,4.5rem);overflow:hidden}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.footer__brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem}
.footer__brand .bars{color:var(--white)}
.footer__brand b{color:var(--white);font-family:var(--display);font-size:1.15rem;font-weight:600}
.footer__place{font-family:var(--display);font-size:clamp(1.5rem,3.5vw,2.1rem);color:var(--white);font-weight:500;letter-spacing:-.02em;line-height:1.05}
.footer__k{font-size:.75rem;letter-spacing:.02em;color:rgba(255,255,255,.5);font-weight:500;display:block;margin-bottom:.9rem}
.footer__col p{color:rgba(255,255,255,.7);font-size:.95rem;margin-bottom:.7rem}
.footer__mail{color:#fff;display:block;margin-bottom:.6rem;border-bottom:1px solid var(--rule-dark);width:fit-content;padding-bottom:2px;transition:border-color .2s}
.footer__mail:hover{border-bottom-color:#fff}
.footer__link{color:rgba(255,255,255,.7);transition:color .2s}
.footer__link:hover{color:#fff}
.footer__clock{font-variant-numeric:tabular-nums;font-size:.86rem;color:rgba(255,255,255,.85)}
.footer__wordmark{font-family:var(--display);font-size:clamp(5rem,26vw,20rem);font-weight:600;letter-spacing:-.04em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);text-align:center;margin-top:1rem;user-select:none}

/* =========================================================
   RESPONSIVE (desktop-first)
   ========================================================= */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:2.4rem}
  .ruled__body{grid-template-columns:1fr;gap:.35rem}
  .offer__row{grid-template-columns:auto 1fr;gap:.4rem 1.5rem}
  .offer__deliver{grid-column:2;margin-top:.3rem}
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav,.nav-cta{display:none}
  .burger{display:flex}
  .footer__grid{grid-template-columns:1fr}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero__title .w{transform:none}
}

/* =========================================================
   NICI ADDITIONS — on Philipp's tokens.
   Video hero · partner strip · offer price + add-ons ·
   closing band · multi-page (gallery, about) · booking modal.
   ========================================================= */

/* ---- nav: bigger, more present ---- */
.site-header{height:80px}
.nav{gap:2.4rem;font-size:1.06rem}
.nav-cta{--bh:44px;margin-left:.5rem}

/* ---- subpages: solid header + top offset (no dark hero behind) ---- */
.subpage .site-header{background:rgba(231,228,219,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom-color:var(--navy-12)}
.subpage .site-header .brand__name,.subpage .site-header .brand .bars{color:var(--navy)}
.subpage .site-header .nav a{color:var(--navy-75)}
.subpage .site-header .nav a:hover{color:var(--navy)}
.subpage .site-header .nav a::after{background:var(--navy)}
.subpage .site-header .burger span{background:var(--navy)}
.page{padding-top:80px}

/* ---- HERO: full-bleed background video (statement overlaid) ---- */
.hero--video{min-height:100svh;padding:0;display:flex;align-items:flex-end;background:var(--navy);overflow:hidden}
.hero--video .hero__media{position:absolute;inset:0;z-index:0}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--navy)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,21,36,.30) 0%,rgba(18,21,36,.10) 32%,rgba(18,21,36,.74) 100%)}
.hero__ph-tag{position:absolute;top:calc(80px + 1rem);right:var(--pad);z-index:2;font-size:.7rem;letter-spacing:.06em;color:rgba(255,255,255,.7);padding:.35rem .8rem;border:1px solid rgba(255,255,255,.25);border-radius:999px}
.hero__inner{position:relative;z-index:2;width:100%;padding-top:7rem;padding-bottom:clamp(3rem,8vh,6rem)}
.hero--video .hero__title{max-width:15ch}

/* ---- PARTNER strip (uniform chips) ---- */
.partners{background:var(--bg);padding-block:clamp(2.2rem,4vw,3.2rem);border-bottom:1px solid var(--navy-12)}
.partners__label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-55);font-weight:500;margin-bottom:1.3rem}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:clamp(2.5rem,5vw,4.5rem);width:max-content;animation:scroll-x 45s linear infinite;align-items:center;will-change:transform}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.plogo{display:flex;align-items:center;justify-content:center;height:42px;flex:none;opacity:.82;transition:opacity .25s}
.plogo:hover{opacity:1}
.plogo img{max-height:100%;max-width:150px;width:auto;height:auto;object-fit:contain}

/* ---- OFFER: price + add-ons ---- */
.offer__side{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.offer__price{font-family:var(--display);color:var(--navy);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.offer__row--main{padding-top:0}
.addons{margin-top:clamp(2rem,4vw,3rem)}
.addons__label{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--navy);margin-bottom:.7rem}
.offer__list--addons{border-top:1px solid var(--navy-12)}
.offer__list--addons .offer__n{color:var(--navy-40);font-weight:400}
.offer__list--addons .offer__main h3{font-size:clamp(1.15rem,2vw,1.5rem)}

/* ---- CLOSING band (opens booking) ---- */
.closing{background:var(--navy);color:rgba(255,255,255,.75);padding-block:clamp(4rem,9vw,7rem)}
.closing .kicker{color:rgba(255,255,255,.55)}
.closing__inner{max-width:46rem}
.closing h2{color:#fff;font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1rem}
.closing p{color:rgba(255,255,255,.75);font-size:1.08rem;margin-bottom:2rem}
.closing__cta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.closing__mail{color:#fff;font-family:var(--display);font-size:1.1rem;font-weight:500;border-bottom:1.5px solid rgba(255,255,255,.4);padding-bottom:2px;transition:border-color .2s}
.closing__mail:hover{border-bottom-color:#fff}
.closing .btn--primary{background:#fff;color:var(--navy);border-color:#fff}
.closing .btn--primary:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)}

/* ---- buttons: ghost + large ---- */
.btn--ghost{border-color:var(--navy-20);color:var(--navy)}
.btn--ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.btn--lg{--bh:60px;padding:0 2rem;font-size:1.06rem}

/* ---- GALLERY page ---- */
.gallery-page{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(4rem,8vw,7rem)}
.section-head--page{max-width:60rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-head--page h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:var(--navy);margin-bottom:1rem}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2rem)}
.gtile--wide{grid-column:1 / -1}
.gtile__media{border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/3}
.gtile--wide .gtile__media{aspect-ratio:16/9}
.gtile__media .media-placeholder{min-height:0;height:100%}
.gtile__meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--navy-12)}
.gtile__name{font-family:var(--display);color:var(--navy);font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.gtile__cat{font-size:.82rem;color:var(--navy-55);font-variant-numeric:tabular-nums}

/* ---- page CTA band (bottom of subpages) ---- */
.page-cta{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--navy);display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.page-cta h2{font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:18ch}

/* ---- ABOUT page ---- */
.about-page{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(4rem,8vw,7rem)}
.about-kv{margin-bottom:clamp(1.6rem,3vw,2.2rem)}
.about-kv .media-placeholder{aspect-ratio:16/7;min-height:0}
.about-page__note{color:var(--navy);font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.4rem);border-left:2px solid var(--navy);padding-left:1.1rem;max-width:52ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.team--photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.4rem);border-top:0}
.team-card{padding:0;border:0;display:block}
.team-card__photo{margin-bottom:1rem}
.team-card__photo .media-placeholder{aspect-ratio:4/5;min-height:0}
.team--photos .team__name{display:block;font-size:1.3rem}
.team--photos .team__role{display:block;color:var(--navy-55);font-size:.86rem;margin-top:.15rem}
.team-card p{color:var(--navy-75);font-size:.98rem;margin-top:.6rem;max-width:none}

/* ---- BOOKING modal (Termin buchen) ---- */
.booking{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.2rem;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s}
.booking.open{opacity:1;visibility:visible}
.booking__backdrop{position:absolute;inset:0;background:rgba(18,21,36,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.booking__panel{position:relative;width:min(640px,100%);max-height:92vh;overflow:auto;background:var(--bg);border:1px solid var(--navy-12);border-radius:16px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:0 40px 100px rgba(0,0,0,.35);transform:translateY(12px) scale(.99);transition:transform .3s var(--ease)}
.booking.open .booking__panel{transform:none}
.booking__close{position:absolute;top:.8rem;right:1rem;width:38px;height:38px;border:0;background:none;font-size:1.7rem;line-height:1;color:var(--navy-55);cursor:pointer;border-radius:8px}
.booking__close:hover{color:var(--navy);background:var(--navy-08)}
.booking__bar{height:3px;background:var(--navy-12);border-radius:999px;margin-bottom:.8rem;overflow:hidden}
.booking__bar-fill{display:block;height:100%;width:100%;background:var(--navy);border-radius:999px;transform:scaleX(.2);transform-origin:left;transition:transform .35s var(--ease)}
.booking__count{font-size:.78rem;color:var(--navy-55);font-variant-numeric:tabular-nums;margin-bottom:1.4rem}
.booking__h{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:.5rem}
.booking__lead{color:var(--navy-75);font-size:1rem;margin-bottom:1.5rem;max-width:46ch}
.bk-step{display:none;border:0;padding:0;margin:0;min-inline-size:0}
.bk-step.is-active{display:block;animation:bk-in .35s var(--ease)}
@keyframes bk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bk-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}
.bk-field--mt{margin-top:1.2rem}
.bk-field label{font-size:.86rem;color:var(--navy);font-weight:500}
.bk-field .opt{color:var(--navy-55);font-weight:400}
.bk-choicelabel{display:block;font-size:.86rem;color:var(--navy);font-weight:500;margin-bottom:.55rem}
.bk-field input,.bk-field textarea{background:var(--white);border:1px solid var(--navy-20);border-radius:var(--r-input);padding:.8rem .9rem;color:var(--navy);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.bk-field input::placeholder,.bk-field textarea::placeholder{color:var(--navy-40)}
.bk-field input:focus,.bk-field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08)}
.bk-field textarea{resize:vertical}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.bk-choices{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{font:inherit;font-size:.96rem;color:var(--navy);background:var(--white);border:1px solid var(--navy-20);border-radius:999px;padding:.6rem 1.05rem;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.chip:hover{border-color:var(--navy)}
.chip.selected{background:var(--navy);color:#fff;border-color:var(--navy)}
.booking__foot{display:flex;justify-content:space-between;gap:1rem;margin-top:1.8rem}
.bk-error{margin-top:1rem;color:#b23b3b;font-size:.9rem}
.bk-done{text-align:center;padding:1rem 0}
.bk-done__mark{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;margin:0 auto 1.2rem}
.bk-done .booking__lead{margin-left:auto;margin-right:auto}
.booking.done .booking__foot,.booking.done .booking__bar,.booking.done .booking__count{display:none}

/* ---- permanent floating action button (Termin buchen) ---- */
/* .fab removed — guide bans floating CTA widgets */

/* ---- responsive additions ---- */
@media (max-width:960px){
  .offer__side{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:baseline;margin-top:.3rem}
  .gallery{grid-template-columns:1fr}
  .team--photos{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero__ph-tag{display:none}
  .bk-row{grid-template-columns:1fr}
  .team--photos{grid-template-columns:1fr}
}