/* ============================================================
   Dragonfly Support — site.css
   Hand-written, brand-tokened, no framework.
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/marcellus-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/marcellus-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/karla-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ---- */
:root {
  --olive-deep: #4A4B3F;
  --olive: #676859;
  --sage: #8A8B77;
  --sage-pale: #C7C8B4;
  --beige: #E8E4D4;
  --cream: #FFFAE7;
  --clay: #B5714F;
  --clay-dark: #8F5539;
  --clay-light: #DBA07B;
  --ink: #2E2F26;

  --font-head: 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 8rem;

  --wrap: 1240px;
  --wrap-narrow: 780px;

  --radius: 4px;
  --radius-lg: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.8s;

  --header-h: 84px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--clay); text-decoration: none; transition: color 0.3s var(--ease); }
a:hover { color: var(--clay-dark); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--clay); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.12;
  color: inherit;
}
h1 { font-size: clamp(2.7rem, 6vw, 5.2rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.008em; line-height: 1.15; }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: 0; line-height: 1.25; }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: 0.01em; }
p { max-width: 62ch; }
/* German compound nouns ("Finanzierungsmöglichkeiten", "Buchungsbedingungen")
   are longer than a phone's text column and were being clipped by the body's
   overflow-x:hidden. Hyphenate on narrow screens; break as a last resort. */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 620px) {
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
/* higher-contrast accent on dark grounds */
.ground-olive .eyebrow, .ground-olive-2 .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--clay-light); }
.ground-olive .service__index, .hero .service__index { color: var(--clay-light); }
.lead { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.55; color: var(--olive); }

/* ---- Layout ---- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.ground-olive { background: var(--olive-deep); color: var(--cream); }
.ground-olive-2 { background: var(--olive); color: var(--cream); }
.ground-cream { background: var(--cream); color: var(--ink); }
.ground-beige { background: var(--beige); color: var(--ink); }
.ground-sage { background: var(--sage-pale); color: var(--ink); }
.ground-olive h2, .ground-olive h3, .ground-olive-2 h2, .ground-olive-2 h3 { color: var(--cream); }
.ground-olive .lead, .ground-olive-2 .lead { color: var(--sage-pale); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.4s var(--ease), height 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header.compact {
  height: 66px;
  background: var(--olive-deep);
  border-bottom-color: rgba(199,200,180,0.16);
  box-shadow: 0 10px 40px -24px rgba(0,0,0,0.6);
}
/* on light pages the header text needs dark until compact */
body[data-header="light"] .site-header:not(.compact) { color: var(--ink); }
body[data-header="light"] .site-header:not(.compact) .brand-name { color: var(--ink); }
body[data-header="dark"] .site-header { color: var(--cream); }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; }
/* Real brand badge, painted as a mask so `color` still drives it (cream → clay-light on hover). */
.brand .mark {
  width: 46px; height: 46px; color: var(--cream); flex: none; display: block;
  background: currentColor;
  -webkit-mask: url("/assets/img/logo-badge.png") no-repeat center / contain;
  mask: url("/assets/img/logo-badge.png") no-repeat center / contain;
  transition: transform 0.5s var(--ease), color 0.4s var(--ease);
}
.brand:hover .mark { transform: rotate(-8deg) scale(1.05); color: var(--clay-light); }
.brand-name {
  font-family: var(--font-head);
  font-size: 1.32rem;
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 1;
  /* "Dragonfly Support" is one name — never let it break across lines. */
  white-space: nowrap;
}
@media (max-width: 620px) { .brand-name { font-size: 1.06rem; } .brand .mark { width: 38px; height: 38px; } }
@media (max-width: 400px) { .brand-name { font-size: 0.98rem; } .brand { gap: 0.5rem; } }
.site-header.compact .brand-name { color: var(--cream); }
.brand-name span { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--clay-light); margin-top: 3px; }

.nav-desktop { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav-desktop a {
  color: inherit;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 0;
}
.nav-desktop a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
.nav-desktop a[aria-current="page"] { color: var(--clay); }

.header-right { display: flex; align-items: center; gap: 1.2rem; }
.lang-switch { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; letter-spacing: 0.05em; }
.lang-switch a { color: inherit; opacity: 0.6; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a[aria-current="true"] { color: var(--clay); opacity: 1; }
.lang-switch .sep { opacity: 0.35; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--clay); color: var(--cream);
  padding: 0.85rem 1.6rem; border-radius: 999px;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  box-shadow: 0 14px 30px -18px rgba(143,85,57,0.9);
  white-space: nowrap;
}
.btn:hover { background: var(--clay-dark); color: var(--cream); transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(143,85,57,0.95); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-ghost {
  background: transparent; color: inherit; border: 1px solid currentColor;
  box-shadow: none; opacity: 0.9;
}
.btn-ghost:hover { background: rgba(255,250,231,0.08); color: inherit; transform: translateY(-2px); }
.btn-neutral { background: var(--sage); color: var(--olive-deep); box-shadow: none; }
.btn-neutral:hover { background: var(--sage-pale); color: var(--olive-deep); transform: translateY(-2px); }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
.header-cta { display: inline-flex; }

.menu-toggle {
  display: none; width: 44px; height: 44px; color: inherit; position: relative;
}
.menu-toggle span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-toggle span:nth-child(3) { top: 28px; }

/* ---- Mobile full-screen menu ---- */
.menu-panel {
  position: fixed; inset: 0; z-index: 400;
  background: var(--olive-deep); color: var(--cream);
  display: flex; flex-direction: column;
  padding: 1.4rem;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
  visibility: hidden;
}
.menu-panel.open { transform: translateY(0); visibility: visible; }
.menu-panel__top { display: flex; align-items: center; justify-content: space-between; }
.menu-close { width: 44px; height: 44px; color: var(--cream); position: relative; }
.menu-close span { position: absolute; left: 8px; right: 8px; top: 21px; height: 1.5px; background: currentColor; }
.menu-close span:nth-child(1) { transform: rotate(45deg); }
.menu-close span:nth-child(2) { transform: rotate(-45deg); }
.menu-nav { margin-top: auto; margin-bottom: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.menu-nav a {
  font-family: var(--font-head); font-size: clamp(2rem, 9vw, 3rem); color: var(--cream);
  letter-spacing: -0.01em; padding: 0.35rem 0; opacity: 0; transform: translateY(14px);
}
.menu-panel.open .menu-nav a { animation: menuIn 0.6s var(--ease) forwards; }
.menu-nav a[aria-current="page"] { color: var(--clay); }
@keyframes menuIn { to { opacity: 1; transform: translateY(0); } }
.menu-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(199,200,180,0.2); padding-top: 1.2rem; }
.menu-foot .lang-switch { font-size: 1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--olive-deep);
  color: var(--cream);
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero__media {
  position: absolute; inset: -12% 0 0 0; z-index: 0;
  will-change: transform;
}
.hero__media img { width: 100%; height: 115%; object-fit: cover; opacity: 0.4; filter: saturate(0.82); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,47,38,0.78) 0%, rgba(46,47,38,0.5) 42%, rgba(46,47,38,0.96) 100%);
}
/* The real company badge, oversized — above the hero photo, beneath the hero copy. */
.hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: 1;
  left: 50%; top: 48%;
  /* capped at the artwork's true resolution (821px) so it never upscales and softens */
  width: min(88vh, 82vw, 820px); height: min(88vh, 82vw, 820px);
  transform: translate(-50%, -50%);
  background: var(--cream);
  -webkit-mask: url("/assets/img/logo-badge.png") no-repeat center / contain;
  mask: url("/assets/img/logo-badge.png") no-repeat center / contain;
  opacity: 0.16;
  animation: dragonflyDrift 26s var(--ease) infinite;
}
@keyframes dragonflyDrift {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { transform: translate(-50%, -52.5%) scale(1.04) rotate(-1.2deg); }
}
.hero__inner { position: relative; z-index: 2; padding-bottom: clamp(3rem, 8vh, 6rem); padding-top: 4rem; }
.hero h1 { max-width: 15ch; }
.hero .hero__sub { margin-top: 1.6rem; max-width: 46ch; color: var(--sage-pale); font-size: clamp(1.1rem, 1.7vw, 1.4rem); }
.hero__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__scroll {
  position: absolute; right: clamp(1.2rem, 4vw, 3rem); bottom: 2rem; z-index: 3;
  writing-mode: vertical-rl; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--sage-pale); display: flex; align-items: center; gap: 1rem;
}
.hero__scroll::after { content: ""; width: 1px; height: 46px; background: currentColor; animation: scrollLine 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes scrollLine { 0%,100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Kinetic masked reveal */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-mask > .line { display: block; }
html.js .line-mask > .line {
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.reveal-lines.is-revealed .line-mask > .line { transform: translateY(0); }
html.js .reveal-lines .line-mask:nth-child(1) > .line { transition-delay: 0.05s; }
html.js .reveal-lines .line-mask:nth-child(2) > .line { transition-delay: 0.15s; }
html.js .reveal-lines .line-mask:nth-child(3) > .line { transition-delay: 0.25s; }
html.js .reveal-lines .line-mask:nth-child(4) > .line { transition-delay: 0.35s; }

.fade-up { }
html.js .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.hero__inner.is-revealed .fade-up { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

/* ============================================================
   SCROLL REVEAL (generic)
   ============================================================ */
.reveal { }
html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { overflow: hidden; padding-block: clamp(1.6rem, 3vw, 2.6rem); white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 0; will-change: transform; animation: marquee 46s linear infinite; }
.marquee__track span {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.01em;
  padding-inline: clamp(1.2rem, 3vw, 2.6rem);
  display: inline-flex; align-items: center;
}
.marquee__track .dot { color: var(--clay); font-size: 0.5em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   INTRO / SPLIT
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.stack-lg > * + * { margin-top: 1.4rem; }
.stack > * + * { margin-top: 0.9rem; }

/* Clipped-frame photography */
.framed { position: relative; }
.framed img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.framed--tall { aspect-ratio: 4/5; }
.framed--wide { aspect-ratio: 3/2; }
.framed::before {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,250,231,0.5);
  z-index: 2; pointer-events: none; mix-blend-mode: overlay;
}
.framed__caption {
  position: absolute; left: 0; bottom: -1.6rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage);
}
.framed__spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 70% 15%, rgba(255,250,231,0.22), transparent 55%);
}

/* ============================================================
   MANIFESTO CHAPTERS
   ============================================================ */
.chapter {
  display: grid; grid-template-columns: minmax(120px, 0.4fr) 1fr; gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid rgba(46,47,38,0.14);
  align-items: start;
}
.ground-olive .chapter, .ground-olive-2 .chapter { border-top-color: rgba(199,200,180,0.22); }
.chapter__num {
  font-family: var(--font-head);
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.9; color: var(--sage);
  letter-spacing: -0.02em;
}
.ground-olive .chapter__num { color: var(--sage); }
.chapter__body h3 { margin-bottom: 0.7rem; }
.chapter__body p { color: inherit; opacity: 0.92; }

/* ============================================================
   SERVICES
   ============================================================ */
.service {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center; padding-block: clamp(2.6rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(46,47,38,0.14);
  scroll-margin-top: 100px;
}
.service:nth-child(even) .service__media { order: 2; }
.service__index { font-family: var(--font-head); font-size: 1rem; color: var(--clay); letter-spacing: 0.12em; margin-bottom: 0.8rem; display: block; }
.service__tag { display: inline-block; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); border: 1px solid var(--sage-pale); padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 1rem; }
.service h2 { margin-bottom: 1rem; }
.service ul.ticks { margin-top: 1.2rem; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.5rem; color: var(--olive); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 999px; background: var(--clay); }
.service__cta { margin-top: 1.6rem; }
/* Service 2 offers two equally-weighted booking routes — neither is primary.
   Side by side on desktop, stacked full-width on mobile. */
.service__cta--pair { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 620px) {
  .service__cta--pair { display: grid; grid-template-columns: 1fr; }
  .service__cta--pair .btn { width: 100%; white-space: normal; }
}

/* ============================================================
   CARDS (financing)
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card {
  background: var(--cream); color: var(--ink);
  border: 1px solid rgba(46,47,38,0.12);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--clay); box-shadow: 0 30px 50px -34px rgba(46,47,38,0.5); }
.card__num { font-family: var(--font-head); font-size: 2.4rem; color: var(--sage); line-height: 1; }
.card h3 { margin-top: 0.2rem; }
.card p { font-size: 1rem; color: var(--olive); }

/* generic feature grid (bento) */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; }
.bento > * { grid-column: span 4; }
.bento .b-wide { grid-column: span 6; }
.bento .b-full { grid-column: span 12; }

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.accordion { border-top: 1px solid rgba(46,47,38,0.16); }
.acc-item { border-bottom: 1px solid rgba(46,47,38,0.16); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  text-align: left; padding: 1.5rem 0; color: var(--ink);
  font-family: var(--font-head); font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: 0;
  transition: color 0.3s var(--ease);
}
.acc-trigger:hover { color: var(--clay); }
.acc-icon { flex: none; width: 26px; height: 26px; position: relative; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; background: var(--clay); transition: transform 0.4s var(--ease); }
.acc-icon::before { top: 12px; left: 3px; right: 3px; height: 1.5px; }
.acc-icon::after { left: 12px; top: 3px; bottom: 3px; width: 1.5px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: rotate(90deg); opacity: 0; }
.acc-panel { overflow: hidden; height: 0; transition: height 0.45s var(--ease); }
.acc-panel__inner { padding: 0 0 1.6rem; color: var(--olive); font-size: 1.05rem; max-width: 68ch; }

/* ============================================================
   CONSENT BANNER
   ============================================================ */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--olive-deep); color: var(--cream);
  border-top: 1px solid rgba(199,200,180,0.2);
  transform: translateY(120%); transition: transform 0.5s var(--ease);
  box-shadow: 0 -20px 50px -30px rgba(0,0,0,0.7);
}
.consent.show { transform: translateY(0); }
.consent .wrap { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); padding-block: 1.3rem; flex-wrap: wrap; }
.consent__text { flex: 1 1 340px; font-size: 0.95rem; color: var(--sage-pale); }
.consent__text strong { color: var(--cream); font-weight: 700; }
.consent__actions { display: flex; gap: 0.8rem; flex: none; }
.consent .btn-ghost { border-color: var(--sage-pale); color: var(--cream); }

/* ============================================================
   CALENDLY / BOOKING GATE
   ============================================================ */
.book-gate {
  border: 1px solid var(--sage-pale); border-radius: var(--radius-lg);
  background: var(--beige); padding: clamp(1.6rem, 4vw, 3rem);
  min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1rem;
}
.book-gate p { color: var(--olive); }
/* Pre-consent escape hatch: a plain link to the real event page. Fires no request until clicked. */
.book-gate__alt { margin-top: 1rem; font-size: 0.9rem; }
.book-gate__alt a { color: var(--clay-dark); text-decoration: underline; text-underline-offset: 3px; }
/* Calendly embed. Height is driven by Calendly's own `calendly.page_height`
   postMessage (see site.js) so the whole booking flow is visible and the page
   scrolls normally. The min-heights below are only a fallback for the moment
   before the first height message arrives, or if it never does. */
.book-embed {
  width: 100%; min-height: 760px; border: 0; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--cream);
  transition: height 0.35s var(--ease);
}
@media (max-width: 900px) { .book-embed { min-height: 1000px; } }
@media (max-width: 560px) { .book-embed { min-height: 1150px; } }
.book-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.6rem; }
.book-tab {
  padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid var(--sage);
  color: var(--olive); font-size: 0.9rem; transition: all 0.3s var(--ease);
}
.book-tab[aria-selected="true"] { background: var(--olive-deep); color: var(--cream); border-color: var(--olive-deep); }
.book-tab:hover { border-color: var(--clay); color: var(--clay); }

/* ============================================================
   FORM
   ============================================================ */
.form { display: grid; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.field .req { color: var(--clay); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--olive);
  border-radius: var(--radius); padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(181,113,79,0.18);
}
.field textarea { min-height: 140px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: #a5432e; }
.field__err { font-size: 0.82rem; color: #a5432e; display: none; }
.field--error .field__err { display: block; }
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.consent-check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: var(--olive); }
.consent-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--clay); }
.form-status { padding: 1rem 1.2rem; border-radius: var(--radius); font-size: 0.95rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: rgba(138,139,119,0.18); color: var(--olive-deep); border: 1px solid var(--sage); }
.form-status.err { background: rgba(165,67,46,0.1); color: #a5432e; border: 1px solid #a5432e; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--olive-deep); color: var(--sage-pale); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.site-footer .brand-name { color: var(--cream); }
.footer-col h4 { color: var(--cream); font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 700; }
.footer-col a { color: var(--sage-pale); display: block; padding: 0.28rem 0; width: fit-content; }
.footer-col a:hover { color: var(--clay); }
.footer-col address { font-style: normal; line-height: 1.9; }
.footer-tag { font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--cream); margin-top: 2.5rem; letter-spacing: -0.01em; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(199,200,180,0.18); font-size: 0.82rem; color: var(--sage); }

/* ---- Page hero (interior pages) ---- */
.page-hero { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(3rem, 7vw, 5.5rem); background: var(--olive-deep); color: var(--cream); position: relative; overflow: hidden; }
.page-hero .eyebrow { color: var(--clay); }
.page-hero h1 { max-width: 18ch; margin-top: 1rem; }
.page-hero .lead { margin-top: 1.4rem; color: var(--sage-pale); }
.page-hero__deco { position: absolute; right: -6%; top: -20%; width: 40vw; max-width: 520px; opacity: 0.08; color: var(--sage-pale); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--clay); color: var(--cream); padding: 0.7rem 1.2rem; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; color: var(--cream); }

.divider-note { font-size: 0.9rem; color: var(--sage); }

.todo-note {
  background: rgba(181,113,79,0.08); border: 1px dashed var(--clay);
  border-radius: var(--radius); padding: 1rem 1.2rem; font-size: 0.92rem; color: var(--clay-dark);
}

/* Legal documents (Datenschutzerklärung, Buchungsbedingungen).
   The global `ul { list-style: none }` reset strips bullets, so restore them here. */
.legal-doc .legal-section + .legal-section { margin-top: 2.4rem; }
.legal-doc h2 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); letter-spacing: -0.005em; }
.legal-doc p { font-size: 1rem; }
/* The Muster-Widerrufsformular contains fill-in blanks written as long runs of
   underscores. Those have no break opportunity, so on narrow screens they push
   the whole document wider than the viewport. Breaking only applies to strings
   that would otherwise overflow — normal prose is untouched, and her text is
   unchanged. */
.legal-doc p, .legal-doc li { overflow-wrap: break-word; }
.legal-list { list-style: disc; padding-left: 1.35rem; }
.legal-list li { margin-bottom: 0.35rem; color: var(--olive); }
.legal-list li::marker { color: var(--clay); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav-desktop, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .split, .service, .footer-grid { grid-template-columns: 1fr; }
  .service:nth-child(even) .service__media { order: 0; }
  .cards { grid-template-columns: 1fr; }
  .bento > *, .bento .b-wide, .bento .b-full { grid-column: span 12; }
  .chapter { grid-template-columns: 1fr; gap: 0.6rem; }
  .split--reverse .split__media { order: 0; }
}
@media (max-width: 560px) {
  body { font-size: 1.06rem; }
  .consent .wrap { flex-direction: column; align-items: flex-start; }
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
/* ============================================================
   MOTION POLISH
   All initial states gated behind html.js so content stays visible
   without JS, and all of it is neutralised in the reduced-motion
   block below. Kept deliberately gentle: the audience includes
   families of neurodivergent children.
   ============================================================ */

/* Photographs wipe up into frame instead of hard-appearing.
   clip-path self-clips, so .framed__caption (which sits outside
   the frame box on ueber-mich / en/about) is never cropped. */
html.js .reveal .framed img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease);
}
html.js .reveal.in-view .framed img { clip-path: inset(0 0 0 0); }

/* Bulleted benefit lists resolve one line at a time. */
html.js .reveal .ticks li {
  opacity: 0; transform: translateY(9px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
html.js .reveal.in-view .ticks li { opacity: 1; transform: none; }
html.js .reveal.in-view .ticks li:nth-child(1) { transition-delay: 0.10s; }
html.js .reveal.in-view .ticks li:nth-child(2) { transition-delay: 0.18s; }
html.js .reveal.in-view .ticks li:nth-child(3) { transition-delay: 0.26s; }
html.js .reveal.in-view .ticks li:nth-child(4) { transition-delay: 0.34s; }
html.js .reveal.in-view .ticks li:nth-child(n+5) { transition-delay: 0.42s; }

/* The eyebrow's leading rule draws itself in. */
html.js .reveal .eyebrow::before,
html.js .hero__inner .eyebrow::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.75s var(--ease) 0.15s;
}
html.js .reveal.in-view .eyebrow::before,
html.js .hero__inner.is-revealed .eyebrow::before { transform: scaleX(1); }

/* Numbered chapter markers rise with their row. */
html.js .reveal .chapter__num {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s var(--ease) 0.05s, transform 0.7s var(--ease) 0.05s;
}
html.js .reveal.in-view .chapter__num { opacity: 1; transform: none; }

/* Tactile press feedback — buttons currently lift on hover but never settle. */
.btn:active, .btn-ghost:active, .btn-neutral:active { transform: translateY(0); transition-duration: 0.08s; }
.card:active { transform: translateY(-1px); }

/* Service cards: the oversized numeral drifts as the card lifts. */
.card__num { transition: transform 0.45s var(--ease), color 0.45s var(--ease); }
.card:hover .card__num { transform: translateX(3px); color: var(--clay); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Neutralise every initial state introduced above, or content
     that never scrolls into view would stay permanently hidden. */
  .ticks li { opacity: 1 !important; transform: none !important; }
  .chapter__num { opacity: 1 !important; transform: none !important; }
  .framed img { clip-path: none !important; }
  .eyebrow::before { transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .line-mask > .line { transform: none !important; }
  .reveal, .fade-up { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .hero__media { transform: none !important; }
}