/* das Zauberkörnchen — stylesheet
   Built from design/tokens.css + the measurements in design/reference-*.html.
   Mobile-first: base rules match the 390px reference, overridden at 900px
   for the desktop reference. That is the only real breakpoint (see
   design/DESIGN-SPEC.md). */

/* das Zauberkörnchen — design tokens
   Every value below is taken from the approved artboards. Use these instead of
   literal hex values anywhere in the build. */

:root {
  /* ---- Ground and ink ---------------------------------------------- */
  --ground:        #FBF7F0;  /* page background, warm oat */
  --ground-deep:   #F1EBE0;  /* alternating band (Draußen section) */
  --panel:         #FFFFFF;  /* white sections and cards */
  --ink:           #2C2722;  /* headings, strong body */
  --ink-body:      #4A423A;  /* body copy */
  --ink-muted:     #6B6055;  /* captions, labels, meta */
  --ink-placeholder: #8A7E6E; /* [PLACEHOLDER] rows only */
  --line:          #E7DDCC;  /* hairlines, header border */
  --line-card:     #EFE6D8;  /* card borders on cream */

  /* ---- Clay (primary accent) --------------------------------------- */
  /* Two tints on purpose: --clay is the text-safe one (5.2:1 on --ground),
     --clay-logo is one step lighter so the logo also holds on --footer-bg.
     Do not collapse them into one value. */
  --clay:          #A8502E;  /* buttons, links, eyebrows, active pill */
  --clay-hover:    #7F3A1E;
  --clay-logo:     #B85C38;  /* logo gradient mid stop */
  --clay-soft:     #F5E9E2;  /* contact block background */
  --clay-border:   #E0CDC0;  /* outlined button on --clay-soft */

  /* ---- Sage (secondary) -------------------------------------------- */
  --sage-band:     #33402B;  /* credentials band background */
  --sage-deep:     #4A6340;  /* check icons */
  --sage-text:     #3F5637;  /* "freie Plätze" badge text */
  --sage-dot:      #5B7A4B;  /* availability dot */
  --sage-soft:     #ECF0E7;  /* badge + icon circle background */
  --sage-leaf:     #879C58;  /* logo leaves */

  /* ---- Warm neutrals ----------------------------------------------- */
  --wheat:         #E9C87C;  /* numbers on the sage band */
  --wheat-soft:    #F3E3C4;  /* hero decorative circle */
  --dashed:        #D9CDB9;  /* dashed placeholder borders */
  --outline:       #D8CCB8;  /* secondary button border on --ground */

  /* ---- Footer ------------------------------------------------------- */
  --footer-bg:     #241F1A;
  --footer-text:   #D9D2C7;
  --footer-body:   #B8AFA2;
  --footer-muted:  #8F8579;
  --footer-line:   #3A332B;
  --footer-chip:   #3A332B;  /* active language chip */

  /* ---- Type --------------------------------------------------------- */
  /* Both families carry Cyrillic — that is why they were chosen. Do not
     substitute a face without checking its Cyrillic coverage. */
  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-body:    'Golos Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Desktop scale */
  --h1:        58px;  /* line-height 1.08, letter-spacing -1.2px */
  --h2:        42px;  /* 1.16 / -0.8px */
  --h2-small:  34px;  /* "Draußen gehört dazu" */
  --h3:        22px;
  --stat:      44px;
  --body-lg:   18px;  /* hero lead, 1.68 */
  --body:      17.5px;/* section copy, 1.72 */
  --body-sm:   16px;  /* card copy, 1.66 */
  --caption:   14px;
  --eyebrow:   13px;  /* uppercase, letter-spacing 1.6px, --clay */

  /* Mobile scale (390px) */
  --h1-m:      38px;  /* 1.1 / -0.9px */
  --h2-m:      32px;  /* 1.16 / -0.6px */
  --stat-m:    36px;
  --body-m:    16.5px;

  /* Russian runs ~15% longer than German — step the display sizes down
     when lang="ru". Everything else is unchanged. */
  --h1-ru:     50px;
  --h1-ru-m:   34px;

  /* ---- Shape and space ---------------------------------------------- */
  --r-pill:    999px;
  --r-card:    20px;
  --r-card-sm: 18px;
  --r-image:   18px;
  --r-image-sm:14px;
  --r-contact: 26px;

  --pad-x:     80px;  /* desktop section padding */
  --pad-x-m:   22px;  /* mobile */
  --pad-y:     92px;  /* desktop section padding, top and bottom */
  --pad-y-m:   52px;

  --content-max: 1120px; /* 1280 − 2 × 80 */

  /* ---- Controls ------------------------------------------------------ */
  --btn-h:       54px;  /* primary and secondary CTAs */
  --btn-h-m:     56px;  /* full width on mobile */
  --btn-h-nav:   42px;  /* header CTA */
  --pill-h:      32px;  /* language pills */
  --tap-min:     44px;  /* never go below this on touch */
  --header-h:    76px;
  --header-h-m:  68px;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/golos-text-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/golos-text-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/golos-text-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/golos-text-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/golos-text-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/golos-text-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/golos-text-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/golos-text-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/golos-text-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/golos-text-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/golos-text-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/golos-text-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/golos-text-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/golos-text-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/golos-text-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/golos-text-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/literata-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/literata-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/literata-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/literata-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/literata-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/literata-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/literata-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/literata-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/literata-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/literata-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/literata-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/literata-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--clay);
}

a:hover {
  color: var(--clay-hover);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--clay);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clay);
}

/* ---- Buttons ------------------------------------------------------- */

.btn {
  height: var(--btn-h-m);
  width: 100%;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: 16.5px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn svg {
  flex-shrink: 0;
}

.btn-primary {
  background: var(--clay);
  color: #fff;
}

.btn-primary:hover {
  background: var(--clay-hover);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--outline);
  color: var(--ink);
}

.btn-secondary:hover {
  color: var(--ink);
  border-color: var(--clay);
}

.btn-outline {
  background: var(--panel);
  border: 1.5px solid var(--clay-border);
  color: var(--ink);
}

.btn-outline:hover {
  color: var(--ink);
  border-color: var(--clay);
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

/* ---- Header ---------------------------------------------------------- */

#top,
#ueber-mich,
#konzept,
#raeume,
#kontakt {
  scroll-margin-top: var(--header-h-m);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h-m);
  background: rgba(251, 247, 240, 0.97);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x-m);
  backdrop-filter: blur(6px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand-logo {
  width: 33px;
  height: 42px;
  display: block;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.brand-name .brand-full {
  display: none;
}

.brand-tagline {
  display: none;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--ground-deep);
  border-radius: var(--r-pill);
  padding: 3px;
}

.lang-pill {
  height: var(--pill-h);
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.lang-pill[aria-current="true"] {
  background: var(--clay);
  color: #fff;
}

.menu-toggle {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.main-nav {
  display: none;
}

.nav-cta {
  display: none;
}

.mobile-menu {
  position: absolute;
  top: var(--header-h-m);
  left: 0;
  right: 0;
  z-index: 35;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--pad-x-m) 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 24px rgba(44, 39, 34, 0.08);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a.nav-link {
  padding: 12px 4px;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-card);
}

.mobile-menu .btn {
  margin-top: 12px;
}

/* ---- Layout helpers --------------------------------------------------- */

.wrap {
  /* 1280 total, minus 2x --pad-x, is the 1120px content column from
     design/tokens.css (box-sizing: border-box counts padding inward). */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x-m);
}

section {
  padding: var(--pad-y-m) 0;
}

.section-white {
  background: var(--panel);
}

.section-deep {
  background: var(--ground-deep);
}

/* ---- Hero -------------------------------------------------------------- */

.hero {
  padding: 26px 0 40px;
}

.hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-media {
  position: relative;
  width: 100%;
  max-width: 346px;
}

.hero-media img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 150px 150px 20px 20px;
  display: block;
}

.hero-circle {
  display: none;
}

.badge {
  margin-top: 26px;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--sage-soft);
  color: var(--sage-text);
  font-size: 13px;
  font-weight: 600;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--sage-dot);
}

.hero h1 {
  margin-top: 16px;
  font-size: var(--h1-m);
  line-height: 1.1;
  letter-spacing: -0.9px;
}

:lang(ru) .hero h1 {
  font-size: var(--h1-ru-m);
}

.hero .lead {
  margin-top: 18px;
  font-size: var(--body-m);
  line-height: 1.68;
  color: var(--ink-body);
}

.hero .lead-muted {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-muted);
}

.hero .micro {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---- Facts band --------------------------------------------------------- */

.facts {
  background: var(--sage-band);
  color: #f3f1e9;
  padding: 44px 0 48px;
}

.facts-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.facts-title {
  font-size: 25px;
  color: #fff;
}

.facts-rule {
  display: none;
}

.facts-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fact-num {
  font-family: var(--font-display);
  font-size: var(--stat-m);
  font-weight: 600;
  color: var(--wheat);
  line-height: 1;
}

.fact-label {
  font-size: 14px;
  line-height: 1.45;
  color: #dedbcf;
}

/* ---- About --------------------------------------------------------------- */

.about-media {
  position: relative;
  width: 100%;
  max-width: 346px;
}

.about-media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r-image-sm);
  display: block;
}

.about h2 {
  margin-top: 12px;
  font-size: var(--h2-m);
  line-height: 1.16;
  letter-spacing: -0.6px;
}

.about-media {
  margin-top: 22px;
}

.about-card {
  display: none;
}

.about p {
  margin-top: 14px;
  font-size: var(--body-m);
  line-height: 1.7;
  color: var(--ink-body);
}

.about p:first-of-type {
  margin-top: 22px;
}

.about h3 {
  margin-top: 30px;
  font-size: 20px;
}

.quals {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qual-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-body);
}

.qual-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- Concept --------------------------------------------------------------- */

.concept h2 {
  margin-top: 12px;
  font-size: var(--h2-m);
  line-height: 1.16;
  letter-spacing: -0.6px;
}

.concept > .wrap > p {
  margin-top: 16px;
  font-size: var(--body-m);
  line-height: 1.7;
  color: var(--ink-body);
}

.concept-cards {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.concept-card {
  background: var(--ground);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card-sm);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}

.concept-icon {
  width: 30px;
  height: 30px;
}

.concept-card h3 {
  margin-top: 14px;
  font-size: 20px;
}

.concept-card p {
  margin-top: 9px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-muted);
}

.day-block {
  margin-top: 32px;
  background: var(--ground);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card-sm);
  padding: 24px 22px;
}

.day-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-head h3 {
  font-size: 21px;
}

.day-hint {
  font-size: 13px;
  font-weight: 600;
  color: var(--clay);
}

.day-rows {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.day-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1.5px dashed var(--dashed);
  border-radius: 11px;
  padding: 11px 14px;
}

.day-time {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-placeholder);
}

.day-what {
  font-size: 14.5px;
  color: var(--ink-placeholder);
}

/* ---- Rooms --------------------------------------------------------------- */

.rooms h2 {
  margin-top: 12px;
  font-size: var(--h2-m);
  line-height: 1.16;
  letter-spacing: -0.6px;
}

.rooms > .wrap > p {
  margin-top: 16px;
  font-size: var(--body-m);
  line-height: 1.7;
  color: var(--ink-body);
}

.rooms-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rooms-grid figure {
  margin: 0;
}

.rooms-grid img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.rooms-grid figcaption {
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--ink-muted);
}

.rooms-grid figure:first-child {
  grid-column: span 2;
}

.rooms-grid figure:first-child img {
  height: 240px;
  border-radius: var(--r-image-sm);
}

/* ---- Outside --------------------------------------------------------------- */

.outside {
  padding: 48px 0 52px;
}

.outside h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.outside-copy {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-body);
}

.outside-place {
  display: none;
}

.outside-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.outside-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* ---- Daily / everyday --------------------------------------------------- */

.daily-head h2 {
  margin-top: 12px;
  font-size: var(--h2-m);
  line-height: 1.16;
  letter-spacing: -0.6px;
}

.daily-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.daily-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.daily-grid img.grid-span2 {
  grid-column: span 2;
  height: 230px;
  border-radius: 16px;
}

.daily-grid img.tire-swing {
  object-position: 50% 42%;
}

.daily-grid img.larisa-outside {
  object-position: 50% 65%;
}

.daily-consent {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---- Contact --------------------------------------------------------------- */

.contact-box {
  background: var(--clay-soft);
  border-radius: 22px;
  padding: 30px 24px;
}

.contact-box h2 {
  margin-top: 12px;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -0.6px;
}

.contact-info > p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-body);
}

.contact-box .btn-row {
  margin-top: 22px;
}

.contact-card {
  margin-top: 20px;
  background: var(--panel);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-card-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-card-head .biz {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.contact-card-head .name {
  font-size: 15px;
  color: var(--ink-body);
}

.contact-rule {
  height: 1px;
  background: var(--line-card);
}

.contact-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15.5px;
}

.contact-row {
  display: flex;
  gap: 10px;
}

.contact-row-label {
  width: 68px;
  flex-shrink: 0;
  color: var(--ink-muted);
  font-size: 13.5px;
}

.contact-row-value {
  color: var(--ink-body);
  text-decoration: none;
}

.contact-row-value.value-clay {
  color: var(--clay);
  font-weight: 600;
}

a.contact-row-value.value-clay:hover,
a.contact-row-value.value-clay:focus-visible {
  text-decoration: underline;
}

.contact-card-maps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h-m);
  border-radius: var(--r-pill);
  background: var(--ground);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.contact-card-maps:hover {
  background: var(--clay-soft);
  color: var(--ink);
}

.contact-card-maps svg {
  flex-shrink: 0;
}

/* ---- Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 40px 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  width: 36px;
  height: 46px;
  display: block;
  flex-shrink: 0;
}

.footer-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.footer-line {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--footer-muted);
}

.footer-langs {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-lang-chip {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--footer-line);
  background: transparent;
  color: #c6beb2;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.footer-lang-chip[aria-current="true"] {
  background: var(--footer-chip);
  color: #fff;
}

.footer-heading {
  margin-top: 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--footer-muted);
}

.footer-privacy {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--footer-body);
}

.footer-links {
  margin-top: 18px;
  display: flex;
  gap: 22px;
  font-size: 14px;
}

.footer-links a {
  color: var(--footer-text);
}

.footer-bottom {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--footer-line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--footer-muted);
}

/* ---- Legal placeholder pages ------------------------------------------------ */

.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px var(--pad-x-m) 96px;
}

.legal-page h1 {
  font-size: var(--h2-m);
}

.legal-page p {
  margin-top: 18px;
  font-size: var(--body-m);
  line-height: 1.7;
  color: var(--ink-body);
  white-space: pre-line;
}

.legal-page .back-link {
  display: inline-block;
  margin-top: 32px;
  font-weight: 600;
}

/* =============================================================================
   Desktop, from 900px — see design/reference-desktop-de.html
   ============================================================================= */

@media (min-width: 900px) {
  .wrap {
    padding: 0 var(--pad-x);
  }

  section {
    padding: var(--pad-y) 0;
  }

  #top,
  #ueber-mich,
  #konzept,
  #raeume,
  #kontakt {
    scroll-margin-top: var(--header-h);
  }

  .site-header {
    height: var(--header-h);
    padding: 0 var(--pad-x);
  }

  .brand {
    gap: 12px;
  }

  .brand-logo {
    width: 38px;
    height: 48px;
  }

  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .brand-name {
    font-size: 19px;
  }

  .brand-name .brand-short {
    display: none;
  }

  .brand-name .brand-full {
    display: inline;
  }

  .brand-tagline {
    display: block;
    font-size: 11px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .nav-link {
    font-size: 15px;
    text-decoration: none;
    color: var(--ink-body);
  }

  .nav-divider {
    width: 1px;
    height: 26px;
    background: var(--line);
  }

  .lang-pills {
    gap: 4px;
    padding: 4px;
  }

  .lang-pill {
    height: var(--pill-h);
    min-width: 0;
    padding: 0 14px;
    font-size: 13px;
    letter-spacing: 0.4px;
  }

  .nav-cta {
    display: inline-flex;
    height: var(--btn-h-nav);
    align-items: center;
    padding: 0 20px;
    border-radius: var(--r-pill);
    background: var(--clay);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  .nav-cta:hover {
    background: var(--clay-hover);
    color: #fff;
  }

  .header-controls,
  .mobile-menu {
    display: none;
  }

  /* Hero */
  .hero {
    padding: 76px 0 80px;
  }

  .hero .wrap {
    flex-direction: row-reverse;
    align-items: center;
    gap: 72px;
  }

  .hero-content {
    width: 568px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero .badge {
    margin-top: 0;
  }

  .hero-media {
    width: 480px;
    max-width: none;
  }

  .hero-media img {
    height: 568px;
    object-position: center;
    border-radius: 220px 220px 24px 24px;
    position: relative;
    z-index: 1;
  }

  .hero-circle {
    display: block;
    position: absolute;
    border-radius: var(--r-pill);
    z-index: 0;
  }

  .hero-circle.wheat {
    top: -26px;
    right: -18px;
    width: 132px;
    height: 132px;
    background: var(--wheat-soft);
    z-index: -1;
  }

  .hero-circle.sage {
    bottom: -22px;
    left: -26px;
    width: 92px;
    height: 92px;
    background: var(--sage-soft);
    z-index: -1;
  }

  .hero h1 {
    margin-top: 22px;
    font-size: var(--h1);
    line-height: 1.08;
    letter-spacing: -1.2px;
  }

  :lang(ru) .hero h1 {
    font-size: var(--h1-ru);
  }

  .hero .lead {
    margin-top: 24px;
    font-size: var(--body-lg);
    line-height: 1.68;
    max-width: 520px;
  }

  .hero .lead-muted {
    margin-top: 18px;
    font-size: 17px;
    max-width: 520px;
  }

  .btn-row {
    flex-direction: row;
    margin-top: 34px;
  }

  .btn {
    width: auto;
    height: var(--btn-h);
    font-size: 16px;
  }

  .hero .micro {
    margin-top: 20px;
    font-size: 13.5px;
  }

  /* Facts */
  .facts {
    padding: 62px 0 66px;
  }

  .facts-head {
    gap: 16px;
  }

  .facts-title {
    font-size: 28px;
  }

  .facts-rule {
    display: block;
    flex-grow: 1;
    height: 1px;
    background: rgba(243, 241, 233, 0.22);
  }

  .facts-grid {
    margin-top: 38px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 48px;
  }

  .fact-num {
    font-size: var(--stat);
  }

  .fact-label {
    font-size: 15.5px;
  }

  /* About */
  .about .wrap {
    display: flex;
    gap: 72px;
    align-items: flex-start;
  }

  .about-media {
    width: 424px;
    max-width: none;
    flex-shrink: 0;
    margin-top: 0;
  }

  .about-media img {
    height: 540px;
    object-position: center;
    border-radius: var(--r-card);
  }

  .about-card {
    position: absolute;
    left: 26px;
    bottom: -34px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .about-card .name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
  }

  .about-card .role {
    font-size: 13.5px;
    color: var(--ink-muted);
  }

  .about-body {
    flex-grow: 1;
  }

  .about h2 {
    margin-top: 14px;
    font-size: var(--h2);
    line-height: 1.16;
    letter-spacing: -0.8px;
  }

  .about p {
    margin-top: 16px;
    font-size: var(--body);
    line-height: 1.72;
  }

  .about p:first-of-type {
    margin-top: 22px;
  }

  .about h3 {
    margin-top: 36px;
    font-size: var(--h3);
  }

  .quals {
    margin-top: 18px;
  }

  .qual-item {
    font-size: 16.5px;
  }

  /* Concept */
  .concept h2 {
    margin-top: 14px;
    font-size: var(--h2);
    line-height: 1.16;
    letter-spacing: -0.8px;
  }

  .concept > .wrap > p {
    margin-top: 20px;
    max-width: 720px;
    font-size: var(--body);
    line-height: 1.72;
  }

  .concept-cards {
    margin-top: 44px;
    flex-direction: row;
    gap: 24px;
  }

  .concept-card {
    flex: 1;
    border-radius: var(--r-card);
    padding: 32px 30px;
  }

  .concept-icon {
    width: 34px;
    height: 34px;
  }

  .concept-card h3 {
    margin-top: 20px;
    font-size: var(--h3);
  }

  .concept-card p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.66;
  }

  .day-block {
    margin-top: 56px;
    border-radius: var(--r-card);
    padding: 36px 40px;
  }

  .day-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
  }

  .day-head h3 {
    font-size: 24px;
  }

  .day-rows {
    margin-top: 22px;
    gap: 10px;
  }

  .day-row {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    border-radius: 12px;
    padding: 14px 20px;
  }

  .day-time {
    width: 108px;
    flex-shrink: 0;
    font-size: 16px;
  }

  .day-what {
    font-size: 16px;
  }

  /* Rooms */
  .rooms h2 {
    margin-top: 14px;
    font-size: var(--h2);
    line-height: 1.16;
    letter-spacing: -0.8px;
  }

  .rooms > .wrap > p {
    margin-top: 20px;
    max-width: 760px;
    font-size: var(--body);
    line-height: 1.72;
  }

  .rooms-grid {
    margin-top: 44px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .rooms-grid img {
    height: 280px;
    border-radius: var(--r-image);
  }

  .rooms-grid figure:first-child img,
  .rooms-grid figure:nth-child(2) img {
    height: 400px;
  }

  .rooms-grid figure:not(:first-child) figcaption {
    display: block;
  }

  .rooms-grid figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--ink-muted);
  }

  /* Outside */
  .outside {
    padding: 76px 0;
  }

  .outside-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

  .outside-head {
    max-width: 640px;
  }

  .outside h2 {
    font-size: var(--h2-small);
  }

  .outside-copy {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.7;
  }

  .outside-place {
    display: block;
    font-size: 13.5px;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .outside-grid {
    margin-top: 34px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .outside-grid img {
    height: 210px;
    border-radius: 16px;
  }

  /* Daily — desktop moves the consent line up beside the heading; mobile
     keeps it after the photos (see the two reference-*.html files). A grid
     with named areas repositions it without duplicating the markup. */
  .daily-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "head consent" "grid grid";
    align-items: end;
    column-gap: 48px;
  }

  .daily-head {
    grid-area: head;
    max-width: 660px;
  }

  .daily-head h2 {
    margin-top: 14px;
    font-size: var(--h2);
    line-height: 1.16;
    letter-spacing: -0.8px;
  }

  .daily-consent {
    grid-area: consent;
    margin-top: 0;
    max-width: 300px;
    text-align: right;
    line-height: 1.5;
    font-size: 13px;
  }

  .daily-grid {
    grid-area: grid;
    margin-top: 40px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .daily-grid img {
    height: 300px;
    border-radius: var(--r-image);
  }

  .daily-grid img.grid-span2 {
    height: 300px;
    border-radius: var(--r-image);
  }

  .daily-grid img.wide-desktop {
    grid-column: span 2;
    height: 240px;
  }

  .daily-grid img.tire-swing {
    object-position: 50% 22%;
  }

  .daily-grid img.larisa-outside {
    object-position: 50% 55%;
  }

  /* Contact */
  .contact-box {
    border-radius: var(--r-contact);
    padding: 56px 60px;
    display: flex;
    gap: 64px;
    align-items: flex-start;
  }

  .contact-info {
    flex-grow: 1;
    min-width: 0;
  }

  .contact-box h2 {
    margin-top: 14px;
    font-size: 40px;
    line-height: 1.16;
    letter-spacing: -0.8px;
  }

  .contact-box > .contact-info > p {
    margin-top: 18px;
    max-width: 480px;
    font-size: var(--body);
    line-height: 1.7;
  }

  .contact-box .btn-row {
    margin-top: 30px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-card {
    margin-top: 0;
    width: 420px;
    flex-shrink: 0;
    border-radius: var(--r-card);
    padding: 34px 36px;
    gap: 20px;
  }

  .contact-card-head .biz {
    font-size: 19px;
  }

  .contact-card-head .name {
    font-size: 15.5px;
  }

  .contact-card-maps {
    height: var(--btn-h);
  }

  .contact-rows {
    gap: 12px;
    font-size: 16px;
  }

  .contact-row-label {
    width: 74px;
    font-size: 14px;
  }

  /* Footer */
  .site-footer {
    padding: 52px 0;
  }

  .footer-grid {
    display: flex;
    gap: 72px;
    align-items: flex-start;
  }

  .footer-brand-col {
    width: 360px;
    flex-shrink: 0;
  }

  .footer-logo {
    width: 41px;
    height: 52px;
  }

  .footer-name {
    font-size: 18px;
  }

  .footer-line {
    margin-top: 16px;
    font-size: 14px;
  }

  .footer-langs {
    margin-top: 18px;
  }

  .footer-lang-chip {
    height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .footer-col {
    flex-grow: 1;
  }

  .footer-heading {
    margin-top: 0;
    font-size: 13px;
  }

  .footer-privacy {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.75;
    max-width: 620px;
  }

  .footer-links {
    margin-top: 22px;
  }

  .footer-bottom {
    margin-top: 40px;
    padding-top: 22px;
    font-size: 13px;
  }

  .legal-page {
    padding: 96px var(--pad-x) 140px;
  }

  .legal-page h1 {
    font-size: var(--h2);
  }

  .legal-page p {
    font-size: var(--body);
    line-height: 1.72;
  }
}