:root {
  --bg: #F5EFE4;
  --fg: #1C1A17;
  --heading: #1C1A17;
  --muted: #5E574C;
  --label: #5E574C;
  --eyebrow: #5E574C;
  --price: #C93D1B;
  --rule: rgba(28,26,23,.18);
  --accent: #C93D1B;
  --accent-text: #FFF6EA;
  --dot: #B03214;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, dl, dd { margin: 0; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover { color: #B5482B; }

/* Sections and colour schemes */

section, header, footer { background: var(--bg); color: var(--fg); }

.s-mint {
  --bg: #EEF3F0;
  --fg: #10202A;
  --heading: #10202A;
  --muted: #3C4B54;
  --label: #4E6270;
  --eyebrow: #B03214;
  --rule: rgba(16,32,42,.2);
}

.s-dnd {
  --bg: #241612;
  --fg: #F2E6D0;
  --heading: #F5EFE4;
  --muted: #C4A88A;
  --label: #C4A88A;
  --eyebrow: #E8A24A;
  --price: #E8A24A;
  --rule: rgba(242,230,208,.25);
}

.s-black {
  --bg: #1C1A17;
  --fg: #F5EFE4;
  --heading: #F5EFE4;
  --muted: #CFC9BF;
  --label: #C0B6A6;
  --rule: rgba(245,239,228,.15);
}

.s-mint, .s-dnd, #maenu { position: relative; overflow: hidden; }

.glow { position: absolute; inset: 0; pointer-events: none; }
.s-mint .glow { background: radial-gradient(ellipse 50% 60% at 10% 30%, rgba(255,90,54,.16), transparent 70%); }
.s-dnd .glow {
  background:
    radial-gradient(ellipse 60% 55% at 78% 18%, rgba(232,162,74,.38), transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 95%, rgba(181,72,43,.28), transparent 70%);
}

.rule-top { border-top: 1px solid rgba(28,26,23,.15); }

/* Layout */

.wrap {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(4rem,10vh,7rem) clamp(1.25rem,4vw,2rem);
}
.header .wrap { padding-block: 1.5rem; }
.hero .wrap { padding-block: clamp(3rem,10vh,7.5rem) clamp(3.5rem,9vh,6rem); }
.intro .wrap { padding-block: clamp(3.5rem,9vh,6.5rem); }
.organisation .wrap { padding-block: clamp(3.5rem,9vh,6rem); }
.anfrage .wrap { padding-block: clamp(4.5rem,13vh,8rem); }
.footer .wrap { padding-block: 2rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem,5vw,4rem);
  align-items: start;
}
.grid--kombi { gap: clamp(1.75rem,5vw,3.5rem); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--portrait {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(2.5rem,6vw,4.5rem);
  align-items: center;
}

.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.stack--xs { gap: .6rem; }
.stack--chips { gap: .9rem; }
.stack--sm { gap: 1.1rem; }
.stack--lg { gap: 1.5rem; }
.stack--section { gap: clamp(2rem,5vw,3.5rem); }
.stack--media { gap: clamp(1.5rem,4vw,2.25rem); }

.mw-14 { max-width: 14ch; }
.mw-16 { max-width: 16ch; }
.mw-20 { max-width: 20ch; }
.mw-22 { max-width: 22ch; }
.mw-34 { max-width: 34rem; }

/* Header and footer */

.header .wrap, .footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.header .wrap { gap: 1rem 1.5rem; }
.footer .wrap { font-size: .85rem; }

.brand { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.brand img { display: block; width: auto; height: 28px; }
.footer .brand img { height: 22px; }
.brand__divider { width: 1px; height: 24px; background: currentColor; opacity: .25; }
.brand__name { font-weight: 700; font-size: 1rem; letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: clamp(1rem,3vw,1.75rem); flex-wrap: wrap; }
.nav__link, .footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.nav__link { font-weight: 500; font-size: .9rem; color: #4A443B; }
.footer__links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.footer__links a { padding: .6rem 0; color: var(--fg); }
.footer .muted { color: var(--muted); }

/* Typography */

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.hero .eyebrow { margin-bottom: 1.5rem; }
.eyebrow--flush { margin: 0; }

.label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
}

.display {
  font-weight: 900;
  font-size: clamp(2.1rem,8.5vw,5.2rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  max-width: 17ch;
  hyphens: auto;
}

h2 {
  font-weight: 900;
  font-size: clamp(1.8rem,5.6vw,3.1rem);
  line-height: 1.07;
  letter-spacing: -.02em;
  color: var(--heading);
}
.h2--lg { font-size: clamp(1.85rem,6vw,3.8rem); }
.h2--xl { font-size: clamp(1.95rem,6.5vw,4rem); line-height: 1.05; letter-spacing: -.025em; }

.lead {
  margin-top: 2.25rem;
  font-size: clamp(1.1rem,1.9vw,1.4rem);
  font-weight: 500;
  line-height: 1.45;
  max-width: 38rem;
}
.sub {
  margin-top: 1.25rem;
  font-size: clamp(1rem,1.4vw,1.15rem);
  line-height: 1.6;
  max-width: 36rem;
  color: var(--muted);
}
.copy { font-size: clamp(1.05rem,1.5vw,1.2rem); line-height: 1.6; max-width: 34rem; }
.copy--big { font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.55; }
.muted { color: var(--muted); }
.strong { font-weight: 700; }

.serif {
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem,1.6vw,1.3rem);
  line-height: 1.55;
  max-width: 34rem;
  color: var(--eyebrow);
}

.note { font-size: .9rem; line-height: 1.55; color: var(--muted); }
.note--pull { margin-top: -.5rem; }
.note--after { margin-top: 1rem; }
.note--md { font-size: .95rem; }
.highlight { font-weight: 900; color: var(--eyebrow); white-space: nowrap; }

.quote {
  margin-top: .5rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  font-size: 1rem;
  line-height: 1.55;
}

/* Facts */

.facts-line {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.hero .facts-line {
  margin-top: 2.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.organisation .facts-line {
  gap: .6rem 1.5rem;
  margin-top: .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
}
.dot { color: var(--dot); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: .75rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fact { display: flex; flex-direction: column; gap: .35rem; }
.fact dt { overflow-wrap: anywhere; }
.fact__value { font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; color: var(--heading); }
.fact__price { font-weight: 900; font-size: clamp(1.6rem,2.6vw,2.2rem); letter-spacing: -.02em; color: var(--price); }

/* Kombi plan */

.plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .75rem;
  margin-top: clamp(2.5rem,6vw,3.5rem);
}
.plan__slot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 10rem;
  padding: 1.6rem;
  border-radius: 1.25rem;
  background: var(--bg);
  color: var(--fg);
}
.plan__slot .eyebrow { margin: 0; font-size: .72rem; }
.plan__slot--noon { background: transparent; border: 1px dashed rgba(28,26,23,.35); }
.plan__title { font-weight: 900; font-size: clamp(1.35rem,2.2vw,1.75rem); line-height: 1.1; letter-spacing: -.02em; }

.summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(28,26,23,.2);
  border-bottom: 1px solid rgba(28,26,23,.2);
}
.summary__facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: flex-start; }

/* Media */

.frame { position: relative; width: 100%; border-radius: 1.5rem; overflow: hidden; }
.frame--training {
  aspect-ratio: 4/5;
  max-height: min(34rem, 65vh);
  box-shadow: 0 30px 60px rgba(16,32,42,.15);
  background: linear-gradient(160deg, #D9E3DD, #B8C9C0);
}
.frame--dnd {
  aspect-ratio: 4/3;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  background: linear-gradient(160deg, #3A2620, #1A100D);
}
.portrait {
  width: min(100%, 22rem);
  aspect-ratio: 1;
  border-radius: 38%;
  overflow: hidden;
  transform: rotate(-8deg);
  box-shadow: 0 20px 50px rgba(28,26,23,.18);
  background: linear-gradient(160deg, #E8DCC8, #CDBFA8);
}
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Buttons and chips */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 48px;
  padding: 1rem 1.85rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background 200ms cubic-bezier(.4,0,.2,1), color 200ms cubic-bezier(.4,0,.2,1);
}
.btn span { font-weight: 500; }
.btn--sm { gap: .5rem; min-height: 44px; padding: .7rem 1.35rem; font-size: .9rem; }
.btn--lg { gap: .9rem; padding: 1.1rem 2rem; font-size: clamp(1rem,1.5vw,1.2rem); }
.btn--xl { gap: .9rem; padding: 1.15rem 2.1rem; font-size: clamp(1.05rem,1.6vw,1.3rem); }
.btn--start { align-self: flex-start; }
.note--pull + .btn { margin-top: .5rem; }
.hero .btn { margin-top: 2.5rem; }
.anfrage .btn { margin-top: .25rem; }

.btn--black { background: #1C1A17; color: #F5EFE4; }
.btn--navy { background: #10202A; color: #EEF3F0; }
.btn--accent { background: #C93D1B; color: #FFF6EA; }
.btn--amber { background: #E8A24A; color: #241612; }
.btn--cream { background: #F5EFE4; color: #1C1A17; }
.btn--black:hover, .btn--navy:hover { background: #C93D1B; color: #FFF6EA; }
.btn--accent:hover { background: #1C1A17; color: #FFF6EA; }
.btn--amber:hover { background: #F5EFE4; color: #241612; }
.btn--cream:hover { background: #E8A24A; color: #1C1A17; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  padding: .7rem 1.35rem;
  min-height: 44px;
  border-radius: 9999px;
  cursor: pointer;
  background: transparent;
  color: #F5EFE4;
  border: 1px solid rgba(245,239,228,.35);
  transition: background 200ms cubic-bezier(.4,0,.2,1), color 200ms cubic-bezier(.4,0,.2,1);
}
.chip.active { background: #E8A24A; color: #1C1A17; border-color: #E8A24A; }

.anfrage .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
.anfrage .label { letter-spacing: .14em; }

/* Mobile CTA bar */

#bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(245,239,228,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(28,26,23,.18);
  transform: translateY(120%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
}
#bar.show { transform: translateY(0); }
#bar .btn { display: flex; justify-content: center; width: 100%; min-height: 52px; padding: .9rem 1.5rem; }
@media (max-width: 640px) { #bar { display: block; } }