/* Self-hosted. No Google servers. Archivo (OFL) variable: wdth 62–125, wght 100–900. IBM Plex Mono (OFL). */
@font-face{font-family:"Archivo";src:url("../assets/fonts/Archivo-Variable.woff2") format("woff2-variations"),url("../assets/fonts/Archivo-Variable.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../assets/fonts/Archivo-Variable-Italic.woff2") format("woff2-variations"),url("../assets/fonts/Archivo-Variable-Italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/IBMPlexMono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Base palette. Dark ("Nacht") is the default theme; light ("Papier") via [data-theme="light"]. */
:root{
/* Graphit – neutral, leicht kühl. Kein Warmton, kein Ocker. */
--graphit-0:#FFFFFF;--graphit-50:#F4F4F1;--graphit-100:#EAEAE8;--graphit-200:#D6D6D9;--graphit-300:#B4B4BA;--graphit-400:#8E8E96;--graphit-500:#6B6B73;--graphit-600:#5E5E66;--graphit-700:#2E2E33;--graphit-800:#202024;--graphit-850:#18181B;--graphit-900:#121214;--graphit-950:#0B0B0C;
/* Rec – Rot-Orange der Aufnahme-Leuchte. Einziger Akzent. */
--rec-100:#FFE3DA;--rec-200:#FFC2AF;--rec-300:#FF8A6B;--rec-400:#FF6A3D;--rec-500:#FF4A1C;--rec-600:#E0350B;--rec-700:#C22A08;--rec-800:#A82406;--rec-900:#5C1404;
/* Blaue Stunde – kühler Gegenpol, sparsam (Info, Landschaft, Farbkorrektur-Motive). */
--blau-300:#9EC3E0;--blau-500:#4F8DC0;--blau-700:#2A5F8A;
/* Semantik */
--gruen-300:#3DDC84;--gruen-700:#1B7A45;--fehler-300:#FF5C7A;--fehler-700:#C0183A;

/* Semantische Aliase – Dark (Default) */
--surface-page:var(--graphit-950);--surface-raised:var(--graphit-900);--surface-card:var(--graphit-850);--surface-sunken:#000000;--surface-inverse:var(--graphit-50);--surface-overlay:rgba(11,11,12,.72);
--text-strong:var(--graphit-0);--text-body:var(--graphit-200);--text-muted:var(--graphit-400);--text-ghost:var(--graphit-800);--text-inverse:var(--graphit-950);--text-accent:var(--rec-500);
--border-subtle:var(--graphit-800);--border-default:var(--graphit-700);--border-strong:var(--graphit-400);--border-focus:var(--graphit-0);
--accent:var(--rec-500);--accent-hover:var(--rec-400);--accent-press:var(--rec-600);--on-accent:var(--graphit-950);
--info:var(--blau-300);--success:var(--gruen-300);--danger:var(--fehler-300);
--link:var(--graphit-0);--link-hover:var(--rec-400);
color-scheme:dark;
}
[data-theme="light"]{
--surface-page:var(--graphit-50);--surface-raised:var(--graphit-0);--surface-card:var(--graphit-0);--surface-sunken:var(--graphit-100);--surface-inverse:var(--graphit-950);--surface-overlay:rgba(244,244,241,.8);
--text-strong:var(--graphit-950);--text-body:var(--graphit-800);--text-muted:var(--graphit-600);--text-ghost:var(--graphit-100);--text-inverse:var(--graphit-0);--text-accent:var(--rec-700);
--border-subtle:var(--graphit-100);--border-default:var(--graphit-200);--border-strong:var(--graphit-600);--border-focus:var(--graphit-950);
--accent:var(--rec-700);--accent-hover:var(--rec-800);--accent-press:var(--rec-900);--on-accent:var(--graphit-0);
--info:var(--blau-700);--success:var(--gruen-700);--danger:var(--fehler-700);
--link:var(--graphit-950);--link-hover:var(--rec-700);
color-scheme:light;
}

:root{
--font-display:"Archivo","Arial Narrow",sans-serif; /* @kind font */
--font-body:"Archivo","Helvetica Neue",Arial,sans-serif; /* @kind font */
--font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; /* @kind font */
/* Archivo width axis */
--stretch-display:62%; /* @kind font */
--stretch-headline:75%; /* @kind font */
--stretch-body:100%; /* @kind font */
--weight-display:850; /* @kind font */
--weight-headline:750; /* @kind font */
--weight-body:400; /* @kind font */
--weight-medium:550; /* @kind font */
--weight-strong:650; /* @kind font */
/* Größenstufen */
--fs-display-2xl:clamp(4.5rem,15vw,14rem); /* @kind font */
--fs-display-xl:clamp(3.5rem,10vw,9rem); /* @kind font */
--fs-display-l:clamp(2.75rem,6.5vw,5.5rem); /* @kind font */
--fs-h1:clamp(2.25rem,4.5vw,3.5rem); /* @kind font */
--fs-h2:clamp(1.75rem,3vw,2.5rem); /* @kind font */
--fs-h3:1.5rem; /* @kind font */
--fs-h4:1.25rem; /* @kind font */
--fs-body-l:1.125rem; /* @kind font */
--fs-body:1rem; /* @kind font */
--fs-body-s:.875rem; /* @kind font */
--fs-mono:.8125rem; /* @kind font */
--fs-mono-s:.6875rem; /* @kind font */
--lh-display:.86; /* @kind font */
--lh-headline:.95; /* @kind font */
--lh-body:1.55; /* @kind font */
--lh-mono:1.5; /* @kind font */
--tracking-display:-.01em; /* @kind font */
--tracking-headline:0; /* @kind font */
--tracking-mono:.08em; /* @kind font */
/* Untertitel für Reels */
--fs-subtitle:2.75rem; /* @kind font */
}

:root{
/* 4px-Raster */
--space-0:0; /* @kind spacing */
--space-1:4px; /* @kind spacing */
--space-2:8px; /* @kind spacing */
--space-3:12px; /* @kind spacing */
--space-4:16px; /* @kind spacing */
--space-5:24px; /* @kind spacing */
--space-6:32px; /* @kind spacing */
--space-7:48px; /* @kind spacing */
--space-8:64px; /* @kind spacing */
--space-9:96px; /* @kind spacing */
--space-10:128px; /* @kind spacing */
--space-11:192px; /* @kind spacing */
--gutter:clamp(16px,3vw,40px); /* @kind spacing */
--section-gap:clamp(64px,10vw,160px); /* @kind spacing */
--content-max:1440px; /* @kind spacing */
--text-max:62ch; /* @kind spacing */
--gallery-gap:clamp(4px,.6vw,8px); /* @kind spacing */
/* Ecken: Bilder immer 0. UI minimal gerundet. */
--radius-0:0; /* @kind radius */
--radius-1:2px; /* @kind radius */
--radius-2:4px; /* @kind radius */
--radius-full:999px; /* @kind radius */
--border-w:1px; /* @kind spacing */
--border-w-strong:2px; /* @kind spacing */
/* Tiefe: kaum Schatten; Licht statt Schatten. */
--shadow-none:none; /* @kind shadow */
--shadow-print:0 1px 2px rgba(0,0,0,.08),0 12px 32px -8px rgba(0,0,0,.18); /* @kind shadow */
--shadow-float:0 24px 60px -12px rgba(0,0,0,.6); /* @kind shadow */
--scrim-bottom:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 70%); /* @kind shadow */
--scrim-top:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 30%); /* @kind shadow */
--z-header:50; /* @kind other */
--z-overlay:80; /* @kind other */
--z-lightbox:100; /* @kind other */
--touch-min:44px; /* @kind spacing */
}

:root{
--ease-shutter:cubic-bezier(.7,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,.75,0); /* @kind other */
--dur-snap:120ms; /* @kind other */
--dur-fast:200ms; /* @kind other */
--dur-base:360ms; /* @kind other */
--dur-slow:700ms; /* @kind other */
--dur-reveal:1100ms; /* @kind other */
--marquee-speed:28s; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-snap:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-reveal:0ms; /* @kind other */
}}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-stretch:var(--stretch-body);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-accent)}
.th-display{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-display);line-height:var(--lh-display);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-strong)}
.th-headline{font-family:var(--font-display);font-stretch:var(--stretch-headline);font-weight:var(--weight-headline);line-height:var(--lh-headline);text-transform:uppercase;color:var(--text-strong)}
.th-mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;line-height:var(--lh-mono)}
.th-grain{position:relative}
.th-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}