@charset "UTF-8";
/* ==========================================================================
Fonts — @font-face Declarations
Space Grotesk (lokal, Regular/Medium/Bold, mit ss02+ss03)
Grifter (lokal, Bold)
========================================================================== */
/* Space Grotesk ---------------------------------------------------------- */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("fonts/SpaceGrotesk-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("fonts/SpaceGrotesk-Medium.woff2") format("woff2"), url("fonts/SpaceGrotesk-Medium.woff") format("woff");
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("fonts/SpaceGrotesk-Bold.woff2") format("woff2");
}
/* Grifter ---------------------------------------------------------------- */
@font-face {
font-family: "Grifter";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("fonts/Grifter-Bold.woff2") format("woff2"), url("fonts/Grifter-Bold.woff") format("woff");
}
/* ==========================================================================
Reset — Modern CSS Reset (Andy Bell + Josh Comeau inspired)
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
p {
overflow-wrap: break-word;
padding-bottom: 0.5em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr,
.wp-block-separator {
border: none !important;
box-shadow: none !important;
outline: none !important;
height: 1px;
margin: 3rem 0;
background-color: rgba(var(--dark-rgb), 0.2);
}
/* ==========================================================================
Theme — Design Tokens (Colors, Fonts, Spacing, Borders, Shadows)
========================================================================== */
:root {
/* ------------------------------------------------------------------
COLORS — 1 Schmuckfarbe + Grauschattierungen
------------------------------------------------------------------ */
--color-01: #E1FF4B;
--light: #FFFFFF;
--shade-01: #F4F7F0;
--shade-02: #EEF2EE;
--shade-03: #E5E8E4;
--shade-04: #D6D9D2;
--shade-05: #BCBFB7;
--shade-06: #959994;
--shade-07: #777974;
--shade-08: #505551;
--shade-09: #353D38;
--dark: #1A1D1C;
/* Signal color for destructive actions (e.g. delete) */
--color-danger: #D7302D;
--color-danger-hover: #A82220;
/* RGB channel triplets for rgba() usage */
--color-01-rgb: 225, 255, 75;
--light-rgb: 255, 255, 255;
--shade-01-rgb: 244, 247, 240;
--shade-02-rgb: 238, 242, 238;
--shade-03-rgb: 229, 232, 228;
--shade-04-rgb: 214, 217, 210;
--shade-05-rgb: 188, 191, 183;
--shade-06-rgb: 149, 153, 148;
--shade-07-rgb: 119, 121, 116;
--shade-08-rgb: 80, 85, 81;
--shade-09-rgb: 53, 61, 56;
--dark-rgb: 26, 29, 28;
/* Semantic Surface & Text */
--color-bg: var(--light);
--bg-light: var(--light);
--bg-shade-01: var(--shade-01);
--color-bg-subtle: var(--shade-01);
--color-bg-muted: var(--shade-02);
--bg-shade-02: var(--shade-02);
--bg-shade-03: var(--shade-03);
--bg-shade-04: var(--shade-04);
--bg-shade-05: var(--shade-05);
--bg-shade-06: var(--shade-06);
--bg-shade-07: var(--shade-07);
--bg-shade-08: var(--shade-08);
--bg-shade-09: var(--shade-09);
--bg-dark: var(--dark);
--color-text: var(--dark);
--color-text-muted: var(--shade-07);
--color-text-inv: var(--light);
--color-border: var(--shade-04);
/* ------------------------------------------------------------------
FONTS
Primary: Space Grotesk (selbst gehostet, 400/500/700, ss02+ss03)
Display: Grifter (selbst gehostet, Bold 700)
------------------------------------------------------------------ */
--font-primary: "Space Grotesk", sans-serif;
--font-display: "Grifter", sans-serif;
font-feature-settings: "ss02" 1, "ss03" 1;
/* ------------------------------------------------------------------
FONT SIZES — Fluid Type Scale (clamp-based)
------------------------------------------------------------------ */
--text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem); /* ~11–12px */
--text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem); /* ~13–14px */
--text-base: clamp(0.938rem, 0.88rem + 0.25vw, 1rem); /* ~15–16px */
--text-md: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); /* ~16–18px */
--text-lg: clamp(1.1rem, 1.0rem + 0.4vw, 1.25rem); /* ~18–20px */
--text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* ~20–24px */
--text-2xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); /* ~24–30px */
--text-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* ~28–36px */
--text-4xl: clamp(2rem, 1.5rem + 2vw, 3rem); /* ~32–48px */
--text-5xl: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* ~40–80px */
--text-6xl: clamp(4rem, 2rem + 7vw, 10rem); /* ~64–160px */
/* ------------------------------------------------------------------
FONT WEIGHTS
------------------------------------------------------------------ */
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* ------------------------------------------------------------------
LINE HEIGHTS
------------------------------------------------------------------ */
--leading-none: 1;
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--leading-loose: 1.8;
/* ------------------------------------------------------------------
LETTER SPACING
------------------------------------------------------------------ */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* ------------------------------------------------------------------
SPACING
------------------------------------------------------------------ */
--space-2xs: 0.25rem; /* 4px */
--space-xs: 0.5rem; /* 8px */
--space-sm: 0.75rem; /* 12px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
--space-4xl: 6rem; /* 96px */
--space-5xl: 8rem; /* 128px */
/* ------------------------------------------------------------------
BORDERS
------------------------------------------------------------------ */
--radius-full: 9999px;
--border-thin: 1px solid var(--color-border);
--border-medium: 2px solid var(--color-border);
/* ------------------------------------------------------------------
SHADOWS
------------------------------------------------------------------ */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
/* ------------------------------------------------------------------
TRANSITIONS
------------------------------------------------------------------ */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
/* ------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------ */
--grid-columns: 12;
--grid-gap: var(--space-lg);
--container-max: 1440px;
--container-wide: 1200px;
--container: 1024px;
--container-narrow: 800px;
--container-padding: clamp(1rem, 0.5rem + 3vw, 4rem);
}
.color-01 {
color: var(--color-01);
}
.light {
--color-text: var(--light);
--color-text-muted: rgba(var(--light-rgb), 0.8);
color: var(--light);
}
.shade-01 {
color: var(--shade-01);
}
.shade-02 {
color: var(--shade-02);
}
.shade-03 {
color: var(--shade-03);
}
.shade-04 {
color: var(--shade-04);
}
.shade-05 {
color: var(--shade-05);
}
.shade-06 {
color: var(--shade-06);
}
.shade-07 {
color: var(--shade-07);
}
.shade-08 {
color: var(--shade-08);
}
.shade-09 {
color: var(--shade-09);
}
.dark {
color: var(--dark);
}
.bg-shade-01 {
background-color: var(--shade-01);
}
.bg-shade-02 {
background-color: var(--shade-02);
}
.bg-shade-03 {
background-color: var(--shade-03);
}
.bg-shade-04 {
background-color: var(--shade-04);
}
.bg-shade-05 {
background-color: var(--shade-05);
}
.bg-shade-06 {
background-color: var(--shade-06);
}
.bg-shade-07 {
background-color: var(--shade-07);
}
.bg-shade-08 {
background-color: var(--shade-08);
}
.bg-shade-09 {
background-color: var(--shade-09);
}
.bg-dark {
background-color: var(--dark);
}
/* ==========================================================================
Typography — Agnostic utility classes (Form ≠ Semantik)
========================================================================== */
/* ------------------------------------------------------------------
Font Family
------------------------------------------------------------------ */
.font-primary {
font-family: var(--font-primary);
}
.font-display {
font-family: var(--font-display);
}
/* ------------------------------------------------------------------
Font Size
------------------------------------------------------------------ */
.text-xs {
font-size: var(--text-xs);
}
.text-sm {
font-size: var(--text-sm);
}
.text-base {
font-size: var(--text-base);
}
.text-md {
font-size: var(--text-md);
}
.text-lg {
font-size: var(--text-lg);
}
.text-xl {
font-size: var(--text-xl);
}
.text-2xl {
font-size: var(--text-2xl);
}
.text-3xl {
font-size: var(--text-3xl);
}
.text-4xl {
font-size: var(--text-4xl);
}
.text-5xl {
font-size: var(--text-5xl);
}
/* ------------------------------------------------------------------
Font Weight
------------------------------------------------------------------ */
.font-light {
font-weight: var(--font-light);
}
.font-regular {
font-weight: var(--font-regular);
}
.font-medium {
font-weight: var(--font-medium);
}
.font-semibold {
font-weight: var(--font-semibold);
}
.font-bold {
font-weight: var(--font-bold);
}
/* ------------------------------------------------------------------
Line Height
------------------------------------------------------------------ */
.leading-none {
line-height: var(--leading-none);
}
.leading-tight {
line-height: var(--leading-tight);
}
.leading-snug {
line-height: var(--leading-snug);
}
.leading-normal {
line-height: var(--leading-normal);
}
.leading-relaxed {
line-height: var(--leading-relaxed);
}
.leading-loose {
line-height: var(--leading-loose);
}
/* ------------------------------------------------------------------
Letter Spacing
------------------------------------------------------------------ */
.tracking-tight {
letter-spacing: var(--tracking-tight);
}
.tracking-normal {
letter-spacing: var(--tracking-normal);
}
.tracking-wide {
letter-spacing: var(--tracking-wide);
}
.tracking-wider {
letter-spacing: var(--tracking-wider);
}
.tracking-widest {
letter-spacing: var(--tracking-widest);
}
/* ------------------------------------------------------------------
Text Alignment
------------------------------------------------------------------ */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
/* ------------------------------------------------------------------
Text Transform
------------------------------------------------------------------ */
.text-upper {
text-transform: uppercase;
}
.text-lower {
text-transform: lowercase;
}
.text-caps {
text-transform: capitalize;
}
/* ------------------------------------------------------------------
Text Color
------------------------------------------------------------------ */
.text-default {
color: var(--color-text);
}
.text-muted {
color: var(--color-text-muted);
}
.text-inverse {
color: var(--color-text-inv);
}
.text-accent {
color: var(--color-accent-500);
}
.text-primary {
color: var(--color-primary-800);
}
/* ------------------------------------------------------------------
Composite Display Classes (convenience)
------------------------------------------------------------------ */
.display-hero {
font-size: var(--text-5xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.display-section {
font-size: var(--text-3xl);
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
}
.display-subsection {
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
line-height: var(--leading-snug);
}
.display-card-title {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
line-height: var(--leading-snug);
}
.body-lg {
font-size: var(--text-lg);
font-weight: var(--font-regular);
line-height: var(--leading-relaxed);
}
.body-default {
font-size: var(--text-base);
font-weight: var(--font-regular);
line-height: var(--leading-normal);
}
.body-sm {
font-size: var(--text-sm);
font-weight: var(--font-regular);
line-height: var(--leading-normal);
}
.label {
font-size: var(--text-sm);
font-weight: var(--font-medium);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-wide);
}
.overline {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
}
/* ==========================================================================
Layout — 12-Column Grid System
========================================================================== */
/* ------------------------------------------------------------------
Global Section Padding — direkte Kinder von body
Hintergrundfarben/-bilder bleiben full-width,
Inhalte bekommen viewport-abhängigen Seitenabstand.
------------------------------------------------------------------ */
body > *,
main > * {
padding-inline: var(--container-padding);
}
body > * {
overflow-x: hidden;
}
main {
padding-inline: 0;
overflow-x: clip;
}
/* ------------------------------------------------------------------
Container — beschränken nur die Inhaltsbreite, kein Padding
------------------------------------------------------------------ */
.container,
.container-max,
.container-wide,
.container-narrow {
padding-top: var(--container-padding);
padding-bottom: var(--container-padding);
margin-inline: auto;
}
.container {
max-width: var(--container);
}
.container-max {
max-width: var(--container-max);
}
.container-wide {
max-width: var(--container-wide);
}
.container-narrow {
max-width: var(--container-narrow);
}
/* ------------------------------------------------------------------
sections
------------------------------------------------------------------ */
.section {
position: relative;
}
.fullscreen {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow-y: clip;
}
.section__content {
position: relative;
z-index: 1;
width: 100%;
padding-block: var(--space-4xl);
color: var(--light);
}
/* ------------------------------------------------------------------
Section Background — fullscreen cover image
Parent needs position: relative + overflow: hidden
------------------------------------------------------------------ */
.section__bg {
position: absolute;
inset: 0;
width: 100%;
height: 120%;
object-fit: cover;
will-change: transform;
}
/* ------------------------------------------------------------------
Grid
------------------------------------------------------------------ */
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
.grid--no-gap {
gap: 0;
}
/* ------------------------------------------------------------------
Column Spans + Starts — responsive collapse
Mobile (<768px): 1 Spalte → alles full-width
Tablet (≥768px): 2 Spalten → col ≤ 6 bleiben, > 6 = full-width
Desktop (≥1024px): 12 Spalten wie gewohnt
------------------------------------------------------------------ */
/* Mobile: alles einspaltig, col-starts ignorieren */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
grid-column: 1/-1;
}
.col-start-1, .col-start-2, .col-start-3, .col-start-4,
.col-start-5, .col-start-6, .col-start-7, .col-start-8,
.col-start-9, .col-start-10, .col-start-11, .col-start-12 {
grid-column-start: 0;
}
/* Tablet (≥768px): 2 Spalten, col ≤ 6 = halbe Breite, > 6 = full */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.col-1, .col-2, .col-3,
.col-4, .col-5, .col-6 {
grid-column: span 1;
}
.col-7, .col-8, .col-9,
.col-10, .col-11, .col-12 {
grid-column: 1/-1;
}
.col-start-1, .col-start-2, .col-start-3, .col-start-4,
.col-start-5, .col-start-6, .col-start-7, .col-start-8,
.col-start-9, .col-start-10, .col-start-11, .col-start-12 {
grid-column-start: auto;
}
}
/* Desktop (≥1024px): volles 12-Column Grid */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(var(--grid-columns), 1fr);
}
.col-1 {
grid-column-end: span 1;
}
.col-2 {
grid-column-end: span 2;
}
.col-3 {
grid-column-end: span 3;
}
.col-4 {
grid-column-end: span 4;
}
.col-5 {
grid-column-end: span 5;
}
.col-6 {
grid-column-end: span 6;
}
.col-7 {
grid-column-end: span 7;
}
.col-8 {
grid-column-end: span 8;
}
.col-9 {
grid-column-end: span 9;
}
.col-10 {
grid-column-end: span 10;
}
.col-11 {
grid-column-end: span 11;
}
.col-12 {
grid-column-end: span 12;
}
.col-start-1 {
grid-column-start: 1;
}
.col-start-2 {
grid-column-start: 2;
}
.col-start-3 {
grid-column-start: 3;
}
.col-start-4 {
grid-column-start: 4;
}
.col-start-5 {
grid-column-start: 5;
}
.col-start-6 {
grid-column-start: 6;
}
.col-start-7 {
grid-column-start: 7;
}
.col-start-8 {
grid-column-start: 8;
}
.col-start-9 {
grid-column-start: 9;
}
.col-start-10 {
grid-column-start: 10;
}
.col-start-11 {
grid-column-start: 11;
}
.col-start-12 {
grid-column-start: 12;
}
}
/* ------------------------------------------------------------------
Gap Variants
------------------------------------------------------------------ */
.gap-xs {
gap: var(--space-xs);
}
.gap-sm {
gap: var(--space-sm);
}
.gap-md {
gap: var(--space-md);
}
.gap-lg {
gap: var(--space-lg);
}
.gap-xl {
gap: var(--space-xl);
}
.gap-2xl {
gap: var(--space-2xl);
}
/* ------------------------------------------------------------------
Alignment
------------------------------------------------------------------ */
.items-start {
align-items: start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: end;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-items: start;
}
.justify-center {
justify-items: center;
}
.justify-end {
justify-items: end;
}
.self-start {
align-self: start;
}
.self-center {
align-self: center;
}
.self-end {
align-self: end;
}
/* ------------------------------------------------------------------
Responsive Prefix-Klassen (md: / lg:)
Für explizite Breakpoint-Overrides, z.B. class="col-12 md:col-6 lg:col-4"
------------------------------------------------------------------ */
/* Tablet (≥768px) */
@media (min-width: 768px) {
.md\:col-1 {
grid-column-end: span 1;
}
.md\:col-2 {
grid-column-end: span 2;
}
.md\:col-3 {
grid-column-end: span 3;
}
.md\:col-4 {
grid-column-end: span 4;
}
.md\:col-5 {
grid-column-end: span 5;
}
.md\:col-6 {
grid-column-end: span 6;
}
.md\:col-7 {
grid-column-end: span 7;
}
.md\:col-8 {
grid-column-end: span 8;
}
.md\:col-9 {
grid-column-end: span 9;
}
.md\:col-10 {
grid-column-end: span 10;
}
.md\:col-11 {
grid-column-end: span 11;
}
.md\:col-12 {
grid-column-end: span 12;
}
.md\:col-start-1 {
grid-column-start: 1;
}
.md\:col-start-2 {
grid-column-start: 2;
}
.md\:col-start-3 {
grid-column-start: 3;
}
.md\:col-start-4 {
grid-column-start: 4;
}
.md\:col-start-5 {
grid-column-start: 5;
}
.md\:col-start-6 {
grid-column-start: 6;
}
.md\:col-start-7 {
grid-column-start: 7;
}
}
/* Desktop (≥1024px) */
@media (min-width: 1024px) {
.lg\:col-1 {
grid-column-end: span 1;
}
.lg\:col-2 {
grid-column-end: span 2;
}
.lg\:col-3 {
grid-column-end: span 3;
}
.lg\:col-4 {
grid-column-end: span 4;
}
.lg\:col-5 {
grid-column-end: span 5;
}
.lg\:col-6 {
grid-column-end: span 6;
}
.lg\:col-7 {
grid-column-end: span 7;
}
.lg\:col-8 {
grid-column-end: span 8;
}
.lg\:col-9 {
grid-column-end: span 9;
}
.lg\:col-10 {
grid-column-end: span 10;
}
.lg\:col-11 {
grid-column-end: span 11;
}
.lg\:col-12 {
grid-column-end: span 12;
}
.lg\:col-start-1 {
grid-column-start: 1;
}
.lg\:col-start-2 {
grid-column-start: 2;
}
.lg\:col-start-3 {
grid-column-start: 3;
}
.lg\:col-start-4 {
grid-column-start: 4;
}
.lg\:col-start-5 {
grid-column-start: 5;
}
.lg\:col-start-6 {
grid-column-start: 6;
}
.lg\:col-start-7 {
grid-column-start: 7;
}
}
/* ==========================================================================
Spacing — Margin & Padding Utilities
========================================================================== */
/* ------------------------------------------------------------------
Margin Utilities
------------------------------------------------------------------ */
/* All sides */
.m-0 {
margin: 0;
}
.m-2xs {
margin: var(--space-2xs);
}
.m-xs {
margin: var(--space-xs);
}
.m-sm {
margin: var(--space-sm);
}
.m-md {
margin: var(--space-md);
}
.m-lg {
margin: var(--space-lg);
}
.m-xl {
margin: var(--space-xl);
}
.m-2xl {
margin: var(--space-2xl);
}
.m-auto {
margin: auto;
}
/* Top */
.mt-0 {
margin-top: 0;
}
.mt-2xs {
margin-top: var(--space-2xs);
}
.mt-xs {
margin-top: var(--space-xs);
}
.mt-sm {
margin-top: var(--space-sm);
}
.mt-md {
margin-top: var(--space-md);
}
.mt-lg {
margin-top: var(--space-lg);
}
.mt-xl {
margin-top: var(--space-xl);
}
.mt-2xl {
margin-top: var(--space-2xl);
}
.mt-3xl {
margin-top: var(--space-3xl);
}
.mt-4xl {
margin-top: var(--space-4xl);
}
/* Bottom */
.mb-0 {
margin-bottom: 0;
}
.mb-2xs {
margin-bottom: var(--space-2xs);
}
.mb-xs {
margin-bottom: var(--space-xs);
}
.mb-sm {
margin-bottom: var(--space-sm);
}
.mb-md {
margin-bottom: var(--space-md);
}
.mb-lg {
margin-bottom: var(--space-lg);
}
.mb-xl {
margin-bottom: var(--space-xl);
}
.mb-2xl {
margin-bottom: var(--space-2xl);
}
.mb-3xl {
margin-bottom: var(--space-3xl);
}
.mb-4xl {
margin-bottom: var(--space-4xl);
}
/* Inline (left + right) */
.mx-auto {
margin-inline: auto;
}
.mx-md {
margin-inline: var(--space-md);
}
.mx-lg {
margin-inline: var(--space-lg);
}
/* Block (top + bottom) */
.my-md {
margin-block: var(--space-md);
}
.my-lg {
margin-block: var(--space-lg);
}
.my-xl {
margin-block: var(--space-xl);
}
.my-2xl {
margin-block: var(--space-2xl);
}
.my-3xl {
margin-block: var(--space-3xl);
}
/* ------------------------------------------------------------------
Padding Utilities
------------------------------------------------------------------ */
/* All sides */
.p-0 {
padding: 0;
}
.p-2xs {
padding: var(--space-2xs);
}
.p-xs {
padding: var(--space-xs);
}
.p-sm {
padding: var(--space-sm);
}
.p-md {
padding: var(--space-md);
}
.p-lg {
padding: var(--space-lg);
}
.p-xl {
padding: var(--space-xl);
}
.p-2xl {
padding: var(--space-2xl);
}
/* Top */
.pt-0 {
padding-top: 0;
}
.pt-md {
padding-top: var(--space-md);
}
.pt-lg {
padding-top: var(--space-lg);
}
.pt-xl {
padding-top: var(--space-xl);
}
.pt-2xl {
padding-top: var(--space-2xl);
}
.pt-3xl {
padding-top: var(--space-3xl);
}
/* Bottom */
.pb-0 {
padding-bottom: 0;
}
.pb-md {
padding-bottom: var(--space-md);
}
.pb-lg {
padding-bottom: var(--space-lg);
}
.pb-xl {
padding-bottom: var(--space-xl);
}
.pb-2xl {
padding-bottom: var(--space-2xl);
}
.pb-3xl {
padding-bottom: var(--space-3xl);
}
/* Inline (left + right) */
.px-xs {
padding-inline: var(--space-xs);
}
.px-sm {
padding-inline: var(--space-sm);
}
.px-md {
padding-inline: var(--space-md);
}
.px-lg {
padding-inline: var(--space-lg);
}
.px-xl {
padding-inline: var(--space-xl);
}
.px-2xl {
padding-inline: var(--space-2xl);
}
/* Block (top + bottom) */
.py-xs {
padding-block: var(--space-xs);
}
.py-sm {
padding-block: var(--space-sm);
}
.py-md {
padding-block: var(--space-md);
}
.py-lg {
padding-block: var(--space-lg);
}
.py-xl {
padding-block: var(--space-xl);
}
.py-2xl {
padding-block: var(--space-2xl);
}
.py-3xl {
padding-block: var(--space-3xl);
}
.py-4xl {
padding-block: var(--space-4xl);
}
/* ------------------------------------------------------------------
Section Spacing (vertical rhythm between page sections)
------------------------------------------------------------------ */
.section {
padding-block: var(--space-3xl);
}
.section--sm {
padding-block: var(--space-2xl);
}
.section--lg {
padding-block: var(--space-4xl);
}
.section--xl {
padding-block: var(--space-5xl);
}
/* ==========================================================================
Overlay — Abdunkelung für Hintergrundbilder
Farbe: --dark (#282E2A)
Verwendung: (kein extra c-overlay nötig)
Parent braucht position: relative
========================================================================== */
.c-overlay,
.c-overlay--90,
.c-overlay--80,
.c-overlay--70,
.c-overlay--60,
.c-overlay--gv-90,
.c-overlay--gv-80,
.c-overlay--gv-70,
.c-overlay--gv-60,
.c-overlay--gh-90,
.c-overlay--gh-80,
.c-overlay--gh-70,
.c-overlay--gh-60,
.c-overlay--gd-90,
.c-overlay--gd-80,
.c-overlay--gd-70,
.c-overlay--gd-60 {
position: absolute;
inset: 0;
pointer-events: none;
height: 120%;
width: 100%;
}
/* ------------------------------------------------------------------
Vollflächig (uniforme Deckkraft)
------------------------------------------------------------------ */
.c-overlay--90 {
background: var(--dark);
opacity: 0.9;
}
.c-overlay--80 {
background: var(--dark);
opacity: 0.8;
}
.c-overlay--70 {
background: var(--dark);
opacity: 0.7;
}
.c-overlay--60 {
background: var(--dark);
opacity: 0.6;
}
/* ------------------------------------------------------------------
Gradient vertikal (oben → unten)
Zahl = finale Opacity am unteren Ende
------------------------------------------------------------------ */
.c-overlay--gv-90 {
background: linear-gradient(to bottom, rgba(26, 29, 28, 0.95), rgba(26, 29, 28, 0.85));
}
.c-overlay--gv-80 {
background: linear-gradient(to bottom, rgba(26, 29, 28, 0.9), rgba(26, 29, 28, 0.75));
}
.c-overlay--gv-70 {
background: linear-gradient(to bottom, rgba(26, 29, 28, 0.85), rgba(26, 29, 28, 0.65));
}
.c-overlay--gv-60 {
background: linear-gradient(to bottom, rgba(26, 29, 28, 0.8), rgba(26, 29, 28, 0.6));
}
/* ------------------------------------------------------------------
Gradient horizontal (links → rechts)
Zahl = finale Opacity am rechten Ende
------------------------------------------------------------------ */
.c-overlay--gh-90 {
background: linear-gradient(to right, rgba(26, 29, 28, 0.95), rgba(26, 29, 28, 0.85));
}
.c-overlay--gh-80 {
background: linear-gradient(to right, rgba(26, 29, 28, 0.95), rgba(26, 29, 28, 0.75));
}
.c-overlay--gh-70 {
background: linear-gradient(to right, rgba(26, 29, 28, 0.9), rgba(26, 29, 28, 0.65));
}
.c-overlay--gh-60 {
background: linear-gradient(to right, rgba(26, 29, 28, 0.85), rgba(26, 29, 28, 0.6));
}
/* ------------------------------------------------------------------
Gradient diagonal (oben-links → unten-rechts, 135deg)
Zahl = finale Opacity in der unteren rechten Ecke
------------------------------------------------------------------ */
.c-overlay--gd-90 {
background: linear-gradient(135deg, rgba(26, 29, 28, 0.95), rgba(26, 29, 28, 0.85));
}
.c-overlay--gd-80 {
background: linear-gradient(135deg, rgba(26, 29, 28, 0.95), rgba(26, 29, 28, 0.75));
}
.c-overlay--gd-70 {
background: linear-gradient(135deg, rgba(26, 29, 28, 0.9), rgba(26, 29, 28, 0.65));
}
.c-overlay--gd-60 {
background: linear-gradient(135deg, rgba(26, 29, 28, 0.85), rgba(26, 29, 28, 0.6));
}
/* ==========================================================================
Reveal — Scroll-basierte Einblend-Animationen
Verwendung: data-reveal="fade-up" auf Elementen
Trigger: Intersection Observer (JS)
========================================================================== */
/* ------------------------------------------------------------------
Basis: Elemente starten unsichtbar
------------------------------------------------------------------ */
.js [data-reveal] {
opacity: 0;
transition: opacity 2.8s cubic-bezier(0.16, 1, 0.3, 1), transform 2.8s cubic-bezier(0.16, 1, 0.3, 1), filter 2.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.js [data-reveal].is-visible {
opacity: 1;
transform: none;
filter: none;
will-change: transform, opacity, filter;
}
/* ------------------------------------------------------------------
Stagger-Delay für Kindelemente
------------------------------------------------------------------ */
.js [data-reveal-stagger] > * {
opacity: 0;
transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-stagger].is-visible > * {
opacity: 1;
transform: none;
will-change: transform, opacity;
}
[data-reveal-stagger].is-visible > *:nth-child(1) {
transition-delay: 0s;
}
[data-reveal-stagger].is-visible > *:nth-child(2) {
transition-delay: 0.3s;
}
[data-reveal-stagger].is-visible > *:nth-child(3) {
transition-delay: 0.6s;
}
[data-reveal-stagger].is-visible > *:nth-child(4) {
transition-delay: 0.9s;
}
[data-reveal-stagger].is-visible > *:nth-child(5) {
transition-delay: 1.2s;
}
[data-reveal-stagger].is-visible > *:nth-child(6) {
transition-delay: 1.5s;
}
[data-reveal-stagger].is-visible > *:nth-child(7) {
transition-delay: 1.8s;
}
[data-reveal-stagger].is-visible > *:nth-child(8) {
transition-delay: 2.1s;
}
[data-reveal-stagger].is-visible > *:nth-child(9) {
transition-delay: 2.4s;
}
[data-reveal-stagger].is-visible > *:nth-child(10) {
transition-delay: 2.7s;
}
/* ------------------------------------------------------------------
Varianten
------------------------------------------------------------------ */
/* Fade Up */
.js [data-reveal=fade-up] {
transform: translateY(40px);
}
/* Fade Down */
.js [data-reveal=fade-down] {
transform: translateY(-40px);
}
/* Fade Left */
.js [data-reveal=fade-left] {
transform: translateX(100px);
}
/* Fade Right */
.js [data-reveal=fade-right] {
transform: translateX(-40px);
}
/* Fade (nur Transparenz, kein transform nötig) */
/* Blur-to-Sharp */
.js [data-reveal=blur] {
filter: blur(12px);
}
/* ------------------------------------------------------------------
Stagger-Varianten (auf Kindelemente)
------------------------------------------------------------------ */
.js [data-reveal-stagger=fade-up] > * {
transform: translateY(30px);
}
.js [data-reveal-stagger=fade-left] > * {
transform: translateX(30px);
}
.js [data-reveal-stagger=blur] > * {
filter: blur(8px);
}
/* ------------------------------------------------------------------
Reduced Motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
[data-reveal],
[data-reveal-stagger] > * {
transition-duration: 0.01s !important;
transform: none !important;
filter: none !important;
}
}
/* ==========================================================================
Layout — Background Image Layer (.bg-image)
Blends an image onto the element's background color.
Usage: class="bg-image" style="--bg-image: url(...)"
========================================================================== */
.bg-image {
position: relative;
isolation: isolate;
}
.bg-image::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--bg-image);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
mix-blend-mode: multiply;
opacity: 0.3;
pointer-events: none;
}
/* ------------------------------------------------------------------
Cover background — full-bleed image, right-aligned, no blending
Usage: class="bg-cover" style="--bg-image: url(...)"
------------------------------------------------------------------ */
.bg-cover {
background-image: var(--bg-image);
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
/* ==========================================================================
Site Header — Dark top bar with logo + nav (used on subpages / fallback)
========================================================================== */
.site-header {
background-color: var(--dark);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-md);
padding-bottom: var(--space-md);
}
.site-header__logo {
width: 160px;
height: auto;
}
.site-header__nav-list {
display: flex;
gap: var(--space-lg);
}
.site-header__nav-link {
color: rgba(var(--light-rgb), 0.6);
font-size: var(--text-sm);
font-weight: var(--font-medium);
transition: color var(--transition-fast);
}
.site-header__nav-link:hover {
color: var(--light);
}
/* ==========================================================================
Site Footer — copyright + legal links
========================================================================== */
.site-footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-sm) var(--space-lg);
}
.site-footer__copyright {
font-size: var(--text-sm);
padding-bottom: 0;
}
.site-footer__nav a {
font-size: var(--text-sm);
color: var(--shade-05);
padding: var(--space-sm) var(--space-md);
}
.site-footer__nav a:first-child {
padding-left: 0;
}
.site-footer__nav a:hover,
.site-footer__nav a.active {
color: var(--color-01);
}
.logo {
position: absolute;
top: var(--container-padding);
left: var(--container-padding);
z-index: 2;
width: 200px;
height: auto;
}
/* ==========================================================================
Components — Button
Ein globaler Button in zwei Größen. Font: Grifter, dark, caps, bold.
Hover: Slide-Effekt (dunkle Fläche von links, Schrift wechselt).
========================================================================== */
.c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 16px var(--space-xl) var(--space-sm);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: var(--font-bold);
line-height: var(--leading-none);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--dark);
background-color: var(--color-01);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
transition: color var(--duration-normal) var(--ease-default);
}
.c-btn::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--dark);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-slow) var(--ease-default);
}
.c-btn:hover {
color: var(--color-01);
}
.c-btn:hover::before {
transform: scaleX(1);
}
.c-btn:active {
transform: scale(0.98);
}
.c-btn:focus-visible {
outline: 2px solid var(--dark);
outline-offset: 2px;
}
.c-btn:disabled, .c-btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ------------------------------------------------------------------
Sizes
------------------------------------------------------------------ */
.c-btn--lg {
padding: 22px var(--space-2xl) var(--space-md);
font-size: var(--text-lg);
}
.c-btn[hidden] {
display: none;
}
/* ------------------------------------------------------------------
Variants
------------------------------------------------------------------ */
.c-btn--secondary {
color: var(--dark);
background-color: var(--shade-03);
}
.c-btn--secondary::before {
background-color: var(--shade-05);
}
.c-btn--secondary:hover {
color: var(--dark);
}
.c-btn--danger {
color: var(--light);
background-color: var(--color-danger);
}
.c-btn--danger::before {
background-color: var(--color-danger-hover);
}
.c-btn--danger:hover {
color: var(--light);
}
/* ------------------------------------------------------------------
Icon inside a button (inline SVG)
------------------------------------------------------------------ */
.c-btn__icon {
flex-shrink: 0;
margin-top: -0.2em;
}
/* ==========================================================================
Components — Form Inputs
========================================================================== */
.c-input {
display: block;
width: 100%;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-primary);
font-size: var(--text-base);
font-weight: var(--font-regular);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
border: 2px solid var(--color-border);
transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.c-input::placeholder {
color: var(--color-text-muted);
}
.c-input:hover {
border-color: var(--color-neutral-400);
}
.c-input:focus {
outline: none;
border-color: var(--dark);
}
.c-input.has-error {
border-color: var(--color-01);
border-width: 3px;
}
.c-input:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: var(--color-bg-subtle);
}
/* ------------------------------------------------------------------
Textarea
------------------------------------------------------------------ */
textarea.c-input {
min-height: 120px;
resize: vertical;
}
/* ------------------------------------------------------------------
Select
------------------------------------------------------------------ */
select.c-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-sm) center;
padding-right: var(--space-2xl);
}
/* ------------------------------------------------------------------
Checkbox & Radio (custom)
------------------------------------------------------------------ */
.c-checkbox,
.c-radio {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
cursor: pointer;
}
.c-checkbox input,
.c-radio input {
appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.15em;
border: 2px solid var(--color-border);
background-color: var(--color-bg);
cursor: pointer;
flex-shrink: 0;
transition: all var(--duration-normal) var(--ease-default);
}
.c-checkbox input:checked,
.c-radio input:checked {
background-color: var(--color-01);
border-color: var(--color-01);
}
.c-checkbox input:focus-visible,
.c-radio input:focus-visible {
outline: 2px solid var(--dark);
outline-offset: 2px;
}
.c-checkbox input:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.c-radio input {
border-radius: var(--radius-full);
}
.c-radio input:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%231a1a2e'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
/* ------------------------------------------------------------------
Form Group
------------------------------------------------------------------ */
.c-form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
/* Spans all columns when placed inside a grid */
.c-form-group--full {
grid-column: 1/-1;
}
.c-form-label {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
}
.c-form-hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.c-form-error {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-bold);
color: var(--dark);
background-color: var(--color-01);
padding: var(--space-2xs) var(--space-xs);
margin-top: calc(var(--space-xs) * -1);
}
/* ------------------------------------------------------------------
Timeslot Picker (Tage + Zeitfenster)
------------------------------------------------------------------ */
.c-timeslots {
display: flex;
flex-direction: column;
}
.c-timeslot {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
}
.c-timeslot:last-child {
border-bottom: none;
}
.c-timeslot__fields {
display: flex;
gap: var(--space-xs);
margin-left: auto;
}
.c-timeslot__fields[hidden] {
display: none;
}
.c-timeslot__range {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.c-timeslot__range .c-input[type=time] {
width: auto;
flex: 1;
max-width: 140px;
}
/* ==========================================================================
Component — Teacher Card (.c-teacher)
Layout: Name + Photo (overlapping) → CTA → Info text
========================================================================== */
.c-teacher {
display: flex;
flex-direction: column;
max-width: 400px;
}
/* ------------------------------------------------------------------
Header: Name + Photo + Genre-Tags
------------------------------------------------------------------ */
.c-teacher__header {
display: grid;
grid-template-columns: 40% 60%;
min-height: 400px;
overflow: hidden;
}
/* ------------------------------------------------------------------
Meta: Name + Genres (rotated -90°)
------------------------------------------------------------------ */
.c-teacher__meta {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
position: relative;
overflow: hidden;
background: var(--bg-light);
}
.c-teacher__name {
font-family: var(--font-display);
font-size: clamp(1.5rem, 0.9rem + 2.4vw, 2.7rem);
font-weight: var(--font-bold);
line-height: 0.85;
color: var(--dark);
transform: rotate(-90deg);
transform-origin: top left;
white-space: nowrap;
position: absolute;
top: 214px;
left: 19px;
display: block;
width: 200px;
text-align: right;
}
.c-teacher__genres {
font-family: var(--font-primary);
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
color: var(--shade-07);
white-space: nowrap;
transform: rotate(-90deg);
transform-origin: bottom left;
position: absolute;
bottom: 16px;
left: 32px;
}
/* ------------------------------------------------------------------
Photo
------------------------------------------------------------------ */
.c-teacher__photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 3/4;
}
/* ------------------------------------------------------------------
CTA Button — full width below photo
------------------------------------------------------------------ */
.c-teacher__cta {
display: block;
max-width: 85%;
margin-left: auto;
margin-right: 1em;
text-align: center;
margin-top: -1em;
}
/* ------------------------------------------------------------------
Info / Body
------------------------------------------------------------------ */
.c-teacher__body {
padding: 0.5em 1em 1em 1em;
}
.c-teacher__body-label {
font-family: var(--font-primary);
font-size: var(--text-xs);
font-weight: var(--font-medium);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--shade-06);
margin-bottom: var(--space-sm);
}
.c-teacher__body-text {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-text);
}
.c-teacher__body-text p + p {
margin-top: var(--space-md);
}
.c-teacher__body-text a {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* ------------------------------------------------------------------
Responsive: Grid für mehrere Cards
------------------------------------------------------------------ */
.c-teacher-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
@media (min-width: 768px) {
.c-teacher-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.c-teacher-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* FAQ */
.faq-list {
display: flex;
flex-direction: column;
}
.faq-item {
border-bottom: 1px solid var(--shade-04);
padding-block: var(--space-lg);
}
.faq-item[open] {
padding-bottom: var(--space-lg);
}
.faq-question {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
cursor: pointer;
list-style: none;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question::marker {
content: "";
}
.faq-answer {
margin-top: var(--space-md);
color: var(--color-text-muted);
color: var(--light);
line-height: 1.6;
max-width: 65ch;
}
/* ==========================================================================
Component — Modal (.c-modal)
Natives