/* Self-hosted Fonts · null Dritt-Host zur Laufzeit (DSGVO · der Owner verkauft Audits)
   ============================================================================
   MIGRATION 10.08.2026 · fuenf Familien auf DREI.
   Raus: DM Serif Display, Bebas Neue, DM Sans, JetBrains Mono, Mr Dafoe.
   Rein: Cabinet Grotesk (Display+Text+UI), DM Mono (alles Zaehlbare),
         Fraunces (NUR lange Lesestrecken).
   Quelle der Wahrheit: ~/Desktop/keoh brand/01-tokens/source/tokens.json
   Regel aus dem Brand-Ordner: "Eine dritte Schriftfamilie im Einsatz ist ein
   Fehler, keine Entscheidung." Die Gallery fuhr fuenf. 257,8 KB auf 107,8 KB.
   Lizenzen: fonts/LIZENZ-Cabinet-DM-Mono.md (Cabinet = ITF FFL, Self-Hosting
   ausdruecklich erlaubt, Weitergabe der DATEIEN verboten) + fonts/OFL-*.txt.
   ============================================================================ */
@font-face{
  font-family:'Cabinet';
  src:url('../fonts/cabinet-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cabinet';
  src:url('../fonts/cabinet-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cabinet';
  src:url('../fonts/cabinet-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cabinet';
  src:url('../fonts/cabinet-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DMMono';
  src:url('../fonts/dm-mono.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-latin-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}

/* ============================================================
   KEOH Gallery · Design-Tokens v3 (10.08.2026)
   Dark Theme = bewusste Ausnahme wegen Nachtfotografie. Die Werte
   kommen ab jetzt aus dem Marken-Token-Satz, nicht mehr aus einer
   Gallery-Eigenwelt · Buehne, Kalk, Grau, Rust, Messing, Amber, Blau
   stehen alle in keoh brand/01-tokens/source/tokens.json.
   ============================================================ */
:root{
  /* --- Grund und Schrift (Marken-Tokens) --- */
  --bg:#0B0E13;             /* Buehne · Nacht-Ink */
  --surface:#12161D;        /* Cards, Flaechen · aus Buehne aufgehellt */
  --text:#F5F1ED;           /* Kalk · 17,20:1 auf Buehne */
  --text-soft:#9BA0A8;      /* Grau · Nebentext, 7,35:1 */
  --text-mute:rgba(245,241,237,.55);
  --text-faint:#1E242E;     /* Linie · TRENNLINIEN, nie Text (1,39:1) */

  /* --- Die eine Akzentfarbe und ihre Nachbarn --- */
  --signal:#C4341A;         /* Rust · FLAECHE UND SIGNAL, nie Fliesstext.
                               3,55:1 auf Buehne · mit Kalk darauf 4,85:1 */
  --messing:#C6A15B;        /* Labels, Nummern, Editionen · 7,96:1 auf dunkel */
  --amber:#F2A71B;          /* Akzentwort IM Text auf dunkel · 9,50:1 */
  --blau:#2E4A5F;           /* Blaue Stunde · nur Flaeche, nie Text */

  /* --accent ist die TEXT-sichere Auszeichnung und bleibt Messing.
     Rust steht als --signal daneben und wird bewusst gesetzt (CTA, Fokus,
     belegte Editionsstriche). Wer --accent auf Rust zieht, baut 3,55:1-Text. */
  --accent:var(--messing);

  /* Alt-Namen als Bruecke, damit die 18 Seiten in einem Griff mitziehen.
     NICHT neu verwenden · sie verschwinden, wenn die Seiten sauber sind. */
  --gallery-gold:var(--messing);
  --teal:var(--blau);

  /* --- Lichttemperatur · das ist ab jetzt die Rolle von Gold und Teal ---
     Keine UI-Farbe mehr, sondern das Licht der Fotografie. --tag laeuft
     beim Scrollen von 0 (10:45, goldene Stunde) auf 1 (20:34, blaue). */
  --licht-warm:#F2A71B;
  --licht-kalt:#2E4A5F;
  --licht:var(--licht-warm);

  /* --- Schrift: drei Familien, klare Rollen --- */
  --f-display:'Cabinet',system-ui,sans-serif;   /* Ueberschriften, Nav, Buttons */
  --f-body:'Cabinet',system-ui,sans-serif;      /* Fliesstext und UI */
  --f-mono:'DMMono',ui-monospace,monospace;     /* alles Zaehlbare */
  --f-num:var(--f-mono);                        /* Zahlen SIND Mono (war Bebas) */
  --f-edit:'Fraunces',Georgia,serif;            /* NUR lange Lesestrecken */
  --f-sig:var(--f-display);                     /* Fallback, s. .sig unten */

  /* --- Mass und Bewegung (Marken-Tokens) --- */
  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:1240px;
  --d-mikro:180ms; --d-aus:380ms; --d-ein:600ms; --d-lang:900ms;
  --e-ein:cubic-bezier(.16,1,.3,1);
  --e-aus:cubic-bezier(.7,0,.84,0);
  --e-mikro:cubic-bezier(.33,1,.68,1);
  --ease:var(--e-ein);      /* Alt-Name, von den Seiten benutzt */
}

/* Das Licht folgt der Tageszeit des Werks. Frueher schaltete das die
   UI-Akzentfarbe um · jetzt nur noch das Licht, die Marke bleibt eine. */
[data-coll="goldene-stunde"],[data-collection="goldene-stunde"]{--licht:var(--licht-warm)}
[data-coll="blaue-stunde"],[data-collection="blaue-stunde"]{--licht:var(--licht-kalt)}

*{margin:0;padding:0;box-sizing:border-box}
/* touch-action:manipulation nimmt den Browser-Tap-Delay UND die Doppel-Tipp-
   Zoom-Geste auf Buttons/Links raus (Ursache für "Seite springt beim Tippen
   rein und lässt sich verschieben"). Pinch-Zoom bleibt für Nutzer erlaubt
   (Barrierefreiheit, WCAG 1.4.4) -- wir nehmen nur die AUSVERSEHENTLICHE
   Doppel-Tipp-Zoom-Geste raus, kein "user-scalable=no" im Viewport-Meta. */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
/* Horizontales Pannen auf Mobile hart unterbinden: 'clip' (anders als 'hidden')
   kann keinen Scroll-Container erzeugen · kein Touch-Pan, kein programmatisches
   Scrollen, keine Layout-Viewport-Verbreiterung auf Android/Samsung. 'hidden'
   davor als Fallback für alte Browser. */
html,body{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
a,button{touch-action:manipulation}
/* smooth-scroll nur für Anker-Sprünge, nicht global (Konflikt mit scroll-snap + HUD-Uhr) */
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
/* Läuft Lenis, gehört ihm der Scroll allein. Zwei Glättungen übereinander
   überholen sich gegenseitig und lassen Ankersprünge nachfedern.
   .lenis-an setzt js/tag.js, die .lenis-Klassen setzt Lenis selbst. */
html.lenis-an,html.lenis-an:focus-within,.lenis.lenis-smooth{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}

/* Cross-Document View Transitions: Journey-Bild morpht in die Werkseite (progressive enhancement) */
@view-transition{navigation:auto}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(1rem,.5vw + .875rem,1.06rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}

/* ============================================================
   MATERIAL (14.08.2026, Editorial-Plan)
   Teure dunkle Seiten haben Korn. Das eigene Design-System sagt es
   wörtlich: Grain macht Flächen gedruckt statt steril und kostet
   praktisch nichts (patterns/visual.md). Ein SVG-Rauschen inline als
   Daten-URI, null Requests, dazu eine leise Vignette. Beides liegt
   über allem, fängt keine Zeiger und ändert keine Kontraste messbar
   (Deckkraft 5 bzw. 26 Prozent auf schwarz, punktuell).
   ============================================================ */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;
  opacity:.05;
  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='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1999;
  background:radial-gradient(120% 90% at 50% 40%,transparent 58%,rgba(0,0,0,.26))}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:var(--text)}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;border-radius:3px;
}


/* WCAG 1.4.1 · ein Link IM FLIESSTEXT darf sich nicht allein durch Farbe
   abheben. In der Navigation genuegt die Position, in einem Satz nicht:
   wer Farben nicht unterscheiden kann, sieht dort sonst keinen Link.
   Knoepfe sind ausgenommen, die tragen eine Flaeche als Hinweis. */
p a:not([class*="btn"]):not([class*="cta"]):not(.hero-k__btn),
li a:not([class*="btn"]):not([class*="cta"]){
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:var(--accent);
}
p a:hover,li a:hover{color:var(--accent)}

/* Lesestrecken · Fraunces ist NUR hier erlaubt (Story, Manifest, Making-of).
   Nie in der Navigation, nie neben dem Zeichen. */
.lese{font-family:var(--f-edit);font-size:1.09rem;line-height:1.62}

/* HUD-Zeile (Kamerarahmen-Aesthetik): Uhrzeit · Ort · Monat */
.hud{
  font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute);
}
.hud b{color:var(--accent);font-weight:400}

/* Editionszähler · das Signature-Element */
.counter{
  font-family:var(--f-mono);color:var(--text);
  border:1px solid var(--text-faint);border-radius:4px;
  padding:.6em .9em;display:inline-flex;align-items:baseline;gap:.6em;
}
.counter__no{font-size:1.4em;color:var(--accent);font-weight:400;font-variant-numeric:tabular-nums}
.counter__label{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}

/* ============================================================
   Signatur · ab 10.08.2026 ein VEKTOR, keine Schrift mehr.
   Mr Dafoe ist im Brand-Ordner abgeloest ("Die Wortmarke und die
   Signatur sind keine Schrift, sondern Vektoren aus dem Master-
   Artwork"). Die Maske faerbt sich ueber currentColor, damit die
   Signatur auf dunkel (Kalk/Rust) und auf dem hellen Zertifikat
   (Papier-Ink) mit derselben Datei funktioniert.
   Der Text im Markup bleibt als Fallback stehen · faellt die Maske
   aus, steht dort ein sauberer Name statt eines leeren Kastens.
   Alle .sig-Stellen sind aria-hidden, der Screenreader verliert nichts.
   ============================================================ */
.sig{font-family:var(--f-sig);font-style:italic;color:var(--text);line-height:1.1;padding-top:.25em}
@supports ((mask-image:url("../assets/keoh030-signatur.svg")) or (-webkit-mask-image:url("../assets/keoh030-signatur.svg"))){
  .sig{
    display:inline-block;
    /* Seitenverhaeltnis der zugeschnittenen Zeichnung: 434 x 152 */
    width:2.86em;height:1em;
    font-size:2.6rem;                 /* Stellschraube fuer die Groesse */
    text-indent:-9999px;overflow:hidden;white-space:nowrap;
    background:currentColor;
    -webkit-mask:url("../assets/keoh030-signatur.svg") center/contain no-repeat;
    mask:url("../assets/keoh030-signatur.svg") center/contain no-repeat;
    /* Padding wuerde die Maskenflaeche stauchen · die Seiten setzen an
       mehreren .sig-Stellen padding-bottom fuer die Mr-Dafoe-Unterlaenge,
       die es beim Vektor nicht mehr gibt. */
    padding:0;vertical-align:middle;
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Preview-Schutz (07.07.2026): Long-Press-Save-Menü und Bild-Ziehen auf
   Previews unterbinden. Ersetzt das Zentrum-Wasserzeichen · Screenshots
   verhindert das nicht, aber den beiläufigen Ein-Tipp-Download schon. */
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }