/* ───────────────────────────────────────────────────────────── Marian Dahm — Media & Fitness Vanilla CSS · mobile-first · BFSG/WCAG 2.2 AA ───────────────────────────────────────────────────────────── */ /* [PLATZHALTER: Self-hosted @font-face Definitionen vor Launch hier einsetzen. Demo-Fonts via Google werden im verlinkt — vor Live entfernen.] */ *, *::before, *::after { box-sizing: border-box; } :root { /* palette — warm editorial */ --cream-50: #FAF6EE; --cream-100: #F2ECE1; --cream-200: #E8DFD0; --cream-300: #D7CCB8; --ink-900: #15130E; --ink-800: #1E1B14; --ink-700: #2A261C; --ink-500: #5C5446; --ink-400: #7A7263; --line: rgba(21,19,14, .14); --line-on-dark: rgba(242,236,225, .14); /* accent — refined rust / bronze */ --accent: oklch(48% 0.10 55); --accent-2: oklch(58% 0.12 55); --accent-soft: oklch(92% 0.04 60); /* type — bold geometric grotesk display + neutral UI sans */ --display: "Archivo Black", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --serif: "Archivo Black", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; /* legacy alias */ --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* fluid type */ --fs-xs: clamp(11px, 0.72rem + 0.05vw, 12px); --fs-sm: clamp(13px, 0.82rem + 0.10vw, 14px); --fs-md: clamp(15px, 0.92rem + 0.15vw, 17px); --fs-lg: clamp(17px, 1.00rem + 0.25vw, 20px); --fs-xl: clamp(22px, 1.20rem + 0.6vw, 28px); --fs-h3: clamp(22px, 1.20rem + 1.0vw, 32px); --fs-h2: clamp(34px, 1.6rem + 2.8vw, 68px); --fs-h1: clamp(54px, 2.4rem + 7.5vw, 148px); /* layout */ --wrap: 1240px; --pad-i: clamp(20px, 4vw, 56px); --pad-b: clamp(72px, 9vw, 132px); --radius: 14px; --radius-sm: 8px; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: var(--fs-md); line-height: 1.55; color: var(--ink-900); background: var(--cream-100); font-feature-settings: "ss01", "cv01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-inline-size: 100%; } a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line); } a:hover { text-decoration-color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; padding: 10px 14px; background: var(--ink-900); color: var(--cream-50); border-radius: 6px; transform: translateY(-200%); transition: transform .2s; z-index: 200; } .skip:focus { transform: translateY(0); } .wrap { inline-size: min(100% - var(--pad-i)*2, var(--wrap)); margin-inline: auto; } /* ─── nav ─── */ .nav { position: sticky; inset-block-start: 0; z-index: 50; background: color-mix(in oklab, var(--cream-100) 88%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-block-end: 1px solid var(--line); } .nav__wrap { inline-size: min(100% - var(--pad-i)*2, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: 24px; block-size: 72px; } .nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-900); } .nav__mark { inline-size: 36px; block-size: 36px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--ink-900); color: var(--cream-50); } .nav__name { display: grid; line-height: 1.05; } .nav__name strong { font-family: var(--display); font-weight: 900; font-size: var(--fs-sm); letter-spacing: -0.01em; text-transform: uppercase; } .nav__name em { font-style: normal; font-family: var(--sans); font-size: 11px; color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase; } .nav__links { display: none; gap: 22px; margin-inline-start: auto; font-size: var(--fs-sm); } .nav__links a { text-decoration: none; color: var(--ink-700); padding: 6px 0; position: relative; } .nav__links a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s; } .nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); } .nav__cta { display: none; margin-inline-start: auto; gap: 10px; align-items: center; } @media (min-width: 920px) { .nav__links { display: inline-flex; } .nav__cta { display: inline-flex; margin-inline-start: 0; } } .nav__burger { margin-inline-start: auto; inline-size: 44px; block-size: 44px; background: none; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; gap: 4px; cursor: pointer; } .nav__burger span { display: block; inline-size: 18px; block-size: 1.5px; background: var(--ink-900); transition: transform .2s, opacity .2s; } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } @media (min-width: 920px) { .nav__burger { display: none; } } .m-menu { display: grid; gap: 14px; padding: 18px var(--pad-i) 28px; border-block-start: 1px solid var(--line); background: var(--cream-100); } .m-menu[hidden] { display: none; } @media (min-width: 920px) { .m-menu { display: none !important; } } .m-menu a { text-decoration: none; font-size: var(--fs-lg); } .m-menu a.btn { justify-self: start; } /* ─── buttons ─── */ .btn { --bg: var(--ink-900); --fg: var(--cream-50); --bd: transparent; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; font: 500 var(--fs-sm)/1 var(--sans); letter-spacing: 0.01em; background: var(--bg); color: var(--fg); border: 1px solid var(--bd); text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s, color .2s, border-color .2s; } .btn:hover { transform: translateY(-1px); } .btn--lg { padding: 16px 22px; font-size: var(--fs-md); } .btn--ghost { --bg: transparent; --fg: var(--ink-900); --bd: currentColor; opacity: .92; } .btn--ghost:hover { --bg: var(--ink-900); --fg: var(--cream-50); opacity: 1; } .btn--ghost-light { --fg: var(--cream-50); } .btn--ghost-light:hover { --bg: var(--cream-50); --fg: var(--ink-900); } .btn--solid { --bg: var(--ink-900); --fg: var(--cream-50); } .btn--solid:hover { --bg: var(--accent); } .btn--block { display: flex; justify-content: center; inline-size: 100%; } /* ─── eyebrow / display ─── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); } .eyebrow .num { color: var(--accent); font-weight: 500; } .eyebrow .dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); display: inline-block; } .eyebrow--light { color: color-mix(in oklab, var(--cream-50) 70%, transparent); } .eyebrow--light .num { color: var(--accent-2); } .eyebrow--right { margin-inline-start: auto; } .display { font-family: var(--display); font-weight: 900; font-size: var(--fs-h2); line-height: 0.92; letter-spacing: -0.025em; text-transform: uppercase; margin: 18px 0 0; text-wrap: balance; max-inline-size: 18ch; } .display em { font-style: normal; color: var(--accent); font-weight: 900; } .display--light { color: var(--cream-50); } .display--light em { color: var(--accent-2); } .sec-head { margin-block-end: clamp(36px, 6vw, 64px); } .sec-head__lede { margin: 18px 0 0; max-inline-size: 60ch; color: var(--ink-500); font-size: var(--fs-lg); line-height: 1.55; } .sec-head--row { display: grid; gap: 24px; } @media (min-width: 820px) { .sec-head--row { grid-template-columns: 1fr auto; align-items: end; } } .sec-head--light .sec-head__lede { color: color-mix(in oklab, var(--cream-50) 70%, transparent); } .link-arrow { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: var(--fs-sm); font-weight: 500; border-block-end: 1px solid var(--line); padding-block-end: 2px; transition: border-color .2s, color .2s; } .link-arrow:hover { color: var(--accent); border-color: currentColor; } /* ─── placeholders ─── */ .ph { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ink-700) 92%, transparent) 0 14px, color-mix(in oklab, var(--ink-800) 92%, transparent) 14px 28px); color: color-mix(in oklab, var(--cream-50) 85%, transparent); display: grid; place-items: center; } .ph__label { position: relative; font-family: var(--mono); font-size: var(--fs-xs); padding: 8px 12px; background: color-mix(in oklab, var(--ink-900) 60%, transparent); border: 1px solid var(--line-on-dark); border-radius: 4px; max-inline-size: 38ch; text-align: center; line-height: 1.4; } .ph__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; z-index: 1; } .ph__img + .ph__label { display: none; } /* ═══════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════ */ .hero { position: relative; min-block-size: clamp(680px, 96svh, 980px); color: var(--cream-50); isolation: isolate; overflow: clip; padding: 96px var(--pad-i) clamp(40px, 5vw, 64px); display: grid; grid-template-rows: auto 1fr auto; gap: 24px; } .hero__media { position: absolute; inset: 0; z-index: -1; } .ph--hero { position: absolute; inset: 0; border-radius: 0; } .hero__media::before { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: 30%; background: rgba(21,19,14,.12); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); z-index: 2; } .hero__media::after { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: 30%; background: linear-gradient(90deg, rgba(21,19,14,.76) 0%, rgba(21,19,14,.48) 68%, rgba(21,19,14,0) 100%); z-index: 3; } .hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,19,14,.55) 0%, rgba(21,19,14,.25) 40%, rgba(21,19,14,.85) 100%), linear-gradient(90deg, rgba(21,19,14,.34) 0%, rgba(21,19,14,.10) 60%); z-index: 4; } .hero__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hero__body { align-self: end; max-inline-size: 22ch; } .hero__kicker { margin: 0 0 16px; font: 500 var(--fs-sm)/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in oklab, var(--cream-50) 80%, transparent); } .hero__h { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 1.68rem + 5.25vw, 104px); line-height: 0.86; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; } .hero__h .line { display: block; } .hero__h em { font-style: normal; color: var(--accent-2); font-weight: 900; } .hero__lede { margin: 22px 0 0; font-size: var(--fs-lg); max-inline-size: 46ch; color: color-mix(in oklab, var(--cream-50) 88%, transparent); } .hero__cta { margin-block-start: 32px; display: flex; flex-wrap: wrap; gap: 12px; } .hero__cta .btn--solid { --bg: var(--cream-50); --fg: var(--ink-900); } .hero__cta .btn--solid:hover { --bg: var(--accent-2); --fg: var(--cream-50); } .hero__meta { display: grid; gap: 20px; grid-template-columns: 1fr; border-block-start: 1px solid var(--line-on-dark); padding-block-start: 22px; align-items: end; } @media (min-width: 720px) { .hero__meta { grid-template-columns: 1fr auto; } } .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; } .hero__stats > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(250,246,238,.18); border-radius: var(--radius-sm); background: rgba(21,19,14,.48); box-shadow: 0 16px 34px -26px rgba(0,0,0,.75); backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08); } .hero__stats dt { font: 400 var(--fs-xs)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--cream-50) 78%, transparent); } .hero__stats dd { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 1.3rem + 1.6vw, 48px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; } .hero__stats .stars { font-family: var(--sans); margin-inline-start: 6px; color: var(--accent-2); font-size: 0.5em; vertical-align: 4px; text-shadow: 0 1px 12px rgba(0,0,0,.45); } @media (max-width: 680px) { .hero__stats { grid-template-columns: 1fr; } .hero__scroll { justify-self: start; } } .hero__scroll { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: color-mix(in oklab, var(--cream-50) 70%, transparent); font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; justify-self: end; } .hero__scroll svg .dot { animation: scrollDot 1.8s ease-in-out infinite; } @keyframes scrollDot { 0%, 100% { transform: translateY(-4px); opacity: 0; } 50% { transform: translateY(4px); opacity: 1; } } /* ─── ticker ─── */ .ticker { background: var(--ink-900); color: var(--cream-50); overflow: hidden; border-block-end: 1px solid var(--line-on-dark); } .ticker__track { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 40px); align-items: center; justify-content: center; padding: 22px var(--pad-i); font-family: var(--display); font-weight: 900; font-size: clamp(14px, 0.85rem + 0.6vw, 20px); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cream-50); } .ticker__track > span { display: inline-block; } .ticker__sep { color: var(--accent-2); font-weight: 400; } /* ═══════════════════════════════════════════════════════════════ POSITIONING ═══════════════════════════════════════════════════════════════ */ .positioning { padding-block: var(--pad-b); background: var(--cream-50); } .positioning__grid { margin-block-start: clamp(40px, 6vw, 72px); display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; } @media (min-width: 880px) { .positioning__grid { grid-template-columns: 1.2fr 1fr; align-items: start; } } .positioning__lede { font-size: var(--fs-xl); line-height: 1.35; font-family: var(--sans); font-weight: 400; max-inline-size: 34ch; letter-spacing: -0.005em; color: var(--ink-700); margin: 0; } .positioning__pillars { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-block-start: 1px solid var(--line); } .positioning__pillars li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; align-items: baseline; gap: 2px 16px; padding: 22px 0; border-block-end: 1px solid var(--line); } .positioning__pillars li .num { grid-row: span 2; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding-block-start: 4px; } .positioning__pillars li strong { font: 500 var(--fs-lg)/1.2 var(--sans); letter-spacing: -0.01em; } .positioning__pillars li > span:last-child { color: var(--ink-500); font-size: var(--fs-md); grid-column: 2; } /* ═══════════════════════════════════════════════════════════════ ANGEBOT ═══════════════════════════════════════════════════════════════ */ .angebot { padding-block: var(--pad-b); background: var(--cream-100); } .cards { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { position: relative; padding: 18px 18px 24px; background: var(--cream-50); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; transition: transform .25s, box-shadow .25s, border-color .25s; } .card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--ink-900) 30%, transparent); box-shadow: 0 18px 40px -22px rgba(21,19,14,.25); } .card__num { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .card__image { position: relative; aspect-ratio: 1; inline-size: 100%; overflow: hidden; border-radius: var(--radius-sm); background: linear-gradient(135deg, color-mix(in oklab, var(--cream-200) 82%, white), var(--cream-100)); border: 1px solid var(--line); } .card__image::after { content: "Bild folgt"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 var(--fs-xs)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); } .card__image img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 1; } .card__head { display: grid; gap: 6px; } .card h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: var(--fs-h3); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; } .card__lede { margin: 0; color: var(--ink-500); } .card__list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; border-block-start: 1px dashed var(--line); padding-block-start: 14px; } .card__list li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: var(--fs-sm); color: var(--ink-700); } .card__list li::before { content: ""; inline-size: 7px; block-size: 7px; background: var(--accent); border-radius: 50%; margin-block-start: 7px; align-self: start; } .card__foot { margin-block-start: auto; padding-block-start: 6px; } .card--feature { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-900); } .card--feature .card__image { background: linear-gradient(135deg, color-mix(in oklab, var(--ink-800) 72%, var(--accent-2)), var(--ink-700)); border-color: var(--line-on-dark); } .card--feature .card__image::after { color: color-mix(in oklab, var(--cream-50) 55%, transparent); } .card--feature .card__lede { color: color-mix(in oklab, var(--cream-50) 75%, transparent); } .card--feature .card__list { border-color: var(--line-on-dark); } .card--feature .card__list li { color: color-mix(in oklab, var(--cream-50) 88%, transparent); } .card--feature .card__list li::before { background: var(--accent-2); } .card--feature .card__num { color: var(--accent-2); } .card--feature .link-arrow { border-color: var(--line-on-dark); } .card--feature .link-arrow:hover { color: var(--accent-2); } .card__flag { position: absolute; inset-block-start: -10px; inset-inline-end: 18px; background: var(--accent-2); color: var(--ink-900); padding: 5px 10px; border-radius: 999px; font: 600 var(--fs-xs)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; } .angebot__foot { margin: clamp(32px, 4vw, 48px) 0 0; font-size: var(--fs-md); color: var(--ink-500); max-inline-size: 60ch; } .angebot__foot strong { color: var(--ink-900); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════ ABOUT ═══════════════════════════════════════════════════════════════ */ .about { padding-block: var(--pad-b); background: var(--cream-50); } .about__grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; } @media (min-width: 880px) { .about__grid { grid-template-columns: 0.85fr 1fr; align-items: start; } } .about__media { position: sticky; inset-block-start: 96px; align-self: start; } .ph--portrait { aspect-ratio: 4/5; inline-size: 100%; border-radius: var(--radius); } .about__cap { display: flex; align-items: center; gap: 12px; margin-block-start: 14px; font-size: var(--fs-sm); color: var(--ink-500); } .about__cap .num { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--ink-900); color: var(--cream-50); font-family: var(--display); font-weight: 900; font-size: 11px; letter-spacing: 0.04em; } .about__copy > * + * { margin-block-start: 16px; } .about__copy p { color: var(--ink-700); font-size: var(--fs-lg); max-inline-size: 56ch; } .about__sub { margin-block-start: 36px; font: 500 var(--fs-sm)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); } .quals { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 0; border-block-start: 1px solid var(--line); } .quals li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; column-gap: 16px; padding: 16px 0; border-block-end: 1px solid var(--line); } .quals li .num { font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.1em; } .quals li strong { font-weight: 500; } .quals li > span:last-child { grid-column: 2; display: block; font-size: var(--fs-sm); color: var(--ink-500); margin-block-start: 2px; } .about__sig { margin-block-start: 28px; color: var(--ink-700); } /* ═══════════════════════════════════════════════════════════════ METHODE (dark) ═══════════════════════════════════════════════════════════════ */ .methode { padding-block: var(--pad-b); background: var(--ink-900); color: var(--cream-50); } .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line-on-dark); border: 1px solid var(--line-on-dark); border-radius: var(--radius); overflow: hidden; grid-template-columns: 1fr; } @media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding: clamp(24px, 3vw, 36px); background: var(--ink-900); display: flex; flex-direction: column; gap: 10px; min-block-size: 240px; } .step__num { font-family: var(--display); font-style: normal; font-weight: 900; font-size: clamp(40px, 2rem + 3vw, 72px); line-height: 1; color: var(--accent-2); letter-spacing: -0.04em; } .step h3 { margin: 8px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(20px, 1.1rem + 0.8vw, 28px); letter-spacing: -0.02em; text-transform: uppercase; } .step p { margin: 0; color: color-mix(in oklab, var(--cream-50) 78%, transparent); font-size: var(--fs-md); } .step__tag { margin-block-start: auto; display: inline-flex; align-self: start; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-on-dark); font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--cream-50) 70%, transparent); } .methode__next { margin-block-start: clamp(32px, 4vw, 48px); color: color-mix(in oklab, var(--cream-50) 78%, transparent); font-size: var(--fs-lg); } .methode__next a { color: var(--cream-50); text-decoration-thickness: 1px; text-decoration-color: var(--accent-2); } /* ═══════════════════════════════════════════════════════════════ PROGRAMME ═══════════════════════════════════════════════════════════════ */ .programme { padding-block: var(--pad-b); background: var(--cream-50); } .programs { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 760px) { .programs { grid-template-columns: 1fr; } } @media (min-width: 980px) { .programs { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .program { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.4vw, 32px); background: var(--cream-100); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s, box-shadow .25s, border-color .25s; } .program:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(21,19,14,.25); } .program__tag { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .program h3 { margin: 8px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 1.3rem + 1.4vw, 40px); line-height: 0.92; letter-spacing: -0.025em; text-transform: uppercase; } .program__sub { margin: 12px 0 0; color: var(--ink-500); font-size: var(--fs-md); } .program__price { display: grid; gap: 4px; padding-block: 18px; border-block: 1px solid var(--line); } .program__amount { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 1.6rem + 3vw, 60px); line-height: 1; letter-spacing: -0.03em; } .program__terms { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--ink-500); } .program__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .program__list li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: var(--fs-sm); color: var(--ink-700); } .program__list li::before { content: "✓"; color: var(--accent); font-family: var(--sans); font-weight: 600; font-size: 12px; line-height: 1.4; } .program > .btn { margin-block-start: auto; } .program--feature { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-900); } .program--feature .program__tag { color: var(--accent-2); } .program--feature .program__sub { color: color-mix(in oklab, var(--cream-50) 75%, transparent); } .program--feature .program__price { border-color: var(--line-on-dark); } .program--feature .program__terms { color: color-mix(in oklab, var(--cream-50) 60%, transparent); } .program--feature .program__list li { color: color-mix(in oklab, var(--cream-50) 88%, transparent); } .program--feature .program__list li::before { color: var(--accent-2); } .program--feature .btn--solid { --bg: var(--cream-50); --fg: var(--ink-900); } .program--feature .btn--solid:hover { --bg: var(--accent-2); --fg: var(--ink-900); } .program__flag { position: absolute; inset-block-start: -10px; inset-inline-end: 22px; background: var(--accent-2); color: var(--ink-900); padding: 6px 12px; border-radius: 999px; font: 600 var(--fs-xs)/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; } .programme__note { margin: clamp(32px, 4vw, 48px) 0 0; font-size: var(--fs-sm); color: var(--ink-500); max-inline-size: 70ch; } .programme__note span { color: var(--accent); } /* ═══════════════════════════════════════════════════════════════ REVIEWS ═══════════════════════════════════════════════════════════════ */ .reviews { padding-block: var(--pad-b); background: var(--cream-100); } .reviews__score { display: grid; gap: 4px; justify-items: start; } @media (min-width: 820px) { .reviews__score { justify-items: end; text-align: end; } } .reviews__stars { color: var(--accent-2); font-size: clamp(22px, 1.2rem + 0.8vw, 30px); letter-spacing: 2px; line-height: 1; } .reviews__meta { color: var(--ink-500); font-size: var(--fs-sm); } .reviews__meta strong { color: var(--ink-900); font-weight: 600; } .reviews__grid { margin-block-start: clamp(36px, 5vw, 56px); display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 720px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .reviews__grid { grid-template-columns: repeat(4, 1fr); } } .review { margin: 0; padding: 22px; background: var(--cream-50); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 16px; align-content: start; } .review__stars { color: var(--accent-2); font-size: 14px; letter-spacing: 1.5px; line-height: 1; } .review blockquote { margin: 0; font-family: var(--sans); font-weight: 400; font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-900); letter-spacing: -0.005em; } .review blockquote::before { content: "“"; color: var(--accent); margin-inline-end: 2px; } .review blockquote::after { content: "”"; color: var(--accent); } .review figcaption { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); } .review figcaption strong { font-weight: 500; } .review figcaption em { font-style: normal; color: var(--ink-500); display: block; font-size: var(--fs-xs); margin-block-start: 1px; } .avatar { inline-size: 36px; block-size: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--cream-50); font: 600 var(--fs-sm)/1 var(--sans); } /* ═══════════════════════════════════════════════════════════════ STANDORTE ═══════════════════════════════════════════════════════════════ */ .standorte { padding-block: var(--pad-b); background: var(--cream-50); } .orte { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 760px) { .orte { grid-template-columns: repeat(3, 1fr); } } .ort { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2vw, 28px); background: var(--cream-100); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; } .ort::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 50%); pointer-events: none; } .ort__head { display: grid; gap: 4px; position: relative; } .ort__num { font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.1em; } .ort h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 1.2rem + 1.2vw, 36px); letter-spacing: -0.025em; text-transform: uppercase; } .ort__addr { margin: 0; color: var(--ink-700); font-size: var(--fs-md); } .ort__meta { margin: 0; display: grid; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--line); } .ort__meta > div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; font-size: var(--fs-sm); } .ort__meta dt { font: 500 var(--fs-xs)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); } .ort__meta dd { margin: 0; color: var(--ink-700); } .ort .link-arrow { justify-self: start; margin-block-start: 6px; } .standorte__note { margin: clamp(28px, 4vw, 40px) 0 0; font-size: var(--fs-sm); color: var(--ink-500); } /* ═══════════════════════════════════════════════════════════════ KONTAKT (dark) ═══════════════════════════════════════════════════════════════ */ .kontakt { padding-block: var(--pad-b); background: var(--ink-900); color: var(--cream-50); } .kontakt__wrap { display: grid; gap: clamp(40px, 5vw, 64px); grid-template-columns: 1fr; } @media (min-width: 920px) { .kontakt__wrap { grid-template-columns: 1fr 1.1fr; align-items: start; } } .kontakt__lede { margin: 22px 0 0; max-inline-size: 50ch; font-size: var(--fs-lg); color: color-mix(in oklab, var(--cream-50) 80%, transparent); } .kontakt__direct { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 0; border-block-start: 1px solid var(--line-on-dark); } .kontakt__direct li { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; padding: 16px 0; border-block-end: 1px solid var(--line-on-dark); align-items: baseline; } .kontakt__lbl { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--cream-50) 60%, transparent); } .kontakt__direct a { color: var(--cream-50); font-family: var(--display); font-weight: 900; font-size: clamp(20px, 1.05rem + 0.6vw, 26px); text-decoration: none; letter-spacing: -0.02em; text-transform: uppercase; } .kontakt__direct a:hover { text-decoration: underline; text-decoration-color: var(--accent-2); } .kontakt__direct a:hover { color: var(--accent-2); } /* ─── form ─── */ .form { background: color-mix(in oklab, var(--cream-50) 6%, var(--ink-900)); border: 1px solid var(--line-on-dark); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; } .form__row { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: 6px; } .field__lbl { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--cream-50) 70%, transparent); } .field__lbl em { font-style: normal; opacity: .6; margin-inline-start: 4px; } .field input, .field select, .field textarea { font: 400 var(--fs-md)/1.4 var(--sans); background: transparent; color: var(--cream-50); border: 0; border-block-end: 1px solid var(--line-on-dark); padding: 10px 0; appearance: none; border-radius: 0; } .field textarea { resize: vertical; min-block-size: 96px; } .field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--cream-50) 35%, transparent); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-block-end-color: var(--accent-2); } .field select { background-image: linear-gradient(45deg, transparent 50%, var(--cream-50) 50%), linear-gradient(135deg, var(--cream-50) 50%, transparent 50%); background-position: right 4px center, right 10px center; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 24px; } .field select option { color: var(--ink-900); background: var(--cream-50); } .check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--fs-sm); color: color-mix(in oklab, var(--cream-50) 78%, transparent); } .check input { inline-size: 18px; block-size: 18px; accent-color: var(--accent-2); margin-block-start: 2px; } .check a { color: var(--cream-50); } .form__foot { display: grid; gap: 14px; align-items: center; grid-template-columns: 1fr; } @media (min-width: 640px) { .form__foot { grid-template-columns: auto 1fr; } } .form__foot .btn--solid { --bg: var(--cream-50); --fg: var(--ink-900); } .form__foot .btn--solid:hover { --bg: var(--accent-2); } .form__hint { font: 500 var(--fs-xs)/1.4 var(--mono); letter-spacing: 0.08em; color: color-mix(in oklab, var(--cream-50) 60%, transparent); } .form__success { margin: 0; padding: 12px 14px; background: color-mix(in oklab, var(--accent) 30%, transparent); border-radius: var(--radius-sm); font-family: var(--mono); font-size: var(--fs-sm); } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .foot { background: var(--cream-50); border-block-start: 1px solid var(--line); } .foot__wrap { display: grid; gap: 36px; grid-template-columns: 1fr; padding-block: clamp(40px, 5vw, 72px); } @media (min-width: 760px) { .foot__wrap { grid-template-columns: 2fr 1fr 1fr 1fr; } } .foot__brand { display: grid; gap: 14px; align-content: start; max-inline-size: 36ch; } .foot__brand .nav__mark { inline-size: 40px; block-size: 40px; } .foot__brand p { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; } .foot__brand strong { color: var(--ink-900); font-weight: 500; } .foot__col { display: grid; gap: 10px; align-content: start; } .foot__col h4 { margin: 0 0 4px; font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); } .foot__col a { text-decoration: none; font-size: var(--fs-sm); color: var(--ink-700); } .foot__col a:hover { color: var(--accent); } .foot__bottom { border-block-start: 1px solid var(--line); } .foot__bottom-row { padding-block: 18px; display: grid; gap: 8px; grid-template-columns: 1fr; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-500); letter-spacing: 0.04em; } @media (min-width: 760px) { .foot__bottom-row { grid-template-columns: 1fr auto; align-items: center; } } /* ═══════════════════════════════════════════════════════════════ REVEAL ANIMATIONS ═══════════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation: none !important; transition: none !important; } }