/* colors.css */
/* Status: [S] = aus Website-Screenshot (29.09.2026) pixelgenau gemessen · [D] = aus Originaldatei · [E] = Ergänzungsvorschlag */
:root{
--km-petrol:#2C4A49;          /* [S] Dunkles Petrol – dunkle Sektionen, Button-Text, Tags, E-Mail */
--km-offwhite:#F5F2ED;        /* [S] Warmes Off-White – Seitengrund */
--km-white:#FFFFFF;           /* [S] Weiß – Karten, Text auf dunkel */
--km-bluegray:#E0E7E7;        /* [S] Helles Blaugrau – hervorgehobene Karte */
--km-mint:#32E7AD;            /* [S] Mintgrün – Akzent (Briefing-Näherung war #35E8A4) */
--km-ink:#1C1A17;             /* [S] Warmes Schwarz – Überschriften auf hell */
--km-stone:#5A5650;           /* [S] Warmes Grau – Fließtext auf hell, Statement-Linie */
--km-mist:#D8D3CC;            /* [S] Helles Warmgrau – Fließtext auf Petrol */
--km-logo-ink:#2E2F33;        /* [D] Füllfarbe der Logo-SVG */
--km-mint-ink:#0E7A52;        /* [E] barrierefreie Akzent-Alternative auf hell (4.8:1) */
--km-petrol-deep:#223B3A;     /* [E] Hover auf dunkel */
--km-line-light:rgba(28,26,23,.12);   /* [S≈] Haarlinien auf hell */
--km-line-dark:rgba(255,255,255,.14); /* [S≈] Haarlinien auf Petrol */

--bg-page:var(--km-offwhite);
--bg-card:var(--km-white);
--bg-card-featured:var(--km-bluegray);
--bg-inverse:var(--km-petrol);
--text-heading:var(--km-ink);
--text-primary:var(--km-stone);
--text-secondary:var(--km-stone);
--text-strong:var(--km-ink);
--text-brand:var(--km-petrol);
--text-accent:var(--km-mint);            /* Website-Ist: Mint auch auf hell */
--text-accent-accessible:var(--km-mint-ink); /* [E] */
--text-on-inverse:var(--km-white);
--text-on-inverse-secondary:var(--km-mist);
--line:var(--km-line-light);
--line-strong:var(--km-stone);
--line-on-inverse:var(--km-line-dark);
--action-bg:var(--km-mint);
--action-fg:var(--km-petrol);
--action-bg-hover:var(--km-white);
--tag-bg:var(--km-offwhite);
--tag-fg:var(--km-ink);
--focus-ring:var(--km-petrol);
}
[data-surface="inverse"]{
--bg-page:var(--km-petrol);
--text-heading:var(--km-white);
--text-primary:var(--km-mist);
--text-secondary:var(--km-mist);
--text-strong:var(--km-white);
--text-brand:var(--km-white);
--text-accent:var(--km-mint);
--line:var(--km-line-dark);
--line-strong:var(--km-mist);
--focus-ring:var(--km-mint);
}
[data-surface="featured"]{
--text-heading:var(--km-petrol);
--tag-bg:var(--km-petrol);
--tag-fg:var(--km-white);
}

/* typography.css */
/* Familien: Canela Web [D], Jost [S – visuell identifiziert]. Größen [S≈]: gemessen im Screenshot (Referenz-Viewport ≈1883px, DPR 2), fluid nach unten skaliert. */
:root{
--font-serif:'Canela Web',Georgia,'Times New Roman',serif;
--font-sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

--weight-thin:100;--weight-light:300;--weight-regular:400;--weight-sans-medium:500;--weight-sans-semibold:600;

--font-size-display:clamp(2.75rem,1.5rem + 3.4vw,5.25rem);/* @kind other */   /* H1 Hero 84px */
--font-size-h2:clamp(2.25rem,1.4rem + 2.5vw,4.1875rem);/* @kind other */       /* Statement 67px */
--font-size-h3:clamp(1.875rem,1.4rem + 1.1vw,2.875rem);/* @kind other */       /* Kartentitel 46px */
--font-size-email:clamp(1.75rem,1.3rem + 1.2vw,2.75rem);/* @kind other */      /* E-Mail 44px */
--font-size-stat:clamp(2.5rem,1.8rem + 1.8vw,4rem);/* @kind other */           /* Kennzahl (Jost) 64px */
--font-size-subhead:clamp(1.375rem,1.2rem + .5vw,1.75rem);/* @kind other */    /* Jost-Zwischentitel 28px */
--font-size-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);/* @kind other */        /* Hero-Intro 20px */
--font-size-body:1.0625rem;   /* 17px */
--font-size-small:.9375rem;   /* 15px */
--font-size-meta:.8125rem;    /* 13px Fußnoten, Stat-Labels */
--font-size-label:.75rem;     /* 12px Eyebrow */
--font-size-number:.6875rem;  /* 11px Kartennummer */
--font-size-nav:1.0625rem;    /* 17px */

--lh-display:1.0;/* @kind other */--lh-heading:1.3;/* @kind other */--lh-title:1.15;/* @kind other */--lh-body:1.65;/* @kind other */--lh-lead:1.6;/* @kind other */--lh-tight:1.3;/* @kind other */
--ls-display:-.01em;/* @kind other */--ls-body:0;/* @kind other */--ls-label:.2em;/* @kind other */--ls-button:.06em;/* @kind other */--ls-tag:.08em;/* @kind other */

--heading-font:var(--font-serif);--heading-weight:var(--weight-light);
--body-font:var(--font-sans);--ui-font:var(--font-sans);
}

/* spacing.css */
/* [S≈] aus Screenshot gemessen (Referenz-Viewport ≈1883px), 8er-Raster. */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:120px;--space-11:160px;
--section-y:clamp(72px,3rem + 4vw,120px);/* @kind spacing */        /* Sektionsabstand oben/unten ≈120px */
--section-y-compact:clamp(56px,2.5rem + 2.5vw,96px);/* @kind spacing */
--gutter:clamp(20px,1rem + 2vw,48px);/* @kind spacing */
--grid-gap:32px;/* @kind spacing */              /* Kartenabstand ≈32px */
--card-padding:clamp(24px,1rem + 1vw,32px);/* @kind spacing */
--container:1240px;/* @kind spacing */           /* Inhaltsbreite ≈1240px */
--measure-text:52rem;/* @kind spacing */         /* Über-mich-Textspalte ≈850px */
--measure-lead:62rem;/* @kind spacing */         /* Hero-Intro ≈990px */
--grid-columns:12;/* @kind other */
--header-h:80px;/* @kind spacing */
--photo-band-h:clamp(240px,12rem + 10vw,400px);/* @kind spacing */ /* Bildband ≈400px */
}

/* effects.css */
/* Radien [S≈], Linien, Bewegung. Keine Schatten, keine Verläufe. */
:root{
--radius-0:0;
--radius-sm:4px;      /* Buttons, Karten */
--radius-pill:999px;  /* Tags */
--radius-button:var(--radius-sm);
--radius-card:var(--radius-sm);
--radius-image:0;
--border-hair:1px;/* @kind other */--border-accent:2px;/* @kind other */
--accent-rule-w:28px;/* @kind spacing */ /* kurze Mint-Linie über Prinzipien */
--shadow:none;
--ease:cubic-bezier(.22,.61,.36,1);/* @kind other */
--dur-fast:160ms;/* @kind other */--dur-base:280ms;/* @kind other */--dur-slow:600ms;/* @kind other */
--image-tint:rgba(44,74,73,.45); /* [S≈] Petrol-Tönung über Hero-Foto */
}

/* base.css */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--body-font);font-size:var(--font-size-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--text-brand)}
[data-surface="inverse"] a:hover{color:var(--km-mint)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.km-display{font-family:var(--font-serif);font-weight:var(--weight-light);font-size:var(--font-size-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--text-heading);text-wrap:balance;margin:0}
.km-h2{font-family:var(--font-serif);font-weight:var(--weight-light);font-size:var(--font-size-h2);line-height:var(--lh-heading);color:var(--text-heading);text-wrap:balance;margin:0}
.km-h3{font-family:var(--font-serif);font-weight:var(--weight-light);font-size:var(--font-size-h3);line-height:var(--lh-title);color:var(--text-heading);margin:0}
.km-lead{font-family:var(--font-sans);font-size:var(--font-size-lead);line-height:var(--lh-lead);text-wrap:pretty}
.km-body{font-family:var(--font-sans);font-size:var(--font-size-body);line-height:var(--lh-body);text-wrap:pretty}
.km-label{font-family:var(--font-sans);font-size:var(--font-size-label);font-weight:400;letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1.4}
.km-accent{font-style:italic;color:var(--text-accent)}