/* fonts.css */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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;
}

/* styles.css */
/*
 * PUZZLE GYM — Visuelles System
 * Inhalte, Dokumentstruktur, Links und JavaScript bleiben unverändert.
 * 01 Tokens · 02 Basis · 03 Navigation · 04 Komponenten · 05 Seiten · 06 Responsivität
 */
:root {
  color-scheme: light;
  --ink: #212521;
  --muted: #626960;
  --gold: #b59b68;
  --gold-dark: #756039;
  --gold-light: #e5d7b8;
  --paper: #fbfaf7;
  --white: #fff;
  --sand: #f0eee7;
  --sage: #e9eee5;
  --line: #e0e2d9;
  --line-strong: #bfc5b8;
  --font-body: Manrope, Arial, sans-serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  --text-xs: 1rem;
  --text-sm: 1rem;
  --text-body: 1.125rem;
  --text-lead: clamp(1rem, 1.35vw, 1.125rem);
  --title-xl: clamp(3.5rem, 6.8vw, 6.75rem);
  --title-lg: clamp(2.625rem, 4.5vw, 4.5rem);
  --title-md: clamp(1.5rem, 2.2vw, 2rem);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --section-space: clamp(64px, 8vw, 120px);
  --gutter: clamp(22px, 4.5vw, 72px);
  --container: 1440px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --shadow: 0 12px 36px #20271a08, 0 2px 6px #20271a04;
  --shadow-hover: 0 24px 56px #20271a12, 0 4px 12px #20271a06;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 180ms;
  --duration: 360ms;
  --duration-reveal: 700ms;
}

/* Basis und zugängliche Interaktion */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; }
button, a { touch-action: manipulation; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
p { margin: 0 0 1.25em; color: var(--muted); }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
h1 { font-size: var(--title-xl); }
h2 { font-size: var(--title-lg); }
h3 { font-size: var(--title-md); line-height: 1.2; letter-spacing: -.025em; }
em { font-family: var(--font-editorial); font-weight: 500; color: var(--gold-dark); letter-spacing: -.03em; }
main section > * { min-width: 0; }
::selection { background: var(--gold-light); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 24px; padding: 14px 22px; background: white; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-3); color: var(--gold-dark); font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; }
.gold-line { width: 32px; height: 2px; background: var(--gold); border-radius: 2px; flex-shrink: 0; }
.section { max-width: var(--container); padding: var(--section-space) var(--gutter); margin: auto; }

/* Navigation: kompakte, schwebende Markenleiste */
.site-header { position: sticky; top: 16px; z-index: 50; display: flex; align-items: center; gap: 28px; width: calc(100% - 48px); max-width: 1392px; min-height: 84px; margin: 16px auto 0; padding: 14px 24px; background: #fffefbeF; border: 1px solid #e2e2d8; border-radius: var(--radius-pill); box-shadow: 0 6px 26px #20271a04; backdrop-filter: blur(22px); transition: box-shadow var(--duration), background var(--duration); }
.site-header.is-scrolled { background: #fffffff5; box-shadow: 0 10px 40px #20271a10; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-crop { position: relative; display: block; overflow: hidden; width: 162px; aspect-ratio: 4 / 1; mix-blend-mode: multiply; }
.logo-crop img { position: absolute; max-width: none; width: 122.4%; height: auto; left: -11.2%; top: 50%; transform: translateY(-50%); }
.main-nav { display: flex; gap: 26px; align-items: center; margin-left: auto; font-size: var(--text-sm); font-weight: 600; }
.main-nav a { position: relative; padding: 12px 0; white-space: nowrap; transition: color var(--duration-fast); }
.main-nav a::after { position: absolute; content: ''; left: 0; bottom: 5px; width: 100%; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--duration) var(--ease); }
.main-nav a:last-child { color: var(--gold-dark); }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--gold-dark); }
.main-nav a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }
.header-cta { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 12px 20px; border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: white; white-space: nowrap; font-size: var(--text-sm); font-weight: 600; transition: background var(--duration), box-shadow var(--duration); }
.header-cta:hover { background: #404b3c; box-shadow: 0 5px 15px #20271a14; }
.nav-toggle { display: none; }

/* Buttons, Links, Karten und visuelle Überschriften */
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 16px 24px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--text-sm); line-height: 1.5; font-weight: 700; transition: transform var(--duration) var(--ease), background var(--duration), border-color var(--duration), box-shadow var(--duration); }
.button > span { font-size: 20px; line-height: 1; font-weight: 400; transition: transform var(--duration) var(--ease); }
.button-primary { background: linear-gradient(115deg, #dfcdaa, #c5ad80); color: #28271f; border-color: #c7b28a; box-shadow: 0 3px 7px #a58d5710; }
.button-outline, .button-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.text-link { display: inline-flex; align-items: center; gap: 18px; min-height: 48px; padding: 9px 0; border-bottom: 1px solid var(--line-strong); font-size: var(--text-sm); font-weight: 600; transition: color var(--duration), border-color var(--duration); }
.text-link > span { transition: transform var(--duration) var(--ease); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.section-heading > p { max-width: 360px; margin: 0 0 4px; font-size: var(--text-body); }
.center-heading { text-align: center; margin-bottom: var(--space-5); }
.center-heading .eyebrow { justify-content: center; }
.center-heading > p:last-child { margin: var(--space-3) 0 0; font-size: var(--text-lead); }

/* Startseite / Hero */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5%; align-items: center; max-width: var(--container); min-height: 750px; margin: auto; padding: 58px var(--gutter) 74px; }
.hero-copy { padding: var(--space-3) 0; }
.hero .eyebrow { margin-bottom: var(--space-4); }
.hero h1 { line-height: 1.02; margin-bottom: var(--space-4); }
.hero h1 em { display: inline-block; font-size: 1.1em; }
.hero-description { font-size: var(--text-lead); line-height: 1.85; margin-bottom: var(--space-4); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.hero-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.hero-note p { margin: 0; font-size: var(--text-xs); line-height: 1.8; }
.hero-note strong { display: block; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.hero-note span:not(.mini-mark) { font-size: var(--text-xs); }
.mini-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #dcd4c2; border-radius: 50%; color: var(--gold-dark); background: #f5f1e7; font-size: 23px; flex-shrink: 0; }
.hero-visual { position: relative; padding: 0 16px 22px 0; }
.hero-visual::before { content: ''; position: absolute; inset: 18px 0 0 20px; border-radius: var(--radius-lg); border: 1px solid #d3c5a8; background: #eee7d7; }
.hero-photo { height: 595px; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #dadbd3; box-shadow: var(--shadow); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; animation: photo-arrive 1.4s var(--ease) both; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #182018a8); pointer-events: none; }
.hero-photo-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: absolute; bottom: 25px; left: 28px; right: 28px; z-index: 1; color: white; font-size: var(--text-sm); }
.hero-photo-caption > span:last-child { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff70; border-radius: 50%; font-size: 22px; }
.hero-seal { position: absolute; left: -30px; top: 35px; width: 154px; padding: 19px 22px; border: 1px solid #ffffffd9; border-radius: var(--radius-md); background: #fffdf5ed; box-shadow: 0 16px 36px #17211518; backdrop-filter: blur(15px); text-align: center; transform: rotate(-5deg); }
.hero-seal span { display: block; font-size: 1rem; font-weight: 700; letter-spacing: .15em; }
.hero-seal strong { display: block; font-family: var(--font-editorial); font-size: 38px; line-height: 1.2; font-style: italic; font-weight: 500; color: var(--gold-dark); margin: 4px 0; }
.vertical-note { position: absolute; right: 21px; top: 28px; writing-mode: vertical-rl; color: #fff; text-shadow: 0 1px 5px #0009; font-size: 1rem; letter-spacing: .22em; z-index: 1; }
.brand-strip { display: flex; align-items: center; justify-content: space-around; gap: 22px; width: calc(100% - 2 * var(--gutter)); max-width: 1296px; padding: 26px 24px; margin: 0 auto; border: 1px solid var(--line); background: white; border-radius: var(--radius-pill); }
.brand-strip span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.brand-strip i { font-size: 1rem; font-style: normal; color: var(--gold); }

/* Intro / Areas */
.intro { display: grid; grid-template-columns: .55fr 1fr; gap: 24px 8%; align-items: start; padding-top: var(--section-space); padding-bottom: var(--section-space); }
.intro .eyebrow { grid-column: 1; padding-top: 10px; max-width: 200px; }
.intro h2 { grid-column: 2; font-size: clamp(2.5rem, 4.15vw, 4rem); }
.intro > p:last-child { grid-column: 2; margin: 0; max-width: 650px; font-size: var(--text-lead); line-height: 1.85; }
.areas { padding-top: 0; }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.area-card { min-width: 0; padding: 12px; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: box-shadow var(--duration), border-color var(--duration); }
.area-image { position: relative; overflow: hidden; aspect-ratio: .92; border-radius: 22px; background: var(--sand); }
.area-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform 800ms var(--ease), filter 600ms; }
.area-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0002, transparent 40%, #10171070); pointer-events: none; }
.area-number { position: absolute; z-index: 1; top: 18px; left: 18px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff85; border-radius: 50%; background: #18201826; color: white; font-size: var(--text-xs); backdrop-filter: blur(12px); }
.area-tag { position: absolute; z-index: 1; bottom: 16px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); padding: 7px 12px; border-radius: var(--radius-pill); background: #ffffffee; color: var(--ink); font-size: 1rem; font-weight: 600; }
.area-copy { padding: 24px 16px 20px; }
.area-copy h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.area-copy p { font-size: var(--text-sm); line-height: 1.85; margin: 10px 0 0; }
.area-copy .area-lead { color: var(--ink); font-weight: 600; margin-top: 16px; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.more-areas { margin-top: var(--space-4); padding: 0 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
.more-areas summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: var(--text-sm); font-weight: 600; }
.more-areas summary span { color: var(--gold-dark); font-size: 25px; transition: transform var(--duration); }
.more-areas[open] summary span { transform: rotate(45deg); }
.more-areas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 8px 0 28px; }
.more-areas-grid article { border-top: 1px solid var(--line); padding-top: 20px; }
.more-areas-grid article > span { font-size: var(--text-xs); color: var(--gold-dark); }
.more-areas-grid h3 { font-size: 22px; margin: 12px 0; }
.more-areas-grid p { font-size: var(--text-sm); margin-bottom: 0; }

/* Daily Bar und Kurswelten */
.daily-section { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8%; align-items: center; max-width: 1392px; width: calc(100% - 48px); padding: 56px; border: 1px solid #e3dfd3; border-radius: 40px; background: #f0eee7; overflow: hidden; }
.daily-photo { position: relative; border-radius: 26px; overflow: hidden; }
.daily-photo img { width: 100%; aspect-ratio: .94; object-fit: cover; transition: transform 1000ms var(--ease); }
.photo-label { position: absolute; left: 18px; bottom: 18px; padding: 6px 10px; border-radius: var(--radius-pill); color: white; background: #24261fab; backdrop-filter: blur(12px); font-size: 1rem; }
.daily-copy h2 { margin-bottom: var(--space-4); }
.daily-copy > p:not(.eyebrow) { max-width: 420px; font-size: var(--text-body); line-height: 1.85; }
.editorial-note { display: flex; gap: 24px; margin-top: var(--space-4); border-top: 1px solid #d7d2c5; padding-top: 24px; font-size: var(--text-sm); }
.editorial-note > span { color: var(--gold-dark); }
.editorial-note p { margin: 0; }
.editorial-note strong { color: var(--ink); font-weight: 600; }
.course-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.course-tile { position: relative; display: block; overflow: hidden; padding: 40px; min-height: 330px; border: 1px solid #d7dece; border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform var(--duration) var(--ease), box-shadow var(--duration); }
.balance-tile { background: linear-gradient(120deg, #eef2e8, #dde6d7); }
.flow-tile { background: linear-gradient(120deg, #f5efdf, #e9ddc5); border-color: #dfd1b3; }
.course-tile::before, .course-tile::after { content: ''; position: absolute; right: -65px; top: -95px; width: 310px; height: 310px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; transition: transform 900ms var(--ease); }
.course-tile::after { right: -22px; top: -60px; width: 270px; height: 270px; }
.course-tile .eyebrow, .course-tile h3, .course-tile p { position: relative; z-index: 1; }
.course-tile .eyebrow { font-size: var(--text-xs); }
.course-tile h3 { font-family: var(--font-editorial); font-style: italic; font-size: clamp(4rem, 5.7vw, 5.5rem); margin: 34px 0 12px; }
.course-tile p { max-width: calc(100% - 42px); font-size: var(--text-sm); margin: 0; }
.round-arrow { position: absolute; right: 30px; bottom: 32px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #a9ae9a; border-radius: 50%; background: #ffffff59; font-size: 22px; transition: background var(--duration), transform var(--duration); }
.course-included { text-align: center; font-size: var(--text-sm); margin: 24px 0 0; }
.course-included a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 4px; }

/* Tarife */
.pricing-section { position: relative; max-width: 1392px; width: calc(100% - 48px); padding: 80px 56px; background: #f1f0e9; border: 1px solid var(--line); border-radius: 40px; }
.price-grid { max-width: 1020px; margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-width: 0; padding: 36px; background: white; border: 1px solid #dbdfd4; border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform var(--duration) var(--ease), box-shadow var(--duration); }
.price-card.is-featured { border-color: #bda77b; background: linear-gradient(150deg, #fbf7eb, #fff 65%); box-shadow: 0 14px 44px #99815414; }
.price-card.is-featured::before { content: ''; position: absolute; left: 30px; right: 30px; top: 0; height: 4px; background: var(--gold); border-radius: 0 0 6px 6px; }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.price-top .eyebrow { margin: 0; font-size: 1rem; }
.plan-index { color: var(--gold-dark); font-size: var(--text-xs); }
.price-card h3 { font-size: 34px; }
.price-card > p { font-size: var(--text-sm); margin: 12px 0 0; }
.price { display: flex; align-items: center; gap: 12px; margin: 28px 0 24px; }
.price > strong { font-size: 88px; font-weight: 500; line-height: 1; letter-spacing: -.07em; font-variant-numeric: lining-nums tabular-nums; }
.price > span { font-size: 26px; line-height: 1.35; }
.price small { display: block; font-size: var(--text-xs); color: var(--muted); }
.reduced-price { display: grid; gap: 3px; border: 1px solid var(--line); background: #f6f7f2; padding: 14px 16px; border-radius: var(--radius-sm); }
.is-featured .reduced-price { border-color: #e0d5bf; background: #f0e9d9; }
.reduced-price strong { font-size: var(--text-body); font-weight: 700; }
.reduced-price span { font-size: var(--text-xs); color: var(--muted); }
.price-card .signup-fee { font-size: 1rem; margin: 16px 0 4px; }
.signup-fee strong { color: var(--ink); font-weight: 600; }
.feature-list { list-style: none; padding: 20px 0 4px; margin: 16px 0 28px; border-top: 1px solid var(--line); flex: 1; }
.feature-list li { display: flex; align-items: baseline; gap: 12px; font-size: var(--text-sm); margin: 12px 0; }
.feature-list li::before { content: '✓'; color: var(--gold-dark); font-size: 1rem; flex-shrink: 0; }
.price-card .button { width: 100%; font-size: var(--text-sm); padding: 16px 20px; }
.pricing-note { max-width: 780px; margin: 28px auto 0; text-align: center; font-size: var(--text-xs); line-height: 1.85; }

/* FAQ und Formulare */
.faq-section { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 8%; }
.faq-section > div > p:last-child { margin-top: 24px; font-size: var(--text-body); }
.accordion { display: grid; gap: 12px; }
.accordion details { border: 1px solid var(--line); border-radius: var(--radius-md); background: white; transition: background var(--duration), border-color var(--duration); }
.accordion details[open] { background: #f5f3eb; border-color: #cfc4a8; }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 23px 24px; font-size: var(--text-sm); font-weight: 600; }
.accordion summary span { font-size: 24px; line-height: 1; color: var(--gold-dark); font-weight: 400; transition: transform var(--duration); }
.accordion details[open] summary span { transform: rotate(45deg); }
.accordion p { padding: 0 24px 24px; margin: 0; font-size: var(--text-sm); line-height: 1.85; }
.contact-section { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; max-width: 1392px; width: calc(100% - 48px); padding: 72px 64px; border: 1px solid #ddd5c4; border-radius: 40px; background: radial-gradient(ellipse at 5% 20%, #fffaf0, transparent 60%), #ece6d8; overflow: hidden; }
.contact-section h2 { font-size: clamp(4.5rem, 7vw, 7rem); margin-bottom: var(--space-4); }
.contact-section > div > p { font-size: var(--text-lead); line-height: 1.85; }
.contact-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 0; margin-top: 8px; border-bottom: 1px solid #a59a82; font-size: var(--text-body); }
.contact-wordmark { margin-top: 48px; }
.contact-wordmark .logo-crop { width: 200px; }
.contact-form { padding: 36px; background: #fffefb; border: 1px solid #e7e0d2; border-radius: var(--radius-lg); box-shadow: 0 16px 50px #70634b0b; }
.contact-form h3 { font-size: 30px; }
.contact-form > p { font-size: var(--text-sm); margin: 12px 0 26px; }
.contact-form label, .auth-form label { display: grid; gap: 8px; margin-bottom: 20px; color: var(--ink); font-size: 1rem; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea, .auth-form input { width: 100%; min-width: 0; min-height: 52px; padding: 13px 14px; background: #fafbf7; color: var(--ink); border: 1px solid #cdd2c4; border-radius: var(--radius-sm); font-size: 16px; line-height: 1.5; font-weight: 400; transition: background var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast); }
.contact-form input::placeholder, .auth-form input::placeholder { color: #767d70; opacity: 1; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus, .auth-form input:focus { outline: 0; border-color: var(--gold-dark); background: white; box-shadow: 0 0 0 3px #b59b6826; }
.contact-form textarea { resize: vertical; line-height: 1.7; }
.contact-form .button { width: 100%; margin-top: 4px; }
.contact-form .form-note { font-size: var(--text-xs); line-height: 1.8; margin: 16px 0 0; }
.request-preview { margin-top: 24px; }

/* Footer */
.site-footer { max-width: var(--container); padding: 64px var(--gutter) 32px; margin: auto; }
.footer-top { display: flex; align-items: center; gap: 40px; padding-bottom: 36px; }
.footer-top > p { font-size: var(--text-sm); margin: 0; }
.back-top { display: grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 50%; background: white; font-size: 22px; transition: background var(--duration), border-color var(--duration); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 28px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
.footer-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.footer-bottom a { padding: 6px 0; transition: color var(--duration-fast); }
.footer-bottom a:hover { color: var(--gold-dark); }

/* Kursseite — gleicher Rhythmus und gleiche Komponenten */
.courses-hero, .course-worlds, .course-catalog, .schedule-section, .course-cta, .auth-page, .member-hero, .booking-section, .my-bookings { max-width: var(--container); padding: var(--section-space) var(--gutter); margin: auto; }
.courses-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7%; align-items: center; padding-top: 64px; }
.courses-hero h1 { font-size: clamp(3rem, 5.5vw, 5.5rem); margin-bottom: var(--space-4); }
.courses-hero-copy > p:not(.eyebrow) { font-size: var(--text-lead); max-width: 560px; }
.courses-hero-media { min-height: 590px; border-radius: var(--radius-lg); background: url('assets/course-room-balance-1086w.webp') center / cover; box-shadow: var(--shadow); }
.course-worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 0; padding-bottom: 0; }
.course-world { min-width: 0; padding: 40px; background: var(--sage); border: 1px solid #d6decc; border-radius: var(--radius-lg); }
.flow-world { background: #f0e8d8; border-color: #ded0b3; }
.course-world > span, .catalog-grid article > span { color: var(--gold-dark); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.course-world h2 { font-size: clamp(1.75rem, 2.9vw, 2.5rem); line-height: 1.2; margin: 24px 0; overflow-wrap: anywhere; hyphens: auto; }
.course-world p { font-size: var(--text-body); }
.course-chip-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.course-chip-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 14px; background: #ffffff70; border: 1px solid #c6c9b8; border-radius: var(--radius-pill); font-size: var(--text-xs); transition: background var(--duration); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.catalog-grid article { padding: 32px; background: white; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); transition: box-shadow var(--duration), border-color var(--duration); }
.catalog-grid h3 { margin: 20px 0; font-size: 27px; }
.course-time { display: block; color: var(--gold-dark); font-size: 1rem; line-height: 1.7; margin-bottom: 16px; }
.catalog-grid p { font-size: var(--text-sm); margin: 0; }
.schedule-section { background: #f0f2eb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar-scroll { overflow: auto; border: 1px solid #d4dacb; border-radius: var(--radius-md); box-shadow: var(--shadow); scrollbar-color: #b6bdab #f2f3ed; }
.calendar-table { display: grid; grid-template-columns: 82px repeat(5, minmax(140px, 1fr)); min-width: 810px; gap: 1px; background: #d9dfd1; }
.calendar-cell, .calendar-course { padding: 22px 16px; background: white; font-size: 1rem; }
.calendar-day, .calendar-time { font-weight: 700; }
.calendar-course { transition: background var(--duration), box-shadow var(--duration); }
.calendar-course span { display: block; color: var(--gold-dark); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.calendar-course strong { font-size: 1rem; line-height: 1.6; }
.calendar-course.balance { background: #e9eee3; }
.calendar-course.flow { background: #f2ead9; }
.course-cta { text-align: center; }
.course-cta .eyebrow { justify-content: center; }
.course-cta h2 { margin-bottom: var(--space-4); }
.course-cta > p:not(.eyebrow) { max-width: 750px; margin: 0 auto 32px; font-size: var(--text-lead); }

/* Login und Mitgliederbereich */
.auth-page { min-height: 78vh; display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; align-items: center; background: linear-gradient(90deg, #fbfaf7fc, #fbfaf7cb), url('assets/daily-bar-reference-760w.webp') center / cover; }
.auth-copy h1, .member-hero h1 { font-size: clamp(3rem, 5vw, 5rem); margin-bottom: var(--space-4); }
.auth-copy > p:not(.eyebrow), .member-hero p { font-size: var(--text-lead); }
.auth-panel, .member-status { padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #ffffffed; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.auth-tabs { display: flex; gap: 6px; padding: 6px; margin-bottom: 28px; background: #f1f3ed; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.auth-tabs button { width: 50%; min-height: 44px; padding: 10px; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; font-size: var(--text-sm); }
.auth-tabs button.is-active { background: white; color: var(--gold-dark); border-color: #e0dbce; box-shadow: 0 2px 6px #20271a08; }
.auth-form { display: none; }
.auth-form.is-active { display: grid; }
.auth-form .button { width: 100%; justify-content: center; }
.form-note, .empty-state { font-size: var(--text-xs); line-height: 1.8; margin: 20px 0 0; }
.member-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7%; align-items: center; }
.member-status { border-color: #d9c9a9; background: linear-gradient(130deg, #fffdf6, white); }
.member-status > span, .booking-grid span, .booking-list span { font-size: 1rem; line-height: 1.8; color: var(--gold-dark); letter-spacing: .1em; text-transform: uppercase; }
.member-status strong { display: block; font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; margin: 20px 0; }
.member-status p { font-size: var(--text-sm); margin: 0; }
.booking-section { background: #f0f2eb; }
.booking-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.booking-grid article { min-width: 0; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow); }
.booking-grid article.is-booked { border-color: var(--gold); background: #f7f0e0; }
.booking-grid h3 { font-size: 24px; margin: 20px 0; }
.booking-grid p { font-size: var(--text-sm); }
.booking-grid small { font-size: var(--text-xs); margin-top: auto; }
.booking-grid button, .booking-list button { min-height: 46px; padding: 12px; margin-top: 18px; border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: white; font-size: var(--text-sm); font-weight: 600; transition: background var(--duration), transform var(--duration); }
.booking-grid button:disabled { background: #dde1d5; border-color: #dde1d5; color: #626960; cursor: default; }
.booking-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.booking-list article { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
.booking-list strong { display: block; font-size: 24px; font-weight: 500; margin: 16px 0; }
.booking-list p { font-size: var(--text-sm); }
.booking-list button { width: 100%; }

/* Bewegung: kurze, ruhige Übergänge; Hover nur für Zeigegeräte */
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #68553718; }
  .button-primary:hover { background: linear-gradient(115deg, #e7d8bb, #d1bb93); }
  .button-outline:hover, .button-ghost:hover { background: #f0f2eb; border-color: var(--gold); }
  .button:hover > span { transform: translate(3px, -3px); }
  .text-link:hover { color: var(--gold-dark); border-color: var(--gold); }
  .text-link:hover > span { transform: translate(3px, -2px); }
  .area-card:hover { box-shadow: var(--shadow-hover); border-color: #c5cdbd; }
  .area-card:hover img { transform: scale(1.045); filter: saturate(1); }
  .daily-photo:hover img { transform: scale(1.025); }
  .course-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
  .course-tile:hover::before { transform: translate(-14px, 18px); }
  .course-tile:hover::after { transform: translate(14px, -12px); }
  .course-tile:hover .round-arrow { transform: rotate(6deg); background: #ffffffbd; }
  .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
  .catalog-grid article:hover { border-color: #c2c9b9; box-shadow: var(--shadow-hover); }
  .course-chip-list a:hover { background: white; }
  .calendar-course:hover { background: #fffdf6; box-shadow: inset 0 0 0 2px var(--gold); }
  .back-top:hover { background: var(--gold-light); border-color: var(--gold); }
  .booking-grid button:not(:disabled):hover, .booking-list button:hover { background: #424d3d; }
}
[data-reveal].will-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-reveal) var(--ease), transform var(--duration-reveal) var(--ease); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal='left'].will-reveal { transform: translateX(-28px); }
[data-reveal='right'].will-reveal { transform: translateX(28px); }
[data-reveal].will-reveal.is-visible { opacity: 1; transform: none; }
.hero-copy > * { animation: copy-arrive 800ms var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 70ms; }
.hero-copy > :nth-child(3) { animation-delay: 140ms; }
.hero-copy > :nth-child(4) { animation-delay: 210ms; }
.hero-copy > :nth-child(5) { animation-delay: 280ms; }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes photo-arrive { from { transform: scale(1.04); } to { transform: scale(1); } }

/* Tablet */
@media (max-width: 1150px) {
  .site-header { gap: 20px; padding: 12px 20px; }
  .main-nav { gap: 18px; font-size: 1rem; }
  .logo-crop { width: 146px; }
  .header-cta { font-size: 1rem; padding: 12px 17px; gap: 12px; }
  .hero { min-height: 680px; padding-top: 42px; gap: 5%; }
  .hero-photo { height: 550px; }
  .hero-seal { width: 132px; left: -20px; padding: 15px; }
  .hero-seal strong { font-size: 34px; }
  .hero .eyebrow { font-size: 1rem; letter-spacing: .12em; }
  .hero-actions { gap: 12px 20px; }
  .hero-actions .button { gap: 16px; padding: 16px 20px; }
  .hero-note { align-items: start; }
  .area-grid { gap: 18px; }
  .area-copy { padding: 22px 10px 16px; }
  .daily-section, .pricing-section { padding: 48px 36px; }
  .contact-section { padding: 56px 40px; gap: 6%; }
  .contact-form { padding: 28px; }
  .price-card { padding: 30px; }
  .price-card .button { font-size: 1rem; }
  .booking-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .courses-hero-media { min-height: 530px; }
}
@media (max-width: 950px) {
  .site-header { top: 12px; width: calc(100% - 32px); min-height: 76px; margin-top: 12px; }
  .main-nav { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0; padding: 18px 24px; max-height: calc(100svh - 120px); overflow: auto; border: 1px solid var(--line); border-radius: 24px; background: #fffffff9; backdrop-filter: blur(20px); box-shadow: var(--shadow-hover); }
  .nav-open .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a { font-size: 16px; padding: 13px 4px; }
  .nav-toggle { order: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 50%; background: white; }
  .nav-toggle span { width: 21px; height: 1px; background: var(--ink); transition: transform var(--duration); }
  .nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .header-cta { margin-left: auto; }
  .hero h1 { font-size: clamp(3.5rem, 7.1vw, 4.4rem); }
  .hero-photo { height: 555px; }
  .hero-note span:not(.mini-mark) { font-size: 1rem; }
  .brand-strip { gap: 14px; padding: 22px; }
  .brand-strip span { font-size: 1rem; letter-spacing: .07em; }
  .intro { grid-template-columns: .4fr 1fr; gap: 24px 6%; }
  .intro .eyebrow { font-size: 1rem; }
  .section-heading { gap: 32px; }
  .section-heading > p { max-width: 300px; font-size: var(--text-sm); }
  .area-copy h3 { font-size: 22px; }
  .area-copy p { font-size: 1rem; }
  .area-tag { font-size: 1rem; left: 10px; right: 10px; max-width: calc(100% - 20px); padding: 6px 10px; }
  .daily-section { gap: 6%; }
  .daily-copy h2 { font-size: 45px; }
  .daily-copy > p:not(.eyebrow) { font-size: var(--text-sm); }
  .course-tile { padding: 30px; }
  .course-tile .eyebrow { font-size: 1rem; }
  .round-arrow { right: 24px; bottom: 26px; }
  .price-card { padding: 28px; }
  .price-card h3 { font-size: 31px; }
  .price-grid { gap: 20px; }
  .faq-section { gap: 6%; }
  .faq-section h2 { font-size: 43px; }
  .contact-section { gap: 5%; padding: 48px 32px; }
  .contact-section h2 { font-size: 70px; }
  .contact-form { padding: 25px; }
  .contact-form h3 { font-size: 27px; }
  .contact-form .button { font-size: 1rem; padding: 16px 18px; gap: 14px; }
  .courses-hero { gap: 5%; }
  .courses-hero h1 { font-size: 52px; }
  .courses-hero-media { min-height: 500px; }
  .course-world { padding: 30px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-page { gap: 6%; }
  .auth-panel { padding: 28px; }
  .auth-copy h1, .member-hero h1 { font-size: 50px; }
  .member-hero { gap: 5%; }
  .member-status { padding: 28px; }
  .booking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Smartphone */
@media (max-width: 700px) {
  :root { --gutter: 22px; --section-space: 64px; --radius-lg: 26px; --title-lg: clamp(2.375rem, 9vw, 3.25rem); }
  html { scroll-padding-top: 116px; }
  .site-header { width: calc(100% - 24px); top: 10px; min-height: 70px; padding: 10px 14px; gap: 10px; margin-top: 10px; }
  .site-header .logo-crop { width: 132px; }
  .header-cta { min-height: 44px; padding: 11px 14px; font-size: 1rem; gap: 10px; }
  .nav-toggle { width: 44px; height: 44px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 40px; min-height: 0; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { font-size: 1rem; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(3.6rem, 12.8vw, 5.5rem); margin-bottom: 24px; }
  .hero-description { font-size: 16px; line-height: 1.8; margin-bottom: 28px; }
  .hero-actions { gap: 12px 20px; }
  .hero-actions .button { padding: 16px 22px; font-size: 1rem; }
  .hero-actions .text-link { font-size: 1rem; }
  .hero-note { margin-top: 28px; gap: 12px; }
  .hero-note strong { font-size: 1rem; }
  .hero-note span:not(.mini-mark) { font-size: 1rem; }
  .hero-visual { margin-top: 5px; padding: 0 10px 12px 0; }
  .hero-visual::before { inset: 12px 0 0 12px; border-radius: 26px; }
  .hero-photo { height: 435px; border-radius: 26px; }
  .hero-seal { top: 22px; left: 18px; width: 123px; padding: 14px; border-radius: 16px; transform: rotate(-4deg); }
  .hero-seal strong { font-size: 31px; }
  .hero-seal span { font-size: 1rem; }
  .hero-photo-caption { left: 22px; right: 22px; bottom: 22px; font-size: 1rem; }
  .vertical-note { right: 21px; top: 22px; font-size: 1rem; }
  .brand-strip { width: calc(100% - 44px); flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding: 20px; border-radius: 22px; }
  .brand-strip span { font-size: 1rem; }
  .brand-strip i { font-size: 1rem; }
  .intro { display: block; }
  .intro .eyebrow { max-width: none; padding: 0; font-size: 1rem; margin-bottom: 24px; }
  .intro h2 { font-size: clamp(2.125rem, 8.7vw, 3rem); margin-bottom: 24px; }
  .intro > p:last-child { font-size: 16px; }
  .section-heading { display: block; margin-bottom: 32px; }
  .section-heading > p { max-width: 100%; margin-top: 24px; font-size: 16px; }
  .section-heading > .text-link { margin-top: 22px; }
  .area-grid { grid-template-columns: 1fr; gap: 24px; }
  .area-image { aspect-ratio: 1.12; border-radius: 18px; }
  .area-copy { padding: 24px 14px 20px; }
  .area-copy h3 { font-size: 28px; }
  .area-copy p { font-size: 1rem; }
  .area-tag { font-size: 1rem; padding: 7px 12px; left: 14px; bottom: 14px; }
  .more-areas { padding: 0 22px; }
  .more-areas summary { font-size: 1rem; }
  .more-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .more-areas-grid h3 { font-size: 20px; overflow-wrap: anywhere; }
  .more-areas-grid p { font-size: 1rem; }
  .daily-section, .pricing-section, .contact-section { width: calc(100% - 24px); border-radius: 28px; }
  .daily-section { grid-template-columns: 1fr; padding: 22px; gap: 32px; }
  .daily-photo { border-radius: 19px; }
  .daily-photo img { aspect-ratio: 1.06; }
  .daily-copy { padding: 0 4px 8px; }
  .daily-copy h2 { font-size: 48px; }
  .daily-copy > p:not(.eyebrow) { font-size: 16px; max-width: none; }
  .editorial-note { margin-top: 24px; }
  .photo-label { font-size: 1rem; left: 12px; bottom: 12px; }
  .course-duo { grid-template-columns: 1fr; gap: 20px; }
  .course-tile { min-height: 300px; padding: 30px; }
  .course-tile h3 { font-size: 70px; }
  .course-tile p { font-size: 1rem; }
  .course-included { font-size: 1rem; }
  .pricing-section { padding: 48px 20px; }
  .center-heading { margin-bottom: 32px; }
  .price-grid { grid-template-columns: 1fr; gap: 24px; }
  .price-card { padding: 28px; }
  .price-card h3 { font-size: 34px; }
  .price-card .button { font-size: 1rem; padding: 16px 18px; }
  .price-card .signup-fee { font-size: 1rem; }
  .feature-list li { font-size: 1rem; }
  .pricing-note { font-size: 1rem; }
  .faq-section { grid-template-columns: 1fr; gap: 24px; }
  .faq-section h2 { font-size: 43px; }
  .faq-section > div > p:last-child { margin-top: 20px; }
  .accordion summary { padding: 22px 20px; font-size: 1rem; }
  .accordion p { padding: 0 20px 24px; font-size: 1rem; }
  .contact-section { grid-template-columns: 1fr; gap: 34px; padding: 36px 20px 22px; }
  .contact-section > div { padding: 0 6px; }
  .contact-section h2 { font-size: 68px; }
  .contact-section > div > p { font-size: 16px; }
  .contact-email { font-size: 1rem; }
  .contact-wordmark { margin-top: 28px; }
  .contact-wordmark .logo-crop { width: 160px; }
  .contact-form { padding: 28px 22px; }
  .contact-form h3 { font-size: 28px; }
  .contact-form .button { font-size: 1rem; }
  .site-footer { padding-top: 44px; }
  .footer-top { flex-wrap: wrap; gap: 20px; padding-bottom: 28px; }
  .footer-top > p { order: 3; width: 100%; font-size: 1rem; }
  .footer-bottom { flex-direction: column; align-items: start; gap: 18px; }
  .footer-bottom nav { gap: 4px 18px; font-size: 1rem; }
  .courses-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; }
  .courses-hero h1 { font-size: clamp(3rem, 10.5vw, 4rem); }
  .courses-hero-media { min-height: 0; height: 420px; }
  .course-worlds { grid-template-columns: 1fr; }
  .course-world { padding: 30px; }
  .course-world h2 { font-size: 32px; }
  .course-world p { font-size: 1rem; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-grid article { padding: 30px; }
  .catalog-grid p { font-size: 1rem; }
  .course-cta h2 { font-size: 42px; }
  .auth-page { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; min-height: 0; }
  .auth-copy h1, .member-hero h1 { font-size: clamp(2.75rem, 10.2vw, 4rem); }
  .auth-panel { padding: 26px; }
  .auth-tabs button { font-size: 1rem; }
  .member-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
  .booking-grid, .booking-list { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .site-header { gap: 6px; padding: 9px 10px; }
  .site-header .logo-crop { width: 103px; }
  .header-cta { font-size: 1rem; gap: 6px; padding: 11px 12px; }
  .nav-toggle { width: 42px; height: 44px; }
  .hero h1 { font-size: 54px; }
  .hero .eyebrow { font-size: 1rem; gap: 9px; }
  .gold-line { width: 20px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .text-link { width: fit-content; }
  .hero-photo { height: 390px; }
  .hero-note { gap: 9px; }
  .hero-note strong { font-size: 1rem; }
  .hero-note span:not(.mini-mark) { font-size: 1rem; }
  .more-areas { padding: 0 18px; }
  .more-areas-grid { grid-template-columns: 1fr; }
  .price-card { padding: 24px 20px; }
  .price-card h3 { font-size: 30px; }
  .price-card .button { font-size: 1rem; gap: 10px; }
  .price-top .eyebrow { font-size: 1rem; }
  .contact-form { padding: 24px 18px; }
  .contact-form h3 { font-size: 26px; }
  .contact-form .button { font-size: 1rem; gap: 10px; }
  .auth-panel { padding: 22px; }
}

/* Bewegungspräferenz gilt auch bei nachträglichem Umschalten. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal].will-reveal { opacity: 1; transform: none; }
  .button:hover, .course-tile:hover, .price-card:hover, .area-card:hover img, .daily-photo:hover img { transform: none; }
}
@media print {
  .site-header { position: static; box-shadow: none; }
  [data-reveal].will-reveal { opacity: 1; transform: none; }
  .hero-copy > * { animation: none; }
}

/* Lift bleibt auch nach einer abgeschlossenen Scroll-Einblendung aktiv. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .price-card.will-reveal.is-visible:hover,
  .course-tile.will-reveal.is-visible:hover { transform: translateY(-4px); }
}

/* Studiomotive, Special Shakes und Eröffnungsangebot */
.hero-photo img { object-position: 64% center; }
.hero-regular-price { display: block; }
.offer-inline-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--gold-dark); font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.strength-showcase { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.strength-feature { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow); }
.strength-photo { overflow: hidden; }
.strength-photo img { width: 100%; height: auto; aspect-ratio: 1.55; object-fit: cover; transition: transform 800ms var(--ease); }
.strength-copy { display: grid; grid-template-columns: 1.05fr 1fr; align-items: start; column-gap: 32px; padding: 30px; }
.strength-copy .eyebrow { grid-column: 1 / -1; margin-bottom: 16px; }
.strength-copy h3 { font-size: clamp(28px, 3vw, 42px); }
.strength-copy > p:last-child { font-size: 1rem; margin: 0; }
.locker-feature { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: #171817; }
.locker-feature img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.locker-feature figcaption { position: absolute; bottom: 20px; left: 16px; right: 16px; padding: 10px; border: 1px solid #ffffff38; border-radius: var(--radius-sm); background: #121512c2; backdrop-filter: blur(14px); color: #f6f0e5; font-size: 1rem; text-align: center; }
.special-shakes { grid-column: 1 / -1; min-width: 0; margin-top: 36px; padding-top: 44px; border-top: 1px solid #d7d2c5; }
.special-shakes .section-heading { margin-bottom: 32px; }
.special-shakes .section-heading h3 { font-size: clamp(38px, 4.6vw, 62px); }
.special-shakes .section-heading > p { max-width: 340px; }
.shake-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.shake-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d9d3c7; border-radius: var(--radius-md); background: white; box-shadow: var(--shadow); transition: box-shadow var(--duration), transform var(--duration); }
.shake-card > img { width: 100%; height: auto; }
.shake-card figcaption { padding: 22px; }
.shake-card h4 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }
.shake-card figcaption p { margin: 0; font-size: 1rem; line-height: 1.8; }
.gallery-hint { display: none; }
.opening-offer { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; max-width: 1020px; margin: 0 auto 36px; padding: 36px 40px; border: 1px solid #c7b58e; border-radius: var(--radius-lg); background: radial-gradient(ellipse at 100% 0, #efe1bf, transparent 70%), #fffdf6; }
.opening-offer h3 { font-size: clamp(32px, 3.5vw, 48px); margin-bottom: 20px; }
.opening-offer-copy .eyebrow { font-size: 1rem; margin-bottom: 20px; }
.opening-offer-copy > p:not(.eyebrow) { font-size: 1rem; max-width: 440px; }
.opening-offer-value { text-align: center; padding: 25px 15px; border-left: 1px solid #cdbd9b; }
.opening-offer-value > span { display: block; font-size: 1rem; color: var(--gold-dark); font-weight: 600; }
.opening-offer-value > strong { display: block; margin: 4px 0 12px; font-size: clamp(64px, 7vw, 98px); font-weight: 500; line-height: 1.1; letter-spacing: -.065em; color: var(--ink); }
.opening-offer-value > p { font-size: 1rem; margin: 16px 0 0; line-height: 1.8; }
.plan-opening-offer { display: grid; gap: 6px; margin: 20px 0 0; padding: 18px; border: 1px solid #cfc1a5; border-radius: var(--radius-sm); background: #f3ecd9; }
.plan-opening-offer > strong { font-size: 18px; line-height: 1.4; font-weight: 600; }
.plan-opening-offer > span { font-size: 1rem; }
.plan-opening-offer del { margin-right: 5px; color: var(--muted); text-decoration-thickness: 1px; }
.plan-opening-offer b { font-weight: 600; }
.plan-opening-offer small { font-size: 1rem; color: var(--gold-dark); }
.price small { max-width: 145px; }
.price-card .signup-fee { font-size: 1rem; }
.price-card .button { font-size: 1rem; gap: 12px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .strength-feature:hover .strength-photo img { transform: scale(1.025); }
  .shake-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
}
@media (max-width: 950px) {
  .strength-copy { display: block; padding: 26px; }
  .strength-copy > p:last-child { margin-top: 20px; }
  .strength-showcase { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .shake-gallery { gap: 16px; }
  .shake-card figcaption { padding: 18px; }
  .shake-card h4 { font-size: 17px; }
  .opening-offer { padding: 30px; gap: 25px; }
  .opening-offer-copy .eyebrow { font-size: 1rem; }
}
@media (max-width: 700px) {
  .strength-showcase { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .strength-photo img { aspect-ratio: 1.2; }
  .strength-copy { padding: 26px; }
  .strength-copy h3 { font-size: 36px; }
  .locker-feature { height: 280px; }
  .locker-feature img { object-position: center 25%; }
  .locker-feature figcaption { width: fit-content; margin: auto; padding: 9px 15px; }
  .special-shakes { margin-top: 8px; padding-top: 32px; }
  .special-shakes .section-heading > p { font-size: 1rem; }
  .shake-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; gap: 16px; padding-bottom: 12px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b59b68 #e3dfd3; }
  .shake-card { scroll-snap-align: start; }
  .shake-card h4 { font-size: 20px; }
  .shake-card figcaption { padding: 20px; }
  .gallery-hint { display: flex; justify-content: space-between; gap: 12px; font-size: 1rem; margin: 16px 0 0; }
  .opening-offer { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .opening-offer h3 { font-size: 36px; }
  .opening-offer-value { border-left: 0; border-top: 1px solid #cdbd9b; padding: 24px 0 0; }
  .opening-offer-value > strong { font-size: 80px; }
  .opening-offer-copy > p:not(.eyebrow) { font-size: 1rem; }
  .price-card .button { font-size: 1rem; }
}
@media (max-width: 380px) {
  .opening-offer { padding: 24px 20px; }
  .opening-offer h3 { font-size: 31px; }
  .opening-offer .text-link { font-size: 1rem; gap: 10px; }
  .plan-opening-offer { padding: 14px; }
}

/* Markenauftakt: großzügige Bildbühne, ruhiger Übergang ins helle Design. */
.brand-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 720px; min-height: min(850px, calc(100svh - 132px)); max-width: 1392px; margin: 20px auto 0; width: calc(100% - 48px); padding: clamp(44px, 6vw, 88px); overflow: hidden; border-radius: 32px; background: #171715; color: white; }
.brand-hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.brand-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #080b0bd9 0%, #080b0b95 40%, #080b0b10 100%), linear-gradient(0deg, #080b0bb3, transparent 35%); }
.brand-hero-content { max-width: 900px; padding: 45px 0 70px; }
.brand-hero .eyebrow { color: #e0cfac; margin-bottom: 30px; font-size: 1rem; }
.brand-hero h1 { font-size: clamp(56px, 6.7vw, 96px); line-height: 1.04; font-weight: 600; letter-spacing: -.065em; }
.brand-hero-name { display: block; margin-bottom: 22px; font-size: 1rem; font-weight: 700; letter-spacing: .29em; line-height: 1.5; text-transform: uppercase; }
.hero-gold { color: #e2c899; }
.brand-hero-lead { color: #e8e7e0; margin: 30px 0; font-size: clamp(15px, 1.5vw, 19px); }
.brand-hero-secondary { color: white; border-color: #ffffff70; background: #ffffff08; backdrop-filter: blur(8px); }
.brand-hero-secondary:hover { background: #ffffff1f; border-color: #ffffffb0; }
.brand-hero-bottom { position: absolute; bottom: 30px; left: clamp(44px, 6vw, 88px); right: clamp(44px, 6vw, 88px); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff30; padding-top: 22px; gap: 20px; color: #d1d1c9; font-size: 1rem; text-transform: uppercase; letter-spacing: .13em; }
.brand-hero-bottom a { display: flex; align-items: center; gap: 22px; min-height: 30px; }
.brand-hero-bottom a span { color: #e2c899; font-size: 20px; }
.hero-offer-strip { display: flex; align-items: center; gap: 32px; padding: 26px 36px; max-width: 1296px; width: calc(100% - 2 * var(--gutter)); margin: 28px auto; border: 1px solid #d9c9a9; border-radius: 20px; background: #f0e8d8; }
.hero-offer-label { font-size: 1rem; line-height: 1.6; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #665333; }
.hero-offer-strip strong { font-size: clamp(15px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.02em; }
.hero-offer-arrow { display: grid; place-items: center; margin-left: auto; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #b6a27a; border-radius: 50%; transition: background .3s, transform .3s; }
.hero-offer-strip:hover .hero-offer-arrow { background: #e1cfaa; transform: rotate(45deg); }
.brand-strip { border: 0; background: transparent; padding-top: 12px; padding-bottom: 12px; }
.intro-side .eyebrow { max-width: none; }
.intro-mark { display: block; color: #c6b086; font-size: 110px; line-height: 1; margin-top: 38px; }
.intro-copy h2 { font-size: clamp(52px, 6.2vw, 88px); }
.intro-copy .intro-lead { color: var(--ink); font-size: clamp(20px, 2vw, 26px); line-height: 1.5; font-weight: 500; margin: 28px 0 20px; letter-spacing: -.025em; }
.intro-copy > p:last-child { max-width: 620px; margin: 0; font-size: var(--text-lead); }

/* Zwei Tarife als Bildkarten — vom Einstieg bis zum vollständigen Vergleich. */
.price-grid { max-width: 1152px; gap: 28px; }
.price-card, .price-card.is-featured { padding: 0; background: white; }
.price-card.is-featured::before { display: none; }
.plan-visual { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 360px; padding: 34px; overflow: hidden; background: #171715; color: white; }
.plan-visual > img { position: absolute; z-index: -2; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.plan-visual::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #0a0d0bf2, #0a0d0b50 70%, #0a0d0b30); }
.plan-visual-copy { width: 100%; }
.plan-visual .price-top { margin-bottom: 30px; }
.plan-visual .eyebrow { color: #e3ceaa; }
.plan-visual .plan-index { color: #eee3cd; border-color: #ffffff60; background: #ffffff10; }
.plan-visual h3 { font-size: clamp(38px, 4vw, 58px); letter-spacing: -.05em; font-weight: 600; }
.plan-visual p { color: #e8e7df; font-size: 1rem; margin: 16px 0 0; }
.plan-details { display: flex; flex-direction: column; flex: 1; padding: 8px 34px 34px; }
.plan-details .feature-list { flex: 1; }
.plan-details .price { margin-top: 22px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .price-card:hover .plan-visual > img { transform: scale(1.055); }
  .brand-hero-image { animation: brand-scene-in 1.8s var(--ease) both; }
  .brand-hero-content { animation: brand-copy-in 1s var(--ease) both; }
}
@keyframes brand-scene-in { from { transform: scale(1.045); } to { transform: scale(1); } }
@keyframes brand-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .brand-hero { min-height: 660px; padding: 42px; }
  .brand-hero h1 { font-size: clamp(56px, 8vw, 76px); }
  .brand-hero-bottom { left: 42px; right: 42px; }
  .hero-offer-strip { gap: 22px; padding: 22px; }
  .hero-offer-label { max-width: 112px; }
  .hero-offer-strip strong span { display: block; }
  .plan-visual { min-height: 300px; padding: 26px; }
  .plan-details { padding: 6px 26px 26px; }
}
@media (max-width: 600px) {
  .brand-hero { width: calc(100% - 24px); margin-top: 12px; min-height: 670px; border-radius: 24px; padding: 28px; }
  .brand-hero-image { object-position: 60% center; }
  .brand-hero::before { background: linear-gradient(90deg, #080b0bbf, #080b0b35), linear-gradient(0deg, #080b0bcc, transparent 80%); }
  .brand-hero-content { padding: 30px 0 75px; }
  .brand-hero h1 { font-size: clamp(43px, 10.6vw, 62px); line-height: 1.08; }
  .brand-hero-name { font-size: 1rem; margin-bottom: 24px; }
  .brand-hero .eyebrow { font-size: 1rem; letter-spacing: .08em; gap: 8px; margin-bottom: 26px; }
  .brand-hero .gold-line { width: 18px; }
  .brand-hero-lead { font-size: 1rem; margin: 24px 0; }
  .brand-hero .hero-actions { display: grid; gap: 12px; max-width: 320px; }
  .brand-hero .button { font-size: 1rem; min-height: 50px; padding: 14px 20px; }
  .brand-hero-bottom { left: 28px; right: 28px; bottom: 24px; font-size: 1rem; letter-spacing: .06em; gap: 10px; }
  .brand-hero-bottom a { gap: 10px; }
  .hero-offer-strip { position: relative; display: block; margin: 20px auto; padding: 20px 64px 20px 20px; border-radius: 16px; }
  .hero-offer-label { max-width: none; display: block; font-size: 1rem; margin-bottom: 8px; }
  .hero-offer-strip strong { display: block; font-size: 1rem; line-height: 1.65; }
  .hero-offer-arrow { position: absolute; right: 16px; top: calc(50% - 17px); height: 34px; width: 34px; }
  .intro { gap: 24px; }
  .intro-mark { display: none; }
  .intro-copy h2 { font-size: clamp(48px, 12vw, 66px); }
  .intro-side .eyebrow { margin: 0; padding: 0; }
  .plan-visual { min-height: 310px; padding: 26px; }
  .plan-visual h3 { font-size: 42px; }
}
@media (max-width: 360px) {
  .brand-hero { padding: 22px; min-height: 635px; }
  .brand-hero h1 { font-size: 38px; }
  .brand-hero .eyebrow { font-size: 1rem; }
  .brand-hero-bottom { left: 22px; right: 22px; }
  .brand-hero-bottom > span { max-width: 90px; }
  .plan-details { padding: 6px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-hero-image, .brand-hero-content { animation: none; }
  .price-card:hover .plan-visual > img, .hero-offer-strip:hover .hero-offer-arrow { transform: none; }
}

/* home.css */
/* Startseite: drei Kapitel, klare Hierarchie und gezielte Vertiefung. */
.home-page { --section-space: clamp(52px, 6vw, 80px); --title-lg: clamp(32px, 3.6vw, 48px); }
.home-page .section { max-width: 1240px; }
.home-page .section-heading { gap: 32px; margin-bottom: 30px; }
.home-page .section-heading > p { max-width: 400px; }
.home-page .eyebrow { margin-bottom: 16px; letter-spacing: .11em; }
.home-page .brand-hero { min-height: 660px; }
.home-page .brand-hero-content { padding: 24px 0 68px; }
.home-page .brand-hero .eyebrow { margin-bottom: 28px; }
.home-page .brand-hero-bottom { font-size: 1rem; text-transform: none; letter-spacing: .03em; }
.home-page .main-nav a[aria-current="location"] { color: var(--gold-dark); }
.home-page .main-nav a[aria-current="location"]::after { transform: scaleX(1); }
.home-page .chapter-number { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #d8c6a4; border-radius: 50%; color: var(--gold-dark); font-size: 1rem; letter-spacing: 0; }

/* Ein kurzer Überblick zeigt den Weg, ohne eine zweite Navigation zu stapeln. */
.home-page .intro { grid-template-columns: .9fr 1.1fr; gap: 32px 9%; padding-top: 56px; padding-bottom: 56px; }
.home-page .intro-side h2 { font-size: clamp(36px, 4vw, 54px); }
.home-page .intro-side .eyebrow { padding: 0; }
.home-page .intro-copy .intro-lead { margin: 0 0 14px; font-size: 20px; }
.home-page .intro-copy > p:last-child { font-size: 1rem; line-height: 1.8; }
.journey-map { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey-map a { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 100px; padding: 20px 22px; transition: background 180ms; }
.journey-map a:first-child { padding-left: 0; }
.journey-map a + a { border-left: 1px solid var(--line); }
.journey-map a > span:last-child { margin-left: auto; color: var(--gold-dark); }
.journey-map .journey-number { align-self: flex-start; padding-top: 3px; font-size: 1rem; color: var(--gold-dark); }
.journey-map strong, .journey-map small { display: block; }
.journey-map strong { font-size: 1rem; font-weight: 700; }
.journey-map small { font-size: 1rem; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.journey-map a:hover { background: #f0eee7; }

/* Kapitel 1: überschaubare Areas, danach optionale Einblicke. */
.home-page .areas { padding-bottom: 44px; }
.home-page .area-grid { gap: 20px; }
.home-page .area-card { padding: 0; overflow: hidden; border-radius: 20px; box-shadow: none; }
.home-page .area-image { aspect-ratio: 1.6; border-radius: 0; }
.home-page .area-copy { padding: 22px; }
.home-page .area-copy h3 { font-size: 23px; }
.home-page .area-copy p { font-size: 1rem; line-height: 1.7; }
.home-page .area-copy .area-lead { margin-top: 12px; }
.home-page .area-number { display: none; }
.home-page .area-tag { font-size: 1rem; padding: 5px 10px; }
.home-page .strength-showcase { grid-template-columns: minmax(0, 5fr) minmax(120px, 1fr); margin-top: 24px; gap: 20px; }
.home-page .strength-feature { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 20px; box-shadow: none; }
.home-page .strength-photo { min-width: 0; }
.home-page .strength-photo img { height: 100%; aspect-ratio: auto; min-height: 245px; }
.home-page .strength-copy { display: flex; flex-direction: column; justify-content: center; padding: 26px; }
.home-page .strength-copy .eyebrow { font-size: 1rem; margin-bottom: 10px; }
.home-page .strength-copy h3 { font-size: 27px; }
.home-page .strength-copy > p:last-child { font-size: 1rem; line-height: 1.75; margin-top: 16px; }
.home-page .locker-feature { border-radius: 20px; height: auto; }
.home-page .locker-feature img { object-position: center 30%; }
.home-page .locker-feature figcaption { font-size: 1rem; bottom: 12px; left: 10px; right: 10px; padding: 6px; }
.home-page .more-areas { margin-top: 20px; border-radius: 14px; }
.home-page .more-areas summary { padding: 16px 0; }
.home-page .daily-section { width: calc(100% - 2 * var(--gutter)); max-width: 1110px; grid-template-columns: .85fr 1.15fr; padding: 30px; gap: 28px 40px; margin: 0 auto; border-radius: 24px; }
.home-page .daily-photo { height: 280px; min-height: 0; border-radius: 16px; }
.home-page .daily-copy h2 { font-size: 34px; margin-bottom: 16px; }
.home-page .daily-copy h2 br { display: none; }
.home-page .daily-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.75; max-width: none; margin-bottom: 0; }
.home-page .editorial-note { margin-top: 18px; padding-top: 14px; font-size: 1rem; }
.home-page .editorial-note > span { display: none; }
.home-page .editorial-note br { display: none; }
.home-page .special-shakes { margin-top: 0; padding-top: 0; border-top: 1px solid #d7d2c5; }
.home-page .special-shakes summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 0; }
.home-page .special-shakes summary .eyebrow { font-size: 1rem; margin-bottom: 4px; }
.home-page .special-shakes summary strong { display: block; font-size: 21px; letter-spacing: -.02em; font-weight: 600; }
.disclosure-copy { display: block; font-size: 1rem; color: var(--muted); margin-top: 5px; }
.disclosure-plus { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid #b4ac99; border-radius: 50%; font-size: 22px; color: var(--gold-dark); }
.special-shakes[open] .disclosure-plus { transform: rotate(45deg); }
.shakes-content { padding-top: 26px; }
.home-page .shake-gallery { max-width: 850px; margin: auto; }
.home-page .shake-card figcaption { padding: 16px; }
.home-page .shake-card h4 { font-size: 17px; }
.home-page .course-feature { padding-top: 44px; padding-bottom: 36px; }
.home-page .course-feature .section-heading h2 { font-size: 34px; }
.home-page .course-feature .section-heading h2 br { display: none; }
.home-page .course-tile { min-height: 200px; padding: 26px; border-radius: 20px; box-shadow: none; }
.home-page .course-tile h3 { font-size: 48px; margin: 18px 0 8px; }
.home-page .course-tile .eyebrow { font-size: 1rem; }
.home-page .course-tile p { font-size: 1rem; }
.home-page .round-arrow { width: 36px; height: 36px; right: 22px; bottom: 22px; }
.home-page .course-included { margin-top: 18px; font-size: 1rem; }
.chapter-next { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 1110px; width: calc(100% - 2 * var(--gutter)); margin: 0 auto 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.chapter-next p { margin: 0; }
.chapter-next strong, .chapter-next p span { display: block; }
.chapter-next strong { color: var(--ink); font-size: 17px; }
.chapter-next p span { font-size: 1rem; margin-top: 4px; }
.chapter-next .button { flex-shrink: 0; }

/* Kapitel 2: ein Angebot, zwei gut vergleichbare Entscheidungen. */
.home-page .pricing-section { max-width: 1240px; padding: 56px 44px; border-radius: 28px; background: #f1f1eb; }
.home-page .center-heading { text-align: left; margin-bottom: 28px; }
.home-page .center-heading .eyebrow { justify-content: flex-start; }
.home-page .center-heading h2 br { display: none; }
.home-page .center-heading > p:last-child { margin-top: 16px; font-size: 1rem; }
.home-page .opening-offer { grid-template-columns: 1fr 235px; max-width: none; gap: 30px; margin-bottom: 26px; padding: 24px 28px; border-radius: 16px; background: #f6eedb; }
.home-page .opening-offer-copy .eyebrow { font-size: 1rem; margin-bottom: 6px; }
.home-page .opening-offer h3 { font-size: 23px; margin-bottom: 8px; line-height: 1.25; letter-spacing: -.025em; }
.home-page .opening-offer-copy > p:not(.eyebrow) { font-size: 1rem; margin-bottom: 0; max-width: 620px; }
.home-page .opening-offer-value { text-align: left; padding: 0 0 0 26px; }
.home-page .opening-offer-value strong { font-size: 28px; font-weight: 600; margin: 0 0 5px; letter-spacing: -.04em; }
.home-page .opening-offer-value > span { font-size: 1rem; }
.home-page .opening-offer-value > p { font-size: 1rem; line-height: 1.6; margin: 8px 0 0; }
.home-page .price-grid { gap: 24px; }
.home-page .price-card { border-radius: 20px; box-shadow: none; }
.home-page .plan-visual { min-height: 210px; padding: 26px; }
.home-page .plan-visual .price-top { margin-bottom: 18px; }
.home-page .plan-visual h3 { font-size: 36px; }
.home-page .plan-visual p { font-size: 1rem; margin-top: 8px; }
.home-page .plan-details { padding: 0 26px 26px; }
.home-page .price { margin: 22px 0 16px; }
.home-page .price > strong { font-size: 62px; }
.home-page .price > span { font-size: 22px; }
.home-page .price small { max-width: none; font-size: 1rem; }
.home-page .reduced-price { border: 0; padding: 0; background: transparent; gap: 2px; }
.home-page .reduced-price strong { font-size: 1rem; }
.home-page .reduced-price span { font-size: 1rem; }
.home-page .feature-list { margin: 20px 0 0; padding: 12px 0; }
.home-page .feature-list li { font-size: 1rem; margin: 9px 0; }
.home-page .plan-opening-offer { background: #f7f4ec; border: 0; border-radius: 10px; padding: 13px 16px; margin: 12px 0 18px; gap: 3px; }
.home-page .plan-opening-offer > strong { font-size: 1rem; }
.home-page .plan-opening-offer > span, .home-page .plan-opening-offer small { font-size: 1rem; }
.home-page .price-card .button { min-height: 50px; }
.home-page .pricing-note { max-width: none; margin-top: 22px; text-align: left; font-size: 1rem; }
.pricing-help { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; font-size: 1rem; }
.pricing-help > span { color: var(--muted); }
.pricing-help a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; }
.pricing-help a:last-child { margin-left: auto; color: var(--gold-dark); font-size: 1rem; }
.home-page .faq-section { padding-top: 56px; padding-bottom: 56px; gap: 7%; }
.home-page .faq-section h2 { font-size: 36px; }
.home-page .faq-section > div > p:last-child { font-size: 1rem; margin-top: 18px; }
.home-page .accordion { gap: 8px; }
.home-page .accordion details { border-radius: 12px; }
.home-page .accordion summary { padding: 16px 20px; font-size: 1rem; }

/* Kapitel 3: den nächsten Schritt und den E-Mail-Ablauf erklären. */
.home-page .contact-section { max-width: 1240px; padding: 48px; gap: 7%; align-items: start; border-radius: 28px; background: #eee9dd; }
.home-page .contact-section h2 { font-size: clamp(40px, 4.4vw, 60px); margin-bottom: 20px; }
.home-page .contact-section > div > p { font-size: 16px; }
.home-page .contact-section .eyebrow { font-size: 1rem; }
.home-page .contact-wordmark { display: none; }
.contact-steps { list-style: none; counter-reset: contact-step; padding: 0; margin: 26px 0 0; }
.contact-steps li { counter-increment: contact-step; position: relative; padding: 0 0 22px 38px; }
.contact-steps li::before { content: counter(contact-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 1px solid #bbad90; border-radius: 50%; text-align: center; font-size: 1rem; line-height: 22px; color: var(--gold-dark); }
.contact-steps strong, .contact-steps span { display: block; }
.contact-steps strong { font-size: 1rem; font-weight: 700; }
.contact-steps span { font-size: 1rem; color: var(--muted); margin-top: 4px; }
.home-page .contact-form { border-radius: 20px; padding: 28px; }
.home-page .contact-form h3 { font-size: 25px; }
.home-page .contact-form > p { font-size: 1rem; margin-bottom: 22px; }

@media (max-width: 900px) {
  .home-page .intro { gap: 26px 6%; }
  .journey-map a { padding: 18px 14px; gap: 10px; }
  .journey-map strong { font-size: 1rem; }
  .journey-map small { font-size: 1rem; }
  .home-page .strength-showcase { grid-template-columns: minmax(0, 5fr) 130px; }
  .home-page .strength-feature { grid-template-columns: 1fr; }
  .home-page .strength-photo img { min-height: 0; height: 240px; }
  .home-page .strength-copy { padding: 22px; }
  .home-page .strength-copy h3 br { display: none; }
  .home-page .daily-section { gap: 24px; padding: 24px; }
  .home-page .daily-photo { height: 300px; }
  .home-page .daily-copy h2 { font-size: 29px; }
  .home-page .opening-offer { grid-template-columns: 1fr 180px; gap: 20px; padding: 22px; }
  .home-page .opening-offer-value { padding-left: 20px; }
  .home-page .pricing-section { padding: 40px 28px; }
  .home-page .plan-visual, .home-page .plan-details { padding-left: 22px; padding-right: 22px; }
  .home-page .contact-section { padding: 32px; }
}
@media (max-width: 650px) {
  .home-page .brand-hero { min-height: 630px; }
  .home-page .brand-hero-bottom { align-items: start; font-size: 1rem; }
  .home-page .brand-hero-bottom > span { max-width: 85px; }
  .home-page .brand-hero-bottom a { max-width: 170px; text-align: right; }
  .home-page .intro { display: block; padding: 36px var(--gutter) 40px; }
  .home-page .intro-side h2 { font-size: 38px; }
  .home-page .intro-side h2 br { display: none; }
  .home-page .intro-copy { margin-top: 22px; }
  .home-page .intro-copy .intro-lead { font-size: 17px; }
  .home-page .intro-copy .intro-lead br { display: none; }
  .home-page .intro-copy > p:last-child { font-size: 1rem; }
  .journey-map { display: block; margin-top: 28px; }
  .journey-map a, .journey-map a:first-child { min-height: 76px; padding: 15px 0; gap: 16px; }
  .journey-map a + a { border-left: 0; border-top: 1px solid var(--line); }
  .journey-map strong { font-size: 1rem; }
  .journey-map small { font-size: 1rem; margin-top: 2px; }
  .home-page .section-heading { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 24px; }
  .home-page .section-heading h2 { font-size: 34px; }
  .home-page .section-heading h2 br { display: none; }
  .home-page .section-heading > p { font-size: 1rem; }
  .home-page .area-grid { grid-template-columns: 1fr; gap: 14px; }
  .home-page .area-card { display: grid; grid-template-columns: 30% minmax(0, 1fr); border-radius: 16px; }
  .home-page .area-image { aspect-ratio: auto; height: 100%; }
  .home-page .area-tag { display: none; }
  .home-page .area-copy { padding: 18px; }
  .home-page .area-copy h3 { font-size: 20px; }
  .home-page .area-copy .area-lead { font-size: 1rem; margin-top: 8px; }
  .home-page .area-copy p { font-size: 1rem; line-height: 1.7; margin-top: 6px; }
  .home-page .strength-showcase { grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; margin-top: 18px; }
  .home-page .strength-photo img { height: 155px; }
  .home-page .strength-copy { padding: 18px; }
  .home-page .strength-copy .eyebrow { font-size: 1rem; letter-spacing: .06em; }
  .home-page .strength-copy h3 { font-size: 23px; }
  .home-page .strength-copy > p:last-child { font-size: 1rem; margin-top: 12px; }
  .home-page .locker-feature { border-radius: 16px; }
  .home-page .locker-feature figcaption { font-size: 1rem; bottom: 10px; left: 5px; right: 5px; padding: 5px; }
  .home-page .more-areas { padding: 0 18px; }
  .home-page .more-areas summary { font-size: 1rem; }
  .home-page .areas { padding-bottom: 32px; }
  .home-page .daily-section { display: grid; grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 22px; }
  .home-page .daily-photo { height: 190px; }
  .home-page .daily-copy h2 { font-size: 28px; }
  .home-page .daily-copy > p:not(.eyebrow) { font-size: 1rem; }
  .home-page .editorial-note { font-size: 1rem; }
  .home-page .special-shakes summary { gap: 12px; padding-top: 20px; }
  .home-page .special-shakes summary strong { font-size: 18px; }
  .disclosure-copy { font-size: 1rem; }
  .home-page .shake-gallery { grid-auto-columns: 94%; }
  .home-page .shake-card figcaption { padding: 14px; }
  .home-page .shake-card h4 { font-size: 16px; }
  .home-page .course-feature { padding-top: 32px; padding-bottom: 26px; }
  .home-page .course-feature .section-heading h2 { font-size: 28px; }
  .home-page .course-feature .text-link { font-size: 1rem; min-height: 40px; }
  .home-page .course-duo { grid-template-columns: 1fr; gap: 14px; }
  .home-page .course-tile { padding: 22px; min-height: 160px; border-radius: 16px; }
  .home-page .course-tile h3 { font-size: 40px; margin: 14px 0 6px; }
  .home-page .course-tile p { font-size: 1rem; max-width: calc(100% - 25px); }
  .home-page .course-tile .eyebrow { margin: 0; font-size: 1rem; }
  .chapter-next { display: block; margin-bottom: 40px; }
  .chapter-next .button { margin-top: 18px; width: 100%; font-size: 1rem; min-height: 50px; }
  .home-page .pricing-section { width: calc(100% - 24px); padding: 30px 18px; border-radius: 24px; }
  .home-page .center-heading h2 { font-size: 32px; }
  .home-page .center-heading > p:last-child { font-size: 1rem; }
  .home-page .opening-offer { display: block; padding: 18px; margin-bottom: 20px; }
  .home-page .opening-offer h3 { font-size: 21px; }
  .home-page .opening-offer-copy > p:not(.eyebrow) { font-size: 1rem; }
  .home-page .opening-offer-value { border: 0; border-top: 1px solid #d7c7a5; margin-top: 15px; padding: 14px 0 0; }
  .home-page .opening-offer-value strong { display: inline; font-size: 22px; margin-right: 8px; }
  .home-page .opening-offer-value > span { display: inline; font-size: 1rem; }
  .home-page .opening-offer-value > p { font-size: 1rem; margin-top: 4px; }
  .home-page .price-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-page .plan-visual { min-height: 180px; padding: 22px; }
  .home-page .plan-visual h3 { font-size: 32px; }
  .home-page .plan-visual p { font-size: 1rem; }
  .home-page .plan-details { padding: 0 22px 22px; }
  .home-page .price > strong { font-size: 58px; }
  .home-page .price small { max-width: 140px; }
  .home-page .pricing-note { font-size: 1rem; }
  .pricing-help { display: block; font-size: 1rem; }
  .pricing-help > span, .pricing-help a { display: block; }
  .pricing-help a:last-child { margin: 0; font-size: 1rem; }
  .home-page .faq-section { padding-top: 40px; padding-bottom: 40px; gap: 24px; }
  .home-page .faq-section h2 { font-size: 30px; }
  .home-page .faq-section h2 br { display: none; }
  .home-page .accordion summary { font-size: 1rem; padding: 15px 16px; }
  .home-page .contact-section { width: calc(100% - 24px); padding: 30px 20px; gap: 24px; border-radius: 24px; }
  .home-page .contact-section h2 { font-size: 40px; }
  .home-page .contact-section h2 br { display: none; }
  .home-page .contact-section > div > p { font-size: 1rem; }
  .home-page .contact-form { padding: 22px 18px; }
  .home-page .contact-form h3 { font-size: 23px; }
  .home-page .contact-email { font-size: 1rem; }
  .contact-steps li { padding-bottom: 16px; }
}

/* Bildschirmbreite nutzen; Zeilenlängen bleiben für Lesetexte begrenzt. */
.home-page { --gutter: clamp(22px, 4vw, 88px); }
.home-page .site-header { width: calc(100% - 40px); max-width: none; }
.home-page .section { width: 100%; max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }
.home-page .daily-section, .home-page .chapter-next { width: calc(100% - 2 * var(--gutter)); max-width: none; }
.home-page .daily-section { padding: clamp(24px, 3vw, 48px); }
.home-page .daily-photo { height: clamp(260px, 24vw, 420px); }
.home-page .daily-copy { max-width: 650px; }
.home-page .pricing-section, .home-page .contact-section { width: 100%; border-radius: 0; border-left: 0; border-right: 0; }
.home-page .price-grid { max-width: none; }
.home-page .intro-copy > p:last-child { max-width: 700px; }
.home-page .pricing-note { max-width: 1050px; margin-left: 0; }
.home-page .site-footer { max-width: none; }
.home-page .plan-visual { min-height: clamp(210px, 18vw, 310px); }

/* Reiner Markenauftakt. Staffelung, Tiefenbewegung und Maskierung wie Camp Dörfl. */
.home-page .brand-hero { display: grid; place-items: center; width: 100%; max-width: none; min-height: min(820px, calc(100svh - 110px)); margin: 0; padding: 64px var(--gutter) 100px; color: var(--ink); background: var(--paper); border-radius: 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.home-page .brand-hero::before { display: none; }
.home-page .brand-hero-content { width: 100%; max-width: none; padding: 0; text-align: center; animation: none; perspective: 1200px; }
.hero-wordmark { display: flex; justify-content: center; margin-bottom: 38px; }
.hero-wordmark .logo-crop { width: clamp(240px, 24vw, 440px); }
.home-page .brand-hero h1 { font-size: clamp(60px, 6.5vw, 126px); line-height: 1.05; letter-spacing: -.06em; font-weight: 500; perspective: 1200px; }
.hero-line { display: block; transform-origin: left bottom; }
.home-page .hero-gold { color: var(--gold-dark); }
.home-page .brand-hero-lead { margin: 28px 0 26px; color: var(--muted); font-size: clamp(15px, 1.3vw, 20px); }
.home-page .hero-actions { justify-content: center; }
.home-page .brand-hero .text-link { font-size: 1rem; }
.home-page .brand-hero-bottom { color: var(--muted); bottom: 24px; left: var(--gutter); right: var(--gutter); padding-top: 18px; border-color: var(--line); font-size: 1rem; }
.home-page .brand-hero-bottom a { color: var(--gold-dark); }
.home-page .brand-hero-bottom a span { color: var(--gold-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes logo-arrive { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
@keyframes title-depth-in { from { opacity: 0; clip-path: inset(-15% -50% 100% -50%); transform: translate3d(70px, 48px, -110px) rotateX(-24deg) rotateZ(-3deg); } to { opacity: 1; clip-path: inset(-15% -50% -20% -50%); transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0); } }
@media (max-width: 650px) {
  .home-page .site-header { width: calc(100% - 24px); }
  .home-page .brand-hero { min-height: 600px; padding: 40px var(--gutter) 100px; }
  .hero-wordmark { margin-bottom: 32px; }
  .hero-wordmark .logo-crop { width: clamp(220px, 66vw, 320px); }
  .home-page .brand-hero h1 { font-size: clamp(40px, 8.9vw, 58px); }
  .home-page .brand-hero-lead { font-size: 1rem; }
  .home-page .brand-hero .hero-actions { display: flex; flex-direction: column; max-width: none; gap: 12px; }
  .home-page .brand-hero .button { min-width: 225px; }
  .home-page .brand-hero-bottom { font-size: 1rem; gap: 24px; }
  .home-page .brand-hero-bottom > span { max-width: 116px; }
  .home-page .daily-section { padding: 20px; }
  .home-page .daily-photo { height: 190px; }
  .home-page .pricing-section, .home-page .contact-section { padding-top: 36px; padding-bottom: 36px; }
  .home-page .plan-visual { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark, .hero-line, .home-page .brand-hero-lead, .home-page .brand-hero .hero-actions, .home-page .brand-hero-bottom { animation: none; }
}
.hero-location { display: block; margin-bottom: 20px; font-size: clamp(10px, .9vw, 13px); font-weight: 700; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); }

@media (max-width: 650px) {
  .home-page .locker-feature img { object-fit: contain; object-position: center 25%; }
  .hero-location { margin-bottom: 18px; }
  .hero-wordmark { margin-bottom: 26px; }
}
.contact-location { display: flex; align-items: end; gap: 28px; flex-wrap: wrap; margin: 24px 0 12px; padding-top: 20px; border-top: 1px solid #d0c5af; }
.contact-location address, .footer-address { font-style: normal; font-size: 1rem; line-height: 1.75; }
.contact-location address > *, .footer-address > * { display: block; }
.contact-location address strong, .footer-address strong { font-weight: 600; }
.contact-location .text-link { min-height: 40px; padding-bottom: 6px; font-size: 1rem; }
.footer-address { color: var(--muted); font-size: 1rem; }
@media (max-width: 650px) {
  .contact-location { gap: 12px; }
  .contact-location address { font-size: 1rem; }
  .footer-address { font-size: 1rem; }
}

/* Sichtbare Textinszenierung: Scroll-Szene am Desktop, Einblendung im Sichtfeld mobil. */
.home-page .brand-hero { display: block; min-height: 0; height: auto; padding: 0; overflow: visible; }
.hero-stage { position: relative; display: grid; place-items: center; min-height: min(820px, calc(100svh - 110px)); padding: 64px var(--gutter) 100px; overflow: hidden; }
.hero-scroll-cue { display: none; }
.home-page .hero-stage :is(.hero-wordmark, .hero-location, .hero-line, .brand-hero-lead, .hero-actions, .brand-hero-bottom) { animation: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .home-page .brand-hero.has-scroll-scene { --hero-scroll-distance: min(90vh, 900px); height: calc(100svh - var(--hero-stage-top, 116px) + var(--hero-scroll-distance)); }
  .has-scroll-scene .hero-stage { position: sticky; top: var(--hero-stage-top, 116px); height: calc(100svh - var(--hero-stage-top, 116px)); min-height: 0; padding-top: 28px; padding-bottom: 92px; }
  .home-page .has-scroll-scene .hero-line { --scene-step: var(--hero-line-1, 1); opacity: var(--scene-step); clip-path: inset(-15% -50% calc((1 - var(--scene-step)) * 120% - 20%) -50%); transform: perspective(1000px) translate3d(calc((1 - var(--scene-step)) * 70px), calc((1 - var(--scene-step)) * 48px), calc((1 - var(--scene-step)) * -110px)) rotateX(calc((1 - var(--scene-step)) * -24deg)) rotateZ(calc((1 - var(--scene-step)) * -3deg)); transition: none; will-change: opacity, transform; }
  .home-page .has-scroll-scene .hero-line + .hero-line { --scene-step: var(--hero-line-2, 1); }
  .home-page .has-scroll-scene .brand-hero-lead { opacity: var(--hero-support, 1); transform: translateY(calc((1 - var(--hero-support, 1)) * 30px)); }
  .home-page .has-scroll-scene .hero-actions { opacity: var(--hero-actions, 1); transform: translateY(calc((1 - var(--hero-actions, 1)) * 30px)); }
  .home-page .has-scroll-scene:not(.is-scene-open) .hero-actions { pointer-events: none; }
  .home-page .has-scroll-scene .hero-wordmark { transform: translateY(calc(var(--hero-progress, 0) * -8px)) scale(calc(1 - var(--hero-progress, 0) * .035)); }
  .home-page .has-scroll-scene .hero-stage:focus-within :is(.hero-line, .brand-hero-lead, .hero-actions) { opacity: 1; transform: none; clip-path: none; pointer-events: auto; }
  .has-scroll-scene .hero-scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 14px; color: var(--gold-dark); font-size: 1rem; }
  .hero-scroll-cue > span:last-child { font-size: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-page .brand-hero:not(.has-scroll-scene) .hero-stage.is-reveal-pending :is(.hero-location, .hero-line, .brand-hero-lead, .hero-actions) { opacity: 0; }
  .home-page .brand-hero:not(.has-scroll-scene) .hero-stage.is-entering .hero-wordmark { animation: logo-arrive .95s var(--ease) 80ms both; }
  .home-page .brand-hero:not(.has-scroll-scene) .hero-stage.is-entering .hero-location { animation: logo-arrive .95s var(--ease) 180ms both; }
  .home-page .brand-hero:not(.has-scroll-scene) .hero-stage.is-entering .hero-line { animation: title-depth-in .95s var(--ease) 320ms both; }
  .home-page .brand-hero:not(.has-scroll-scene) .hero-stage.is-entering .hero-line + .hero-line { animation-delay: 760ms; }
  .home-page .brand-hero:not(.has-scroll-scene) .hero-stage.is-entering .brand-hero-lead { animation: logo-arrive .95s var(--ease) 1120ms both; }
  .home-page .brand-hero:not(.has-scroll-scene) .hero-stage.is-entering .hero-actions { animation: logo-arrive .95s var(--ease) 1340ms both; }
  .home-page .brand-hero .hero-stage:focus-within :is(.hero-line, .hero-location, .brand-hero-lead, .hero-actions) { opacity: 1; animation: none; }
}
@media (max-width: 650px) {
  .hero-stage { min-height: 600px; padding: 40px var(--gutter) 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .brand-hero .hero-stage :is(.hero-wordmark, .hero-location, .hero-line, .brand-hero-lead, .hero-actions, .brand-hero-bottom) { animation: none; transform: none; opacity: 1; clip-path: none; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .hero-stage .hero-wordmark { margin-bottom: 24px; }
  .hero-stage .hero-location { margin-bottom: 12px; }
  .home-page .hero-stage h1 { font-size: clamp(56px, 5.5vw, 80px); }
  .home-page .hero-stage .brand-hero-lead { margin: 20px 0; }
}
.hero-wordmark { mix-blend-mode: multiply; }

/* Empfang, Eröffnungsangebot und Mitgliedschaften — Originalbilder nur bei den Areas. */
.opening-ribbon { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 32px; padding: 14px var(--gutter); margin-top: 20px; border-block: 1px solid #d7c6a0; background: #efe3c8; color: #342e22; }
.opening-ribbon p { margin: 0; color: inherit; font-size: 1rem; }
.opening-ribbon strong { font-weight: 800; }
.opening-ribbon a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.home-page .intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px 7%; padding-block: clamp(48px, 6vw, 96px); }
.welcome-story { max-width: 760px; }
.home-page .welcome-story h2 { font-size: clamp(44px, 4.8vw, 76px); }
.home-page .welcome-story .intro-copy { margin-top: 30px; }
.home-page .welcome-story .intro-lead { font-size: clamp(22px, 2vw, 28px); color: var(--ink); line-height: 1.5; }
.welcome-image { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: #e5ddd1; }
.welcome-image img { width: 100%; height: clamp(420px, 43vw, 620px); object-fit: cover; object-position: 50% 57%; }
.welcome-image figcaption { position: absolute; inset: auto 20px 20px; padding: 12px 16px; border: 1px solid #fff8; border-radius: 12px; background: #fffcf4f5; color: var(--ink); font-size: 1rem; }
.home-page .pricing-section { background: #f4f3ee; padding-block: clamp(56px, 6vw, 100px); }
.home-page .center-heading { margin-bottom: 36px; }
.home-page .opening-offer { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .8fr); align-items: center; gap: 48px; padding: clamp(28px, 4vw, 64px); margin-bottom: 36px; border: 1px solid #baa16d; border-radius: 24px; background: linear-gradient(120deg, #f5ebd5 0%, #e8d5af 52%, #d0b581 100%); box-shadow: inset 0 1px 0 #fff9, 0 16px 42px #705d3010; color: #292a24; }
.home-page .opening-offer .eyebrow { color: #504022; margin-bottom: 20px; letter-spacing: .09em; }
.home-page .opening-offer h3 { font-size: clamp(38px, 4.4vw, 68px); line-height: 1.1; font-weight: 600; letter-spacing: -.055em; margin-bottom: 24px; }
.opening-offer h3 > span { color: #5d4928; }
.home-page .opening-offer-copy > p:not(.eyebrow) { font-size: 1.125rem; max-width: 650px; line-height: 1.7; color: #403c30; margin-bottom: 24px; }
.offer-button { background: #282b25; color: #fff; border-color: #282b25; }
.offer-button:hover { background: #424539; color: #fff; }
.home-page .opening-offer-value { padding: 32px 0 32px 44px; border: 0; border-left: 1px solid #8b774c; text-align: left; color: #292a24; }
.home-page .opening-offer-value > span { display: block; color: #423a28; font-size: 1.125rem; }
.home-page .opening-offer-value > strong { display: block; font-size: 1.5rem; font-weight: 500; line-height: 1.1; margin: 18px 0 12px; letter-spacing: -.035em; }
.home-page .opening-offer-value b { display: block; font-size: clamp(68px, 7vw, 110px); font-weight: 600; letter-spacing: -.065em; line-height: 1.05; }
.home-page .opening-offer-value > p { color: #4c402b; font-size: 1rem; line-height: 1.7; margin-top: 24px; }
.home-page .price-grid { gap: 28px; }
.home-page .price-card { border: 1px solid #aeb5bf; border-radius: 24px; box-shadow: 0 12px 38px #252a330a; }
.home-page .price-card.plan-basic { background: linear-gradient(135deg, #fff 0%, #f2f4f6 60%, #e8ecf0 100%); }
.home-page .price-card.plan-all-in { border-color: #bda571; background: linear-gradient(135deg, #fcf7e9 0%, #eddfbf 65%, #dbc495 100%); }
.home-page .plan-visual { min-height: 300px; padding: clamp(26px, 3vw, 44px); border-bottom: 1px solid #bfc5cd; color: #212521; background: linear-gradient(125deg, #fafbfc 0%, #d9dee5 42%, #f5f7f9 72%, #d8dee5 100%); }
.home-page .plan-all-in .plan-visual { border-color: #b69b63; background: linear-gradient(125deg, #f6ead0 0%, #d3b982 44%, #eee0bb 73%, #c8ab71 100%); }
.home-page .plan-visual::after { display: none; }
.home-page .plan-logo { width: clamp(170px, 16vw, 240px); margin-bottom: 30px; }
.home-page .plan-visual .price-top { margin-bottom: 16px; gap: 16px; }
.home-page .plan-visual .eyebrow { color: #424950; letter-spacing: .07em; }
.home-page .plan-all-in .plan-visual .eyebrow { color: #504022; }
.home-page .plan-visual .plan-index { color: #3e454d; background: #ffffff65; border-color: #87919f; width: 40px; height: 40px; }
.home-page .plan-all-in .plan-index { color: #504022; border-color: #8b754b; }
.home-page .plan-visual h3 { font-size: clamp(36px, 3.3vw, 52px); }
.home-page .plan-visual p { color: #444b51; font-size: 1.125rem; margin-top: 12px; line-height: 1.6; }
.home-page .plan-all-in .plan-visual p { color: #453a26; }
.home-page .plan-details { padding: 8px clamp(26px, 3vw, 44px) 36px; }
.home-page .price { margin-block: 26px 20px; gap: 18px; }
.home-page .price > strong { font-size: clamp(68px, 6.4vw, 92px); font-weight: 600; }
.home-page .price > span { font-size: 30px; }
.home-page .price small { display: block; line-height: 1.55; font-size: 1rem; max-width: 210px; margin-top: 4px; color: #444d44; }
.home-page .reduced-price { padding-bottom: 22px; border-bottom: 1px solid #bac0c6; }
.home-page .reduced-price strong { font-size: 1.25rem; color: #252b25; }
.home-page .reduced-price span { margin-top: 5px; color: #444d44; }
.home-page .plan-all-in .reduced-price { border-color: #bda879; }
.home-page .feature-list { margin-top: 16px; padding-block: 8px 20px; }
.home-page .feature-list li { font-size: 1.125rem; color: #2b312d; line-height: 1.6; margin: 14px 0; }
.home-page .feature-list li::before { color: #554522; }
.home-page .plan-opening-offer { padding: 20px; gap: 8px; background: #ffffffa6; border: 1px solid #bfc5ca; margin-bottom: 24px; }
.home-page .plan-all-in .plan-opening-offer { background: #fff8e9b3; border-color: #bda879; }
.home-page .plan-opening-offer > strong { font-size: 1.25rem; color: #262b26; }
.home-page .plan-opening-offer small { color: #54452b; }
.home-page .price-card .button { min-height: 58px; }
.home-page .plan-basic .button { border-color: #6c7784; background: #edf0f3; }
.home-page .plan-basic .button:hover { background: #dde3e9; }
.home-page .plan-all-in .button { background: linear-gradient(115deg, #e4cf9d, #c6a86b); border-color: #967b44; }
@media (max-width: 900px) {
  .home-page .intro { gap: 32px; }
  .home-page .opening-offer { grid-template-columns: minmax(0, 1.5fr) minmax(190px, 1fr); gap: 26px; }
  .home-page .opening-offer-value { padding-left: 26px; }
  .home-page .plan-visual { min-height: 300px; }
}
@media (max-width: 700px) {
  .opening-ribbon { align-items: start; justify-content: start; padding: 16px var(--gutter); gap: 4px; margin-top: 16px; }
  .home-page .intro { grid-template-columns: 1fr; gap: 30px; }
  .welcome-image img { height: auto; max-height: 580px; aspect-ratio: 4 / 5; }
  .home-page .welcome-story h2 { font-size: clamp(38px, 10vw, 58px); }
  .home-page .opening-offer { grid-template-columns: 1fr; padding: 26px; gap: 28px; border-radius: 20px; }
  .home-page .opening-offer h3 { font-size: clamp(34px, 8.5vw, 48px); }
  .home-page .opening-offer-value { padding: 24px 0 0; border-left: 0; border-top: 1px solid #8b774c; margin: 0; }
  .home-page .opening-offer-value > strong { margin-top: 12px; }
  .home-page .opening-offer-value > strong > br { display: none; }
  .home-page .opening-offer-value b { display: inline; font-size: 68px; margin-left: 8px; }
  .home-page .opening-offer-value > p { margin-top: 16px; }
  .home-page .price-grid { grid-template-columns: 1fr; gap: 28px; }
  .home-page .plan-visual { min-height: 0; padding: 28px 24px; }
  .home-page .plan-logo { width: 190px; margin-bottom: 24px; }
  .home-page .plan-details { padding: 0 24px 26px; }
  .home-page .price { flex-wrap: wrap; gap: 12px; }
  .home-page .price small { max-width: 150px; }
  .home-page .opening-offer .button { width: 100%; padding-inline: 18px; gap: 12px; }
}
/* A defined backdrop keeps the supplied white logo canvas invisible during 3D motion. */
.home-page .brand-hero-content { background: var(--paper); }

/* accessibility.css */
/* Gemeinsame Lesbarkeit, Kontraste und Bedienung für alle Website-Seiten. */
:root { --muted: #51584f; --gold-dark: #67512d; --text-xs: 1rem; --text-sm: 1rem; --text-body: 1.125rem; --app-muted: #66513d; }
html { font-size: 100%; scroll-padding-top: 140px; }
.readable-site { font-size: 1.125rem; line-height: 1.7; overflow-wrap: break-word; }
.readable-site :is(p, li) { line-height: 1.7; }
.readable-site :is(button, input, select, textarea, summary) { font-size: 1rem; }
.readable-site :is(button, summary, input, select) { min-height: 44px; }
.readable-site :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #253d62 !important; outline-offset: 4px !important; box-shadow: 0 0 0 3px #fff; }
.readable-site [hidden] { display: none !important; }
.readable-site input, .readable-site textarea, .readable-site select { border-color: #858b80; min-width: 0; max-width: 100%; }
.readable-site input::placeholder, .readable-site textarea::placeholder { color: #62695f; opacity: 1; }
.readable-site .eyebrow { letter-spacing: .075em; line-height: 1.6; }
.readable-site .button { white-space: normal; }
.readable-site .button > span { flex-shrink: 0; }
.readable-site .form-note, .readable-site .pricing-note { font-size: 1rem; color: #51584f; line-height: 1.75; }
.form-error { color: #9c2920; font-size: 1rem; margin: 12px 0 0; }
.form-error:empty, .booking-status:empty { display: none; }
.booking-status { padding: 16px; border: 1px solid #6a7556; border-radius: 12px; background: #eef2e5; color: #37442c; }
.readable-site .main-nav { gap: clamp(16px, 1.8vw, 30px); }
.readable-site .main-nav a { min-height: 44px; }
.readable-site .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.readable-site .back-top { min-width: 48px; }
.readable-site .contact-email { overflow-wrap: anywhere; }
.readable-site .skip-link { top: -150px; }
.readable-site .skip-link:focus { top: 12px; }
.readable-site :is(.area-copy p, .strength-copy > p:not(.eyebrow), .daily-copy > p:not(.eyebrow), .intro-copy > p:last-child, .section-heading > p, .center-heading > p:last-child, .accordion details > p, .contact-section > div > p:not(.eyebrow), .contact-form > p:not(.form-note), .course-tile > p) { font-size: 1.125rem; }
.readable-site .intro-copy .intro-lead { font-size: 1.5rem; }
.readable-site .hero-location { font-size: 1rem; letter-spacing: .13em; }
.readable-site .brand-hero-lead { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }
.readable-site .brand-hero-bottom { font-size: 1rem; gap: 24px; }
.readable-site .brand-hero-bottom > span, .readable-site .brand-hero-bottom > a { max-width: none; }
.readable-site .brand-hero.has-scroll-scene .hero-scroll-cue { bottom: 12px; }
.readable-site .brand-hero.has-scroll-scene .brand-hero-bottom { bottom: 64px; }
.readable-site .journey-map strong { font-size: 1.125rem; }
.readable-site .journey-map a { gap: 16px; }
.readable-site .area-tag { background: #fffdf4f5; color: #343828; line-height: 1.6; }
.readable-site .contact-steps li::before { font-size: 1rem; width: 28px; height: 28px; line-height: 26px; }
.readable-site .contact-steps li { padding-left: 42px; }
.readable-site .contact-steps strong { font-size: 1.125rem; }
.readable-site .contact-location address { font-size: 1.125rem; }
.readable-site .calendar-course:focus-visible { outline-offset: -4px !important; }
.readable-site .calendar-table { grid-template-columns: 90px repeat(5, minmax(170px, 1fr)); min-width: 945px; }
.readable-site .calendar-course { padding: 20px 16px; }
.readable-site .calendar-course strong { line-height: 1.5; }
.readable-site .booking-grid article, .readable-site .booking-list article { min-width: 0; }
@media (max-width: 1240px) {
  .readable-site .site-header { gap: 16px; }
  .readable-site .main-nav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px); margin: 0; padding: 18px 24px; max-height: calc(100svh - 160px); overflow-y: auto; background: #fff; border: 1px solid #b9bcb2; border-radius: 22px; box-shadow: 0 16px 40px #20271a1a; }
  .readable-site.nav-open .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .readable-site .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; width: 48px; height: 48px; order: 3; padding: 10px; border: 1px solid #777e70; border-radius: 50%; background: #fff; }
  .readable-site .nav-toggle span { display: block; width: 20px; height: 2px; background: #212521; }
  .readable-site .header-cta { margin-left: auto; }
}
@media (max-width: 900px) {
  .readable-site .journey-map { grid-template-columns: 1fr; }
  .readable-site .journey-map a { min-height: 96px; padding: 20px 0; }
  .readable-site .journey-map a + a { border-left: 0; border-top: 1px solid var(--line); }
  .readable-site .strength-showcase { grid-template-columns: 1fr; }
  .readable-site .locker-feature { display: flex; gap: 24px; align-items: center; padding: 18px; border: 1px solid #cbc7ba; border-radius: 16px; background: #f3f0e7; }
  .readable-site .locker-feature img { position: static; width: 92px; height: 170px; object-fit: contain; flex-shrink: 0; border-radius: 8px; }
  .readable-site .locker-feature figcaption { position: static; padding: 0; color: #384032; background: none; text-align: left; font-size: 1.125rem; }
}
@media (max-width: 700px) {
  .readable-site .brand-hero-bottom { position: static; margin-top: 38px; padding-top: 20px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .readable-site .brand-hero-bottom a { text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
  .readable-site .hero-stage { min-height: 0; padding: 48px var(--gutter) 28px; }
  .readable-site .area-copy { padding: 24px; }
  .readable-site .area-copy h3 { font-size: 1.625rem; }
  .readable-site .strength-feature { grid-template-columns: 1fr; }
  .readable-site .strength-photo img { min-height: 0; height: auto; aspect-ratio: 1.4; object-fit: cover; }
  .readable-site .strength-copy { padding: 26px; }
  .readable-site .daily-photo { min-height: 300px; height: auto; }
  .readable-site .photo-label { position: static; display: block; background: #f3eee2; color: #333b30; padding: 12px; border-radius: 0; }
  .readable-site .daily-photo img { height: 280px; }
  .readable-site .special-shakes summary { gap: 12px; }
  .readable-site .course-tile { padding: 26px; }
  .readable-site .course-tile .eyebrow { max-width: none; }
  .readable-site .course-tile > p { max-width: none; padding-right: 0; }
  .readable-site .course-tile .round-arrow { position: static; display: grid; margin-top: 18px; }
  .readable-site .contact-form { padding: 24px; }
  .readable-site .auth-panel { padding: 24px 20px; }
  .readable-site .auth-tabs { border-radius: 16px; }
  .readable-site .auth-tabs button { padding-inline: 8px; }
}
@media (max-width: 420px) {
  html { scroll-padding-top: 178px; }
  .readable-site .site-header { flex-wrap: wrap; border-radius: 22px; padding: 10px 14px; gap: 8px; }
  .readable-site .site-header .brand { margin-right: auto; }
  .readable-site .site-header .logo-crop { width: 138px; }
  .readable-site .nav-toggle { order: 2; }
  .readable-site .header-cta { order: 3; width: 100%; margin-left: 0; min-height: 44px; padding-block: 8px; }
  .readable-site .main-nav { max-height: calc(100svh - 185px); }
  .readable-site .button { padding-inline: 18px; }
  .readable-site .hero-stage h1 { font-size: clamp(36px, 9vw, 44px); }
  .readable-site .hero-location { letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .readable-site *, .readable-site *::before, .readable-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .readable-site .will-reveal { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) {
  .readable-site .button, .readable-site .price-card, .readable-site .opening-offer { border: 2px solid CanvasText; }
  .readable-site :focus-visible { outline: 3px solid Highlight !important; }
  .readable-site .hero-line { color: CanvasText; }
}

/* experience.css */
/* PUZZLE GYM — Rauminszenierung und interaktiver App-Einstieg. */
.area-cinema { position: relative; isolation: isolate; border: 1px solid #b9ac90; border-radius: 26px; background: #f9f7f0; box-shadow: 0 24px 70px #40301712, inset 0 1px 0 #fff; overflow: hidden; }
.area-cinema::before { content: ''; position: absolute; pointer-events: none; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 1px 0 #fffdf2, inset 0 0 22px #d8b97c12; }
.area-viewport { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px 26px 0 0; }
.area-viewport::-webkit-scrollbar { display: none; }
.readable-site .area-viewport:focus-visible { outline-offset: -5px !important; }
.area-slide { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(310px, 1fr); flex: 0 0 100%; min-width: 0; min-height: clamp(480px, 42vw, 650px); scroll-snap-align: start; scroll-snap-stop: always; }
.area-slide-photo { position: relative; min-width: 0; overflow: hidden; background: #24221d; }
.area-slide-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(140deg, #f9dba31f, transparent 36%, transparent 75%, #b78b4720); box-shadow: inset 0 0 40px #19160f14; }
.area-slide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.area-light-beam { position: absolute; inset: -40% -25%; background: linear-gradient(108deg, transparent 37%, #fff4cc03 43%, #ffebae38 48%, #fff9dd70 50%, #eaca8d14 53%, transparent 62%); transform: translateX(-110%); pointer-events: none; mix-blend-mode: screen; }
.area-slide-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.1vw, 52px); background: radial-gradient(ellipse at 100% 0, #ede1c6 0%, transparent 60%), #fbfaf5; }
.area-slide-number { color: #675333; font-size: 1rem; letter-spacing: .1em; margin-bottom: 36px; }
.area-slide-copy .eyebrow { font-size: 1rem; margin-bottom: 14px; }
.area-slide-copy h3 { font-size: clamp(32px, 3.25vw, 52px); line-height: 1.12; letter-spacing: -.045em; margin-bottom: 22px; }
.area-slide-copy p { font-size: 1.125rem; line-height: 1.7; margin-bottom: 20px; }
.area-slide-copy .area-slide-lead { font-weight: 700; color: #363c32; margin-bottom: 12px; }
.area-slide-tag { align-self: flex-start; padding: 10px 14px; font-size: 1rem; line-height: 1.5; margin-top: 12px; background: #ece4d1; color: #52432a; border: 1px solid #c7b388; border-radius: 10px; }
.area-carousel-footer { display: flex; align-items: center; gap: 28px; padding: 20px 28px; border-top: 1px solid #c9baa0; background: #faf8f2; }
.area-carousel-position { display: flex; gap: 12px; align-items: baseline; color: #52574c; margin: 0; font-size: 1rem; }
.area-carousel-position strong { color: #282e25; font-size: 1.5rem; font-weight: 600; }
.area-play { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: 1rem; color: #524329; margin-left: auto; }
.area-play:hover { background: #ece5d5; }
.area-play > span:first-child { width: 20px; text-align: center; }
.area-arrows { display: flex; gap: 12px; }
.area-arrow { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #968158; background: #f1e7d2; color: #3c3424; font-size: 26px !important; transition: background 200ms, transform 200ms; }
.area-arrow:hover { background: #dac499; transform: translateY(-2px); }
.area-pickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #d3c9b6; border-top: 1px solid #c9baa0; }
.area-picker { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 20px; min-height: 96px; text-align: left; border: 0; background: #fbfaf6; color: #41483b; font-size: 1rem; line-height: 1.5; }
.area-picker img { width: 60px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink: 0; opacity: .7; transition: opacity 250ms; }
.area-picker > span:not(.area-picker-number) { min-width: 0; }
.area-picker-number { margin-left: auto; color: #67512d; font-size: 1rem; }
.area-picker::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: #957344; transform: scaleX(0); transform-origin: left; transition: transform 300ms; }
.area-picker:hover, .area-picker[aria-current="true"] { background: #ede5d4; color: #2d332a; }
.area-picker[aria-current="true"]::after { transform: scaleX(1); }
.area-picker[aria-current="true"] img, .area-picker:hover img { opacity: 1; }
.area-picker[aria-current="true"] { font-weight: 700; }
.area-locker-note { display: flex; align-items: center; gap: 20px; margin-top: 28px; padding: 18px 22px; border: 1px solid #d8d2c5; border-radius: 16px; background: #f3f0e8; }
.area-locker-note img { width: 46px; height: 98px; object-fit: contain; border-radius: 4px; }
.area-locker-note p { margin: 0; color: #4d5447; font-size: 1.125rem; }
@media (prefers-reduced-motion: no-preference) {
  .area-slide.is-current .area-light-beam { animation: area-light-pass 1500ms cubic-bezier(.2,.6,.3,1) both; }
  .area-slide.is-current .area-slide-photo img { animation: area-photo-enter 1100ms cubic-bezier(.2,.6,.3,1) both; }
  .area-slide.is-current .area-slide-copy > * { animation: area-copy-enter 650ms ease both; }
  .area-slide.is-current .area-slide-copy h3 { animation-delay: 80ms; }
  .area-slide.is-current .area-slide-lead { animation-delay: 120ms; }
}
@keyframes area-light-pass { from { transform: translateX(-110%); opacity: 0; } 25% { opacity: .8; } to { transform: translateX(100%); opacity: 0; } }
@keyframes area-photo-enter { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes area-copy-enter { from { opacity: .4; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Das Puzzleteil ist ein echtes Bedienelement; der Rest der Fläche scrollt normal. */
.home-page .app-experience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 44px 6%; padding-block: clamp(56px, 7vw, 112px); }
.app-experience-intro { max-width: 650px; }
.app-experience-intro h2 { font-size: clamp(42px, 5vw, 76px); margin-bottom: 26px; line-height: 1.08; }
.app-experience-intro > p { font-size: 1.125rem; line-height: 1.7; }
.app-experience-intro .eyebrow { font-size: 1rem; }
.app-experience-intro .app-invitation { margin-top: 28px; color: #333b2e; font-weight: 600; max-width: 500px; }
.app-skip-puzzle { background: transparent; border: 0; border-bottom: 1px solid #857653; border-radius: 0; color: #63502e; padding-inline: 0; }
.app-puzzle-panel { border: 1px solid #cbb991; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #fffcf4 0%, #f2e8d4 55%, #e8dac0 100%); box-shadow: inset 0 1px 0 #fff, 0 24px 70px #67502c0c; }
.app-puzzle-field { position: relative; isolation: isolate; width: 100%; height: clamp(320px, 30vw, 420px); }
.app-puzzle-orbit { position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; max-width: 90%; border: 1px solid #bfa36d55; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.app-puzzle-orbit.orbit-two { width: 350px; height: 350px; max-width: 110%; border-color: #cab78e44; }
.app-puzzle-target { display: grid; place-items: center; position: absolute; top: 50%; left: 50%; width: 148px; height: 148px; transform: translate(-50%, -50%); border: 1px solid #b59b68; border-radius: 28px; background: linear-gradient(135deg, #fffffff0, #ede2cb99); box-shadow: inset 0 2px 8px #7c623017, 0 14px 34px #84652e0c; transition: box-shadow 300ms, border-color 300ms; }
.app-puzzle-target svg { width: 104px; height: 104px; fill: #d9cbaa; stroke: #8c7243; stroke-width: 1; }
.app-puzzle-target.is-near { border-color: #745329; box-shadow: 0 0 0 8px #d7b97840, 0 0 48px #d2aa5b50; }
.app-puzzle-piece { --piece-x: -90px; --piece-y: 84px; position: absolute; top: 50%; left: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: 14px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transform: translate3d(var(--piece-x), var(--piece-y), 0); transition: transform 550ms cubic-bezier(.2,.8,.2,1); z-index: 2; }
.app-puzzle-piece svg { width: 104px; height: 104px; fill: url(#app-piece-gold); stroke: #8b6932; stroke-width: .7; filter: drop-shadow(0 12px 12px #78542045); pointer-events: none; }
.app-puzzle-piece.is-dragging { cursor: grabbing; transition: none; }
.app-puzzle-piece:active svg { filter: drop-shadow(0 16px 16px #78542060); }
.app-puzzle-caption { position: relative; padding: 0 28px 28px; text-align: center; }
.app-puzzle-state { display: block; color: #453b28; font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.app-puzzle-caption p { font-size: 1rem; color: #5c5039; margin: 0; }
.app-infos { grid-column: 1 / -1; border: 1px solid #c6b99b; border-radius: 24px; padding: clamp(26px, 4vw, 54px); background: linear-gradient(120deg, #fffefa, #f2ecdd); }
.app-info-heading { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-bottom: 36px; }
.app-info-heading h3 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.25; max-width: 650px; }
.app-info-heading .button { flex-shrink: 0; }
.app-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.app-info-grid article { border-top: 1px solid #bbaa85; padding-top: 26px; }
.app-feature-icon { display: grid; place-items: center; width: 48px; height: 48px; font-size: 1rem; color: #604c28; border: 1px solid #bba470; border-radius: 14px; background: #eadcbc; }
.app-info-grid h4 { font-size: 1.5rem; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; margin: 20px 0 12px; }
.app-info-grid p { font-size: 1.125rem; line-height: 1.7; margin: 0; }
.app-demo-note { font-size: 1rem; color: #575c50; margin: 32px 0 0; border-top: 1px solid #d3c9b3; padding-top: 20px; }
.app-experience.is-unlocked .app-puzzle-piece { cursor: default; }
.app-experience.is-unlocked .app-puzzle-target { box-shadow: 0 0 0 10px #e7ce9850, 0 0 64px #d8b46955; border-color: #947039; }
@media (prefers-reduced-motion: no-preference) {
  .app-experience.is-unlocked .app-infos { animation: app-information-in 650ms cubic-bezier(.2,.8,.2,1) both; }
  .app-experience.is-unlocked .app-puzzle-target { animation: app-unlock-light 900ms ease both; }
}
@keyframes app-information-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes app-unlock-light { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.12); } }
@media (max-width: 1100px) {
  .area-slide { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); }
  .area-picker { padding: 16px; gap: 10px; }
  .area-picker img { width: 48px; height: 48px; }
  .area-picker-number { display: none; }
  .app-info-heading { align-items: flex-start; flex-direction: column; gap: 24px; }
  .app-info-grid { gap: 26px; }
}
@media (max-width: 760px) {
  .area-slide { grid-template-columns: 1fr; min-height: 0; }
  .area-slide-photo { aspect-ratio: 4 / 3; }
  .area-slide-copy { padding: 28px; justify-content: flex-start; }
  .area-slide-number { margin-bottom: 18px; }
  .area-slide-copy h3 { font-size: clamp(30px, 7vw, 40px); margin-bottom: 18px; }
  .area-slide-copy p { margin-bottom: 16px; }
  .area-slide-tag { margin-top: auto; }
  .area-carousel-footer { gap: 12px; flex-wrap: wrap; padding: 18px 20px; }
  .area-carousel-position { gap: 8px; }
  .area-play { margin-left: auto; padding-inline: 8px; }
  .area-arrows { margin-left: auto; }
  .area-arrow { width: 48px; height: 48px; }
  .area-pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-picker { align-items: flex-start; min-height: 114px; flex-direction: column; padding: 16px; gap: 10px; }
  .area-picker img { width: 52px; height: 42px; }
  .area-cinema { border-radius: 20px; }
  .home-page .app-experience { grid-template-columns: 1fr; gap: 28px; }
  .app-puzzle-field { height: 330px; }
  .app-puzzle-caption { padding: 0 20px 26px; }
  .app-info-grid { grid-template-columns: 1fr; gap: 26px; }
  .app-info-grid article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 18px; }
  .app-info-grid h4 { align-self: center; margin: 0; }
  .app-info-grid p { grid-column: 1 / -1; }
  .app-info-heading { margin-bottom: 28px; }
  .app-info-heading .button { width: 100%; }
}
@media (max-width: 380px) {
  .area-carousel-footer { padding: 16px; }
  .area-carousel-position { width: 100%; }
  .area-play { margin-left: 0; }
  .area-slide-copy { padding: 24px; }
  .area-slide-copy h3 { font-size: 30px; }
  .app-info-heading .button { gap: 12px; }
}

/* refinement.css */
/* Puzzle Gym: klare Szenen, kurze Wege, lesbare Inhalte. */
:root{--header-clearance:120px;--scene-ink:#171b17;--scene-gold:#ddc18a}
.home-page .section{padding-block:clamp(36px,5vw,64px)}
.home-page .section-heading{margin-bottom:22px;gap:20px}
.home-page .section-heading h2,.home-page .course-feature .section-heading h2{font-size:clamp(32px,3.4vw,48px);line-height:1.1}
.home-page .intro{gap:28px 6%;padding-block:48px}
.home-page .welcome-story .intro-copy{margin-top:22px}
.home-page .intro-copy>p:last-child{font-size:20px;line-height:1.6;max-width:590px}
.home-page .welcome-image{height:clamp(280px,45svh,410px)}
.home-page .welcome-image img{object-position:center 52%}
.home-page .welcome-image figcaption{display:none}
.home-page .journey-map{gap:0;margin-top:0;border:1px solid #d8d1c1;border-radius:12px;overflow:hidden}
.home-page .journey-map a{min-height:74px;padding:16px 22px;border:0;border-radius:0;background:#f4f1e9}
.home-page .journey-map a+a{border-left:1px solid #d8d1c1}
.home-page .journey-map strong{font-size:18px}
/* One complete scene, edge to edge; content stays in normal flow when zoomed. */
.home-page .areas{padding-inline:0;padding-top:22px}
.home-page .areas .section-heading{display:flex;align-items:baseline;justify-content:space-between;padding-inline:var(--gutter);margin-bottom:18px}
.home-page .areas .section-heading h2{margin:0;font-size:38px}
.home-page .areas .section-heading>span{font-size:18px;color:#53564b}
.area-cinema,.area-viewport{border-radius:0;border-inline:0;box-shadow:none}
.area-slide{grid-template-columns:minmax(0,2fr) minmax(290px,1fr);min-height:0;height:clamp(230px,calc(100svh - var(--header-clearance) - 240px),550px)}
.area-slide-photo{height:100%}
.area-slide-photo img{display:block;object-position:center 48%}
.area-slide:first-child .area-slide-photo img{object-position:center 52%}
.area-slide-copy{padding:clamp(24px,3vw,46px)}
.area-slide-copy h3{font-size:clamp(30px,3.3vw,48px);margin:0 0 16px;line-height:1.08}
.area-slide-copy p{font-size:20px;line-height:1.5;margin:0}
.area-slide-tag{font-size:16px;margin-top:24px;padding:8px 12px}
.area-carousel-footer{padding:8px var(--gutter);gap:16px;min-height:64px;flex-wrap:nowrap}
.area-arrow{width:46px;height:46px;min-width:46px}
.area-arrows{gap:8px}
.area-play{min-width:46px;padding:8px}
.area-carousel-position strong{font-size:20px}
.area-pickers{grid-template-columns:repeat(5,minmax(0,1fr))}
.area-picker{padding:12px 18px;min-height:54px;justify-content:center;text-align:center;font-size:16px}
.area-mobile-select{display:none}
.home-page .more-areas{margin:28px var(--gutter) 0}
.home-page .more-areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:650px){.home-page .more-areas-grid{grid-template-columns:1fr}}
.area-locker-note{margin:0;padding:16px;border:0;grid-column:1/-1}
.area-locker-note img{height:70px;width:34px}
/* A compact, cinematic ad for the bar. */
.home-page .daily-section{display:block;padding:0;margin:0;width:100%;border:0;border-radius:0;background:#191a16}
.bar-banner{position:relative;display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,2fr);min-height:360px;height:clamp(360px,51svh,510px);overflow:hidden;background:radial-gradient(ellipse at 20% 80%,#58492d45,transparent 60%),#151813}
.bar-banner-copy{position:relative;z-index:2;align-self:center;padding:32px clamp(24px,3vw,52px);color:#fff}
.bar-banner-copy .eyebrow{color:#e4c98f;margin-bottom:16px}
.home-page .bar-banner h2{font-size:clamp(38px,3.7vw,58px);line-height:1.05;margin:0 0 18px;color:#fff}
.bar-banner h2 em{color:#e3c695}
.bar-banner-copy>p:not(.eyebrow){color:#e9e5db;font-size:20px;margin:0 0 22px}
/* Three visible product scenes, with the full motifs available below. */
.bar-shake-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;min-width:0;min-height:0;background:#c4a66b66}
.bar-shake{position:relative;isolation:isolate;min-width:0;margin:0;overflow:hidden;background:#171a15}
.bar-shake:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0b100bf5,transparent 46%),linear-gradient(180deg,#13171038,transparent 35%);box-shadow:inset 1px 0 0 #f8dfa633}
.bar-shake img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.13);transition:transform 700ms cubic-bezier(.2,.7,.3,1)}
.bar-shake figcaption{position:absolute;z-index:1;bottom:0;left:0;right:0;display:grid;gap:5px;padding:26px 12px;text-align:center;color:#fff9ee}
.bar-shake figcaption:before{content:'';width:34px;height:2px;margin:0 auto 10px;background:#e9c88b;box-shadow:0 0 15px #edbe7777}
.bar-shake figcaption span{font-size:16px;line-height:1.3;color:#efdbb0}
.bar-shake figcaption strong{font-size:clamp(20px,2vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.025em}
@media(hover:hover){.bar-shake:hover img{transform:scale(1.19)}}
@media(prefers-reduced-motion:reduce){.bar-shake img{transition:none}}
.home-page .special-shakes{margin:0;padding:0 var(--gutter);border:0;border-radius:0;background:#f1ece1}
.home-page .special-shakes>summary{padding:18px 0;min-height:80px}
.home-page .special-shakes .eyebrow{display:none}
.home-page .special-shakes strong{font-size:22px}
.home-page .shake-gallery{padding-block:20px}
.home-page .shake-card img{height:min(52svh,430px);object-fit:contain;background:#1a1c17}
/* Real course rooms: one image-led pair. */
.home-page .course-feature .section-heading p{font-size:18px;margin:14px 0 0}
.home-page .course-duo{gap:20px}
.home-page .course-tile{position:relative;height:clamp(250px,42svh,380px);min-height:0;padding:28px;display:flex;align-items:flex-end;overflow:hidden;border-radius:16px;background:#272a20}
.course-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;transition:transform 700ms}
.home-page .course-tile:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0a110df5,transparent 80%);z-index:1}
.home-page .course-tile:after{display:none}
.course-tile>div,.course-tile>.round-arrow{position:relative;z-index:2}
.home-page .course-tile h3{font-size:38px;color:#fff;margin:0 0 10px}
.home-page .course-tile p{font-size:18px;color:#f7f3e9;margin:0;max-width:none}
.home-page .course-tile .round-arrow{position:absolute;top:22px;right:22px;bottom:auto;background:#faf7ef;color:#20261d;border:0}
@media(hover:hover){.course-tile:hover>img{transform:scale(1.035)}}
.courses-hero{display:block;min-height:0;padding-block:70px 36px;background:#f8f6ef}
.courses-hero-copy{max-width:100%;padding:0}
.courses-hero-copy h1{font-size:clamp(40px,5vw,68px);max-width:850px}
.course-worlds{gap:24px}
.course-world{overflow:hidden;position:relative;padding:0 28px 28px!important}
.course-world-photo{width:calc(100% + 56px);max-width:none;margin:0 -28px 24px;height:clamp(240px,42svh,390px);object-fit:cover;object-position:center 48%}
.course-world h2{font-size:30px;margin-bottom:14px}
/* The app becomes its own cinematic scene. */
.home-page .app-experience{position:relative;isolation:isolate;grid-template-columns:1fr 1fr;gap:24px 6%;padding-block:40px;min-height:490px;background:radial-gradient(ellipse at 78% 45%,#6452334d,transparent 49%),linear-gradient(115deg,#121813,#222820);color:#fbf8ee;overflow:hidden}
.app-experience:before,.app-experience:after{content:'';position:absolute;pointer-events:none;z-index:-1;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#d5b67599,transparent)}
.app-experience:before{top:16px}.app-experience:after{bottom:16px}
.app-experience-intro h2{font-size:clamp(40px,5.5vw,76px);color:#fff;margin:0 0 22px}
.app-experience-intro h2 em{color:#e0c28b}
.home-page .app-experience-intro .eyebrow{color:#e0c28b}
.app-experience-intro>p{font-size:20px;color:#eeede4;line-height:1.5}
.app-experience-intro .app-invitation{font-size:18px;color:#ece8da;margin-top:24px;max-width:410px}
.app-experience .app-skip-puzzle{color:#e4c992;border-color:#b69b6a;margin-top:18px}
.app-puzzle-panel{border:0;box-shadow:none;background:none;border-radius:0}
.app-puzzle-field{height:320px}
.app-puzzle-orbit{border-color:#d4b97b4d}
.app-puzzle-orbit.orbit-two{border-color:#d4b97b26}
.app-puzzle-target{background:linear-gradient(135deg,#6a604132,#b1975c14);border:1px solid #c8a77088;box-shadow:0 0 90px #debb6626}
.app-puzzle-target svg{fill:#3e4030;stroke:#c5aa71}
.app-puzzle-state{color:#f8eed6;font-size:20px}
.app-puzzle-caption p{color:#d0cbbd}
.app-puzzle-piece svg{filter:drop-shadow(0 15px 18px #0009)}
.app-infos{grid-column:auto;border:1px solid #98805b77;border-radius:18px;background:#ffffff05;padding:26px;box-shadow:inset 0 1px 0 #d6bc8544}
.app-info-heading{display:flex;flex-direction:column;gap:20px;align-items:flex-start;margin:0 0 22px}
.app-info-heading h3{color:#fff;font-size:30px;line-height:1.2}
.app-info-heading .button{order:2;min-height:50px}
.app-info-grid{display:grid;grid-template-columns:1fr;gap:16px}
.app-info-grid article{display:grid;grid-template-columns:42px 1fr;gap:4px 16px;align-items:center;border:0;padding:0}
.app-feature-icon{grid-row:span 2;width:42px;height:42px;border-radius:10px;background:#e4c994;color:#282719}
.app-info-grid h4{font-size:20px;color:#fff;margin:0}
.app-info-grid p{grid-column:2;font-size:16px;color:#dfdcd1;line-height:1.5}
.app-demo-note{color:#d8d4c6;border-color:#d2b47a44;font-size:16px;margin-top:20px;padding-top:16px}
.readable-site .app-experience :focus-visible{outline-color:#f4dbab!important}
/* Less repeated copy, compact membership cards. */
.home-page .plan-visual{min-height:0;padding:24px 28px}
.home-page .plan-visual-copy{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%}
.home-page .plan-logo{margin:0;width:125px;height:40px;flex-shrink:0}
.home-page .plan-visual h3{font-size:30px;margin:0}
.home-page .plan-visual p{display:none}
.home-page .plan-details{padding:26px 28px}
.home-page .price strong{font-size:58px}
.home-page .price{margin-bottom:16px}
.home-page .feature-list{margin-block:20px;gap:9px}
.home-page .feature-list li{font-size:18px;line-height:1.4;padding-block:0}
.home-page .plan-opening-offer{padding:16px;margin-block:20px}
.home-page .reduced-price{padding-block:14px}
.home-page .pricing-note{max-width:100%;font-size:16px;line-height:1.6}
/* FAQ is a quiet reference grid; contact is a separate gold invitation. */
.home-page .faq-section{display:block;background:#fff;padding-block:44px}
.home-page .faq-section h2{font:600 clamp(28px,3vw,40px)/1.2 var(--font-body,Manrope,sans-serif);margin:0 0 28px;letter-spacing:-.04em}
.home-page .accordion{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;border-top:0;align-items:start}
.home-page .accordion details{border-top:1px solid #d6d9cf;border-bottom:0}
.home-page .accordion summary{font-size:18px;font-weight:600;min-height:76px;line-height:1.45;padding-block:18px}
.home-page .accordion p{font-size:18px;line-height:1.65;padding:0 0 22px}
.home-page .contact-section{background:linear-gradient(125deg,#ede3cc,#f8f5ec 65%);gap:6%;align-items:start;padding-block:54px;border-top:1px solid #cfc0a1}
.home-page .contact-section h2{font:600 clamp(36px,4.5vw,64px)/1.08 Manrope,sans-serif;letter-spacing:-.055em;margin-bottom:22px}
.home-page .contact-intro>p{font-size:20px;line-height:1.6}
.parent-download{margin-top:30px;max-width:470px;padding-top:24px;border-top:1px solid #b7a47e}
.parent-download strong{font-size:20px}.parent-download p{font-size:18px;line-height:1.6;margin:12px 0 16px}
.home-page .contact-form{padding:28px;background:#fffefa;border:1px solid #c5b797;border-radius:18px;box-shadow:0 16px 50px #4b3b180c;gap:18px;min-width:0}
.form-heading{display:flex;gap:16px;align-items:flex-start}.form-heading h3{font-size:26px!important;margin:0 0 8px!important}.form-heading p{font-size:16px;margin:0;line-height:1.5}
.form-symbol{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid #baa172;border-radius:50%;font-size:26px;color:#66502b}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.home-page .contact-form label{font-size:16px;color:#333b2e;line-height:1.5;gap:8px;min-width:0;margin:0}
.home-page .contact-form input,.home-page .contact-form select{font-family:inherit;font-size:18px;min-height:50px;padding:10px 12px;border:1px solid #898c80;border-radius:8px;background:#fff;width:100%;color:#222b1c}
.home-page .contact-form input:focus,.home-page .contact-form select:focus{border-color:#4e5b38}
.home-page .contact-form .form-check{display:flex;flex-direction:row;align-items:flex-start;gap:12px}
.home-page .contact-form input[type=checkbox]{width:22px;height:22px;min-height:22px;flex-shrink:0;accent-color:#65502a;margin-top:2px}
.contact-form a{color:#534325;text-decoration:underline;text-underline-offset:3px}
.form-privacy,.form-required,.form-extra p,.form-age-note{font-size:16px!important;line-height:1.6;margin:0!important}
.form-extra{padding:14px 0;border-block:1px solid #d7d0c0}.form-extra summary{font-size:16px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}.form-extra .form-grid{padding-block:16px}
.form-age-note{border-left:3px solid #9c753a;padding:10px 14px;background:#f7efd9}
.form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status:empty{display:none}.form-status{padding:14px;border:1px solid #a28859;border-radius:8px;font-size:18px;line-height:1.6;margin:0}.form-status[data-state=error]{border-color:#9e3927;background:#fff4ef;color:#7b281d}.form-status[data-state=success]{background:#f0f6e9;color:#334826}
.home-page .contact-form button:disabled{opacity:.65;cursor:wait}
.legal-page{padding:60px var(--gutter);max-width:980px;margin:auto}.legal-page h1{font-size:clamp(36px,5vw,60px);margin-bottom:32px}.legal-page h2{font-size:26px;margin:34px 0 18px}.legal-page h3{font-size:22px;margin:26px 0 16px}.legal-page p,.legal-page li,.legal-page address{font-size:18px;line-height:1.75}.legal-page ul{padding-left:24px}.legal-page a{text-decoration:underline}.legal-page .legal-card{background:#f2ecdf;padding:24px;border-radius:14px;border:1px solid #cec1a4}
[hidden]{display:none!important}
@media(max-width:900px){.area-slide{grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr)}.area-slide-copy h3{font-size:32px}.area-picker{padding:12px 8px}.home-page .plan-visual-copy{gap:12px}.home-page .plan-visual h3{font-size:26px}.home-page .plan-logo{width:95px}.form-grid{grid-template-columns:1fr}.home-page .contact-section{gap:32px}.home-page .contact-form{padding:24px}}
@media(max-width:760px){
.home-page .section{padding-block:32px}.home-page .areas{padding-top:12px}.home-page .areas .section-heading{margin-bottom:14px;flex-direction:row;align-items:center}.home-page .areas .section-heading h2{font-size:32px}.home-page .areas .section-heading>span{display:none}
.area-slide{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:0}
.area-slide-photo{height:clamp(145px,calc(100svh - var(--header-clearance) - 340px),285px);aspect-ratio:auto}
.area-slide-copy{padding:20px var(--gutter);justify-content:flex-start;min-height:180px}
.area-slide-copy h3{font-size:30px;line-height:1.1;margin-bottom:12px}.area-slide-copy p{font-size:18px;line-height:1.45;margin:0}.area-slide-tag{font-size:16px;margin-top:14px;padding:5px 9px}
.area-carousel-footer{padding:8px var(--gutter);display:flex;gap:8px;flex-wrap:wrap;min-height:62px}.area-carousel-position{display:none}.area-mobile-select{display:block;flex:1;min-width:0;margin:0}.area-mobile-select select{width:100%;font:600 16px/1.4 Manrope,sans-serif;background:#faf8f2;border:0;color:#353e2d;min-height:46px;padding:8px 18px 8px 0}.area-pickers{display:none}.area-play{margin:0;padding:8px;min-width:44px;min-height:46px}.area-play [data-play-label]{display:none}.area-arrows{margin-left:0}.area-arrow{width:44px;height:44px;min-width:44px}.area-arrows{gap:6px}
.home-page .intro{display:grid;gap:24px}.home-page .welcome-image{height:290px}.home-page .journey-map a{padding:14px 18px;min-height:66px}.home-page .journey-map a+a{border-left:0;border-top:1px solid #d8d1c1}
.home-page .daily-section{padding:0}.bar-banner{height:auto;min-height:0;display:block}.bar-banner-copy{padding:28px var(--gutter);max-width:none;height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.bar-banner-image{position:absolute;inset:0 0 0 35%;opacity:.7}.bar-banner-image:after{background:linear-gradient(90deg,#151813 0%,#15181350 65%),linear-gradient(0deg,#15181380,transparent)}.bar-banner-copy>p:not(.eyebrow){font-size:18px}.home-page .bar-banner h2{font-size:40px}
.home-page .course-duo{gap:16px}.home-page .course-tile{height:250px;padding:24px}.home-page .course-tile h3{font-size:34px}.home-page .course-tile p{font-size:18px}.home-page .course-feature .section-heading{gap:16px}
.home-page .app-experience{grid-template-columns:1fr;min-height:0;gap:8px;padding-block:36px}.app-experience-intro h2{font-size:40px;margin-bottom:16px}.app-experience-intro .eyebrow{margin-bottom:12px}.app-experience-intro .app-invitation{margin-top:16px;font-size:16px}.app-experience-intro>p{font-size:18px}.app-experience .app-skip-puzzle{margin-top:8px}.app-puzzle-field{height:240px}.app-puzzle-orbit{width:210px;height:210px}.app-puzzle-orbit.orbit-two{width:270px;height:270px}.app-puzzle-caption{padding:0 0 12px}.app-puzzle-state{display:none}.app-puzzle-caption p{font-size:16px}.app-experience.is-unlocked .app-experience-intro{display:none}.app-infos{padding:24px}.app-info-heading h3{font-size:28px}.app-info-heading .button{width:auto}.app-info-grid{gap:18px}.app-info-grid p{grid-column:2}
.home-page .price-grid{gap:20px}.home-page .plan-visual{padding:20px}.home-page .plan-visual-copy{gap:16px}.home-page .plan-visual h3{font-size:28px}.home-page .plan-logo{width:110px}.home-page .plan-details{padding:22px}.home-page .price strong{font-size:52px}.home-page .feature-list li{font-size:18px}
.home-page .faq-section{padding-block:32px}.home-page .faq-section h2{font-size:30px;margin-bottom:20px}.home-page .accordion{grid-template-columns:1fr}.home-page .accordion summary{font-size:18px;min-height:65px;padding-block:16px}.home-page .contact-section{padding-block:36px}.home-page .contact-section h2{font-size:40px}.home-page .contact-form{padding:22px}.form-heading{gap:12px}.form-symbol{display:none}.form-grid{gap:16px}.form-heading h3{font-size:24px!important}.parent-download{margin-top:24px}
.course-world-photo{height:260px}.course-worlds{gap:24px}.courses-hero{padding-block:44px 24px}.course-world h2{font-size:28px}.legal-page{padding-block:40px}
}
@media(max-width:380px){.area-play{display:none}.home-page .plan-visual h3{font-size:25px}.home-page .plan-logo{width:95px}.home-page .contact-form{padding:18px}.bar-banner-copy{max-width:100%}.bar-banner-copy .eyebrow{font-size:16px}.home-page .bar-banner h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.course-tile>img,.app-puzzle-piece{transition:none!important}}
.home-page .training-route{display:grid;grid-template-columns:1fr 1fr;gap:6%;background:#edf1e8;border-block:1px solid #cbd4bf;align-items:center}
.training-route h2{font-size:clamp(36px,4vw,56px);line-height:1.1;margin-bottom:22px}.training-route .route-distance{font-size:23px;line-height:1.5;font-weight:600;color:#34492a;margin-top:28px}
.route-planner{display:flex;flex-direction:column;gap:18px}.route-planner>label{display:flex;flex-direction:column;gap:10px;font-size:18px;font-weight:600}.route-planner input{border:1px solid #89977b;background:#fff;padding:14px 16px;border-radius:8px;font:18px Manrope,sans-serif;width:100%;min-width:0}.route-privacy,.route-external{font-size:16px;line-height:1.6;margin:0;color:#47533c}.route-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.route-options a{background:#fbfcf8;border:1px solid #a4af96;border-radius:12px;padding:16px 10px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;transition:background .2s,transform .2s}.route-options a:hover{background:#dbe5cd;transform:translateY(-3px)}.route-options strong{font-size:18px}.route-options a>span:first-child{font-size:28px;color:#526539}.route-options a>span:last-child{font-size:16px}.route-planner>.button{align-self:flex-start}.route-planner>.text-link{align-self:flex-start;border:0;background:transparent;font-size:16px;text-decoration:underline}
@media(max-width:1100px){.route-options{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.home-page .training-route{grid-template-columns:1fr;gap:24px}.training-route h2{font-size:36px}.training-route .route-distance{font-size:22px;margin-top:20px}.route-options a{gap:6px;padding:12px}.route-options a>span:first-child{display:none}}

.app-experience-intro h2{font-size:clamp(30px,3.5vw,48px);line-height:1.15;margin-bottom:20px}.app-experience-intro .app-subtitle{font-size:clamp(36px,4.4vw,60px);line-height:1.1;font-weight:500;letter-spacing:-.045em;color:#fff;margin:0 0 24px}.app-subtitle em{color:#e0c28b}.home-page .app-experience-intro .eyebrow{display:none}
@media(max-width:760px){.app-experience-intro h2{font-size:30px;margin-bottom:12px}.app-experience-intro .app-subtitle{font-size:36px;margin-bottom:18px}.app-experience-intro .app-subtitle br{display:none}}

[data-form-step]{display:flex;flex-direction:column;gap:18px}.form-progress{font-size:16px;font-weight:700;color:#675331;border-block:1px solid #dfd5be;padding-block:12px;margin:0}.form-actions{display:flex;justify-content:space-between;gap:12px;align-items:center}.form-actions .button{flex:1}.form-actions .text-link{background:transparent;border:0;font-size:16px;padding:12px 0}.home-page .contact-form{align-self:start}
/* Edle, fühlbare Aktionen: ruhiges Metall, klare Kontur, großzügige Klickfläche. */
.readable-site .button,.readable-site .header-cta{position:relative;isolation:isolate;min-height:54px;font-size:17px;font-weight:700;letter-spacing:-.02em;border-radius:14px;transition:transform 220ms ease,box-shadow 220ms ease,background-position 500ms ease,border-color 220ms ease}
.readable-site .button-primary{background:linear-gradient(115deg,#f1dfb5 0%,#d5b982 34%,#efddae 60%,#c8a369 100%);background-size:180% 100%;color:#282619;border:1px solid #aa8b55;box-shadow:inset 0 1px 0 #fff4d7,inset 0 -1px 0 #a0855050,0 5px 12px #6b502318;padding:15px 24px}
.readable-site .button-primary>span[aria-hidden]{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#fff9e63d;border:1px solid #76572144;font-size:20px;transition:transform 220ms ease,background 220ms ease}
.readable-site .header-cta{background:linear-gradient(120deg,#343a2c,#1c231a);border:1px solid #555f48;color:#fffef4;box-shadow:inset 0 1px 0 #f4ecd124,0 5px 14px #17220d18;padding:13px 20px}
.readable-site .button-secondary,.readable-site .button-ghost{background:#fffdf6;border:1px solid #a29980;color:#30362a;box-shadow:inset 0 1px 0 #fff,0 3px 10px #34301c08}
.readable-site .area-arrow{background:linear-gradient(135deg,#faf1d7,#dcc399);box-shadow:inset 0 1px 0 #fff7e6,0 3px 8px #49351c14;border:1px solid #a28b63;border-radius:12px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.readable-site .button:hover,.readable-site .header-cta:hover{transform:translateY(-2px)}.readable-site .button-primary:hover{background-position:100% 0;box-shadow:inset 0 1px 0 #fff7e1,0 8px 22px #74552729;border-color:#816532}.readable-site .button-primary:hover>span[aria-hidden]{transform:translateX(2px);background:#fff9e673}.readable-site .header-cta:hover{box-shadow:inset 0 1px 0 #efd08b66,0 7px 18px #18211026;border-color:#aa8e58}}
.readable-site .button:active,.readable-site .header-cta:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #5d4b2726}
@media(max-width:420px){.readable-site .header-cta{min-height:44px;border-radius:10px;padding:10px 16px}.readable-site .button{font-size:17px;padding:13px 18px;min-height:52px}}
@media(prefers-reduced-motion:reduce){.readable-site .button,.readable-site .header-cta,.readable-site .button-primary>span{transition:none;transform:none}}

/* Eröffnung: eine klare, farbige Angebotsbühne direkt am Einstieg. */
.home-page .opening-ribbon{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 32px;align-items:center;margin-top:18px;padding:22px var(--gutter);border:0;border-block:1px solid #b18a40;background:linear-gradient(108deg,#edc76a 0%,#f8e5a5 46%,#dfb45b 76%,#efd0a7 100%);color:#29291e;box-shadow:inset 0 1px #fff1bb,0 8px 24px #8a632515}
.opening-ribbon:before{content:'';position:absolute;z-index:-1;inset:-70% -20%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#fff9dd99 49%,transparent 57%);transform:translateX(-45%);animation:opening-glint 1.7s .3s ease-out both}
.opening-ribbon-label{display:inline-flex;align-items:center;gap:12px;width:fit-content;padding:12px 16px;border:1px solid #36422d;border-radius:10px;background:#263421;color:#fff1c7;font-size:16px;font-weight:700;box-shadow:0 4px 12px #5039181c}
.opening-ribbon-label>span{font-size:26px;line-height:1;color:#f2d284}
.home-page .opening-ribbon p{display:flex;flex-direction:column;gap:5px;margin:0;line-height:1.4;color:#29291e}
.home-page .opening-ribbon p strong{font-size:clamp(22px,2vw,30px);letter-spacing:-.035em;font-weight:800}
.home-page .opening-ribbon p>span{font-size:18px;font-weight:500}
.home-page .opening-ribbon>a{gap:12px;font-size:17px;line-height:1.35;text-decoration:none;border-bottom:1px solid #4e442a;padding-block:5px;min-height:46px;white-space:nowrap}
.opening-ribbon>a>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #6d582d;border-radius:50%;background:#fff4cd5e;font-size:20px}
@keyframes opening-glint{to{transform:translateX(35%)}}
@media(max-width:1100px){.home-page .opening-ribbon{grid-template-columns:minmax(0,1fr) auto;gap:12px 24px}.opening-ribbon-label{grid-column:1/-1;padding:7px 12px}}
@media(max-width:760px){.home-page .opening-ribbon{grid-template-columns:1fr;gap:12px;margin-top:12px;padding-block:18px}.opening-ribbon-label{font-size:16px}.home-page .opening-ribbon p strong{font-size:24px}.home-page .opening-ribbon p>span{font-size:17px;max-width:340px}.home-page .opening-ribbon>a{justify-self:start;font-size:16px;min-height:44px}.opening-ribbon>a>span{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.opening-ribbon:before{animation:none;transform:none}}
/* Ruhiger Markenabschluss mit klar getrennten Wegen und großen Links. */
.readable-site .premium-footer{position:relative;max-width:none;width:100%;margin:0;padding:56px var(--gutter) 20px;background:radial-gradient(ellipse at 0 0,#35402a80,transparent 60%),#192119;color:#f6f4ea;border-top:3px solid #c9ab70}
.premium-footer .footer-main{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
.premium-footer .footer-identity{min-width:0}.premium-footer .footer-identity .brand{display:flex;width:235px;max-width:100%;padding:0;min-height:0}.premium-footer .footer-identity .logo-crop{width:100%;filter:grayscale(1) invert(1) sepia(.35) brightness(1.8);mix-blend-mode:screen}.premium-footer .footer-identity p{font-size:27px;line-height:1.25;letter-spacing:-.03em;margin:26px 0 0;color:#dfc28f}
.premium-footer .footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}.premium-footer .footer-column h2{font-size:19px;font-weight:700;line-height:1.4;color:#e6c98e;letter-spacing:0;margin:0 0 16px}.premium-footer .footer-column>a{font-size:17px;line-height:1.45;min-height:44px;padding:8px 0;gap:12px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:color 180ms,text-decoration-color 180ms}.premium-footer .footer-column>a:hover{color:#f3d89f;text-decoration-color:#aa8b57}.premium-footer .footer-column address{font-size:17px;font-style:normal;line-height:1.8;margin:0 0 6px;color:#eeeee4}.premium-footer .footer-column address strong{font-weight:600}.premium-footer .footer-email{overflow-wrap:anywhere}
.premium-footer .footer-bottom{border-top:1px solid #63735475;padding-top:18px;gap:16px 24px;color:#d6dccd;font-size:16px;align-items:center}.premium-footer .footer-bottom nav{gap:4px 24px;flex:1;justify-content:center}.premium-footer .footer-bottom a{font-size:16px;color:#dce1d4;min-height:44px}.premium-footer .footer-bottom a:hover{color:#f4d69c}.premium-footer .back-top{display:grid!important;flex:0 0 48px;width:48px;height:48px;margin-left:0;justify-content:center;background:#2a3625;border:1px solid #748062;color:#ecd099!important;border-radius:12px;font-size:24px!important;transition:background 180ms,border-color 180ms}.premium-footer .back-top:hover{background:#35422d;border-color:#d5b981}.readable-site .premium-footer a:focus-visible{outline:3px solid #f7d784;outline-offset:5px}
@media(max-width:1100px){.premium-footer .footer-main{grid-template-columns:1fr 1fr;gap:32px 48px}.premium-footer .footer-identity .brand{width:210px}.premium-footer .footer-identity p{font-size:26px}.premium-footer .footer-bottom nav{justify-content:flex-start;order:3;flex-basis:100%}.premium-footer .footer-bottom>.back-top{margin-left:auto}}
@media(max-width:540px){.readable-site .premium-footer{padding-top:36px}.premium-footer .footer-main{grid-template-columns:1fr 1fr;gap:30px 18px;padding-bottom:28px}.premium-footer .footer-identity{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}.premium-footer .footer-identity .brand{width:158px}.premium-footer .footer-identity p{font-size:20px;margin:0}.premium-footer .footer-column h2{font-size:18px;margin-bottom:10px}.premium-footer .footer-column>a,.premium-footer .footer-column address{font-size:16px}.premium-footer .footer-visit{grid-column:1/-1;border-top:1px solid #63735475;padding-top:24px}.premium-footer .footer-bottom nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;align-items:start}.premium-footer .footer-bottom nav a{align-items:flex-start;padding-block:10px}.premium-footer .footer-bottom{font-size:16px}}
@media(max-width:360px){.premium-footer .footer-identity{display:block}.premium-footer .footer-identity p{margin-top:18px;font-size:22px}}
@media(forced-colors:active){.opening-ribbon-label,.readable-site .premium-footer{border:1px solid CanvasText}.premium-footer .footer-identity .logo-crop{filter:none;mix-blend-mode:normal}}

/* Areas als eigene, bildschirmfüllende Galerie inszenieren. */
.home-page .areas{background:linear-gradient(150deg,#f2eee2,#fcfbf7 58%);border-top:1px solid #d9ccae;padding-top:24px}
.home-page .areas .section-heading{align-items:center;gap:24px;margin-bottom:22px}
.areas-heading-title{display:flex;align-items:center;gap:20px;min-width:0}
.areas-title-mark{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border:1px solid #b29860;border-radius:16px;background:linear-gradient(135deg,#f6ebce,#d4b57c);box-shadow:inset 0 1px 0 #fff9e9,0 5px 18px #70572a13}
.areas-title-mark svg{width:44px;height:44px;fill:#574323;filter:drop-shadow(0 1px 0 #fff4)}
.home-page .areas .section-heading h2{font-size:clamp(48px,5.2vw,76px);line-height:1.05;letter-spacing:-.055em;color:#242b21}
.home-page .areas .section-heading h2 em{color:#83602c}
.home-page .areas .section-heading>span{font-size:20px;line-height:1.45;color:#535846;max-width:300px;padding-left:26px;border-left:1px solid #baa578}
.area-cinema{border-block:1px solid #b49a64;box-shadow:0 18px 42px #3e331413}
.area-slide{height:clamp(230px,calc(100svh - var(--header-clearance) - 285px),550px)}
.area-slide-copy{position:relative;isolation:isolate;background:radial-gradient(ellipse at 100% 0,#7e66354d,transparent 68%),#24291f;border-left:1px solid #bfa16e88;color:#fffdf4;padding:clamp(24px,3vw,44px)}
.area-slide-copy:before{content:'';position:absolute;pointer-events:none;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#dcb975,#fff1c6,#8d7445)}
.area-slide-copy:after{content:'';position:absolute;z-index:-1;pointer-events:none;right:20px;bottom:20px;width:70px;height:70px;border-right:1px solid #c6a66a66;border-bottom:1px solid #c6a66a66;border-radius:0 0 12px 0}
.area-slide-copy h3{font-size:clamp(30px,3.3vw,48px);font-weight:500;color:#fffaf0;letter-spacing:-.04em;text-wrap:balance}
.area-slide-copy p{color:#e8e9df}
.area-slide-tag{background:#dac08c1a;border:1px solid #bfa16e88;color:#f1dcae;border-radius:8px;padding:7px 12px}
.area-carousel-footer{background:#f4f0e5;border-top:1px solid #bfa572;box-shadow:inset 0 1px 0 #fff;min-height:64px}
.area-carousel-position strong{font-size:24px;color:#725626;font-variant-numeric:tabular-nums}
.area-play{border-color:#d0c4a9;background:#fffdf6;border-radius:10px}
.area-pickers{background:#d0c1a1;border-top:1px solid #c0aa7e}
.area-picker{background:linear-gradient(160deg,#fffef9,#f1eee4);font-weight:600;transition:background 220ms,color 220ms;gap:10px}
.area-picker:before{content:'';width:7px;height:7px;flex:0 0 7px;border:1px solid #9c895f;border-radius:50%;transition:background 220ms,box-shadow 220ms}
.area-picker[aria-current="true"]{background:linear-gradient(135deg,#ecdcaf,#d4b57b);color:#302a1b;box-shadow:inset 0 1px 0 #fff6db}
.area-picker[aria-current="true"]:before{background:#67502b;border-color:#67502b;box-shadow:0 0 0 4px #f8edcc88}
.area-picker[aria-current="true"]:after{background:#796033;height:3px;left:16px;right:16px}
@media(hover:hover){.area-picker:hover{background:#e8dcc1;color:#292e24}.area-picker:hover:before{background:#927443}}
/* Symmetrische Tarifkarten: Logo, Preis, Leistungen und Aktion auf einer Achse. */
.home-page .price-card{text-align:center}
.home-page .plan-visual{padding-block:20px}
.home-page .plan-visual-copy{flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center}
.home-page .plan-logo{width:140px;height:44px;margin:0 auto}
.home-page .plan-visual h3{font-size:30px;text-align:center}
.home-page .plan-details{display:flex;flex-direction:column;flex:1;text-align:center}
.home-page .price{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.home-page .price .price-amount{display:flex;align-items:baseline;justify-content:center;gap:7px;line-height:1}
.home-page .price-amount strong{font-size:58px;font-weight:600;line-height:1;letter-spacing:-.065em;font-variant-numeric:lining-nums tabular-nums}
.home-page .price-amount>span{font-size:30px;font-weight:500}
.home-page .price>small{margin:0;max-width:none;font-size:16px;text-align:center}
.home-page .reduced-price{justify-items:center;text-align:center}
.home-page .feature-list li{display:block;text-align:center}
.home-page .feature-list li:before{display:inline;margin-right:9px}
.home-page .plan-opening-offer{justify-items:center;text-align:center}
.home-page .price-card .button{justify-content:center}
@media(max-width:900px){.home-page .areas .section-heading h2{font-size:52px}.home-page .areas .section-heading>span{max-width:245px;font-size:18px}.areas-title-mark{flex-basis:48px;width:48px;height:48px;border-radius:13px}.areas-title-mark svg{width:38px;height:38px}}
@media(max-width:760px){
 .home-page .areas{padding-top:20px}.home-page .areas .section-heading{margin-bottom:18px;gap:12px}.areas-heading-title{gap:14px}.home-page .areas .section-heading h2{font-size:44px;line-height:1.05}.areas-title-mark{width:44px;height:44px;flex-basis:44px;border-radius:12px}.areas-title-mark svg{width:34px;height:34px}
 .area-slide{height:auto;min-height:0}.area-slide-photo{height:clamp(135px,calc(100svh - var(--header-clearance) - 380px),265px)}.area-slide-copy{padding:18px var(--gutter);min-height:180px;border-left:0}.area-slide-copy h3{font-size:30px;margin-bottom:10px;line-height:1.1;text-wrap:initial}.area-slide-copy p{font-size:18px;line-height:1.45}.area-slide-tag{padding:5px 9px;margin-top:12px}.area-slide-copy:after{width:44px;height:44px;right:16px;bottom:16px}
 .area-mobile-select select{background:transparent;color:#343b2e}.area-carousel-footer{min-height:62px}
 .home-page .plan-visual{padding-block:20px}.home-page .plan-visual-copy{gap:10px}.home-page .plan-logo{width:130px;height:42px}.home-page .plan-visual h3{font-size:28px}.home-page .price-amount strong{font-size:52px}
}
@media(max-width:360px){.home-page .areas .section-heading h2{font-size:39px}.areas-heading-title{gap:10px}.areas-title-mark{flex-basis:40px;width:40px;height:40px}.area-slide-copy h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.area-picker,.area-picker:before{transition:none}}
@media(forced-colors:active){.area-slide-copy,.areas-title-mark,.area-picker[aria-current="true"]{border:1px solid CanvasText}.areas-title-mark svg{fill:CanvasText}}

/* Keep all three shakes on screen, including on narrow phones. */
@media(min-width:761px) and (max-width:1050px){.bar-banner{grid-template-columns:minmax(280px,.95fr) minmax(0,1.65fr)}.bar-banner-copy{padding:28px 24px}.home-page .bar-banner h2{font-size:38px}.bar-shake figcaption strong{font-size:20px}}
@media(max-width:760px){
 .bar-banner-copy{padding:24px var(--gutter)}
 .bar-banner-copy .eyebrow{margin-bottom:10px}
 .home-page .bar-banner h2{font-size:36px;margin-bottom:12px}
 .bar-banner-copy>p:not(.eyebrow){margin-bottom:16px;line-height:1.4}
 .bar-shake-trio{height:clamp(240px,32svh,300px)}
 .bar-shake img{transform:scale(1.45);object-position:50% 64%}
 .bar-shake figcaption{padding:18px 5px;gap:4px}
 .bar-shake figcaption strong{font-size:clamp(16px,4.3vw,22px)}
 .bar-shake figcaption:before{margin-bottom:5px;width:24px}
}

/* Das Angebot begleitet die Tarifwahl als schmale Information. */
.home-page .opening-offer-compact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 32px;align-items:center;padding:18px 24px;margin:0 0 24px;border:1px solid #d7c69f;border-radius:12px;background:linear-gradient(110deg,#f5eddc,#faf6ec);box-shadow:none;color:#302f26}
.home-page .opening-offer-compact h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;line-height:1.4;letter-spacing:0;margin:0}
.home-page .opening-offer-compact h3>span{color:#81652e;font-size:25px;line-height:1}
.home-page .opening-offer-compact>p{display:grid;gap:4px;margin:0;max-width:none;line-height:1.45;color:#302f26}
.home-page .opening-offer-compact>p strong{font-size:20px;font-weight:600;letter-spacing:-.015em}
.home-page .opening-offer-compact>p>span{font-size:16px;color:#5a5140}
@media(max-width:760px){.home-page .opening-offer-compact{grid-template-columns:1fr;gap:9px;padding:16px 18px;margin-bottom:20px}.home-page .opening-offer-compact h3{font-size:16px}.home-page .opening-offer-compact>p strong{font-size:18px}}

/* Marken-Icon für die Einladung ins Gym. */
.puzzle-link-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}
.puzzle-link-icon svg{display:block;width:24px;height:24px;fill:currentColor}
.readable-site .header-cta>.puzzle-link-icon{color:#e6c98e}
.home-page .opening-ribbon>a>.puzzle-link-icon{border:0;background:transparent;border-radius:0}
.premium-footer .puzzle-link-icon svg{width:20px;height:20px}
@media(max-width:760px){
 .readable-site .header-cta{min-height:44px;padding:8px 16px;gap:12px;border:1px solid #c9b78e;border-radius:10px;background:linear-gradient(110deg,#fffcf5,#f2ecdd);color:#34392c;font-size:16px;font-weight:600;box-shadow:none;letter-spacing:0}
 .readable-site .header-cta>.puzzle-link-icon{color:#80632d}
 .readable-site .header-cta .puzzle-link-icon svg{width:22px;height:22px}
 .readable-site .header-cta:hover{background:#efe5cf;border-color:#a58b56;box-shadow:none}
 .readable-site .header-cta:active{background:#e9ddc4;box-shadow:none}
}
@media(forced-colors:active){.puzzle-link-icon svg{fill:ButtonText}.readable-site .header-cta{border-color:ButtonText}}

.form-grid .form-field-full{grid-column:1/-1}
.home-page .contact-form input[type=date]{min-width:0;max-width:100%;appearance:none}


/* Legal pages: draft notice and the points that still need a decision. */
.legal-note{border:1px solid #b59b68;border-left:4px solid #b59b68;background:linear-gradient(120deg,#f8efdb,#f1e3c6);border-radius:14px;padding:18px 20px;margin:0 0 28px;font-size:1.125rem;line-height:1.6}
.legal-open{display:inline;background:#f3e2bc;box-shadow:inset 0 -2px 0 #b59b68;border-radius:4px;padding:1px 5px;font-weight:600;color:#4a3c1e}

/* Trainerbegleitung beim Probetraining: eine Entscheidung, zwei gleichwertige Antworten.
   Keine ist vorausgewählt — wer fragt, soll auch eine Antwort bekommen. */
.contact-form .form-choice{border:1px solid #c5b797;border-radius:12px;padding:16px 18px 14px;margin:0;
 display:flex;flex-direction:column;gap:12px;background:#fdfcf7;min-width:0}
.contact-form .form-choice legend{float:left;width:100%;padding:0;margin:0 0 4px;font-size:16px;color:#333b2e;line-height:1.5}
.contact-form .form-choice .form-check{margin:0;cursor:pointer}
.contact-form .form-choice input[type=radio]{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:#7a6a3f}
.contact-form .form-hint{font-size:14px;color:#5c5340;margin:0}

/* Probetraining: klare Schritte und große, gleichwertige Auswahlflächen. */
#kontakt .contact-form{padding:clamp(22px,2.5vw,36px);border-radius:24px;background:linear-gradient(145deg,#fffdf7,#f6efdf);border:1px solid #c4b18c;box-shadow:0 20px 60px #4b3b1812;display:flex;flex-direction:column;gap:24px}
#kontakt .contact-form [hidden]{display:none!important}
#kontakt .form-heading{align-items:center;padding-bottom:4px}
#kontakt .form-heading h3{font-size:clamp(24px,2.1vw,30px)!important;letter-spacing:-.035em;line-height:1.2}
#kontakt .form-heading p{color:#686052;font-size:16px}
#kontakt .form-symbol{background:#efe1c2;border:0;color:#725832;flex:0 0 48px;height:48px;border-radius:14px}
#kontakt .form-progress{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;border:0}
#kontakt .form-progress li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:3px solid #ded5c5;color:#786e5b;font-size:16px;line-height:1.35}
#kontakt .form-step-number{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#ece6da;font-size:14px;font-weight:700}
#kontakt .form-progress [aria-current=step]{color:#292b28;border-color:#a48650}
#kontakt .form-progress [aria-current=step] .form-step-number{background:#292c2d;color:#f4e4c0}
#kontakt .form-progress .is-complete{color:#6d5732;border-color:#c7ac75}
#kontakt .form-progress .is-complete .form-step-number{background:#ead8ae;color:#56401f}
#kontakt [data-form-step]{gap:22px}
#kontakt .form-choice{display:block;border:0;background:transparent;padding:0;margin:0}
#kontakt .form-choice legend{float:none;font-size:19px;font-weight:700;color:#2d302b;margin:0 0 14px;line-height:1.4}
#kontakt .form-choice-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#kontakt .form-choice-option{position:relative;display:flex;align-items:flex-start;gap:12px;padding:18px 16px;border:1px solid #c9bda5;border-radius:14px;background:#fffefb;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}
#kontakt .form-choice-option>span{display:flex;flex-direction:column;gap:7px;min-width:0}
#kontakt .form-choice-option strong{font-size:17px;line-height:1.4;color:#30322c}
#kontakt .form-choice-option>span>span{font-size:16px;font-weight:400;color:#625b4d;line-height:1.5}
#kontakt .form-choice-option input[type=radio]{appearance:auto;min-width:20px;width:20px;height:20px;min-height:20px;flex:0 0 20px;padding:0;margin:3px 0 0;accent-color:#836332;box-shadow:none}
#kontakt .form-choice-option:has(input:checked){border-color:#94733a;background:linear-gradient(135deg,#f6eacf,#ebd5a8);box-shadow:inset 0 0 0 1px #94733a}
#kontakt .form-choice-option:focus-within{outline:2px solid #795a25;outline-offset:3px}
#kontakt .form-hint{font-size:16px;color:#71644e;line-height:1.55;margin:12px 0 0}
#kontakt .form-extra{border:1px solid #ccbea3;border-radius:14px;padding:0;background:#fffaf0}
#kontakt .form-extra summary{padding:16px 18px;font-weight:600;align-items:center;line-height:1.5;min-height:58px}
#kontakt .form-extra summary>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#ede1c9;color:#725a30;font-size:21px}
#kontakt .form-extra[open] summary>span{transform:rotate(45deg)}
#kontakt .form-extra .form-grid{padding:0 18px 16px;grid-template-columns:1fr 1fr}
#kontakt .form-extra>p{padding:0 18px 18px;color:#686052}
#kontakt .contact-form input:not([type=radio]):not([type=checkbox]),#kontakt .contact-form select{font:inherit;font-size:16px;min-height:52px;padding:13px 14px;background:#fffef9;border-color:#bdae91;border-radius:10px}
#kontakt .contact-form input:focus-visible,#kontakt .contact-form select:focus-visible{outline:2px solid #94733a;outline-offset:2px}
#kontakt .form-check{font-weight:400;line-height:1.6;gap:12px}
#kontakt .form-check input{margin-top:3px}
#kontakt .form-privacy{color:#716858}
#kontakt .form-actions{padding-top:18px;border-top:1px solid #d9ccb3;gap:20px}
#kontakt .form-actions .button{margin:0;min-height:56px}
#kontakt .form-actions .text-link{flex:0 0 auto;color:#655236;font-weight:600;min-height:48px}
@media(hover:hover){#kontakt .form-choice-option:hover{border-color:#a48b5d;background:#f8efd9}}
@media(max-width:1100px) and (min-width:761px),(max-width:480px){#kontakt .form-choice-options{grid-template-columns:1fr}}
@media(max-width:480px){#kontakt .contact-form{padding:22px 18px;gap:20px;border-radius:20px}#kontakt .form-progress{gap:10px}#kontakt .form-progress li{align-items:flex-start;gap:8px}#kontakt .form-progress li>span:last-child{padding-top:3px}#kontakt .form-extra .form-grid{grid-template-columns:1fr}#kontakt .form-actions{flex-wrap:wrap;gap:12px}#kontakt .form-actions .button{flex:1 0 100%}#kontakt .form-choice-option{padding:16px}}
@media(prefers-reduced-motion:reduce){#kontakt .form-choice-option{transition:none}}

/* Adresse, Anfahrt und Öffnungszeiten erhalten eigene, lesbare Bereiche. */
.home-page #kontakt{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);scroll-margin-top:150px}
#kontakt .contact-intro{min-width:0}
#kontakt .contact-location{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;margin:28px 0 12px;padding:0;border:1px solid #c4af86;border-radius:20px;background:#fff9ed75;overflow:hidden}
#kontakt .contact-address-block{padding:24px 26px}
#kontakt .contact-address-block h3,#kontakt .opening-hours h3{font-size:19px;font-weight:700;letter-spacing:-.025em;margin:0 0 14px;line-height:1.4;color:#35352e}
#kontakt .contact-location address{font-size:17px;line-height:1.75;margin:0}
#kontakt .contact-location address strong{font-weight:600}
#kontakt .contact-location .text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:46px;margin-top:18px;padding:9px 16px;border:1px solid #aa9160;border-radius:10px;background:#fff8e8;color:#634d27;font-size:16px;font-weight:600}
#kontakt .opening-hours{padding:24px 26px;border-top:1px solid #c9b692;background:#ffffff30;min-width:0}
#kontakt .opening-hours dl{display:grid;gap:0;margin:0}
#kontakt .opening-hours dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:18px;padding:10px 0;border-bottom:1px solid #c6b49366}
#kontakt .opening-hours dl>div:last-child{padding-bottom:0;border:0}
#kontakt .opening-hours dt{font-size:16px;color:#6d624e;font-weight:400}
#kontakt .opening-hours dd{margin:0;font-size:17px;font-weight:600;color:#34362f;white-space:nowrap;font-variant-numeric:tabular-nums}
#kontakt .contact-email{display:inline-flex;gap:16px;align-items:center;font-size:17px;margin:0;padding:12px 0;border-bottom:0;color:#5c4826}
#kontakt .parent-download{max-width:none;margin-top:18px;padding:20px 0 0;border-color:#c4ac81}
#kontakt .parent-download strong{font-size:17px}
#kontakt .parent-download p{font-size:16px;margin:8px 0 12px;line-height:1.65;color:#645b49}
#kontakt .parent-download .text-link{font-size:16px}
@media(max-width:900px){.home-page #kontakt{grid-template-columns:1fr}.home-page #kontakt .contact-intro{padding:0}#kontakt .contact-location{max-width:none}}
@media(max-width:480px){#kontakt .contact-address-block,#kontakt .opening-hours{padding:21px 18px}#kontakt .opening-hours dl>div{gap:10px}#kontakt .opening-hours dd{font-size:16px}.home-page #kontakt{scroll-margin-top:170px}}
/* Probetraining: Ablauf statt Trainerwahl, genaue Uhrzeit */
#kontakt .form-intro-note{border:1px solid #c5b797;border-radius:12px;padding:16px 18px;background:#faf7ef;margin:0 0 18px}
#kontakt .form-intro-note strong{display:block;font-size:17px;color:#2d302b;margin-bottom:6px}
#kontakt .form-intro-note p{margin:0;font-size:15px;line-height:1.6;color:#4a4638}
#kontakt [data-time-hint]{margin:8px 0 16px!important}
#kontakt input[type=time]{min-height:48px}

/* Elternformulare (02.11.2026): Probetraining und Mitgliedschaft zur Wahl */
.parent-download-wahl{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.parent-download-wahl li{display:grid;gap:4px;margin:0}
.parent-download-wahl small{font-size:15px;line-height:1.5;color:#645b49}
#kontakt .parent-download-wahl .text-link{font-size:16px}
.eltern-wahl{display:flex;flex-wrap:wrap;gap:12px}
.eltern-wahl .button{white-space:normal;text-align:left}

/* mobile-icons.css */
/* Mobile action icons use the same puzzle silhouette as the app. */
i.responsive-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;font-style:normal;line-height:1;width:auto;height:auto;padding:0;background:transparent;border:0;border-radius:0;font-weight:inherit}
i.responsive-icon>.desktop-arrow{display:inline;font:inherit;line-height:inherit;color:inherit;text-transform:none}
i.responsive-icon>.mobile-puzzle-icon{display:none}
@media(max-width:760px){
 i.responsive-icon>.desktop-arrow{display:none}
 i.responsive-icon>.mobile-puzzle-icon{display:block;width:22px;height:22px;flex:0 0 22px;fill:currentColor}
 .readable-site .form-actions [data-form-back]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
 .readable-site .form-actions [data-form-back][hidden]{display:none}
 .readable-site .area-arrow{display:inline-flex;align-items:center;justify-content:center}
 /* Directional controls stay recognizable in the Areas carousel. */
 .readable-site .area-arrow .responsive-icon>.desktop-arrow{display:inline;font-size:24px}
 .readable-site .area-arrow .responsive-icon>.mobile-puzzle-icon{display:none}
 .readable-site .area-mobile-select select{appearance:auto;background-image:none;padding-right:12px!important}
 .readable-site .back-top .mobile-puzzle-icon,.readable-site .round-arrow .mobile-puzzle-icon{width:23px;height:23px}
 .readable-site select{appearance:none;background-image:url('assets/puzzle-action.svg');background-repeat:no-repeat;background-position:right 12px center;background-size:18px 20px;padding-right:42px!important}
}
@media(forced-colors:active){i.responsive-icon>.mobile-puzzle-icon{fill:ButtonText}}

/* boutique-hero.css */
/* Puzzle Gym — light, typographic boutique entrance. */
.home-page .boutique-hero{position:relative;isolation:isolate;overflow:hidden;width:100%;margin:0;min-height:0;height:auto;background:#f3f0e7;border-bottom:1px solid #d1c7ae;color:#22291f}
.home-page .boutique-hero .hero-stage{position:relative;display:grid;grid-template-rows:1fr auto;place-items:center;row-gap:36px;width:100%;min-height:clamp(620px,calc(100svh - 230px),900px);height:auto;top:auto;padding:48px var(--gutter) 24px;overflow:hidden}
.hero-atmosphere{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 24%,#fffefa 4%,#fbf8f0 28%,transparent 65%),linear-gradient(115deg,#dbd0b733,transparent 38%,#d7c9a852)}
.hero-halo{position:absolute;left:14%;right:14%;top:4%;height:110%;border-radius:0;background:radial-gradient(ellipse at 50% 38%,#fffef9 5%,#f9f0d9a6 34%,#cdb17838 57%,transparent 69%);transform:translateY(var(--hero-drift,0px))}
.hero-light-trace{position:absolute;top:-36%;left:15%;width:70%;height:125%;border:1px solid #b79a5a30;border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 70px #e0c58c33,inset 0 0 85px #fffbed88}
.hero-edge{position:absolute;top:28px;bottom:24px;width:1px;background:linear-gradient(transparent,#b69a6570 24%,#b69a6538 80%,transparent)}
.hero-edge-left{left:var(--gutter)}.hero-edge-right{right:var(--gutter)}
.home-page .boutique-hero .brand-hero-content{position:relative;width:100%;max-width:1220px;align-self:center;z-index:1;padding:0 24px;background:transparent;text-align:center;mix-blend-mode:multiply}
.home-page .boutique-hero .hero-wordmark{justify-content:center;margin:0 0 27px;mix-blend-mode:multiply}
.home-page .boutique-hero .hero-wordmark .logo-crop{width:clamp(250px,22vw,370px)}
.home-page .boutique-hero h1{margin:0;color:#252b23;font-size:clamp(82px,8.4vw,154px);font-weight:600;line-height:.99;letter-spacing:-.068em}
.home-page .boutique-hero .hero-location{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 24px;font-family:Manrope,sans-serif;font-size:16px;line-height:1.5;font-weight:600;letter-spacing:.12em;color:#6d5936;text-transform:uppercase}
.boutique-hero .hero-location:before,.boutique-hero .hero-location:after{content:'';width:38px;height:1px;background:#a68c575e}
.home-page .boutique-hero .hero-line{display:block;transform-origin:50% 100%;padding-inline:12px}
.home-page .boutique-hero .hero-gold{margin-top:5px;font-size:1.08em;font-weight:500;line-height:1.04;letter-spacing:-.045em;color:#8c6b35}
.home-page .boutique-hero .hero-gold em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500}
.home-page .boutique-hero .brand-hero-lead{font-size:clamp(19px,1.6vw,25px);line-height:1.5;letter-spacing:-.025em;color:#505348;margin:26px 0 26px}
.boutique-hero .brand-hero-lead strong{color:#292f24;font-weight:700}
.home-page .boutique-hero .hero-actions{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:30px;max-width:none}
.home-page .boutique-hero .hero-actions .button{min-height:56px;min-width:225px;border-radius:10px;padding:14px 22px;background:linear-gradient(115deg,#e9d29d,#f4e5bc 46%,#d9bb80);border-color:#b79a62;box-shadow:inset 0 1px #fff8e6,0 5px 16px #8c713d18;color:#292d23}
.home-page .boutique-hero .hero-actions .text-link{font-size:17px;min-height:48px;color:#30382b;gap:12px}
.home-page .boutique-hero .brand-hero-bottom{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:none;display:flex;justify-content:space-between;align-items:center;margin:0;padding:20px 0 0;border-top:1px solid #b5a0794a;font-size:16px;line-height:1.4;letter-spacing:0;z-index:1}
.home-page .boutique-hero .brand-hero-bottom a{display:inline-flex;align-items:center;gap:10px;max-width:none;min-height:44px;text-align:left;color:#625033}
.home-page .boutique-hero .hero-scroll-cue{display:flex;position:absolute;bottom:24px;right:var(--gutter);left:auto;transform:none;align-items:center;gap:14px;min-height:44px;color:#625033;font-size:16px;padding:0;z-index:2}
/* Deliberate, brief motion: the complete message appears without a scroll gate. */
@media(prefers-reduced-motion:no-preference){
 .home-page .boutique-hero.is-cinema-entering .hero-wordmark{animation:boutique-logo-in 900ms cubic-bezier(.2,.65,.3,1) both}
 .home-page .boutique-hero.is-cinema-entering .hero-location{animation:boutique-fade-in 700ms 90ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-line{animation:boutique-title-in 1000ms cubic-bezier(.17,.67,.24,1) 160ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-gold{animation-delay:320ms}
 .home-page .boutique-hero.is-cinema-entering .brand-hero-lead{animation:boutique-fade-in 750ms 450ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-actions{animation:boutique-fade-in 750ms 540ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-light-trace{animation:boutique-light-in 3800ms cubic-bezier(.2,.65,.3,1) both}
 .home-page .boutique-hero .hero-stage:focus-within :is(.hero-wordmark,.hero-location,.hero-line,.brand-hero-lead,.hero-actions){animation:none;opacity:1;transform:none;clip-path:none}
}
@keyframes boutique-logo-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes boutique-fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes boutique-title-in{from{opacity:0;transform:perspective(1000px) translateY(32px) rotateX(-9deg);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-12% -8% -18% -8%)}}
@keyframes boutique-light-in{from{opacity:0;transform:translateX(-7%) rotate(-32deg)}to{opacity:1;transform:translateX(0) rotate(-24deg)}}
@media(min-width:901px) and (max-height:800px){
 .home-page .boutique-hero .hero-stage{min-height:490px;row-gap:16px;padding-top:24px;padding-bottom:14px}
 .home-page .boutique-hero .hero-wordmark{margin-bottom:16px}.home-page .boutique-hero .hero-wordmark .logo-crop{width:210px}
 .home-page .boutique-hero h1{font-size:clamp(64px,5.6vw,80px)}.home-page .boutique-hero .hero-location{margin-bottom:12px}
 .home-page .boutique-hero .brand-hero-lead{margin:14px 0;font-size:20px}.home-page .boutique-hero .brand-hero-bottom{padding-top:12px}.home-page .boutique-hero .hero-scroll-cue{bottom:14px}
}
@media(max-width:900px){
 .home-page .boutique-hero .hero-stage{min-height:650px;row-gap:28px;padding:40px var(--gutter) 20px}
 .home-page .boutique-hero .brand-hero-content{padding-inline:14px}.home-page .boutique-hero h1{font-size:clamp(60px,10.5vw,94px)}
 .home-page .boutique-hero .hero-wordmark .logo-crop{width:260px}
}
@media(max-width:760px){
 .home-page .opening-ribbon{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:5px;padding-block:16px;align-items:center}
 .home-page .opening-ribbon-label{grid-column:1;grid-row:1;padding:0;border:0;box-shadow:none;background:transparent;color:#403821;font-weight:600;gap:8px}
 .home-page .opening-ribbon-label>span{font-size:21px;color:#65512d}
 .home-page .opening-ribbon p{grid-column:1;grid-row:2}.home-page .opening-ribbon p strong{font-size:20px;line-height:1.25}
 .home-page .opening-ribbon>a{grid-column:2;grid-row:1/3;white-space:normal;width:112px;gap:6px;line-height:1.4;font-size:16px;min-height:48px;align-items:center;border-bottom:0;justify-self:end}
 .home-page .opening-ribbon>a>.puzzle-link-icon{flex:0 0 22px;width:22px;height:22px}
 .home-page .boutique-hero .hero-stage{min-height:0;row-gap:24px;padding:32px var(--gutter) 18px}
 .home-page .boutique-hero .brand-hero-content{padding:0}
 .home-page .boutique-hero .hero-wordmark{margin:0 0 22px}.home-page .boutique-hero .hero-wordmark .logo-crop{width:clamp(190px,54vw,260px)}
 .home-page .boutique-hero h1{font-size:clamp(61px,16vw,100px);line-height:1.02;letter-spacing:-.07em}
 .home-page .boutique-hero .hero-location{font-size:16px;letter-spacing:.07em;gap:10px;margin-bottom:18px}
 .boutique-hero .hero-location:before,.boutique-hero .hero-location:after{width:18px}
 .home-page .boutique-hero .hero-line{padding-inline:0}
 .home-page .boutique-hero .hero-gold{font-size:.82em;line-height:1.1;letter-spacing:-.05em;margin-top:6px;white-space:nowrap}
 .home-page .boutique-hero .brand-hero-lead{max-width:360px;margin:20px auto 24px;font-size:19px;line-height:1.5;text-wrap:balance}
 .home-page .boutique-hero .hero-actions{flex-direction:column;gap:8px}
 .home-page .boutique-hero .hero-actions .button{min-width:240px;min-height:52px}
 .home-page .boutique-hero .hero-actions .text-link{min-height:44px}
 .home-page .boutique-hero .brand-hero-bottom{justify-content:center;padding-top:12px;font-size:16px}
 .home-page .boutique-hero .brand-hero-bottom a{text-align:center;justify-content:center;gap:9px}
 .home-page .boutique-hero .hero-scroll-cue{display:none}
 .hero-edge{top:24px;bottom:76px;opacity:.55}.hero-edge-left{left:10px}.hero-edge-right{right:10px}
 .hero-light-trace{width:150%;left:-25%;height:80%;top:-13%}.hero-halo{left:-40%;right:-40%;top:0;height:115%}
}
@media(max-width:360px){
 .home-page .opening-ribbon{column-gap:10px}.home-page .opening-ribbon p strong{font-size:18px}.home-page .opening-ribbon>a{width:101px}.home-page .opening-ribbon-label{font-size:16px;letter-spacing:-.025em}
 .home-page .boutique-hero .hero-location{gap:7px;letter-spacing:.04em}.boutique-hero .hero-location:before,.boutique-hero .hero-location:after{width:10px}
 .home-page .boutique-hero .hero-gold{font-size:.73em}.home-page .boutique-hero .brand-hero-lead{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.hero-halo,.hero-light-trace{transform:none}.home-page .boutique-hero .hero-stage :is(.hero-wordmark,.hero-location,.hero-line,.brand-hero-lead,.hero-actions){opacity:1;transform:none;clip-path:none;animation:none}}
@media(forced-colors:active){.hero-atmosphere{display:none}.home-page .boutique-hero .hero-gold{color:CanvasText}.home-page .boutique-hero .hero-actions .button{border:1px solid ButtonText}}

@media(max-width:360px){
 .home-page .boutique-hero .hero-stage{padding-top:24px;padding-bottom:10px;row-gap:14px}
 .home-page .boutique-hero .hero-wordmark{margin-bottom:16px}.home-page .boutique-hero .hero-wordmark .logo-crop{width:170px}
 .home-page .boutique-hero h1{font-size:56px}.home-page .boutique-hero .hero-location{margin-bottom:14px}
 .home-page .boutique-hero .brand-hero-lead{margin:12px auto 16px}.home-page .boutique-hero .brand-hero-bottom{padding-top:8px}
}

/* extras.css */
/* Zusatzleistungen: two concise, independent services. */
.home-page .extras-section{background:var(--sand);padding-block:40px}
.extras-section .eyebrow{margin-bottom:12px}
.extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.extra-card{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);min-width:0;border:1px solid #bfae91;border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:0 10px 28px #493b2410;transition:transform 300ms ease,box-shadow 300ms ease}
.extra-brand{display:flex;align-items:center;justify-content:center;padding:26px;background:linear-gradient(140deg,#e2d1b6,#f0e5d1)}
.extra-brand img{width:180px;max-width:100%;height:auto;mix-blend-mode:multiply}
.extra-copy{align-self:center;padding:30px 28px}
.extra-copy h3{font-size:clamp(26px,2.5vw,36px);line-height:1.12;margin:0 0 16px}
.extra-copy p{font-size:18px;line-height:1.6;margin:0 0 16px;color:var(--muted)}
.extra-copy .extra-brand-name{font-size:18px;font-weight:700;color:var(--gold-dark);margin-bottom:10px}
.extra-note{display:inline-block;font-size:16px;font-weight:600;border-top:1px solid var(--line-strong);padding-top:14px;color:#5c4b2e}
.extra-photo{position:relative;overflow:hidden;min-height:280px;background:#30372d}
.extra-photo img{width:100%;height:100%;object-fit:cover;object-position:46% 28%;transition:transform 650ms ease}
.extra-copy .text-link{font-size:16px;gap:12px;line-height:1.4}
/* A separate food moment, with locally hosted official product artwork. */
.meal-banner{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:100%;overflow:hidden;background:radial-gradient(ellipse at 86% 45%,#8c704641,transparent 57%),#222a23;color:#f5ecd9}
.meal-banner:after{content:'';position:absolute;pointer-events:none;inset:14px;border:1px solid #d7b87c33;z-index:-1}
.meal-copy{align-self:center;padding:44px var(--gutter)}
.meal-copy .eyebrow{font-size:16px;letter-spacing:.08em;color:#e3c898;margin-bottom:18px}
.meal-copy h2{font-size:clamp(38px,4.2vw,64px);color:#f5ecda;margin-bottom:20px;line-height:1.03}
.meal-copy h2 em{color:#e5c58e}
.meal-copy>p:not(.eyebrow){font-size:20px;line-height:1.6;color:#e8dfce;max-width:470px;margin-bottom:22px}
.meal-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;height:clamp(360px,51svh,500px);overflow:hidden;padding:22px}
.meal-wordmark{position:absolute;top:24px;right:34px;font-size:26px;font-weight:800;letter-spacing:-1.2px;color:#eee4ce;z-index:2}.meal-wordmark span{font-weight:400}
.meal-light{position:absolute;inset:10% 0 -70%;border:1px solid #dab87538;border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 90px #c5a46612,inset 0 0 90px #c5a4660f}
.meal-visual img{position:relative;display:block;height:92%;width:auto;max-width:78%;object-fit:contain;transform:rotate(-7deg);filter:drop-shadow(12px 20px 22px #0005);transition:transform 650ms ease}
@media(hover:hover){.extra-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px #493b241a}.extra-card:hover .extra-photo img{transform:scale(1.035)}.meal-banner:hover .meal-visual img{transform:rotate(-3deg) translateY(-4px)}}
@media(max-width:1000px){.extra-card{grid-template-columns:120px 1fr}.extra-copy{padding:24px}.extra-brand{padding:15px}.meal-copy{padding:36px var(--gutter)}}
@media(max-width:760px){
 .home-page .extras-section{padding-block:32px}.extras-grid{grid-template-columns:1fr;gap:16px}.extra-card{grid-template-columns:100px minmax(0,1fr);border-radius:12px}.extra-copy{padding:22px 18px}.extra-copy h3{font-size:26px}.extra-copy p{font-size:18px;line-height:1.5}.extra-copy .extra-brand-name{font-size:16px}.extra-photo{min-height:260px}.extra-brand{padding:12px}
 .meal-banner{grid-template-columns:1fr}.meal-copy{padding:30px var(--gutter) 0}.meal-copy h2{font-size:40px;margin-bottom:16px}.meal-copy .eyebrow{margin-bottom:14px}.meal-copy>p:not(.eyebrow){font-size:18px;margin-bottom:18px}.meal-copy .button{font-size:16px;min-height:52px;padding:12px 18px;gap:12px}
 .meal-visual{height:245px;padding:15px 25px 20px}.meal-visual img{height:100%;max-width:62%;margin-right:35px}.meal-wordmark{font-size:22px;top:34px;right:24px}.meal-light{inset:10% 15% -70%}
}
@media(max-width:360px){.extra-card{grid-template-columns:80px minmax(0,1fr)}.extra-copy{padding:18px 14px}.extra-copy h3{font-size:25px}.extra-copy .text-link{gap:8px}.meal-copy h2{font-size:36px}.meal-visual{height:210px}.meal-wordmark{font-size:20px}.meal-copy .button{padding:12px;gap:8px}}
@media(prefers-reduced-motion:reduce){.extra-card,.extra-photo img,.meal-visual img{transition:none}.extra-card:hover,.extra-card:hover .extra-photo img{transform:none}.meal-banner:hover .meal-visual img{transform:rotate(-7deg)}}
@media(forced-colors:active){.meal-banner,.extra-card{border:1px solid CanvasText}.meal-light{display:none}}

/* Flexible access is separate from the Basic and All-In memberships. */
.gym-passes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:24px}
.gym-pass{padding:26px 28px;border:1px solid #b8a27b;border-radius:16px;background:linear-gradient(120deg,#eee2cb,#e5d2af);box-shadow:inset 0 1px #fbf0d8}
.gym-pass-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.gym-pass h3{font-size:28px;line-height:1.2}
.gym-pass-badge{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;background:#c5a66b;border:1px solid #a7864d;color:#30291b;border-radius:6px;font-size:16px;font-weight:600}
.gym-pass-price{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0;color:#494434}
.gym-pass-regular{font-size:18px;line-height:1.5}.gym-pass-regular del{margin-left:6px;text-decoration-thickness:1.5px}
.gym-pass-current{display:flex;align-items:baseline;gap:12px;color:#302d23;flex-wrap:wrap}.gym-pass-current strong{font-size:46px;font-weight:600;line-height:1;letter-spacing:-.05em;white-space:nowrap}.gym-pass-current>span{font-size:16px}
.home-page .gym-pass .button{display:flex;justify-content:space-between;min-height:50px;border-color:#ac9570;background:#f2e6d0;font-size:17px;padding:12px 18px;border-radius:10px}
.home-page .gym-pass .button:hover{background:#dfcca7;border-color:#846e45}
.home-page .extras-section .section-heading h2{font-size:clamp(32px,3.4vw,48px)}
@media(max-width:900px){.gym-pass-price{align-items:flex-start;flex-direction:column;gap:14px}}
@media(max-width:760px){.gym-passes{grid-template-columns:1fr;gap:16px;margin-bottom:20px}.gym-pass{padding:22px}.gym-pass h3{font-size:26px}.gym-pass-price{flex-direction:row;align-items:center;margin:22px 0}.gym-pass-current{gap:6px;flex-direction:column}.gym-pass-current strong{font-size:42px}.home-page .extras-section .section-heading h2{font-size:32px;line-height:1.1}.home-page .extras-section .section-heading h2 em{display:block;overflow-wrap:normal;font-size:.95em}}
@media(max-width:360px){.gym-pass{padding:18px}.gym-pass h3{font-size:25px}.gym-pass-heading{gap:10px}.gym-pass-badge{padding-inline:8px}.home-page .gym-pass .button{padding:12px;font-size:16px;gap:12px}.gym-pass-regular{font-size:17px}.home-page .extras-section .section-heading h2{font-size:30px}}

/* All In Flex: the commitment-free option, deliberately the eye-catcher under the two plans. */
.home-page .price-card.plan-flex{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px clamp(24px,3vw,44px);padding:clamp(26px,2.8vw,34px) clamp(26px,2.8vw,38px);border:1px solid #b59b68;border-radius:20px;background:var(--anth-edge),var(--anth-surface);background-color:var(--anth-base);box-shadow:0 26px 52px -30px #1b1c1fa6}
.home-page .plan-flex .plan-flex-main{min-width:0;text-align:left}
.home-page .plan-flex .eyebrow{margin-bottom:10px;color:#e5c895;font-size:1rem;letter-spacing:.14em}
.home-page .plan-flex h3{margin:0 0 8px;font-size:clamp(32px,3vw,42px);line-height:1.1;letter-spacing:-.04em;color:#fff6e4}
.home-page .plan-flex .plan-flex-main p{margin:0;font-size:1.125rem;line-height:1.6;color:#ded5c4}
.home-page .plan-flex .plan-flex-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;color:#fff6e4}
.home-page .plan-flex .price-amount{display:flex;align-items:baseline;gap:6px}
.home-page .plan-flex .price-amount strong{font-size:clamp(52px,5vw,66px);font-weight:600;line-height:1;letter-spacing:-.06em}
.home-page .plan-flex .price-amount>span{font-size:30px;font-weight:500;color:#e9cf95}
.home-page .plan-flex .plan-flex-price small{font-size:1.0625rem;color:#d8cfbd}
.home-page .plan-flex .plan-flex-fee{font-size:1.0625rem;color:#e9cf95;font-weight:600}
.home-page .plan-flex .button{min-height:56px;font-size:17px}
@media(hover:hover){.home-page .price-card.plan-flex:hover{border-color:#e5c895;box-shadow:0 34px 64px -28px #1b1c1fc4,0 0 0 1px #e5c89559}}
@media(max-width:900px){
 .home-page .price-card.plan-flex{grid-template-columns:minmax(0,1fr) auto;gap:18px 20px}
 .home-page .plan-flex .button{grid-column:1/-1;justify-content:space-between}
}
@media(max-width:560px){
 .home-page .price-card.plan-flex{grid-template-columns:1fr;text-align:left}
 .home-page .plan-flex .plan-flex-price{align-items:flex-start}
}
@media(forced-colors:active){.home-page .price-card.plan-flex{border:1px solid CanvasText}}

/* The reduced price is an argument of its own, so it gets its own surface instead of a quiet line. */
.home-page .price-card .reduced-price{margin:4px 0 6px;padding:16px 18px;border:1px solid #b9c4cf;border-bottom:1px solid #b9c4cf;border-radius:14px;background:linear-gradient(135deg,#f4f7fa,#e5ecf3);box-shadow:inset 0 1px #fff,0 6px 16px -12px #3d465466;gap:4px}
.home-page .price-card .reduced-price strong{font-size:clamp(24px,2.1vw,29px);line-height:1.1;letter-spacing:-.035em;color:#1f2520}
.home-page .price-card .reduced-price span{font-size:1.0625rem;font-weight:600;color:#414a52;margin-top:2px}
.home-page .plan-all-in .reduced-price{border-color:#cdb281;background:linear-gradient(135deg,#fdf7e8,#f2e4c4);box-shadow:inset 0 1px #fffaf0,0 6px 16px -12px #7a5a2466}
.home-page .plan-all-in .reduced-price span{color:#6b5a38}
@media(max-width:560px){.home-page .price-card .reduced-price{padding:14px 14px}.home-page .price-card .reduced-price strong{font-size:25px}}


/* Opening hours next to the address, and how long a card is valid. */
.opening-hours{margin-top:22px}
.opening-hours h3{font-size:20px;letter-spacing:-.02em;margin-bottom:10px}
.opening-hours dl{display:grid;gap:6px;margin:0;max-width:330px}
.opening-hours dl>div{display:flex;justify-content:space-between;gap:16px;font-size:1.0625rem;line-height:1.5}
.opening-hours dt{color:#5c5340}
.opening-hours dd{margin:0;font-weight:600;white-space:nowrap}
.gym-pass-validity{display:block;margin-top:6px;font-size:1rem;line-height:1.45;color:#6b5a38;font-weight:600}

/* The brand mark closes the tariff buttons; it says "you belong here" better than an arrow.
   The round arrow styling of the gold buttons must not squeeze it. */
.readable-site .button>.button-logo,.readable-site .button-primary>.button-logo{width:76px;height:auto;flex:0 0 76px;aspect-ratio:4/1;border:0;background:none;border-radius:0;display:block;transform:none}
.readable-site .plan-flex .button>.button-logo{width:82px;flex-basis:82px}
@media(max-width:760px){.readable-site .button>.button-logo{width:66px;flex-basis:66px}}
@media(forced-colors:active){.button-logo{display:none}}

/* InBody as a third extra: two prices side by side, photo like the coaching card. */
.extras-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.extra-inbody .extra-photo img{object-position:50% 42%}
.extra-prices{display:flex;flex-wrap:wrap;gap:8px 26px;margin:14px 0 4px}
.extra-prices span{display:flex;flex-direction:column;gap:2px;font-size:1rem;line-height:1.4;color:#5c5340}
.extra-prices strong{font-size:27px;font-weight:600;letter-spacing:-.04em;color:#26251f}
.extra-inbody .extra-note{border-top:0;padding-top:0;color:#6b5a38}
.extra-inbody .text-link{margin-top:12px}

/* Voucher advertisement above the contact block. */
.voucher-band{padding-block:clamp(36px,4vw,60px)}
.voucher-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(26px,3vw,40px) clamp(24px,3vw,44px);border:1px solid #c2ab7f;border-radius:26px;background:linear-gradient(135deg,#f8efdb,#eedfbd 55%,#e6d2a8);box-shadow:0 26px 54px -34px #6b502380}
.voucher-copy p{font-size:1.125rem;line-height:1.65;max-width:46ch;margin-bottom:22px;color:#4d4638}
.voucher-visual{margin:0}
.voucher-visual img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 34px #6b50232e)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .voucher-visual img{transition:transform 420ms cubic-bezier(.2,.7,.3,1)}
 .voucher-inner:hover .voucher-visual img{transform:translateY(-6px) rotate(-1deg)}
}
@media(max-width:900px){
 .extras-grid{grid-template-columns:1fr}
 .voucher-inner{grid-template-columns:1fr;gap:24px}
 .voucher-visual{order:-1}
}
@media(forced-colors:active){.voucher-inner{border:1px solid CanvasText}}

/* cream-theme.css */
/* Warm limestone, cream and sand: shared across the complete website. */
:root{
 --paper:#eee3cf;--white:#f2e8d7;--sand:#e3d4bb;--sage:#ddd7c1;
 --ink:#292c24;--muted:#575347;--gold-dark:#68512d;--gold-light:#e1c996;
 --line:#d0bea0;--line-strong:#ac9877;
 --app-bg:#eee3cf;--app-panel:#f2e8d7;--app-panel-2:#e3d4bb;--app-line:#c9b89a;--app-muted:#575347;--cream:#eee3cf;
}
html{background:#e7dac3}
body{background:var(--paper)}
.readable-site .site-header{background:#ede1cbf5;border-color:#c6b494;box-shadow:0 8px 28px #5945210b}
.readable-site .site-header.is-scrolled{background:#ecdfc8fa}
.readable-site .skip-link,.readable-site .nav-toggle{background:#f1e6d3}
.readable-site .button-secondary,.readable-site .button-ghost{background:#eee1c8}
/* Retain gold accents and the deliberately silver Basic tariff. */
.home-page .boutique-hero{background:#e6d5b7;border-bottom-color:#bda782}
.boutique-hero .hero-atmosphere{background:radial-gradient(ellipse at 50% 24%,#efe0c3 4%,#ead9b8 28%,transparent 65%),linear-gradient(115deg,#cfb98d44,transparent 38%,#c3a57340)}
.boutique-hero .hero-halo{background:radial-gradient(ellipse at 50% 38%,#f1e5ce 5%,#ead7af99 34%,#bfa16c30 57%,transparent 69%)}
.boutique-hero .hero-light-trace{border-color:#987b4838;box-shadow:0 0 70px #bf9e6030,inset 0 0 85px #f4e2bc60}
.home-page .intro,.home-page .course-feature{background:#eee3cf}
.home-page .journey-map a{background:#e4d4b7;border-color:#bfaa85}
.home-page .journey-map a:hover{background:#dcc6a2}
.home-page .areas{background:linear-gradient(135deg,#decbab,#ebddc3 70%)}
.area-cinema,.area-carousel-footer{background:#e6d6b9}
.area-carousel-footer{border-color:#bba17a}
.area-play,.area-mobile-select select{background-color:#eee0c5}
.area-picker{background:linear-gradient(145deg,#efe1c7,#e0cbaa)}
.home-page .more-areas,.more-areas{background:#eee1ca;border-color:#c5b08c}
.area-locker-note{background:#e5d3b5}
.home-page .special-shakes{background:#e2d0b2}
.shake-card{background:#ede0c8}
.home-page .pricing-section{background:#e6d8bd}
.home-page .opening-offer-compact{background:linear-gradient(110deg,#e9d9b8,#eee1c8);border-color:#bfa87d}
.home-page .faq-section{background:linear-gradient(125deg,#d3d2ce,#e4e2dd);border-block:1px solid #b7b0a3;color:#30312d}
.home-page .accordion details,.accordion details{background:transparent;border-color:#c6b492}
.accordion details[open]{background:#e0cfaf}
.home-page .faq-section .accordion details{border-color:#b1b0a8;background:transparent}
.home-page .faq-section .accordion details[open]{background:#e5e3de}
.home-page .faq-section .accordion summary{color:#30312d}
.home-page .faq-section .accordion summary:hover{background:#c8c7c0}
.home-page .faq-section .accordion p{color:#4e4d46;padding:12px 20px 24px}
.home-page .faq-section :focus-visible{outline-color:#68512d}
.home-page .contact-section,.contact-section{background:linear-gradient(125deg,#dcc5a0,#e9dabe 70%);border-color:#bca17a}
.home-page .contact-form,.contact-form{background:#f0e5d1;border-color:#bda680;box-shadow:0 16px 50px #4b3b1810}
.home-page .contact-form input,.home-page .contact-form select,.home-page .contact-form textarea,.contact-form input,.contact-form select,.contact-form textarea,.auth-form input{background-color:#f5ebd9;border-color:#9f8d70;color:#292c24}
.home-page .contact-form input:focus,.home-page .contact-form select:focus,.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus,.auth-form input:focus{background-color:#f2e2c7;border-color:#625334}
.form-age-note{background:#e7d3aa}
.legal-page .legal-card{background:#e2d2b5;border-color:#bba680}
.courses-hero{background:#e7d7ba}.course-world{background:#ded5bb}.flow-world{background:#dfcaaa}
.catalog-grid article,.calendar-cell,.calendar-course,.booking-grid article,.booking-list article{background:#f0e3cc}
.schedule-section,.booking-section{background:#e2d4b9}
.calendar-course.balance{background:#dbd6bd}.calendar-course.flow{background:#e5ceab}
.course-chip-list a{background:#efe3ca9c}.course-chip-list a:hover,.calendar-course:hover{background:#f0dfbf}
.auth-page{background:linear-gradient(90deg,#e9dcc5f5,#dfcaabc9),url('assets/daily-bar-reference-760w.webp') center/cover}
.auth-panel,.member-status{background:#efe2cbee}.auth-tabs{background:#dfceaf}.auth-tabs button.is-active{background:#f0e2c7}
/* Match the separate interactive app preview to the website palette. */
body:not(.readable-site){background:#e2d2b7}
.app-shell{background:var(--app-bg)}
.intro-screen{background:radial-gradient(ellipse at 30% 25%,#f0e3c9,#e2ccaa)}
.puzzle-app-grid article,.settings-card,.day-card,.course-book-card,.detail-card{background:#f0e3cc}
.app-login-card input,.outline-button,.filter-chip{background:#eee0c5}
.tariff-mini{background:linear-gradient(120deg,#e9d5ad,#f0e1c6)}
.bottom-nav{background:#eadcc2f5}
@media(max-width:1240px){.readable-site .main-nav{background:#eee1cafc;border-color:#c3ac84}}
@media(max-width:760px){.readable-site .header-cta{background:linear-gradient(110deg,#eee0c5,#e4d1ad);border-color:#b8a077}.readable-site .header-cta:hover{background:#dcc7a0}.area-mobile-select select{background-color:transparent}}
@media(forced-colors:active){html,body{background:Canvas}.hero-atmosphere{display:none}}

/* welcome.css */
/* Studio introduction: an editorial spread with a clear next step. */
.home-page .intro.studio-welcome{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);align-items:stretch;width:100%;max-width:none;gap:0;padding:0;margin:0;background:#eee3cf;border-bottom:1px solid #b39a71}
.home-page .studio-welcome .welcome-story{grid-column:2;grid-row:1;position:relative;display:flex;flex-direction:column;justify-content:center;max-width:none;padding:clamp(32px,4.5vw,72px);min-height:420px;border-block:1px solid #c9b799;background:linear-gradient(125deg,#f0e5d0,#e4d3b4)}
.studio-welcome .welcome-kicker{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:600;line-height:1.5;margin:0 0 28px;color:#675333;letter-spacing:0}
.studio-welcome .welcome-kicker:before{content:'';width:34px;height:2px;flex-shrink:0;background:#a18450}
.home-page .studio-welcome .intro-side h2{margin:0;font-size:clamp(50px,5.4vw,86px);font-weight:600;line-height:1.02;letter-spacing:-.055em;color:#283123}
.home-page .studio-welcome .intro-side h2 br{display:block}
.home-page .studio-welcome .intro-side h2 em{font-size:1.08em;font-weight:500;color:#79603a}
.home-page .studio-welcome .intro-copy{margin-top:28px;max-width:490px}
.home-page .studio-welcome .intro-copy>p{font-size:20px;line-height:1.6;max-width:none;margin:0;color:#4c4e40;text-wrap:pretty}
.home-page .studio-welcome .welcome-image{grid-column:1;grid-row:1;position:relative;min-width:0;min-height:420px;height:auto;align-self:stretch;border-radius:0;margin:0;overflow:hidden;background:#bfae92}
.home-page .studio-welcome .welcome-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 61%;transition:transform 900ms cubic-bezier(.2,.7,.3,1)}
.studio-welcome .welcome-image:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#172017ad,transparent 38%);box-shadow:inset 0 0 0 1px #bda47c44}
.home-page .studio-welcome .welcome-image figcaption{position:absolute;z-index:1;inset:auto 28px 28px;display:block;border:0;border-radius:0;padding:0;background:none;color:#fff2d8;font-size:18px;font-weight:500;line-height:1.5;text-align:left}
.home-page .studio-welcome .journey-map{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border:0;border-radius:0;background:#293425;overflow:hidden}
.home-page .studio-welcome .journey-map a{position:relative;display:flex;align-items:center;gap:20px;min-width:0;min-height:88px;padding:18px clamp(24px,4vw,64px);border:0;background:transparent;color:#f1e7d2}
.home-page .studio-welcome .journey-map a+a{border-left:1px solid #bca57644;border-top:0}
.home-page .studio-welcome .journey-map .journey-number{align-self:center;padding:0;color:#d7bb81;font-family:var(--font-editorial);font-size:30px;font-weight:500;line-height:1}
.home-page .studio-welcome .journey-map strong{font-size:18px;line-height:1.4;font-weight:600}
.home-page .studio-welcome .journey-map a>span:last-child{color:#dfc48c}
.home-page .studio-welcome .journey-map a:focus-visible{outline-color:#f2d69b;outline-offset:-5px}
@media(hover:hover){.home-page .studio-welcome .welcome-image:hover img{transform:scale(1.025)}.home-page .studio-welcome .journey-map a:hover{background:#3c4833}}
@media(max-width:1000px) and (min-width:761px){.home-page .studio-welcome .welcome-story{padding:34px}.home-page .studio-welcome .intro-side h2{font-size:52px}.home-page .studio-welcome .journey-map a{gap:12px;padding:18px 24px}.home-page .studio-welcome .journey-map strong{font-size:17px}}
@media(max-width:760px){
 .home-page .intro.studio-welcome{grid-template-columns:minmax(0,1fr)}
 .home-page .studio-welcome .welcome-story{grid-column:1;grid-row:1;padding:26px var(--gutter);min-height:0}
 .studio-welcome .welcome-kicker{font-size:17px;margin-bottom:18px;gap:10px}.studio-welcome .welcome-kicker:before{width:22px}
 .home-page .studio-welcome .intro-side h2{font-size:clamp(43px,12vw,62px);line-height:1.02}
 .home-page .studio-welcome .intro-copy{margin-top:18px;max-width:520px}.home-page .studio-welcome .intro-copy>p{font-size:18px;line-height:1.5}
 .home-page .studio-welcome .welcome-image{grid-column:1;grid-row:2;min-height:0;height:185px}.home-page .studio-welcome .welcome-image img{object-position:50% 59%}
 .home-page .studio-welcome .welcome-image figcaption{inset:auto var(--gutter) 16px;font-size:16px}
 .home-page .studio-welcome .journey-map{grid-column:1;grid-row:3;grid-template-columns:1fr}
 .home-page .studio-welcome .journey-map a{min-height:56px;padding:12px var(--gutter);gap:18px}.home-page .studio-welcome .journey-map a+a{border-top:1px solid #bca57644;border-left:0}.home-page .studio-welcome .journey-map .journey-number{font-size:25px}.home-page .studio-welcome .journey-map strong{font-size:17px}
}
@media(max-width:360px){.studio-welcome .welcome-kicker{font-size:16px;gap:8px}.studio-welcome .welcome-kicker:before{width:16px}.home-page .studio-welcome .welcome-story{padding-block:22px}.home-page .studio-welcome .welcome-image{height:160px}.home-page .studio-welcome .welcome-image figcaption{font-size:16px;max-width:230px}}
@media(prefers-reduced-motion:reduce){.home-page .studio-welcome .welcome-image img{transition:none}.home-page .studio-welcome .welcome-image:hover img{transform:none}}
@media(forced-colors:active){.home-page .studio-welcome .welcome-story,.home-page .studio-welcome .journey-map{background:Canvas;color:CanvasText}.home-page .studio-welcome .journey-map a{border:1px solid CanvasText}}

/* 04.10.2026: Willkommensbereich ohne Foto – kompakt über die volle Breite, Überschrift links, Text und Eckdaten rechts. */
.home-page .intro.studio-welcome{grid-template-columns:minmax(0,1fr)}
.home-page .studio-welcome .welcome-story{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,110px);align-items:center;min-height:0;padding:clamp(40px,5vw,76px) clamp(24px,6vw,96px)}
.home-page .studio-welcome .welcome-kicker{grid-column:1/-1;margin-bottom:22px}
.home-page .studio-welcome .intro-side h2{font-size:clamp(36px,3.6vw,58px);line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.home-page .studio-welcome .intro-side h2 em{display:block;font-size:1em}
.home-page .studio-welcome .intro-copy{margin-top:6px;max-width:560px}
.home-page .studio-welcome .welcome-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:30px 0 0;padding:0;list-style:none;border-top:1px solid #c9b799}
.home-page .studio-welcome .welcome-facts li{padding:18px 16px 0 0;min-width:0}
.home-page .studio-welcome .welcome-facts li+li{padding-left:16px;border-left:1px solid #c9b799}
.home-page .studio-welcome .welcome-facts strong{display:block;font-family:var(--font-editorial);font-size:clamp(30px,2.6vw,42px);font-weight:500;line-height:1.05;color:#79603a}
.home-page .studio-welcome .welcome-facts span{display:block;margin-top:6px;font-size:15px;line-height:1.4;color:#4c4e40}
@media(max-width:1000px){.home-page .studio-welcome .welcome-story{grid-template-columns:minmax(0,1fr)}.home-page .studio-welcome .intro-copy{margin-top:22px}}
@media(max-width:760px){.home-page .studio-welcome .welcome-story{padding:30px var(--gutter)}.home-page .studio-welcome .intro-side h2{font-size:clamp(32px,8.6vw,44px)}.home-page .studio-welcome .welcome-facts{margin-top:22px}.home-page .studio-welcome .welcome-facts li{padding:14px 10px 0 0}.home-page .studio-welcome .welcome-facts li+li{padding-left:10px}.home-page .studio-welcome .welcome-facts strong{font-size:24px}.home-page .studio-welcome .welcome-facts span{font-size:14px}}

/* studio-scenes.css */
/* Anthracite replaces the green brand accents; cream and gold stay warm. */
:root{--ink:#292b2e;--scene-ink:#202225;--anthracite:#25272a;--anthracite-raised:#36393d}
.home-page .boutique-hero,.home-page .boutique-hero h1,.home-page .studio-welcome .intro-side h2{color:var(--ink)}
.home-page .studio-welcome .journey-map{background:var(--anthracite)}
.home-page .studio-welcome .journey-map a:hover{background:var(--anthracite-raised)}
.area-slide-copy{background:radial-gradient(ellipse at 100% 0,#ffffff09,transparent 68%),var(--anthracite)}
.home-page .app-experience{background:radial-gradient(ellipse at 78% 45%,#ffffff0c,transparent 52%),linear-gradient(115deg,#1d1f22,#303338)}
.app-puzzle-target svg{fill:#373a3e}
.readable-site .premium-footer{background:radial-gradient(ellipse at 0 0,#45484c66,transparent 60%),#202225}
.premium-footer .footer-bottom,.premium-footer .footer-visit{border-color:#6b6d7066}
.premium-footer .back-top{background:#33363a;border-color:#75777b}.premium-footer .back-top:hover{background:#44474b}
.readable-site .button-outline,.readable-site .button-secondary,.area-mobile-select select{color:var(--ink)}
@media(min-width:761px){.readable-site .header-cta{background:linear-gradient(120deg,#383b40,#222427);border-color:#62656a}}
/* One title system, based on the Areas heading. */
.readable-site .section-title{display:flex;align-items:center;gap:20px;min-width:0;margin:0 0 24px}
.readable-site .section-heading .section-title{margin:0}
.readable-site .section-title h2{font-family:var(--font-body,Manrope,sans-serif)!important;font-size:clamp(42px,4.5vw,64px)!important;font-weight:500!important;line-height:1.07!important;letter-spacing:-.045em!important;margin:0!important;min-width:0;text-wrap:balance;hyphens:manual}
.readable-site .section-title h2 em{font-family:var(--font-editorial);font-weight:500;font-size:1em!important;display:inline!important}
.readable-site .section-title .areas-title-mark{flex:0 0 58px;width:58px;height:58px}
.readable-site .section-title .areas-title-mark svg{width:44px;height:44px}
.home-page .studio-welcome .intro-copy{margin-top:0}
.home-page .app-experience-intro .app-subtitle{font-size:clamp(30px,3vw,42px);line-height:1.12;margin-bottom:20px}
.home-page .app-experience-intro .app-subtitle br{display:none}
.home-page .app-experience-intro>p{font-size:18px}
.home-page .app-experience{min-height:440px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 5%;padding-block:36px}
.home-page .app-puzzle-field{height:280px}.home-page .app-puzzle-caption{padding-bottom:8px}
.coaching-logo{display:block;width:40px;height:40px;object-fit:contain;flex:0 0 40px;filter:drop-shadow(0 2px 3px #33240820)}
.extra-copy .text-link:has(.coaching-logo){gap:12px;min-height:48px}
.plan-term{font-size:16px;line-height:1.5;margin:0 0 14px;color:#48484a}
.gym-passes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gym-pass{display:flex;flex-direction:column;min-width:0;padding:24px}
.gym-pass-heading{min-height:40px}.gym-pass-price{flex:1;align-items:flex-start;flex-direction:column;gap:14px}
.gym-pass-current{min-height:46px}.gym-pass-day .gym-pass-price{justify-content:center}
/* Shakes and meals share a single, edge-to-edge cinema with clear controls. */
.home-page .food-experience{background:var(--anthracite);padding:0;border-block:1px solid #b79966}
.food-viewport{width:100%;outline-offset:-5px}
.food-experience.is-ready .food-viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.food-viewport::-webkit-scrollbar{display:none}
.food-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.food-slide .bar-banner,.food-slide .meal-banner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);height:100%;min-height:400px;background:radial-gradient(ellipse at 10% 80%,#ae89591a,transparent 60%),#222427}
.food-slide .bar-banner-copy,.food-slide .meal-copy{align-self:center;padding:32px var(--gutter);min-width:0}
.food-slide .bar-banner-copy>p:not(.eyebrow),.food-slide .meal-copy>p:not(.eyebrow){font-size:20px;line-height:1.5;margin-bottom:24px}
.food-slide .section-title h2{color:#fff9ed}
.food-slide .section-title h2 em{color:#e3c695}
.food-slide .bar-shake-trio{height:100%;min-height:400px}
.food-slide .bar-shake{background:#202225}
.food-slide .bar-shake:after{background:linear-gradient(0deg,#111315f5,transparent 46%),linear-gradient(180deg,#17191b38,transparent 35%)}
.food-slide .bar-shake img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 61%}
.food-slide .meal-visual{height:400px;align-self:center;padding:24px}
.food-slide .meal-visual img{height:92%;max-width:75%}
.food-slide .meal-wordmark{font-size:28px;top:28px;right:32px}
.food-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px var(--gutter);background:#292c30;color:#f4ead6;border-top:1px solid #b69b654d}
.food-pickers,.food-actions{display:flex;align-items:center;gap:10px}
.food-pickers button{min-height:48px;padding:10px 22px;border:1px solid #77716a;border-radius:10px;background:transparent;color:#f4ead6;font:600 17px/1.4 var(--font-body)}
.food-pickers button[aria-current="true"]{background:linear-gradient(135deg,#edd9b0,#d2b379);color:#302a20;border-color:#d2b379}
.food-arrow,.food-play{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:48px;min-height:48px;border:1px solid #77716a;border-radius:10px;background:transparent;color:#f4ead6;font:600 16px/1.3 var(--font-body)}
.food-play{padding:10px 14px}.food-play[aria-pressed="true"]{border-color:#e5c895;background:#414044}
.food-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.food-count{font-size:16px;white-space:nowrap;margin:0 10px;color:#d8cfbd;font-variant-numeric:tabular-nums}.food-count strong{font-weight:600;color:#f0d59f}
.food-experience :focus-visible{outline-color:#f4d49c!important;outline-offset:-4px}
.food-experience .special-shakes{color:var(--ink)}
@media(hover:hover){.food-pickers button:hover,.food-arrow:hover,.food-play:hover{border-color:#e8c88f;background-color:#414449}.food-pickers button[aria-current="true"]:hover{background:#e5c895}.food-slide.is-current .bar-shake:hover img{transform:scale(1.16)}}
@media(prefers-reduced-motion:no-preference){.food-slide.is-current .section-title{animation:food-title-in 550ms ease both}.food-slide.is-current .meal-visual img{animation:food-product-in 800ms ease both}.food-controls button{transition:background-color 200ms,border-color 200ms}}
@keyframes food-title-in{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes food-product-in{from{opacity:.4;transform:translateX(24px) rotate(-7deg)}to{opacity:1;transform:rotate(-7deg)}}
@media(max-width:1050px){.gym-passes{gap:16px}.gym-pass{padding:20px}.gym-pass-heading{align-items:flex-start;flex-direction:column;gap:10px;min-height:80px}.gym-pass h3{font-size:25px}.home-page .gym-pass .button{padding:12px;font-size:16px;gap:8px}.food-slide .bar-banner-copy,.food-slide .meal-copy{padding:28px 24px}.food-slide .section-title{gap:14px}.food-slide .section-title h2{font-size:42px!important}.food-slide .section-title .areas-title-mark{width:48px;height:48px;flex-basis:48px}}
@media(max-width:760px){
 .readable-site .section-title{gap:14px;margin-bottom:20px;align-items:flex-start}.readable-site .section-title h2{font-size:40px!important;line-height:1.08!important;text-wrap:initial}.readable-site .section-title .areas-title-mark{width:44px;height:44px;flex-basis:44px}.readable-site .section-title .areas-title-mark svg{width:34px;height:34px}
 .home-page .app-experience{grid-template-columns:minmax(0,1fr);min-height:0;gap:14px;padding-block:28px}.home-page .app-experience-intro .app-subtitle{font-size:30px;margin-bottom:14px}.home-page .app-experience-intro .app-invitation{margin-top:14px}.home-page .app-skip-puzzle{margin-top:10px}.home-page .app-puzzle-field{height:210px}.home-page .app-puzzle-caption{padding-inline:0}.home-page .app-puzzle-orbit{width:190px;height:190px}.home-page .app-puzzle-orbit.orbit-two{width:250px;height:250px}
 .gym-passes{grid-template-columns:1fr}.gym-pass-heading{flex-direction:row;align-items:center;min-height:34px}.gym-pass-price{flex-direction:row;align-items:center}.gym-pass-day .gym-pass-price{justify-content:flex-start}.gym-pass-day .gym-pass-current{flex-direction:row;align-items:baseline;gap:12px}
 .food-slide .bar-banner,.food-slide .meal-banner{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 220px;min-height:0}
 .food-slide .bar-banner-copy,.food-slide .meal-copy{padding:24px var(--gutter);align-self:center}.food-slide .section-title{margin-bottom:16px}.food-slide .section-title h2{font-size:40px!important}.food-slide .bar-banner-copy .eyebrow,.food-slide .meal-copy .eyebrow{font-size:16px;margin-bottom:14px;letter-spacing:.025em}
 .food-slide .bar-banner-copy>p:not(.eyebrow),.food-slide .meal-copy>p:not(.eyebrow){font-size:18px;margin-bottom:18px;line-height:1.5}
 .food-slide .bar-shake-trio{height:220px;min-height:0}.food-slide .bar-shake img{transform:scale(1.42);object-position:50% 65%}.food-slide .bar-shake figcaption{padding:15px 5px}.food-slide .bar-shake figcaption strong{font-size:clamp(16px,4.3vw,22px)}
 .food-slide .meal-visual{height:220px;padding:10px 25px 20px}.food-slide .meal-visual img{height:100%;max-width:64%;margin-right:35px}.food-slide .meal-wordmark{font-size:24px;right:24px;top:20px}
 .food-controls{gap:10px;flex-wrap:wrap;padding:12px var(--gutter)}.food-pickers{flex:1;gap:8px}.food-pickers button{font-size:16px;padding:10px 12px;flex:1;white-space:nowrap}.food-actions{gap:8px}.food-play-label,.food-count{display:none}.food-play{padding:10px}.food-arrow,.food-play{min-width:44px;min-height:44px}.food-actions{margin-left:auto}
}
@media(max-width:450px){.food-pickers{flex-basis:100%}.food-actions{width:100%;justify-content:flex-end}.food-count{display:block;margin-right:auto}.food-play-label{display:inline}.food-play{margin-right:auto}.food-count{display:none}}
@media(max-width:360px){.readable-site .section-title h2,.food-slide .section-title h2{font-size:35px!important}.readable-site .section-title{gap:10px}.readable-site .section-title .areas-title-mark{width:40px;height:40px;flex-basis:40px}.readable-site .section-title .areas-title-mark svg{width:30px;height:30px}.food-slide .meal-wordmark{font-size:20px}.coaching-logo{width:34px;height:34px;flex-basis:34px}}
@media(forced-colors:active){.food-controls,.food-pickers button,.food-arrow,.food-play{border:1px solid ButtonText;background:Canvas;color:CanvasText}.food-pickers button[aria-current="true"]{outline:2px solid Highlight}.readable-site .section-title .areas-title-mark svg{fill:CanvasText}}

/* Compact mobile controls leave room for the complete scene and readable copy. */
.food-mobile-select{display:none}
.nav-toggle span{background:var(--ink)}
.extra-photo,.home-page .course-tile{background:#292c30}
.home-page .course-tile:before{background:linear-gradient(0deg,#111315f5,transparent 80%)}
@media(max-width:760px){
 .food-slide .bar-banner,.food-slide .meal-banner{grid-template-rows:1fr 190px}.food-slide .bar-shake-trio,.food-slide .meal-visual{height:190px}
 .food-controls{flex-wrap:nowrap;gap:8px}.food-pickers{display:none}.food-mobile-select{display:block;flex:1;min-width:0;margin:0}.food-mobile-select select{width:100%;min-height:44px;padding:8px 0;border:0;background:#292c30;color:#f4ead6;font:600 16px/1.4 var(--font-body)}
 .food-actions{width:auto;gap:6px;margin:0;flex:0 0 auto}.food-play{margin:0;min-width:44px;padding:8px}.food-play-label,.food-count{display:none}
}

/* Centered closing call-to-action keeps its heading on the same axis as copy and button. */
.course-cta .section-title{justify-content:center}
.course-cta .section-title h2{text-align:left}

/* Pass titles carry the studio branding beside the name. */
.gym-pass .gym-pass-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.gym-pass-title .gym-pass-logo{width:76px;flex:0 0 76px}
.gym-pass-heading{flex-wrap:wrap}

/* anthracite-light.css */
/* Anthracite light: one warm key light from the upper left, a cool fill from the lower right,
   polished gold edges and single reflections only where a real surface would catch light. */
:root{
 --anth-base:#212326;
 --anth-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .06 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
 --anth-surface:var(--anth-grain),radial-gradient(110% 130% at 0 0,#e0bc7e24,transparent 55%),radial-gradient(90% 110% at 100% 100%,#9aa6b614,transparent 60%),linear-gradient(145deg,#303338 0%,#232529 45%,#18191c 100%);
 --anth-edge:linear-gradient(90deg,transparent,#d6b47659 18%,#ffecc4d9 42%,#d6b47659 70%,transparent) top/100% 1px no-repeat;
}

/* Journey bar under the welcome block */
.home-page .studio-welcome .journey-map{position:relative;background:var(--anth-edge),var(--anth-surface);background-color:var(--anth-base);box-shadow:inset 0 -1px 0 #0000004d}
.home-page .studio-welcome .journey-map a,.home-page .studio-welcome .journey-map a:hover{background:transparent}
.home-page .studio-welcome .journey-map a::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(70% 120% at 50% 118%,#e0bc7e38,transparent 70%),linear-gradient(180deg,#ffffff0a,transparent 60%);transition:opacity 300ms ease}
.home-page .studio-welcome .journey-map a:hover::before,.home-page .studio-welcome .journey-map a:focus-visible::before{opacity:1}
.home-page .studio-welcome .journey-map a>*{position:relative}

/* Area text panel: light spills over from the photo edge */
.area-slide-copy{background:linear-gradient(180deg,transparent 6%,#e0bc7e70 36%,#e0bc7e1f 76%,transparent) left/1px 100% no-repeat,radial-gradient(95% 70% at 0 32%,#e0bc7e21,transparent 70%),radial-gradient(80% 60% at 100% 100%,#9aa6b612,transparent 65%),var(--anth-grain),linear-gradient(160deg,#2f3237 0%,#222428 52%,#18191c 100%);background-color:var(--anth-base)}

/* Fitness bar: shakes and meals */
.home-page .food-experience{position:relative;background:var(--anth-surface);background-color:var(--anth-base)}
.food-slide .bar-banner,.food-slide .meal-banner{background:radial-gradient(75% 95% at 0 0,#e0bc7e21,transparent 60%),radial-gradient(60% 80% at 100% 100%,#9aa6b612,transparent 65%),var(--anth-grain),linear-gradient(150deg,#2c2f34 0%,#202225 55%,#17181b 100%);background-color:var(--anth-base)}
.food-controls{background:linear-gradient(180deg,#2b2e33,#1e2023);box-shadow:inset 0 1px 0 #ffffff0d}
.food-mobile-select select{background-color:#25282c}

/* App stage: a warm spotlight falls on the puzzle target */
.home-page .app-experience{background:radial-gradient(34% 62% at 76% 46%,#e8c88c2b,transparent 70%),linear-gradient(104deg,transparent 56%,#fff0cf0b 63%,transparent 71%),radial-gradient(70% 90% at 0 0,#e0bc7e14,transparent 60%),var(--anth-grain),linear-gradient(115deg,#1a1c1f 0%,#26292d 48%,#303338 100%);background-color:var(--anth-base)}

/* Footer: the gold rule reflects onto the dark surface below */
.readable-site .premium-footer{background:radial-gradient(55% 60% at 50% 0,#e0bc7e1c,transparent 70%),radial-gradient(60% 80% at 0 0,#45484c55,transparent 60%),var(--anth-grain),linear-gradient(180deg,#25272b 0%,#1c1e21 55%,#141517 100%);background-color:#1c1e21}
.readable-site .premium-footer::before{content:'';position:absolute;left:0;right:0;top:-3px;height:3px;pointer-events:none;background:linear-gradient(90deg,#8d713f 0%,#d4b574 22%,#fff0c8 42%,#c9ab70 58%,#9c7f4a 80%,#d9bd82 100%)}
.premium-footer .back-top{background:linear-gradient(145deg,#3b3e43,#25272b);box-shadow:inset 0 1px 0 #ffffff1a}
.premium-footer .back-top:hover{background:linear-gradient(145deg,#484b50,#2c2f33)}

/* Small anthracite surfaces: polished top edge */
.opening-ribbon-label{border-color:#4b4e53;background:radial-gradient(120% 160% at 0 0,#e0bc7e2e,transparent 60%),linear-gradient(135deg,#36393e,#1e2023);box-shadow:inset 0 1px 0 #ffffff1a,0 4px 12px #3a2a1424}
@media(min-width:761px){.readable-site .header-cta{overflow:hidden;border-color:#5d6066;background:radial-gradient(120% 140% at 0 0,#e0bc7e26,transparent 60%),linear-gradient(135deg,#3b3e43 0%,#26282c 55%,#1b1c1f 100%);box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #00000059,0 6px 16px #1a1a1c24}}

/* Silver and gold tariff plates: metal catches the light once they appear and on hover */
.home-page .plan-visual{background-image:linear-gradient(112deg,transparent 42%,#ffffffa6 50%,transparent 58%),linear-gradient(125deg,#fafbfc 0%,#d9dee5 42%,#f5f7f9 72%,#d8dee5 100%);background-size:250% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat}
.home-page .plan-all-in .plan-visual{background-image:linear-gradient(112deg,transparent 42%,#fff8e3b3 50%,transparent 58%),linear-gradient(125deg,#f6ead0 0%,#d3b982 44%,#eee0bb 73%,#c8ab71 100%);background-size:250% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat}

/* Motion stays optional: one pass, never looping */
@media(prefers-reduced-motion:no-preference){
 .home-page .plan-visual::before{content:'';position:absolute;inset:-40% -30%;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 40%,#ffffff94 49%,#fffdf5cc 50%,#ffffff3d 53%,transparent 60%);transform:translateX(-80%);opacity:0}
 .home-page .price-card.is-visible .plan-visual::before{animation:anth-metal-sheen 1800ms cubic-bezier(.25,.6,.3,1) 450ms both}
 .food-slide .bar-banner::before,.food-slide .meal-banner::before{content:'';position:absolute;inset:-30% -20%;z-index:3;pointer-events:none;background:linear-gradient(108deg,transparent 40%,#ffe9b826 48%,#fff6de47 50%,#e6c78a12 53%,transparent 60%);transform:translateX(-110%)}
 .food-slide.is-current .bar-banner::before,.food-slide.is-current .meal-banner::before{animation:anth-light-pass 1600ms cubic-bezier(.2,.6,.3,1) 120ms both}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .home-page .price-card:hover .plan-visual{background-position:0 0,0 0;transition:background-position 1100ms cubic-bezier(.25,.6,.3,1)}
 .readable-site .header-cta::after,.button-primary::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#fff7e052 48%,transparent 66%);transform:translateX(-120%)}
 .button-primary{overflow:hidden}
 .readable-site .header-cta:hover::after,.button-primary:hover::after{transform:translateX(120%);transition:transform 750ms cubic-bezier(.2,.6,.3,1)}
}
@keyframes anth-metal-sheen{0%{opacity:0;transform:translateX(-80%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(80%)}}
@keyframes anth-light-pass{0%{opacity:0;transform:translateX(-110%)}20%{opacity:1}100%{opacity:0;transform:translateX(110%)}}

@media(max-width:760px){
 .area-slide-copy{background:linear-gradient(90deg,transparent 6%,#e0bc7e70 36%,#e0bc7e1f 76%,transparent) top/100% 1px no-repeat,radial-gradient(120% 80% at 30% 0,#e0bc7e21,transparent 70%),var(--anth-grain),linear-gradient(170deg,#2f3237 0%,#222428 52%,#18191c 100%);background-color:var(--anth-base)}
 .home-page .app-experience{background:radial-gradient(70% 34% at 50% 74%,#e8c88c2b,transparent 70%),radial-gradient(90% 50% at 0 0,#e0bc7e14,transparent 60%),var(--anth-grain),linear-gradient(170deg,#1a1c1f 0%,#26292d 52%,#303338 100%);background-color:var(--anth-base)}
}
@media(forced-colors:active){.readable-site .premium-footer::before,.home-page .plan-visual::before,.food-slide .bar-banner::before,.food-slide .meal-banner::before,.readable-site .header-cta::after,.button-primary::after,.home-page .studio-welcome .journey-map a::before{display:none}}

/* interactions.css */
/* Counting numbers keep their final width, so nothing around them jumps. */
[data-count]{font-variant-numeric:lining-nums tabular-nums}
[data-count].is-counting{display:inline-block;text-align:right}

/* Clearer hover states: colour, border and depth on every pointer device;
   movement only when the visitor has not asked for reduced motion. */
@media(hover:hover){
 /* Tariffs */
 .readable-site .price-card:not(.will-reveal),.readable-site .price-card.is-settled{transition:transform 380ms cubic-bezier(.2,.7,.3,1),box-shadow 380ms ease,border-color 380ms ease}
 .home-page .price-card.plan-basic:hover{border-color:#8f9aa8;box-shadow:0 32px 64px -26px #3d465470,0 0 0 1px #8f9aa866}
 .home-page .price-card.plan-all-in:hover{border-color:#a8894f;box-shadow:0 32px 64px -24px #7a5a2470,0 0 0 1px #c9a86a80}
 .home-page .gym-pass{transition:transform 320ms cubic-bezier(.2,.7,.3,1),box-shadow 320ms ease,border-color 320ms ease}
 .home-page .gym-pass:hover{border-color:#9a7a44;box-shadow:inset 0 1px #fbf0d8,0 24px 46px -22px #6b502370}

 /* Extras, courses and course formats */
 .extra-card:hover{border-color:#a8894f;box-shadow:0 28px 56px -26px #493b2470}
 .extra-card:hover .extra-photo img{transform:scale(1.07)}
 .course-tile:hover{box-shadow:0 32px 64px -28px #1c1a1685}
 .course-tile:hover>img{transform:scale(1.07)}
 .course-tile .round-arrow{transition:transform 320ms cubic-bezier(.2,.7,.3,1),background-color 220ms ease,border-color 220ms ease}
 .readable-site .course-tile:hover .round-arrow{transform:rotate(45deg);background:#e5c895;border-color:#e5c895;color:#2a2418}
 .catalog-grid article:not(.will-reveal),.catalog-grid article.is-settled{transition:transform 320ms cubic-bezier(.2,.7,.3,1),box-shadow 320ms ease,border-color 320ms ease}
 .readable-site .catalog-grid article:hover{border-color:#b59b68;box-shadow:0 26px 50px -26px #6b502366}
 .home-page .studio-welcome .welcome-image:hover img{transform:scale(1.05)}

 /* Buttons */
 .readable-site .button:not(.button-primary):hover{box-shadow:0 14px 28px -14px #4a391d73}
 .readable-site .button-primary:hover{box-shadow:inset 0 1px 0 #fff7e1,0 16px 32px -14px #74552785;border-color:#7d6433}
 .readable-site .button-outline:hover{background:linear-gradient(135deg,#f5e9cf,#e3cd9e);border-color:#9a7c45;color:#2a2418}
 .home-page .plan-basic .button:hover{background:linear-gradient(135deg,#fbfcfd,#d0d7e0);border-color:#56616e}
 .home-page .plan-all-in .button:hover{background:linear-gradient(115deg,#ecd9ab,#c29f5e);border-color:#7d6433}
 .home-page .gym-pass .button:hover{background:linear-gradient(135deg,#f5e9cf,#dcc393);border-color:#846e45}
 .readable-site .header-cta:hover{border-color:#b59b68;box-shadow:inset 0 1px 0 #ffffff26,0 12px 26px -10px #00000066,0 0 0 1px #b59b6859}
 .area-arrow:hover,.food-arrow:hover{box-shadow:0 10px 22px -10px #0000006b}

 /* Links */
 .main-nav a::after{background:linear-gradient(90deg,#b59b68,#e5c895);transition:transform 280ms cubic-bezier(.2,.7,.3,1)}
 .readable-site .main-nav a:hover{color:#6b5530}
 .text-link{background:linear-gradient(90deg,#b59b68,#e5c895) left bottom/0 2px no-repeat;transition:background-size 320ms ease,color 200ms ease,border-color 200ms ease}
 .readable-site .text-link:hover{background-size:100% 2px;color:#6b5530;border-color:transparent}
 .readable-site .text-link:hover>span{transform:translate(4px,-3px)}
 .home-page .app-experience .text-link:hover{color:#f6dfae}
 .premium-footer .footer-column>a:hover{text-decoration-color:#e5c895}
 .home-page .studio-welcome .journey-map a>span:last-child{transition:transform 260ms ease}

 /* Questions */
 .home-page .faq-section .accordion summary{transition:background-color 220ms ease,box-shadow 220ms ease}
 .home-page .faq-section .accordion summary:hover{background:#d6d2c7;box-shadow:inset 3px 0 0 #b59b68}
 .accordion summary:hover span{color:#7a5f2c}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .home-page .price-card:hover,.home-page .price-card.will-reveal.is-visible:hover{transform:translateY(-10px)}
 .home-page .gym-pass:hover,.extra-card:hover,.readable-site .catalog-grid article:hover,.readable-site .catalog-grid article.will-reveal.is-visible:hover{transform:translateY(-6px)}
 .readable-site .course-tile:hover,.readable-site .course-tile.will-reveal.is-visible:hover{transform:translateY(-8px)}
 .readable-site .button:hover,.readable-site .header-cta:hover{transform:translateY(-3px)}
 .area-arrow:hover,.food-arrow:hover{transform:translateY(-3px)}
 .home-page .studio-welcome .journey-map a:hover>span:last-child{transform:translateY(4px)}
 .accordion summary:hover span{transform:scale(1.3)}
 .accordion details[open] summary:hover span{transform:rotate(45deg) scale(1.3)}
}

/* hero-cinema.css */
/* Header as a short title sequence: 7 Areas. → 1 Erlebnis. → Puzzle Gym → Dein Fitnessstudio in Nürnberg.
   Without JavaScript or with reduced motion the finished composition is shown straight away. */
/* No own layer group here, otherwise the logo's multiply would lose the cream backdrop. */
.home-page .boutique-hero .brand-hero-content,.home-page .boutique-hero h1.hero-sequence{mix-blend-mode:normal;z-index:auto;perspective:none}
.home-page .boutique-hero h1.hero-sequence{display:flex;flex-direction:column;align-items:center;margin:0;--hero-track:-.068em;font-size:clamp(84px,8.8vw,156px);font-weight:600;line-height:1;letter-spacing:var(--hero-track);color:#252b23}
.hero-sequence .hero-scene{display:block;position:relative}
.hero-scene-areas{padding-inline:.06em}
.hero-scene-areas .hero-num{font-variant-numeric:lining-nums tabular-nums}
.hero-scene-experience{margin-top:.02em}
.hero-scene-experience .hero-reveal{display:block;padding:0 .08em .06em;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.08em;line-height:1.04;letter-spacing:-.035em;color:#8c6b35}
.hero-divider{display:block;width:min(360px,56%);height:1px;margin:clamp(22px,2.6vw,34px) auto clamp(20px,2.2vw,28px);background:linear-gradient(90deg,transparent,#b59b68 22%,#e9cf95 50%,#b59b68 78%,transparent)}
.hero-brand-row{display:grid;place-items:center}
.hero-bloom{position:absolute;left:50%;top:50%;width:170%;height:320%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,#fffaf0e0,#f5e2b870 42%,#e3c78a1f 64%,transparent 78%);opacity:.5}
.home-page .boutique-hero .hero-brand-logo{position:relative;width:clamp(240px,22vw,360px);font-size:1rem}
.hero-credit{--credit-track:.14em;display:flex;align-items:center;justify-content:center;gap:16px;max-width:100%;text-align:center;text-wrap:balance;margin-top:clamp(14px,1.6vw,20px);font-family:Manrope,sans-serif;font-size:clamp(16px,1.35vw,20px);line-height:1.5;font-weight:600;letter-spacing:var(--credit-track);text-transform:uppercase;color:#6d5936}
.hero-credit:before,.hero-credit:after{content:'';flex:0 0 42px;height:1px;background:#a68c5775}
.home-page .boutique-hero .hero-sequence+.hero-actions,.home-page .boutique-hero .brand-hero-content>.hero-actions{margin-top:clamp(26px,3vw,40px)}

/* Light sweeps over the lettering once. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .hero-shine{background-image:linear-gradient(100deg,var(--shine-base) 0 40%,var(--shine-light) 50%,var(--shine-base) 60% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
 .hero-scene-areas .hero-shine{--shine-base:#252b23;--shine-light:#e9cf95}
 .hero-scene-experience .hero-shine{--shine-base:#8c6b35;--shine-light:#fff1cf}
}

/* Before the sequence starts, its parts wait invisibly (only while motion is welcome and the script runs). */
.hero-cinema-pending .home-page .boutique-hero:not(.is-cinema-entering) :is(.hero-scene,.hero-divider,.hero-actions,.brand-hero-bottom,.hero-scroll-cue){opacity:0}

@media(prefers-reduced-motion:no-preference){
 .home-page .boutique-hero.is-cinema-entering .hero-scene-areas{animation:hero-cinema-areas 1700ms linear 100ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-scene-areas .hero-num{animation:hero-cinema-glow 1500ms ease 600ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-scene-experience .hero-reveal{animation:hero-cinema-write 950ms cubic-bezier(.45,.05,.2,1) 1450ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-scene-experience:after{content:'';position:absolute;top:6%;bottom:10%;left:0;width:2px;border-radius:2px;pointer-events:none;background:linear-gradient(transparent,#fff6dc 30%,#fff6dc 70%,transparent);box-shadow:0 0 22px 7px #f0d392a6;animation:hero-cinema-pen 950ms cubic-bezier(.45,.05,.2,1) 1450ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-scene-areas .hero-shine{animation:hero-cinema-shine 1400ms cubic-bezier(.3,.6,.3,1) 2200ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-scene-experience .hero-shine{animation:hero-cinema-write 950ms cubic-bezier(.45,.05,.2,1) 1450ms both,hero-cinema-shine 1400ms cubic-bezier(.3,.6,.3,1) 2350ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-divider{animation:hero-cinema-line 750ms cubic-bezier(.3,.7,.2,1) 2350ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-bloom{animation:hero-cinema-bloom 1900ms ease-out 2450ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-brand-logo{animation:hero-cinema-logo 1000ms cubic-bezier(.16,.72,.22,1) 2550ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-credit{animation:hero-cinema-credit 1000ms cubic-bezier(.2,.7,.2,1) 3100ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-credit:before,.home-page .boutique-hero.is-cinema-entering .hero-credit:after{animation:hero-cinema-line 800ms cubic-bezier(.3,.7,.2,1) 3350ms both}
 .home-page .boutique-hero.is-cinema-entering .hero-actions{animation:boutique-fade-in 750ms ease 3550ms both}
 .home-page .boutique-hero.is-cinema-entering :is(.brand-hero-bottom,.hero-scroll-cue){animation:boutique-fade-in 750ms ease 3800ms both}
 /* Keyboard users get everything at once. */
 .home-page .boutique-hero .hero-stage:focus-within :is(.hero-scene,.hero-scene *,.hero-divider,.hero-bloom,.hero-brand-logo,.hero-credit,.hero-actions,.brand-hero-bottom,.hero-scroll-cue){animation:none!important;opacity:1;filter:none;transform:none;clip-path:none}
 .home-page .boutique-hero .hero-stage:focus-within .hero-bloom{opacity:.5;transform:translate(-50%,-50%)}
}
/* 7 Areas. appears large in the middle of the visible stage, holds, then glides to its place. */
@keyframes hero-cinema-areas{0%{opacity:0;transform:translateY(var(--areas-shift,0px)) scale(1.28);filter:blur(16px);letter-spacing:.02em;animation-timing-function:cubic-bezier(.16,.72,.22,1)}30%{opacity:1;transform:translateY(var(--areas-shift,0px)) scale(1.2);filter:blur(0);letter-spacing:var(--hero-track);animation-timing-function:linear}55%{opacity:1;transform:translateY(var(--areas-shift,0px)) scale(1.18);filter:blur(0);letter-spacing:var(--hero-track);animation-timing-function:cubic-bezier(.65,0,.25,1)}100%{opacity:1;transform:none;filter:blur(0);letter-spacing:var(--hero-track)}}
@keyframes hero-cinema-glow{0%{text-shadow:0 0 0 #e7c98800}35%{text-shadow:0 0 34px #e7c988cc}100%{text-shadow:0 0 0 #e7c98800}}
@keyframes hero-cinema-write{from{clip-path:inset(-25% 100% -25% 0)}to{clip-path:inset(-25% -6% -25% -6%)}}
@keyframes hero-cinema-pen{0%{left:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes hero-cinema-shine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes hero-cinema-line{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes hero-cinema-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}}
@keyframes hero-cinema-logo{from{opacity:0;transform:translateY(18px) scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes hero-cinema-credit{from{opacity:0;letter-spacing:calc(var(--credit-track) + .36em)}to{opacity:1;letter-spacing:var(--credit-track)}}

@media(min-width:901px) and (max-height:800px){
 .home-page .boutique-hero h1.hero-sequence{font-size:clamp(64px,6vw,96px)}
 .home-page .boutique-hero .hero-brand-logo{width:220px}
 .hero-divider{margin-block:16px 14px}
}
@media(max-width:760px){
 .home-page .boutique-hero h1.hero-sequence{--hero-track:-.07em;font-size:clamp(58px,17vw,100px)}
 .home-page .boutique-hero .hero-brand-logo{width:clamp(200px,58vw,260px)}
 .hero-credit{--credit-track:.08em;gap:10px;font-size:16px}
 .hero-credit:before,.hero-credit:after{flex-basis:18px}
}
@media(max-width:360px){
 .home-page .boutique-hero h1.hero-sequence{font-size:54px}
 .hero-credit{--credit-track:.04em;gap:7px}.hero-credit:before,.hero-credit:after{flex-basis:10px}
}
@media(forced-colors:active){
 .hero-shine{color:CanvasText;background:none}
 .hero-bloom,.hero-divider{display:none}
}

/* supplements.css */
/* Supplement Area: ein ruhiger Laden — Gruppen, große Produktbilder, Sorten zum Durchklicken. */
.shop-page{max-width:1200px;margin:auto;padding:48px 24px 80px;--shop-gold:#806339;--shop-linie:#bca783;--shop-dunkel:#252629;--shop-text:#3a352b;--shop-leise:#625946}
.shop-page .text-link{display:inline-block;margin-bottom:8px}
.shop-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin:12px 0 28px;padding-bottom:28px;border-bottom:1px solid #b6a38166}
.shop-hero h1{font-size:clamp(36px,5vw,64px);line-height:1.08;margin:14px 0 16px;letter-spacing:-.03em}
.shop-hero p:not(.eyebrow){font-size:18px;line-height:1.6;max-width:640px;margin:0;color:var(--shop-text)}
.shop-marke{width:150px;height:auto;opacity:.9}

.shop-gruppen{position:sticky;top:96px;z-index:5;display:flex;gap:8px;overflow-x:auto;padding:10px 0 12px;margin:0 0 8px;background:linear-gradient(#e8dcc6 80%,#e8dcc600);scrollbar-width:none}
.shop-gruppen::-webkit-scrollbar{display:none}
.shop-gruppen a{flex:0 0 auto;padding:9px 16px;border:1px solid var(--shop-linie);border-radius:999px;background:#fffaf0b3;color:var(--shop-text);text-decoration:none;font-size:14px;font-weight:600;transition:background .18s,border-color .18s,color .18s}
.shop-gruppen a:hover{border-color:var(--shop-gold)}
.shop-gruppen a.is-aktiv{background:var(--shop-dunkel);border-color:var(--shop-dunkel);color:#eadfc0}

.shop-gruppe{padding:36px 0 12px;scroll-margin-top:160px}
.shop-gruppe-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:18px}
.shop-gruppe-kopf h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.025em;margin:0}
.shop-gruppe-kopf p{margin:0;color:var(--shop-leise);max-width:460px;text-align:right}
.shop-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}

.shop-karte{display:flex;flex-direction:column;border:1px solid var(--shop-linie);border-radius:22px;background:#fffaf0;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
@media(hover:hover){.shop-karte:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(37,38,41,.45)}}
.shop-bild{position:relative;aspect-ratio:1/1;background:radial-gradient(circle at 50% 42%,#ffffff 0,#f6efe1 58%,#eadfca 100%)}
.shop-bild img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;transition:opacity .2s}
.shop-bild .shop-flagge{position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:999px;background:var(--shop-dunkel);color:#eadfc0;font-size:12px;font-weight:600}
.shop-text{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;flex:1}
.shop-text h3{margin:0;font-size:20px;letter-spacing:-.01em}
.shop-menge{font-size:13px;color:var(--shop-leise);margin-top:-6px}
.shop-sorten{display:flex;flex-wrap:wrap;gap:6px}
.shop-sorten button{padding:6px 11px;border:1px solid var(--shop-linie);border-radius:999px;background:#fff;font:inherit;font-size:13px;color:var(--shop-text);cursor:pointer;transition:background .15s,border-color .15s}
.shop-sorten button:hover{border-color:var(--shop-gold)}
.shop-sorten button[aria-pressed=true]{background:var(--shop-dunkel);border-color:var(--shop-dunkel);color:#fff}
.shop-sorten button.is-aus{opacity:.5;text-decoration:line-through}
.shop-fakten{margin:0;padding-left:18px;font-size:14px;line-height:1.55;color:var(--shop-text)}
.shop-angabe{margin:0;font-size:12.5px;line-height:1.5;color:var(--shop-leise);font-style:italic}
.shop-preiszeile{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid #dfd2b6}
.shop-preis{font-size:20px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.shop-preis.is-theke{font-size:15px;font-weight:600;color:var(--shop-gold)}
.shop-status{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#e3f4e9;color:#1f6b3d;white-space:nowrap}
.shop-status.is-knapp{background:#fff1dc;color:#7a4a05}.shop-status.is-aus{background:#f1e9e6;color:#8c1d14}

.shop-hinweis{margin-top:48px;padding:28px;border-radius:22px;background:var(--shop-dunkel);color:#f5eddd}
.shop-hinweis h2{margin:0 0 14px;font-size:24px;color:#f5eddd}
.shop-hinweis ol{margin:0 0 18px;padding-left:20px;line-height:1.8}
.shop-rechtlich{margin:0;font-size:12.5px;line-height:1.6;color:#f5edddb3}
.shop-laden{color:var(--shop-leise)}

@media(max-width:760px){
 .shop-page{padding:32px 16px 60px}
 .shop-hero{grid-template-columns:1fr;gap:16px}.shop-marke{width:110px;order:-1}
 .shop-gruppen{top:150px}
 .shop-gruppe-kopf{flex-direction:column;gap:6px}.shop-gruppe-kopf p{text-align:left}
 .shop-raster{grid-template-columns:1fr 1fr;gap:12px}
 .shop-text{padding:14px}.shop-text h3{font-size:17px}.shop-fakten{font-size:13px}
}
@media(max-width:480px){.shop-raster{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.shop-karte,.shop-bild img{transition:none}}
/* Ein Produkt allein in der Gruppe: breite Karte */
.shop-raster.is-einzeln{grid-template-columns:1fr}
.shop-raster.is-einzeln .shop-karte{flex-direction:row}
.shop-raster.is-einzeln .shop-bild{flex:0 0 min(42%,440px);aspect-ratio:1/1}
.shop-raster.is-einzeln .shop-text{padding:clamp(20px,3vw,36px);gap:14px;justify-content:center}
.shop-raster.is-einzeln .shop-text h3{font-size:clamp(24px,2.6vw,32px)}
.shop-raster.is-einzeln .shop-fakten{font-size:15px}
.shop-raster.is-einzeln .shop-preiszeile{max-width:520px}
@media(max-width:640px){.shop-raster.is-einzeln .shop-karte{flex-direction:column}.shop-raster.is-einzeln .shop-bild{flex-basis:auto}}
.shop-raster.is-paar{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop-preis.is-theke{white-space:nowrap}
@media(max-width:480px){.shop-raster.is-paar{grid-template-columns:1fr}}
.shop-raster:not(.is-einzeln){grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr))}
@media(max-width:900px){.shop-raster:not(.is-einzeln){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.shop-raster:not(.is-einzeln){grid-template-columns:1fr}}
/* Shopfront: einheitliche Karten, sichtbare Auswahl und Produktdetails. */
.shop-page{max-width:1370px;padding-top:24px;--shop-leise:#655e52}
.shop-hero{position:relative;overflow:hidden;grid-template-columns:1.1fr 1fr;align-items:center;min-height:450px;margin-top:18px;padding:45px 52px;border:0;border-radius:22px;background:#222624;color:#f8f2e4}
.shop-hero .eyebrow{color:#d9bd7f;font-size:12px;letter-spacing:.17em}
.shop-hero h1{font-size:clamp(42px,5.6vw,76px);font-weight:600;line-height:1.02;color:#fff9ee;letter-spacing:-.045em}
.shop-hero p:not(.eyebrow){color:#dfd8c8;max-width:460px;font-size:17px}
.shop-hero-link{display:inline-block;margin-top:24px;background:#e1c68d;color:#232822;text-decoration:none;padding:13px 23px;border-radius:7px;font-weight:650}
.shop-hero-note{display:block;margin-top:14px;color:#ccc8bd;font-size:12px}
.shop-hero-visual{position:relative;min-height:365px;display:grid;place-items:center}
.shop-hero-visual img{width:92%;height:345px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 18px 15px #0006)}
.shop-hero-circle{position:absolute;width:300px;height:300px;border:1px solid #c4ac7466;border-radius:50%;background:radial-gradient(circle,#7a74554d,#31393000)}
.shop-hero-caption{position:absolute;right:-10px;bottom:5px;color:#e1c68d;font-size:13px;line-height:1.5;text-transform:uppercase;letter-spacing:.1em}
.shop-service{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid #ad977766;padding:4px 8px 23px;margin-bottom:30px;color:#544b3c;font-size:13px}
.shop-catalogue{scroll-margin-top:110px}.shop-tools{display:flex;justify-content:space-between;gap:16px;align-items:end}
.shop-tools label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:650;letter-spacing:.02em}.shop-search{flex:1;max-width:510px}
.shop-tools input,.shop-tools select{font:inherit;font-size:15px;min-height:46px;border:1px solid #b6a88d;border-radius:8px;background:#fffaf1;padding:10px 14px;color:#252629;width:100%}
.shop-gruppen{top:88px;background:#e8dcc6;padding:18px 0;margin:0;gap:7px}
.shop-gruppen button{border:1px solid #b6a88d;white-space:nowrap;border-radius:7px;background:#fffaf1;padding:10px 15px;color:#443d30;font:inherit;font-size:13px;cursor:pointer}
.shop-gruppen button[aria-pressed=true]{background:#262c27;color:#f8f1df;border-color:#262c27}
.shop-results{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 20px}.shop-results h2{font-size:28px;margin:0;letter-spacing:-.035em}.shop-results p{font-size:13px;color:#655e52}
.shop-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.shop-karte{min-width:0;border-radius:12px;border-color:#c5b89f;background:#fffcf5}
.shop-bild{aspect-ratio:1.25;background:radial-gradient(circle,#fffdf9,#f0eade)}.shop-bild img{inset:8%;height:84%;width:84%}
.shop-text{gap:9px;padding:18px}.shop-brand{text-transform:uppercase;font-size:10px;letter-spacing:.09em;font-weight:700;color:#817156}.shop-text h3{font-size:20px;line-height:1.25}
.shop-variant-label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#625847;margin-top:3px}.shop-variant-label select{width:100%;font:inherit;font-size:13px;color:#252629;background:#fffefb;border:1px solid #c4b79c;border-radius:6px;padding:9px;min-height:38px}
.shop-preiszeile{align-items:flex-start;flex-direction:column;gap:8px;border:0;padding-top:7px;margin-top:auto}.shop-preis{font-size:23px}.shop-preis.is-theke{font-size:16px}.shop-status{padding:0;background:none!important;font-weight:400;font-size:12px;white-space:normal;color:#655e52}.shop-status.is-aus{color:#85543b}
.shop-product-link{margin-top:8px;padding:11px 12px;border:1px solid #b9a989;border-radius:6px;background:transparent;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.shop-product-link:hover{background:#f0e7d4}
.shop-placeholder{height:100%;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:9px;background:linear-gradient(140deg,#f7f3ea,#e6dece);color:#77694f}.shop-placeholder strong{font-size:15px;max-width:230px}.shop-placeholder small{font-size:11px;letter-spacing:.04em}.shop-placeholder-symbol{font-size:38px;line-height:1;display:grid;place-items:center;width:66px;height:76px;border:1px solid #b6a88c;border-radius:11px 11px 20px 20px;font-weight:600;color:#a18c63}
.shop-empty{padding:36px;border:1px solid #b6a88d;border-radius:12px}.shop-dialog{width:min(880px,calc(100% - 32px));max-height:90vh;padding:24px;border:1px solid #c1ad86;border-radius:16px;background:#fffcf5;color:#252629}.shop-dialog::backdrop{background:#121811ab}.shop-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.shop-dialog-top h2{font-size:17px;margin:0}.shop-dialog-top button{border:1px solid #c1ad86;border-radius:50%;width:38px;height:38px;background:transparent;font-size:18px;cursor:pointer}.shop-dialog .shop-karte{display:grid;grid-template-columns:1fr 1fr;border:0;box-shadow:none;transform:none}.shop-dialog .shop-bild{aspect-ratio:1}.shop-detail-note{font-size:12px;color:#655e52;line-height:1.6}.shop-dialog .shop-text{padding-top:8px}
@media(min-width:1300px){.shop-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.shop-hero{padding:28px;gap:12px;min-height:350px}.shop-hero-visual{min-height:280px}.shop-hero-visual img{height:260px}.shop-hero-circle{width:230px;height:230px}.shop-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-service{flex-wrap:wrap;justify-content:flex-start}.shop-hero-caption{display:none}}
@media(max-width:560px){.shop-page{padding:22px 16px 48px}.shop-hero{grid-template-columns:1fr;padding:25px}.shop-hero h1{font-size:45px}.shop-hero-visual{display:none}.shop-service{gap:9px 16px;font-size:11px}.shop-tools{align-items:stretch;flex-direction:column;gap:12px}.shop-search{max-width:none}.shop-sort{max-width:100%}.shop-results{align-items:flex-start;flex-direction:column;gap:5px}.shop-results p{margin:0}.shop-raster{gap:12px}.shop-text{padding:12px}.shop-text h3{font-size:16px}.shop-preis{font-size:20px}.shop-preis.is-theke{font-size:13px}.shop-product-link{padding:10px 5px;font-size:11px}.shop-variant-label select{font-size:12px;padding:8px 3px}.shop-placeholder{padding:12px}.shop-placeholder strong{font-size:12px}.shop-placeholder-symbol{width:40px;height:45px;font-size:25px}.shop-placeholder small{font-size:9px}.shop-dialog .shop-karte{grid-template-columns:1fr}.shop-dialog .shop-bild{aspect-ratio:1.5}.shop-gruppen{top:72px}.shop-dialog{padding:16px}}

.shop-reservation{margin:35px auto;padding:28px;max-width:1000px;background:#fffaf1;border:1px solid #c8b981;border-radius:18px}.shop-reservation[hidden]{display:none}.shop-reservation p button{margin-left:15px}.shop-reservation-form{display:grid;gap:18px;margin-top:22px}.shop-reservation-form label{display:grid;gap:8px}.shop-reservation-form input:not([type=checkbox]){padding:12px;border:1px solid #bbb5a7;border-radius:8px;font:inherit}.shop-product-link:disabled{opacity:.5;cursor:not-allowed}

/* --- Vorbestellen im Puzzle Gym (nach dem Vorbild des Camp-Dörfl-Shops) --- */
.shop-ablauf{list-style:none;counter-reset:schritt;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 30px;padding:0}
.shop-ablauf li{counter-increment:schritt;position:relative;padding:16px 16px 16px 58px;border:1px solid var(--shop-linie);border-radius:18px;background:#fffaf0}
.shop-ablauf li::before{content:counter(schritt);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--shop-dunkel);color:#eadfc0;font-weight:700;font-size:14px}
.shop-ablauf b{display:block;font-size:15px;margin-bottom:3px}
.shop-ablauf span{font-size:13.5px;line-height:1.45;color:var(--shop-leise)}

.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
.shop-layout .shop-raster:not(.is-einzeln){grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}

.shop-variant-fest{font-size:13px;color:var(--shop-leise)}
.shop-status.is-aus{background:#f6e3df;color:#9a3a26}
.shop-vorbestellen{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-top:4px;padding:12px 16px;border:0;border-radius:999px;background:var(--shop-dunkel);color:#f5eddd;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:transform .15s,background .15s}
.shop-vorbestellen:hover:not(:disabled){background:#000;transform:translateY(-1px)}
.shop-vorbestellen:disabled{background:#e4dac6;color:#8b7f68;cursor:not-allowed}
.shop-vorbestellen-plus{font-size:20px;line-height:1}
.shop-karte.ist-im-korb{border-color:var(--shop-gold);box-shadow:0 0 0 1px var(--shop-gold) inset}
.shop-karte-korb{padding:10px 12px;border-radius:14px;background:#f3ead7}
.shop-karte-korb-titel{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--shop-gold)}
.shop-karte-korb-zeile{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.shop-karte-korb-zeile span{flex:1}
.shop-karte-korb-zeile button,.shop-bestellung-menge button{width:28px;height:28px;border:1px solid var(--shop-linie);border-radius:50%;background:#fff;font:inherit;font-weight:700;cursor:pointer;line-height:1}
.shop-karte-korb-zeile button:disabled,.shop-bestellung-menge button:disabled{opacity:.4;cursor:not-allowed}
.shop-details-link{align-self:flex-start;padding:2px 0;border:0;background:none;color:var(--shop-gold);font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.shop-bestellung{position:sticky;top:150px;scroll-margin-top:150px}
.shop-bestellung-inner{max-height:calc(100vh - 170px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:22px;border-radius:24px;background:var(--shop-dunkel);color:#f5eddd;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.shop-bestellung-eyebrow{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c9ab70}
.shop-bestellung h2{margin:0 0 12px;font-size:24px;color:#fff;letter-spacing:-.02em}
.shop-bestellung-leer{margin:0;font-size:14px;line-height:1.55;color:#d8cdb5}
.shop-bestellung-liste{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px;max-height:300px;overflow:auto}
.shop-bestellung-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding-bottom:10px;border-bottom:1px solid #ffffff1f}
.shop-bestellung-liste b{display:block;font-size:14px;line-height:1.3}
.shop-bestellung-liste small{font-size:12px;color:#b9ad93}
.shop-bestellung-liste strong{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums}
.shop-bestellung-menge{grid-column:1;display:flex;align-items:center;gap:8px}
.shop-bestellung-menge button{border-color:#ffffff40;background:transparent;color:#fff}
.shop-bestellung-summe{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0 14px;font-size:15px}
.shop-bestellung-summe strong{font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.shop-bestellung-form{display:grid;gap:10px}
.shop-bestellung-form label{display:grid;gap:5px;font-size:12.5px;font-weight:600;color:#d8cdb5}
.shop-bestellung-form small{font-weight:400;color:#a89c82}
.shop-bestellung-form input:not([type=checkbox]),.shop-bestellung-form select{width:100%;min-height:42px;padding:9px 12px;border:1px solid #ffffff33;border-radius:12px;background:#ffffff12;color:#fff;font:inherit;font-size:15px}
.shop-bestellung-form select option{color:#252629}
.shop-bestellung-form input::placeholder{color:#a89c82}
.shop-bestellung-zeit{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.shop-bestellung-check{grid-template-columns:auto 1fr!important;align-items:start;font-weight:500!important;line-height:1.45}
.shop-bestellung-check input{width:18px;height:18px;margin-top:1px;accent-color:#c9ab70}
.shop-bestellung-senden{margin-top:4px;padding:14px;border:0;border-radius:999px;background:linear-gradient(135deg,#e9d3a1,#c9a15e);color:#252629;font:inherit;font-weight:800;font-size:16px;cursor:pointer}
.shop-bestellung-senden:disabled{opacity:.6;cursor:wait}
.shop-bestellung-status{margin:0;min-height:1em;font-size:13.5px;line-height:1.45}
.shop-bestellung-status.is-fehler{padding:10px 12px;border-radius:12px;background:#fbe9d9;color:#6d3a12}
.shop-bestellung-hinweis{margin:0;font-size:12px;line-height:1.5;color:#a89c82}
.shop-bestellung-hinweis a{color:#d8cdb5}
.shop-bestellung-fertig h3{margin:0 0 6px;font-size:22px;color:#fff}
.shop-bestellung-fertig p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#e6dcc6}
.shop-bestellung-nummer{display:inline-block;padding:6px 12px;border-radius:999px;background:#c9ab70;color:#252629!important;font-weight:800;letter-spacing:.04em}
.shop-bestellung-fertig ul{margin:0 0 8px;padding-left:18px;font-size:13.5px;line-height:1.6;color:#e6dcc6}
.shop-bestellung-fertig-summe{font-weight:700;color:#fff!important}
.shop-bestellung-fertig .shop-details-link{color:#c9ab70}

.shop-leiste{display:none}
.shop-hinweis ul{margin:0 0 18px;padding-left:20px;line-height:1.7}

@media(max-width:1000px){
 .shop-layout{grid-template-columns:1fr}
 .shop-bestellung{position:static}
 .shop-bestellung-inner{max-height:none;overflow:visible}
 .shop-leiste:not([hidden]){display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:20;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-radius:18px;background:var(--shop-dunkel);color:#f5eddd;box-shadow:0 16px 40px -16px rgba(0,0,0,.6)}
 .shop-leiste div{display:grid}
 .shop-leiste strong{font-size:14px}
 .shop-leiste span{font-size:13px;color:#d8cdb5}
 .shop-leiste-knopf{padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,#e9d3a1,#c9a15e);color:#252629;font-weight:800;text-decoration:none;white-space:nowrap}
 .shop-page{padding-bottom:110px}
}
@media(max-width:760px){.shop-ablauf{grid-template-columns:1fr}}

/* Kopf: das Foto der Supplement Area groß, Text links auf dunklem Verlauf */
.shop-hero{grid-template-columns:minmax(0,1fr)!important;min-height:520px!important;align-items:end!important;isolation:isolate}
.shop-hero-bild{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:55% 45%}
.shop-hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(24,26,25,.92) 0%,rgba(24,26,25,.78) 38%,rgba(24,26,25,.25) 72%,rgba(24,26,25,.1) 100%),linear-gradient(0deg,rgba(24,26,25,.55),rgba(24,26,25,0) 45%)}
.shop-hero-copy{position:relative;z-index:2;max-width:560px}
.shop-hero-copy h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
@media(max-width:850px){.shop-hero{min-height:440px!important}}
@media(max-width:560px){.shop-hero{min-height:470px!important}.shop-hero::after{background:linear-gradient(0deg,rgba(24,26,25,.94) 0%,rgba(24,26,25,.8) 55%,rgba(24,26,25,.35) 100%)}}
.shop-bestellung-fenster{margin:2px 0 0;font-size:12.5px;font-weight:600;color:#c9ab70}

/* shop-premium.css */
/* Supplement Area: die warme Markenwelt als eigenständige Boutique. */
.supplement-store{--store-ease:cubic-bezier(.2,.7,.25,1);background:#eee3cf}
.supplement-store .shop-page{max-width:1480px;padding:24px clamp(20px,4vw,64px) 80px;--shop-text:#393a30;--shop-leise:#68604f;--shop-gold:#806339}
.shop-breadcrumb{display:flex;align-items:center;gap:14px;min-height:44px;margin:0 0 16px;font-size:14px;color:#79694f}
.shop-breadcrumb a{color:#494c3d;text-decoration:none;padding-block:12px}
.shop-breadcrumb a:hover{text-decoration:underline;text-underline-offset:5px}
.shop-breadcrumb>span[aria-current]{color:#76603b}
.supplement-store .shop-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;min-height:510px;margin:0;border:1px solid #af946051;padding:0;border-radius:24px;box-shadow:0 20px 60px -38px #302b226e;background:#262b28;isolation:isolate}
.shop-hero-copy{padding:clamp(28px,4.3vw,64px);position:relative;z-index:1}
.supplement-store .shop-hero .eyebrow{display:flex;gap:16px;align-items:center;font-size:14px;font-weight:500;letter-spacing:.06em;line-height:1.6;margin:0 0 28px;color:#d2bf95}
.shop-hero .eyebrow>span{font-variant-numeric:tabular-nums;color:#a89163}
.supplement-store .shop-hero h1{font-size:clamp(40px,4.7vw,70px);font-weight:500;line-height:1.06;letter-spacing:-.052em;margin:0 0 24px;color:#f9f2e4}
.shop-hero h1 em{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.12em;font-weight:400;line-height:1.12;letter-spacing:-.035em;color:#dcc38f}
.supplement-store .shop-hero p:not(.eyebrow){font-size:17px;line-height:1.8;color:#d8d6ca;max-width:410px}
.supplement-store .shop-hero-link{display:inline-flex;align-items:center;gap:30px;min-height:54px;padding:13px 22px;margin-top:30px;border:1px solid #ccb27b;border-radius:9px;box-shadow:inset 0 1px #fff2c7;background:linear-gradient(115deg,#dfc592,#efddaf);font-size:16px;font-weight:600;color:#292e26;transition:box-shadow .25s,background .25s}
.shop-hero-link>span{font-size:23px;line-height:1}
.supplement-store .shop-hero-note{font-size:14px;color:#c5c3b6;margin-top:16px;line-height:1.5}
.shop-catalogue-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.shop-eyebrow{font-size:13px;line-height:1.6;letter-spacing:.085em;text-transform:uppercase;color:#806743;margin:0 0 12px;font-weight:600}
.shop-catalogue-intro h2{font-size:clamp(34px,4vw,52px);line-height:1.15;letter-spacing:-.04em;font-weight:500;margin:0;color:#293126}
.shop-catalogue-intro h2 em,.shop-hinweis h2 em{font-family:'Cormorant Garamond',Georgia,serif;color:#80643a;font-size:1.12em;font-weight:500}
.shop-selection-link{display:flex;align-items:center;gap:12px;color:#514631;font-size:15px;font-weight:600;text-decoration:none;border:1px solid #b5a17d;border-radius:9px;padding:12px 16px;min-height:48px}
.shop-selection-link [data-shop-basket-count]{display:grid;place-items:center;min-width:24px;height:24px;background:#343b2e;color:#f7eaca;border-radius:50%;font-size:13px}
.shop-selection-link[hidden],.shop-reset[hidden]{display:none}
.supplement-store .shop-catalogue{scroll-margin-top:calc(var(--header-clearance,130px) + 16px)}
.supplement-store .shop-tools{gap:24px;background:#f8f0df80;border:1px solid #cbb99780;border-radius:16px;padding:22px 24px}
.supplement-store .shop-search{max-width:none}
.supplement-store .shop-sort{width:250px;flex-shrink:0}
.supplement-store .shop-tools label{font-size:14px;gap:9px;font-weight:500;color:#665940;letter-spacing:0}
.supplement-store .shop-tools :is(input,select){font-size:16px;min-height:52px;border-radius:9px;border-color:#c7b593;background:#fffaf0;color:#35372d}
.supplement-store .shop-search input{padding-left:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386714d' stroke-width='1.5'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;background-size:20px}
.supplement-store .shop-gruppen{top:var(--header-clearance,124px);z-index:10;margin:0 -2px;padding:18px 2px;gap:8px;background:#eee3cff5;backdrop-filter:blur(14px);border-bottom:1px solid #b49d7640;scroll-padding-inline:8px}
.supplement-store .shop-gruppen button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 15px;border-radius:999px;background:transparent;border-color:#b4a17e80;color:#574d3c;font-size:15px;transition:color .2s,background .2s,border-color .2s}
.supplement-store .shop-gruppen button[aria-pressed=true]{background:#30372c;border-color:#30372c;color:#f3e6c9;box-shadow:0 4px 12px #333a2012}
.shop-category-count{font-size:12px;font-variant-numeric:tabular-nums;opacity:.75}
.supplement-store .shop-results{align-items:center;margin:28px 0 22px;gap:18px}
.supplement-store .shop-results h2{font-size:26px;font-weight:500;letter-spacing:-.025em}
.shop-result-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.supplement-store .shop-results p{margin:0;font-size:14px;color:#766951}
.shop-reset{display:flex;align-items:center;gap:10px;background:none;border:0;border-bottom:1px solid #ad9469;padding:9px 0;color:#70562e;font:inherit;font-size:14px;cursor:pointer;min-height:44px}
/* Größere, ruhige Produktkarten: Preis vor Aktion, klare Bedienelemente. */
.supplement-store .shop-raster:not(.is-einzeln){grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.supplement-store .shop-karte{background:#fffaf0;border:1px solid #c6b7988c;border-radius:18px;box-shadow:0 8px 24px -24px #4d3d27;transition:transform .3s var(--store-ease),box-shadow .3s var(--store-ease),border-color .3s}
.shop-product-visual{overflow:hidden;position:relative}
.supplement-store .shop-bild{aspect-ratio:1.22;background:radial-gradient(ellipse at 50% 38%,#fffef8 5%,#f4ebd9 66%,#e7d9bf);border-bottom:1px solid #dacbb057}
.supplement-store .shop-bild img{width:94%;height:94%;inset:3%;filter:drop-shadow(0 12px 12px #6a573914);transition:transform .55s var(--store-ease),opacity .2s}
.supplement-store .shop-bild .shop-flagge{font-size:12px;padding:7px 10px;letter-spacing:.02em;left:16px;top:16px;background:#30372c;color:#f4e8cd;z-index:2}
.supplement-store .shop-text{padding:24px;gap:12px}
.supplement-store .shop-brand{font-size:12px;letter-spacing:.09em;font-weight:500;color:#806c49}
.supplement-store .shop-text h3{font-size:23px;line-height:1.25;letter-spacing:-.025em;font-weight:600;color:#30372c}
.supplement-store .shop-menge{font-size:15px;line-height:1.5;color:#766b57;margin-top:-5px}
.shop-product-note{font-size:15px;line-height:1.65;margin:0;color:#686353;min-height:2.5em}
.supplement-store .shop-variant-label{font-size:13px;gap:8px;margin-top:4px;color:#73634c}
.supplement-store .shop-variant-label select{font-size:16px;min-height:46px;padding:10px 12px;border-color:#cabb9e;border-radius:8px;background:#fffdf7}
.supplement-store .shop-preiszeile{padding:18px 0 4px;margin-top:auto;border-top:1px solid #d6c9ae80;gap:7px}
.supplement-store .shop-preis{font-size:29px;line-height:1.2;font-weight:600;letter-spacing:-.03em;color:#343a2e}
.supplement-store .shop-preis.is-theke{font-size:18px;letter-spacing:-.01em;white-space:normal}
.supplement-store .shop-status{font-size:14px;line-height:1.5;display:flex;align-items:center;gap:7px;color:#766953}
.supplement-store .shop-status:before{content:'';width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#b59b68}
.supplement-store .shop-status.is-available{color:#526044}
.supplement-store .shop-status.is-available:before{background:#778b58}
.supplement-store .shop-status.is-aus:before{background:#966953}
.supplement-store .shop-details-link{border:0;background:none;font-weight:500;color:#77603d;padding:8px;min-height:44px}
.supplement-store .shop-placeholder{background:linear-gradient(145deg,#f7eedc,#e8d9bb);color:#7b6b4e}
.supplement-store .shop-placeholder-symbol{border:0;background:#b59b68;mask:url('assets/puzzle-action.svg') center/contain no-repeat;color:transparent;width:50px;height:62px;border-radius:0}
.supplement-store .shop-placeholder strong{font-size:16px}
.supplement-store .shop-placeholder small{font-size:13px}
.supplement-store .shop-empty{padding:36px;line-height:1.7;background:#f8efdd;border:1px solid #cbb893;border-radius:16px;font-size:16px}
/* Detailansicht und Abholwunsch sind Teil derselben Gestaltung. */
.supplement-store .shop-dialog{width:min(960px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:24px;border-radius:22px;background:#fffaf0;border-color:#bfaa7f;box-shadow:0 32px 90px #0005;overscroll-behavior:contain}
.supplement-store .shop-dialog::backdrop{background:#171e18b8;backdrop-filter:blur(6px)}
.supplement-store .shop-dialog-top{margin:0 0 24px;padding:0 0 16px;border-bottom:1px solid #cbb99966}
.supplement-store .shop-dialog-top h2{font-size:18px;font-weight:500;color:#75613e}
.supplement-store .shop-dialog-top button{min-width:44px;height:44px;flex-shrink:0;background:#f2e8d3;border-color:#c2ad84;display:grid;place-items:center;font-size:20px;color:#5e4c2d}
.supplement-store .shop-dialog .shop-karte{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start;box-shadow:none;background:transparent;border:0;border-radius:0}
.supplement-store .shop-dialog .shop-bild{aspect-ratio:1;border-radius:16px;border:1px solid #dccdaf}
.supplement-store .shop-dialog .shop-text{padding:8px 0 8px 28px}
.supplement-store .shop-dialog .shop-fakten{font-size:16px;line-height:1.7;padding-left:20px}
.supplement-store .shop-dialog .shop-angabe,.supplement-store .shop-detail-note{font-size:14px;line-height:1.7;color:#6f6452}
.supplement-store .shop-hinweis{margin-top:56px;padding:clamp(28px,4vw,50px);border:1px solid #b5a06c66;border-radius:20px;background:radial-gradient(ellipse at 100% 0,#ae90552b,transparent 60%),#292e29}
.shop-hinweis .shop-eyebrow{color:#bba77b}
.supplement-store .shop-hinweis h2{font-size:clamp(28px,3.3vw,44px);font-weight:500;line-height:1.2;letter-spacing:-.035em;margin-bottom:30px}
.shop-hinweis h2 em{color:#d6bd87}
.supplement-store .shop-hinweis ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:steps;list-style:none;padding:0;gap:24px;margin-bottom:30px}
.shop-hinweis li{counter-increment:steps;font-size:16px;line-height:1.7;border-top:1px solid #c5ab7455;padding-top:16px}
.shop-hinweis li:before{content:counter(steps,decimal-leading-zero);display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;font-style:italic;color:#c9b180;margin-bottom:10px}
.supplement-store .shop-rechtlich{font-size:13px;line-height:1.8;max-width:1050px;color:#c4c3b7;border-top:1px solid #c5ab7438;padding-top:22px}
.supplement-store :is(button,a,input,select):focus-visible{outline:2px solid #91713c;outline-offset:4px}
.supplement-store .shop-dialog :focus-visible{outline-offset:2px}
@media(hover:hover) and (pointer:fine){
 .supplement-store .shop-karte:hover{border-color:#af935f;box-shadow:0 18px 40px -24px #4d3d2755}
 .supplement-store .shop-gruppen button:hover{border-color:#997d4b;background:#e3d4b6}
 .supplement-store .shop-gruppen button[aria-pressed=true]:hover{background:#424b39}
 .supplement-store .shop-hero-link:hover{background:linear-gradient(110deg,#ddc08a,#ebd4a0);box-shadow:inset 0 1px #fff4d6,0 6px 18px #8565321a}
 .supplement-store .shop-details-link:hover{background:#eee3cb;color:#554125}
}
@media(prefers-reduced-motion:no-preference){
 .shop-hero-copy{animation:shop-arrive .8s var(--store-ease) both}
 
 
 .shop-dialog[open]{animation:shop-dialog-in .25s var(--store-ease)}
 .shop-dialog[open]::backdrop{animation:shop-backdrop-in .25s ease}
 @media(hover:hover) and (pointer:fine){.supplement-store .shop-karte:hover .shop-bild img{transform:scale(1.035)}}
}
@keyframes shop-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes shop-dialog-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes shop-backdrop-in{from{opacity:0}to{opacity:1}}
@media(min-width:1600px){.supplement-store .shop-raster:not(.is-einzeln){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1050px){
 .supplement-store .shop-hero{grid-template-columns:1.05fr 1fr;min-height:440px}
 .shop-hero-copy{padding:34px}
 .supplement-store .shop-hero h1{font-size:48px}
 .supplement-store .shop-raster:not(.is-einzeln){gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .supplement-store .shop-page{padding:16px 20px 48px}
 .supplement-store .shop-hero{grid-template-columns:1fr;min-height:0;border-radius:18px}
 .shop-hero-copy{padding:30px 26px 32px}
 .supplement-store .shop-hero .eyebrow{font-size:13px;margin-bottom:22px}
 .supplement-store .shop-hero h1{font-size:clamp(43px,8vw,62px);margin-bottom:20px}
 .supplement-store .shop-hero p:not(.eyebrow){font-size:16px;line-height:1.75}
 .supplement-store .shop-hero-link{margin-top:24px}
 .shop-catalogue-intro{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:24px}
 .shop-catalogue-intro h2{font-size:38px}
 .supplement-store .shop-tools{flex-direction:column;align-items:stretch;padding:18px;gap:16px}
 .supplement-store .shop-sort{width:auto}
 .supplement-store .shop-gruppen{margin:0 -20px;padding:16px 20px;scroll-padding-inline:20px}
 .supplement-store .shop-results{flex-direction:column;align-items:flex-start;margin:22px 0;gap:9px}
 .shop-result-meta{justify-content:flex-start;gap:4px 16px}
 .supplement-store .shop-text{padding:20px}
 .supplement-store .shop-text h3{font-size:22px}
 .supplement-store .shop-dialog{padding:18px;max-height:calc(100dvh - 24px);width:calc(100% - 24px);border-radius:18px}
 .supplement-store .shop-dialog .shop-karte{grid-template-columns:1fr}
 .supplement-store .shop-dialog .shop-bild{aspect-ratio:1.5}
 .supplement-store .shop-dialog .shop-text{padding:24px 0 4px}
 .supplement-store .shop-hinweis ol{grid-template-columns:1fr;gap:16px}
 .shop-hinweis li:before{display:inline;margin-right:14px}
}
@media(max-width:560px){.supplement-store .shop-raster:not(.is-einzeln){grid-template-columns:1fr;gap:22px}.supplement-store .shop-bild{aspect-ratio:1.25}}
@media(max-width:360px){.shop-hero-copy{padding:28px 21px}.supplement-store .shop-hero h1{font-size:39px}.supplement-store .shop-hero-link{gap:16px;padding-inline:16px}.shop-catalogue-intro h2{font-size:34px}.shop-breadcrumb{gap:10px;font-size:13px}}
@media(prefers-reduced-motion:reduce){
 .supplement-store *,.supplement-store *:before,.supplement-store *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .supplement-store .shop-karte:hover,.supplement-store .shop-karte:hover .shop-bild img{transform:none}
}
@media(forced-colors:active){
 .supplement-store .shop-gruppen button[aria-pressed=true]{border:2px solid Highlight}
 .supplement-store .shop-vorbestellen,.supplement-store .shop-hero-link{border:1px solid ButtonText}
 .supplement-store .shop-status:before{background:CanvasText}
}

/* Echter Raum im Einstieg; der aktuelle Mitglieder-Bestellablauf bleibt erhalten. */
.supplement-store .shop-hero{grid-template-columns:1fr;min-height:540px!important;align-items:center!important}
.supplement-store .shop-hero-copy{z-index:2;max-width:640px;padding:clamp(36px,5vw,72px)}
.supplement-store .shop-hero:after{background:linear-gradient(90deg,#171f1bec 0%,#18201bd4 36%,#20251e50 69%,#242a211f),linear-gradient(0deg,#17201870,transparent 55%)}
.supplement-store .shop-hero-bild{object-position:62% 48%}
.supplement-store .shop-hero h1{font-size:clamp(45px,5.3vw,76px);text-shadow:none}
.supplement-store .shop-hero h1 em{color:#e7cfa0}
.supplement-store .shop-hero p:not(.eyebrow){max-width:435px;color:#e2dfd3}
.shop-studio-caption{position:absolute;bottom:34px;right:34px;z-index:2;border-left:1px solid #dfc58b91;padding-left:18px;color:#fff3d7;font-size:15px;line-height:1.7;text-shadow:0 1px 8px #0008}
.shop-studio-caption>span{position:absolute;right:0;top:-35px;font-size:28px;color:#e8d7b3}
.supplement-store .shop-ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 54px;border-bottom:1px solid #b49d7659}
.supplement-store .shop-ablauf li{background:transparent;border:0;border-radius:0;padding:26px 24px 26px 60px}
.supplement-store .shop-ablauf li+li{border-left:1px solid #b49d7659}
.supplement-store .shop-ablauf li:before{content:counter(schritt,decimal-leading-zero);top:26px;left:18px;background:transparent;border:0;color:#927748;font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-style:italic;font-weight:400}
.supplement-store .shop-ablauf b{font-size:16px;font-weight:600;color:#3d4035;margin-bottom:5px}
.supplement-store .shop-ablauf span{font-size:14px;line-height:1.6;color:#756a57}
.supplement-store .shop-layout{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
.supplement-store .shop-layout .shop-raster:not(.is-einzeln){grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.supplement-store .shop-variant-fest{font-size:15px;line-height:1.5;color:#72634c;min-height:46px;display:flex;align-items:center;border:1px solid #cabb9e60;background:#f8f2e6;border-radius:8px;padding:10px 12px}
.supplement-store .shop-vorbestellen{min-height:50px;background:linear-gradient(115deg,#e3cb99,#efddae);border:1px solid #b79b63;border-radius:9px;box-shadow:inset 0 1px #fff3d6;color:#343a2e;font-size:16px;font-weight:600;padding:12px 16px;transition:background .2s,box-shadow .2s}
.supplement-store .shop-vorbestellen:disabled{background:#ede6d7;color:#827761;border-color:#d4c7ac;box-shadow:none}
.supplement-store .shop-vorbestellen-plus{display:grid;place-items:center;width:25px;height:25px;border:1px solid #a3854e66;border-radius:50%;font-weight:400;flex-shrink:0}
.supplement-store .shop-vorbestellen-plus:empty{display:none}
.supplement-store .shop-details-link{align-self:stretch;text-align:center;text-decoration:none;font-size:15px;font-weight:500;min-height:44px;cursor:pointer;border-radius:8px}
.supplement-store .shop-karte.ist-im-korb{border-color:#927343;box-shadow:inset 0 0 0 1px #92734320,0 12px 26px -24px #60492660}
.supplement-store .shop-karte-korb{border:1px solid #c7b38466;border-radius:10px;background:#f0e5ce;padding:14px}
.supplement-store .shop-karte-korb-titel{font-size:12px;font-weight:500;margin-bottom:10px;letter-spacing:.035em}
.supplement-store .shop-karte-korb-zeile{flex-wrap:wrap;row-gap:8px;font-size:14px;line-height:1.5}
.supplement-store .shop-karte-korb-zeile>span{flex-basis:calc(100% - 116px);min-width:90px}
.supplement-store .shop-karte-korb-zeile button,.supplement-store .shop-bestellung-menge button{width:44px;height:44px;min-width:44px;font-size:20px;font-weight:400;border-radius:50%}
/* Die Vorbestellung als ruhige, durchgehend erreichbare rechte Spalte. */
.supplement-store .shop-bestellung{top:calc(var(--header-clearance,124px) + 86px);scroll-margin-top:calc(var(--header-clearance,124px) + 86px)}
.supplement-store .shop-bestellung-inner{max-height:calc(100svh - var(--header-clearance,124px) - 110px);padding:26px;border:1px solid #b39a635c;border-radius:20px;background:radial-gradient(ellipse at 100% 0,#a58a5024,transparent 60%),#2c322c;box-shadow:0 20px 50px -32px #1e2b224d;scrollbar-color:#9b865f #2c322c}
.supplement-store .shop-bestellung-eyebrow{font-size:12px;font-weight:500;letter-spacing:.06em;color:#bba67c;margin:0 0 12px;line-height:1.5}
.supplement-store .shop-bestellung h2{font-size:29px;font-weight:500;letter-spacing:-.04em;line-height:1.2;margin:0 0 24px;color:#f5ecd9}
.supplement-store .shop-bestellung-leer{font-size:15px;line-height:1.75;color:#d2cbb9;padding-top:20px;border-top:1px solid #c9b27d30}
.supplement-store .shop-bestellung-leer:before{content:'';display:block;width:42px;height:52px;background:#ae986988;mask:url('assets/puzzle-action.svg') center/contain no-repeat;margin:4px 0 20px}
.supplement-store .shop-bestellung-liste{gap:0;max-height:none;overflow:visible;margin:0}
.supplement-store .shop-bestellung-liste li{padding:18px 0;gap:10px 14px;border-bottom:1px solid #c9b27d30}
.supplement-store .shop-bestellung-liste b{font-size:15px;font-weight:500;line-height:1.55;color:#f3ecd9}
.supplement-store .shop-bestellung-liste small{font-size:13px;line-height:1.6;color:#bfb39a}
.supplement-store .shop-bestellung-liste strong{font-size:16px;font-weight:600;color:#e8d4a7;white-space:nowrap}
.supplement-store .shop-bestellung-menge{gap:14px;font-size:15px;grid-column:1/-1}
.supplement-store .shop-bestellung-menge button{border-color:#b29b6359;background:#fff9e808;color:#e9dbc0}
.supplement-store .shop-bestellung-summe{padding:24px 0;border-bottom:1px solid #c9b27d30;font-size:16px;margin-bottom:22px;color:#ccc1a8}
.supplement-store .shop-bestellung-summe strong{font-size:30px;font-weight:500;color:#f6e7c7;letter-spacing:-.025em}
.supplement-store .shop-bestellung-form{gap:18px}
.supplement-store .shop-bestellung-form label{font-size:14px;font-weight:500;gap:8px;color:#d2c6ac}
.supplement-store .shop-bestellung-form :is(input:not([type=checkbox]),select){font-size:16px;min-height:48px;border-color:#b69e6759;border-radius:9px;background:#ffffff08;padding:10px 12px;color:#f7f1e4;min-width:0}
.supplement-store .shop-bestellung-form :is(input,select):focus-visible{outline-color:#e2c994;outline-offset:3px}
.supplement-store .shop-bestellung-fenster{font-size:14px;font-weight:500;color:#cdb583;line-height:1.6;padding:12px;border:1px solid #cbb17936;border-radius:8px;background:#bba36d0d}
.supplement-store .shop-bestellung-check{font-size:14px;line-height:1.65;gap:12px}
.supplement-store .shop-bestellung-check input{width:20px;height:20px;margin-top:3px;flex-shrink:0}
.supplement-store .shop-bestellung-senden{min-height:52px;background:linear-gradient(115deg,#e3cb99,#efddae);border:1px solid #b79b63;border-radius:9px;box-shadow:inset 0 1px #fff3d6;font-weight:600;color:#343a2e}
.supplement-store .shop-bestellung-hinweis{font-size:13px;line-height:1.75;color:#c1b89f}
.supplement-store .shop-bestellung-hinweis a{color:#e0c795;text-underline-offset:4px}
.supplement-store .shop-bestellung-status{font-size:14px;line-height:1.65}
.supplement-store .shop-hinweis ul{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;list-style:none;padding:0;margin-bottom:30px}
.supplement-store .shop-hinweis ul li{padding:16px 0 0;border-top:1px solid #c5ab7455;font-size:16px;line-height:1.75;color:#d9d6c9}
.supplement-store .shop-hinweis ul li:before{display:none}
@media(hover:hover) and (pointer:fine){.supplement-store .shop-vorbestellen:hover:not(:disabled){background:linear-gradient(115deg,#dbc18e,#ead19f);transform:none;box-shadow:inset 0 1px #fff3d6,0 7px 18px #886d3620}.supplement-store .shop-bestellung-menge button:hover{background:#b6a27426}}
@media(max-width:1100px){.supplement-store .shop-layout{gap:20px;grid-template-columns:minmax(0,1fr) 310px}.supplement-store .shop-layout .shop-raster:not(.is-einzeln){gap:16px}.supplement-store .shop-text{padding:18px}.supplement-store .shop-bestellung-inner{padding:22px}.supplement-store .shop-text h3{font-size:21px}}
@media(max-width:1000px){
 .supplement-store .shop-layout{grid-template-columns:1fr}
 .supplement-store .shop-bestellung-inner{max-height:none;overflow:visible;padding:32px}
 .supplement-store .shop-bestellung-form{grid-template-columns:1fr 1fr;gap:20px}
 .shop-bestellung-form>.shop-bestellung-zeit,.shop-bestellung-form>.shop-bestellung-check,.shop-bestellung-form>.shop-bestellung-fenster,.shop-bestellung-form>button,.shop-bestellung-form>p{grid-column:1/-1}
 .supplement-store .shop-page{padding-bottom:130px}
 .supplement-store .shop-leiste:not([hidden]){border:1px solid #b9a06d70;background:#2c322cf5;backdrop-filter:blur(12px);border-radius:15px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .supplement-store .shop-leiste-knopf{border-radius:9px;font-size:15px;font-weight:600;padding:12px 16px;min-height:46px}
 .supplement-store .shop-leiste strong{font-size:15px}.supplement-store .shop-leiste span{font-size:14px}
}
@media(max-width:760px){
 .supplement-store .shop-hero{min-height:580px!important;align-items:end!important}
 .supplement-store .shop-hero-copy{padding:130px 28px 32px;max-width:none}
 .supplement-store .shop-hero h1{font-size:clamp(42px,8vw,60px)}
 .supplement-store .shop-hero:after{background:linear-gradient(0deg,#18201bf5 0%,#18201bdd 37%,#20292052 85%,#242a2125)}
 .supplement-store .shop-hero-bild{object-position:62% 40%}
 .shop-studio-caption{display:none}
 .supplement-store .shop-ablauf{grid-template-columns:1fr;margin-bottom:36px}
 .supplement-store .shop-ablauf li{padding:20px 12px 20px 50px}
 .supplement-store .shop-ablauf li+li{border-left:0;border-top:1px solid #b49d7633}
 .supplement-store .shop-ablauf li:before{top:20px;left:4px;font-size:28px}
 .supplement-store .shop-bestellung-inner{padding:24px}
 .supplement-store .shop-hinweis ul{grid-template-columns:1fr;gap:16px}
}
@media(max-width:560px){
 .supplement-store .shop-layout .shop-raster:not(.is-einzeln){grid-template-columns:1fr;gap:22px}
 .supplement-store .shop-bestellung-form{grid-template-columns:1fr}
 .supplement-store .shop-leiste{left:8px;right:8px;gap:8px;padding:12px}
 .supplement-store .shop-leiste-knopf{font-size:14px;padding:12px}
}
@media(max-width:360px){.supplement-store .shop-hero-copy{padding:100px 22px 28px}.supplement-store .shop-hero h1{font-size:38px}.supplement-store .shop-hero .eyebrow{font-size:12px;gap:10px}.supplement-store .shop-bestellung-inner{padding:20px}}
@media(prefers-reduced-motion:reduce){.supplement-store .shop-vorbestellen:hover{transform:none}}

/* shop-uebersicht.css */
/* Supplement Area · Übersicht (04.10.2026)
   Kompakte Karten, mehr Produkte auf einen Blick, Kategorien als Abschnitte, Mengenregler
   direkt auf der Karte. Wird zuletzt geladen und gilt nur in der Produktübersicht —
   die Produktdetails im Dialog behalten ihr Layout. */

/* ---------- Suche & Sortierung: eine ruhige Zeile */
.shop-page .shop-tools{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:end;padding:14px 16px;border-radius:14px}
.shop-page .shop-tools label{gap:6px}
.shop-page .shop-tools input,.shop-page .shop-tools select{min-height:44px;border-radius:10px}

/* ---------- Kategorien-Leiste */
.shop-page .shop-gruppen{gap:6px;padding:12px 0}
.shop-page .shop-gruppen button{border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600}

/* ---------- Abschnitte je Kategorie */
.shop-abschnitt{scroll-margin-top:170px}
.shop-abschnitt+.shop-abschnitt{margin-top:38px}
.shop-abschnitt-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #d6c8ab}
.shop-abschnitt-kopf h3{margin:0;font-size:clamp(20px,2vw,24px);letter-spacing:-.015em;line-height:1.15}
.shop-abschnitt-kopf p{margin:4px 0 0;font-size:14px;color:#6c6250;line-height:1.4}
.shop-abschnitt-zahl{flex:none;font-size:13px;color:#7d7158;white-space:nowrap}

/* ---------- Raster: mehr Produkte nebeneinander */
.shop-page .shop-layout .shop-inhalt .shop-raster:not(.is-einzeln){display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}

/* ---------- Karte */
.shop-page .shop-inhalt .shop-karte{border-radius:14px;border:1px solid #d9ccb2;background:#fffcf6;box-shadow:none;position:relative}
.shop-page .shop-inhalt .shop-karte.ist-im-korb{border-color:#b9975a;box-shadow:0 0 0 1px #b9975a inset}
.shop-page .shop-inhalt .shop-product-visual{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit}
.shop-page .shop-inhalt .shop-bild{aspect-ratio:1/1;border-radius:0}
.shop-page .shop-inhalt .shop-bild img{inset:9%;width:82%;height:82%}
.shop-page .shop-inhalt .shop-flagge{top:10px;left:10px;font-size:11px;padding:3px 9px}
.shop-vorgemerkt{position:absolute;right:10px;top:10px;padding:4px 9px;border-radius:999px;background:#2b2f2b;color:#f1e3bf;font-size:11.5px;font-weight:700;letter-spacing:.01em}

.shop-page .shop-inhalt .shop-text{gap:8px;padding:12px 14px 14px}
.shop-page .shop-inhalt .shop-kopf{display:flex;flex-direction:column;gap:2px}
.shop-page .shop-inhalt .shop-brand{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#93783f;font-weight:700}
.shop-page .shop-inhalt .shop-text h3{margin:0;font-size:16px;line-height:1.25}
.shop-titel-knopf{all:unset;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-titel-knopf:hover{text-decoration:underline;text-underline-offset:3px}
.shop-titel-knopf:focus-visible,.shop-page .shop-product-visual:focus-visible{outline:2px solid #93783f;outline-offset:2px;border-radius:6px}
.shop-page .shop-inhalt .shop-meta{margin:0;font-size:12.5px;color:#7a6f5c}
.shop-page .shop-inhalt .shop-menge{font-size:inherit;color:inherit}
.shop-page .shop-inhalt .shop-product-note{margin:0;font-size:12.5px;line-height:1.4;color:#6c6250;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Sorte: kompakt, Überschrift nur als kleine Zahl */
.shop-page .shop-inhalt .shop-variant-label{display:flex;flex-direction:column;gap:4px;margin:2px 0 0}
.shop-variant-titel{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a7e66;font-weight:650}
.shop-page .shop-inhalt .shop-variant-label select{min-height:38px;padding:6px 30px 6px 10px;font-size:14px;border-radius:9px}
.shop-page .shop-inhalt .shop-variant-fest{font-size:13px;color:#6c6250;min-height:20px}

/* Preis und Status in einer Zeile */
.shop-page .shop-inhalt .shop-preiszeile{flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid #e7dcc6}
.shop-page .shop-inhalt .shop-preis{font-size:19px;letter-spacing:-.01em}
.shop-page .shop-inhalt .shop-status{font-size:12px;white-space:nowrap}

/* Vorbestellen und Mengenregler: gleiche Höhe, kein Springen */
.shop-aktion{min-height:42px}
.shop-page .shop-inhalt .shop-vorbestellen{width:100%;min-height:42px;padding:8px 12px;border-radius:10px;font-size:14.5px}
.shop-regler{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;min-height:42px;border-radius:10px;background:#2b2f2b;color:#f6ecd2;overflow:hidden}
.shop-regler button{height:42px;border:0;background:transparent;color:inherit;font:inherit;font-size:20px;line-height:1;cursor:pointer}
.shop-regler button:hover:not(:disabled){background:#ffffff14}
.shop-regler button:disabled{opacity:.35;cursor:not-allowed}
.shop-regler-zahl{display:flex;align-items:baseline;justify-content:center;gap:6px}
.shop-regler-zahl b{font-size:17px}
.shop-regler-zahl small{font-size:12px;color:#d9c79b}
.shop-karte-auch{margin:0;font-size:12px;color:#7d6a3e;line-height:1.35}

/* Alte Elemente aus der Karte, die jetzt doppelt wären */
.shop-page .shop-inhalt .shop-karte-korb,.shop-page .shop-inhalt .shop-details-link{display:none}

/* ---------- Vorbestellung rechts: bleibt beim Scrollen im Blick */
@media(min-width:1101px){
 .shop-page .shop-layout{grid-template-columns:minmax(0,1fr) 330px;gap:24px}
 .shop-page .shop-bestellung{position:sticky;top:180px;max-height:calc(100vh - 200px);overflow:auto;border-radius:16px;scrollbar-width:thin}
}

/* ---------- Tablet */
@media(max-width:900px){
 .shop-page .shop-layout .shop-inhalt .shop-raster:not(.is-einzeln){grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}

/* ---------- Handy: zwei Spalten, alles Wichtige ohne Scrollen pro Produkt */
@media(max-width:640px){
 .shop-page .shop-tools{grid-template-columns:minmax(0,1fr) 128px;gap:8px;padding:10px}
 .shop-page .shop-tools label{font-size:0;gap:0}
 .shop-page .shop-tools input,.shop-page .shop-tools select{font-size:15px;min-height:44px}
 .shop-page .shop-tools select{padding-right:26px}
 .shop-page .shop-selection-link{display:none}
 .shop-abschnitt-kopf{flex-direction:column;align-items:flex-start;gap:4px}
 .shop-abschnitt-kopf p{font-size:13px}
 .shop-abschnitt{scroll-margin-top:200px}
 .shop-abschnitt+.shop-abschnitt{margin-top:30px}
 .shop-page .shop-layout .shop-inhalt .shop-raster:not(.is-einzeln){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .shop-page .shop-inhalt .shop-text{padding:10px 10px 12px;gap:7px}
 .shop-page .shop-inhalt .shop-text h3{font-size:14.5px}
 .shop-page .shop-inhalt .shop-product-note{display:none}
 .shop-page .shop-inhalt .shop-variant-titel{display:none}
 .shop-page .shop-inhalt .shop-variant-label select{min-height:40px;font-size:13.5px;padding-left:8px}
 .shop-page .shop-inhalt .shop-preiszeile{flex-direction:column;align-items:flex-start;gap:2px}
 .shop-page .shop-inhalt .shop-preis{font-size:17px}
 .shop-page .shop-inhalt .shop-status{font-size:11.5px}
 .shop-page .shop-inhalt .shop-vorbestellen{font-size:14px;min-height:42px}
 .shop-regler{grid-template-columns:38px 1fr 38px}
 .shop-regler-zahl small{display:none}
 .shop-vorgemerkt{right:8px;top:8px;font-size:11px;padding:3px 8px}
}
@media(max-width:340px){.shop-page .shop-layout .shop-inhalt .shop-raster:not(.is-einzeln){grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.shop-page .shop-inhalt .shop-karte{transition:none}}

/* ---------- Werkzeuge: nichts ragt heraus */
.shop-page .shop-tools label{min-width:0}
.shop-page .shop-tools select,.shop-page .shop-tools input{width:100%;max-width:100%;box-sizing:border-box}
@media(max-width:640px){
 .shop-page .shop-tools{grid-template-columns:minmax(0,1fr) 150px}
 .shop-page .shop-tools select{font-size:14px;padding-left:10px}
 .shop-page .shop-tools input{font-size:14.5px}
}

/* ---------- Vorbestellung: eine kompakte Zeile je Artikel */
.shop-page .shop-bestellung-liste{gap:0}
.shop-page .shop-bestellung-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:center;padding:11px 0}
.shop-page .shop-bestellung-liste li>div:first-child{grid-column:1;grid-row:1;min-width:0}
.shop-page .shop-bestellung-liste li>div:first-child b{display:block;font-size:14px;line-height:1.3;font-weight:600}
.shop-page .shop-bestellung-liste li>div:first-child small{font-size:11.5px;opacity:.75}
.shop-page .shop-bestellung-liste li>strong{grid-column:2;grid-row:1;align-self:start;font-size:14.5px;white-space:nowrap}
.shop-page .shop-bestellung-liste li>.shop-bestellung-menge{grid-column:1/-1;grid-row:2;justify-self:start;gap:8px}
.shop-page .shop-bestellung-menge button{width:30px;height:30px;min-height:30px;font-size:16px;padding:0}
.shop-page .shop-bestellung-menge span{min-width:18px;text-align:center;font-size:14px}
.shop-page .shop-tools .shop-sort{width:auto;flex-shrink:1}
@media(max-width:640px){.shop-page .shop-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1101px){.shop-page .shop-bestellung-liste{max-height:min(330px,36vh);overflow:auto;scrollbar-width:thin;padding-right:4px}}

/* ---------- Produktdetails: Herstellerangaben */
.shop-dialog .shop-karte{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start}
.shop-dialog .shop-text{min-width:0}
.shop-dialog .shop-product-visual{position:sticky;top:0}
@media(max-width:700px){
 .shop-dialog .shop-karte{grid-template-columns:minmax(0,1fr)!important}
 .shop-dialog .shop-product-visual{position:static}
 .shop-naehrwerte{font-size:13px}
 .shop-naehrwerte th,.shop-naehrwerte td{padding:6px 5px;white-space:normal}
 .shop-naehrwerte td{min-width:64px}
 .shop-naehrwerte tr.ist-davon th{padding-left:12px}
}
.shop-hersteller{display:flex;flex-direction:column;gap:16px;margin-top:6px;padding-top:16px;border-top:1px solid #e3d7bf}
.shop-hersteller-block h4{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8a7240;font-weight:700}
.shop-hersteller-block p{margin:0;font-size:14px;line-height:1.5;color:#3c3a33}
.shop-zutaten{font-size:13px!important;color:#5a5446!important}
.shop-naehrwerte-wrap{overflow-x:auto}
.shop-naehrwerte{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.shop-naehrwerte th,.shop-naehrwerte td{padding:7px 8px;border-bottom:1px solid #ece2cf;text-align:right;white-space:nowrap}
.shop-naehrwerte th:first-child{text-align:left;font-weight:500;white-space:normal}
.shop-naehrwerte thead th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#7d7158;font-weight:650;border-bottom:1px solid #d6c8ab}
.shop-naehrwerte tr.ist-davon th{padding-left:20px;color:#6c6250}
.shop-hersteller-hinweis{margin:0;padding:10px 12px;border-radius:10px;background:#f6ead0;color:#5d4a1f;font-size:13.5px;line-height:1.45}
.shop-hersteller-quelle{margin:0;font-size:12px;color:#857a64;line-height:1.45}
.shop-hersteller-quelle a{color:inherit}

/* restart-popup.css */
/* Restart-Pop-up (restart-popup.js): festlich, aber ruhig – helle Karte mit Goldrahmen, Datum in der Akzentschrift,
   Öffnungszeit auf Anthrazit. Keine Kicker-Chips, kein Konfetti; Bewegung nur ohne „reduzierte Bewegung“. */
.restart-popup{width:min(540px,calc(100% - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:0;border:0;background:transparent;color:#212521;overflow:visible}
.restart-popup::backdrop{background:radial-gradient(70% 60% at 50% 40%,#2a2620cc,#111214e6);backdrop-filter:blur(4px)}
.restart-karte{position:relative;max-height:calc(100dvh - 28px);overflow:auto;padding:30px clamp(22px,6vw,44px) 30px;border-radius:28px;text-align:center;
 background:radial-gradient(120% 70% at 50% 0,#fff8e8 0,#fbfaf7 58%) padding-box,linear-gradient(140deg,#f3e2b9,#b59b68 30%,#fff1cf 52%,#9c7f48 74%,#e9d4a3) border-box;
 border:2px solid transparent;box-shadow:0 40px 110px -30px #000d,0 0 0 1px #ffffff40 inset}
/* Feine Lichtpunkte am Rand – das Festliche, ohne laut zu werden. */
.restart-karte::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(2px 2px at 12% 18%,#d9bd84,transparent),radial-gradient(1.5px 1.5px at 86% 14%,#c9a96b,transparent),radial-gradient(2px 2px at 92% 46%,#e3c98f,transparent),
  radial-gradient(1.5px 1.5px at 7% 58%,#c9a96b,transparent),radial-gradient(2px 2px at 18% 88%,#d9bd84,transparent),radial-gradient(1.5px 1.5px at 80% 90%,#c9a96b,transparent);opacity:.9}
.restart-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:1px solid #d9cba9;border-radius:50%;background:#fffdf8;color:#5d5136;font-size:22px;line-height:1;cursor:pointer}
.restart-x:focus-visible,.restart-aktionen :focus-visible{outline:3px solid #b59b68;outline-offset:3px}
.restart-logo{display:block;width:190px;max-width:62%;height:auto;margin:4px auto 10px}
.restart-datum{margin:6px 0 2px;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.restart-tag{font-family:var(--font-editorial,'Cormorant Garamond',serif);font-style:italic;font-weight:500;font-size:clamp(64px,17vw,104px);line-height:.95;
 background:linear-gradient(100deg,#8a6c36,#c7a865 35%,#f4e2b4 50%,#c7a865 65%,#8a6c36) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.restart-jahr{font-size:15px;letter-spacing:.32em;font-weight:600;color:#756039}
.restart-titel{margin:12px 0 8px;font-size:clamp(26px,6.4vw,34px);line-height:1.15;font-weight:600;color:#212521;overflow-wrap:break-word}
.restart-titel em{font-family:var(--font-editorial,'Cormorant Garamond',serif);font-weight:500;color:#756039}
.restart-text{margin:0 auto 18px;max-width:34ch;font-size:17px;line-height:1.6;color:#4b4f48}
.restart-zeiten{position:relative;display:grid;gap:4px;margin:0 0 16px;padding:16px 18px;border-radius:18px;color:#f4ecdd;
 background:linear-gradient(90deg,transparent,#d6b47666 20%,#ffecc4cc 50%,#d6b47666 80%,transparent) top/100% 1px no-repeat,radial-gradient(110% 130% at 0 0,#e0bc7e2e,transparent 55%),linear-gradient(145deg,#303338,#1c1d20);background-color:#212326}
.restart-zeiten span{font-size:14px;letter-spacing:.04em;color:#d8c9a8}
.restart-zeiten strong{font-size:clamp(26px,7vw,32px);font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#fff}
.restart-adresse{display:grid;gap:2px;margin:0 0 22px;font-style:normal;font-size:16px;line-height:1.5;color:#3d413a}
.restart-adresse span:first-child{font-weight:600}
.restart-aktionen{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.restart-aktionen .button{flex:1 1 180px;justify-content:center;white-space:normal;text-align:center}
@media(prefers-reduced-motion:no-preference){
 .restart-popup[open] .restart-karte{animation:restart-auf .5s cubic-bezier(.2,.7,.2,1) both}
 .restart-popup[open]::backdrop{animation:restart-dunkel .4s ease both}
 .restart-popup[open] .restart-tag{animation:restart-glanz 2.6s ease .35s both}
}
@keyframes restart-auf{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes restart-dunkel{from{opacity:0}to{opacity:1}}
@keyframes restart-glanz{from{background-position:100% 0}to{background-position:0 0}}
@media(max-width:420px){.restart-karte{padding:26px 18px 22px;border-radius:24px}.restart-text{font-size:16px}}
/* Niedrige Fenster (Laptop, Handy quer): enger setzen, damit alles ohne Scrollen sichtbar bleibt. */
@media(max-height:760px){
 .restart-karte{padding-top:22px;padding-bottom:20px}
 .restart-logo{width:150px;margin:0 auto 4px}
 .restart-tag{font-size:clamp(50px,11vh,84px)}
 .restart-titel{margin:8px 0 6px}
 .restart-text{margin-bottom:12px}
 .restart-zeiten{padding:12px 16px;margin-bottom:12px}
 .restart-adresse{margin-bottom:14px}
}