/* Hallmark · genre: atmospheric · macrostructure: Photographic · theme: custom "Kaktus Nacht" · enrichment: none (echte Fotos, Logo als Vektor) · nav: N9 Edge-aligned · footer: Ft5 Statement
 * vibe: legendaere Nachtbar, Kaktusgruen flaechig, Pink aus der Barkarte 2026
 * Palette 3 Neon-Kaktus (gewaehlt): paper oklch(13% 0.012 300) · gruen oklch(86% 0.2 135) Flaeche mit dunkler Schrift
 * magenta oklch(66% 0.26 345) Text, oklch(58% 0.26 347) Flaeche · alte CI-Farben unter ?farbe=0
 * display: Clash Display 600/700 · body: Satoshi 400/500/700 (beide Fontshare, ITF Free Font License, lokal)
 * hand: Gochi Hand (naeher am Logo-Schriftzug) · bisher: Montserrat + DM Sans (?schrift=a)
 * axes: dark / geometric-sans / chromatic-other (gruen + pink)
 */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Bisherige Schriften, nur fuer den Vergleich (index.html?schrift=a) */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gochi Hand";
  src: url("../fonts/gochi-hand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Nacht: fast schwarz, leicht ins Gruen getoent */
  --color-night: oklch(13.0% 0.012 300);
  --color-night-2: oklch(17.0% 0.016 300);
  --color-night-3: oklch(22.0% 0.016 300);
  --color-rule: oklch(32.0% 0.017 300);
  --color-rule-soft: oklch(25.0% 0.016 300);

  /* Schrift auf Nacht */
  --color-ink: oklch(97.0% 0.006 300);
  --color-ink-soft: oklch(86.0% 0.010 300);
  --color-ink-mute: oklch(72.0% 0.012 300);
  --color-ink-ghost: oklch(97.0% 0.006 300 / 0.42);

  /* CI */
  --color-kaktus: oklch(86.0% 0.200 135);
  --color-kaktus-deep: oklch(74.0% 0.190 138);
  --color-kaktus-light: oklch(88.0% 0.200 135);
  --color-pink: oklch(66.0% 0.260 345);
  --color-pink-fill: oklch(58.0% 0.245 347);
  --color-pink-press: oklch(52.0% 0.245 347);
  --color-on-kaktus: oklch(18.0% 0.040 140);
  --color-on-kaktus-soft: oklch(30.0% 0.060 140);
  --color-on-pink: oklch(98.5% 0.009 345);
  --color-paper:        oklch(97% 0.006 90);       /* Polaroid-Rahmen */
  --color-paper-ink:    oklch(20% 0.012 150);
  --color-focus:        oklch(86% 0.17 110);       /* Limette aus dem Barkarten-Kaktus */
  --color-error:        oklch(78% 0.15 30);

  /* Abdunkler fuer Fotos (Alpha nur als Overlay-Modifier) */
  --color-shade-0: oklch(13.0% 0.012 300 / 0);
  --color-shade-40: oklch(13.0% 0.012 300 / 0.4);
  --color-shade-60: oklch(13.0% 0.012 300 / 0.6);
  --color-shade-85: oklch(13.0% 0.012 300 / 0.85);
  --color-shade-95: oklch(13.0% 0.012 300 / 0.95);

  /* Schriften */
  --font-display: "Clash Display", "Arial Black", system-ui, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand:    "Gochi Hand", "Comic Sans MS", cursive;

  /* Schriftgroessen, fluid */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl:   clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --text-2xl:  clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  --breite:    1.06;  /* Clash Display laeuft schmaler, daher etwas groesser */
  --text-3xl:  calc(clamp(2.5rem, 1.2rem + 7vw, 6.5rem) * var(--breite));
  --text-mega: calc(min(21vw, 15.5svh) * var(--breite));
  --text-hand: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);

  /* 4pt Abstaende */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --gutter:    clamp(1rem, 0.4rem + 3vw, 3rem);
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);
  --maxw:      78rem;

  --radius-sm:   0.375rem;
  --radius-md:   0.875rem;
  --radius-pill: 999px;
  --rule-hair:   1px;
  --rule-bold:   2px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;
  --dur-scene:   900ms;

  --kopf-h: 4rem;
  --aktion-h: 4.25rem;
}

/* Schrift-Alternativen zum Vergleich: index.html?schrift=a bis f (e ist der Standard)
 * (Auswahlseite: schriften.html). Die finale Schrift wird danach lokal eingebunden. */
:root[data-schrift="b"] { --font-display: "Outfit", "Arial Black", sans-serif; --font-body: "Figtree", system-ui, sans-serif; }
:root[data-schrift="c"] { --font-display: "Unbounded", "Arial Black", sans-serif; --font-body: "Manrope", system-ui, sans-serif; --breite: 0.78; }
:root[data-schrift="d"] { --font-display: "Bricolage Grotesque", "Arial Black", sans-serif; --font-body: "Bricolage Grotesque", system-ui, sans-serif; --breite: 1.04; }
:root[data-schrift="a"] { --font-display: "Montserrat", "Arial Black", sans-serif; --font-body: "DM Sans", system-ui, sans-serif; --breite: 1; }
:root[data-schrift="f"] { --font-display: "Syne", "Arial Black", sans-serif; --font-body: "Instrument Sans", system-ui, sans-serif; --breite: 0.86; }

/* Farbpaletten zum Vergleich: index.html?farbe=0 bis 5 (Auswahlseite: farben.html). Standard ist 3.
 * Alle Paare geprueft: Fliesstext mindestens 4.5:1, Flaechen-Icons mindestens 3:1. */
[data-farbe="0"] { /* Bisherige Farben: Kaktusgruen #007105 + Barkarten-Magenta #ED1D94 */
  --color-night: oklch(13% 0.014 150);
  --color-night-2: oklch(17% 0.018 150);
  --color-night-3: oklch(22% 0.022 150);
  --color-rule: oklch(32% 0.022 150);
  --color-rule-soft: oklch(25% 0.02 150);
  --color-ink: oklch(97% 0.008 140);
  --color-ink-soft: oklch(86% 0.012 140);
  --color-ink-mute: oklch(72% 0.014 140);
  --color-ink-ghost: oklch(97% 0.008 140 / 0.42);
  --color-kaktus: oklch(47.6% 0.160 142.8);
  --color-kaktus-deep: oklch(41% 0.14 143);
  --color-kaktus-light: oklch(72% 0.19 140);
  --color-pink: oklch(62.7% 0.247 353.4);
  --color-pink-fill: oklch(56% 0.235 355);
  --color-pink-press: oklch(50% 0.22 355);
  --color-on-kaktus: oklch(98% 0.015 140);
  --color-on-kaktus-soft: oklch(93% 0.04 140);
  --color-on-pink: oklch(98% 0.012 350);
  --color-shade-0: oklch(13% 0.014 150 / 0);
  --color-shade-40: oklch(13% 0.014 150 / 0.4);
  --color-shade-60: oklch(13% 0.014 150 / 0.6);
  --color-shade-85: oklch(13% 0.014 150 / 0.85);
  --color-shade-95: oklch(13% 0.014 150 / 0.95);
}
[data-farbe="1"] { /* Smaragd & Fuchsia */
  --color-night: oklch(14.0% 0.016 165);
  --color-night-2: oklch(18.0% 0.020 165);
  --color-night-3: oklch(23.0% 0.021 165);
  --color-rule: oklch(33.0% 0.022 165);
  --color-rule-soft: oklch(26.0% 0.021 165);
  --color-ink: oklch(97.0% 0.008 160);
  --color-ink-soft: oklch(86.0% 0.012 160);
  --color-ink-mute: oklch(72.0% 0.014 160);
  --color-ink-ghost: oklch(97.0% 0.008 160 / 0.42);
  --color-kaktus: oklch(50.0% 0.114 160);
  --color-kaktus-deep: oklch(43.0% 0.096 161);
  --color-kaktus-light: oklch(80.0% 0.140 158);
  --color-pink: oklch(66.0% 0.235 353);
  --color-pink-fill: oklch(56.0% 0.225 355);
  --color-pink-press: oklch(50.0% 0.225 355);
  --color-on-kaktus: oklch(98.5% 0.012 160);
  --color-on-kaktus-soft: oklch(93.0% 0.035 160);
  --color-on-pink: oklch(98.5% 0.009 350);
  --color-shade-0: oklch(14.0% 0.016 165 / 0);
  --color-shade-40: oklch(14.0% 0.016 165 / 0.4);
  --color-shade-60: oklch(14.0% 0.016 165 / 0.6);
  --color-shade-85: oklch(14.0% 0.016 165 / 0.85);
  --color-shade-95: oklch(14.0% 0.016 165 / 0.95);
}
[data-farbe="2"] { /* Nachtgarten */
  --color-night: oklch(13.0% 0.020 172);
  --color-night-2: oklch(17.0% 0.025 172);
  --color-night-3: oklch(22.0% 0.026 172);
  --color-rule: oklch(32.0% 0.028 172);
  --color-rule-soft: oklch(25.0% 0.026 172);
  --color-ink: oklch(96.0% 0.012 150);
  --color-ink-soft: oklch(86.0% 0.016 155);
  --color-ink-mute: oklch(72.0% 0.018 160);
  --color-ink-ghost: oklch(96.0% 0.012 150 / 0.42);
  --color-kaktus: oklch(34.0% 0.070 168);
  --color-kaktus-deep: oklch(29.0% 0.060 168);
  --color-kaktus-light: oklch(82.0% 0.100 163);
  --color-pink: oklch(68.0% 0.200 358);
  --color-pink-fill: oklch(53.0% 0.190 358);
  --color-pink-press: oklch(47.0% 0.190 358);
  --color-on-kaktus: oklch(97.0% 0.014 150);
  --color-on-kaktus-soft: oklch(88.0% 0.035 160);
  --color-on-pink: oklch(98.0% 0.011 355);
  --color-shade-0: oklch(13.0% 0.020 172 / 0);
  --color-shade-40: oklch(13.0% 0.020 172 / 0.4);
  --color-shade-60: oklch(13.0% 0.020 172 / 0.6);
  --color-shade-85: oklch(13.0% 0.020 172 / 0.85);
  --color-shade-95: oklch(13.0% 0.020 172 / 0.95);
}
[data-farbe="3"] { /* Neon-Kaktus */
  --color-night: oklch(13.0% 0.012 300);
  --color-night-2: oklch(17.0% 0.016 300);
  --color-night-3: oklch(22.0% 0.016 300);
  --color-rule: oklch(32.0% 0.017 300);
  --color-rule-soft: oklch(25.0% 0.016 300);
  --color-ink: oklch(97.0% 0.006 300);
  --color-ink-soft: oklch(86.0% 0.010 300);
  --color-ink-mute: oklch(72.0% 0.012 300);
  --color-ink-ghost: oklch(97.0% 0.006 300 / 0.42);
  --color-kaktus: oklch(86.0% 0.200 135);
  --color-kaktus-deep: oklch(74.0% 0.190 138);
  --color-kaktus-light: oklch(88.0% 0.200 135);
  --color-pink: oklch(66.0% 0.260 345);
  --color-pink-fill: oklch(58.0% 0.245 347);
  --color-pink-press: oklch(52.0% 0.245 347);
  --color-on-kaktus: oklch(18.0% 0.040 140);
  --color-on-kaktus-soft: oklch(30.0% 0.060 140);
  --color-on-pink: oklch(98.5% 0.009 345);
  --color-shade-0: oklch(13.0% 0.012 300 / 0);
  --color-shade-40: oklch(13.0% 0.012 300 / 0.4);
  --color-shade-60: oklch(13.0% 0.012 300 / 0.6);
  --color-shade-85: oklch(13.0% 0.012 300 / 0.85);
  --color-shade-95: oklch(13.0% 0.012 300 / 0.95);
}
[data-farbe="4"] { /* Mint & Magenta */
  --color-night: oklch(16.0% 0.028 180);
  --color-night-2: oklch(20.0% 0.032 180);
  --color-night-3: oklch(25.0% 0.036 180);
  --color-rule: oklch(35.0% 0.039 180);
  --color-rule-soft: oklch(28.0% 0.036 180);
  --color-ink: oklch(97.0% 0.010 170);
  --color-ink-soft: oklch(87.0% 0.016 175);
  --color-ink-mute: oklch(74.0% 0.020 178);
  --color-ink-ghost: oklch(97.0% 0.010 170 / 0.42);
  --color-kaktus: oklch(84.0% 0.115 168);
  --color-kaktus-deep: oklch(72.0% 0.120 168);
  --color-kaktus-light: oklch(86.0% 0.115 168);
  --color-pink: oklch(67.0% 0.240 350);
  --color-pink-fill: oklch(56.0% 0.233 352);
  --color-pink-press: oklch(50.0% 0.233 352);
  --color-on-kaktus: oklch(20.0% 0.039 180);
  --color-on-kaktus-soft: oklch(32.0% 0.050 178);
  --color-on-pink: oklch(98.5% 0.009 350);
  --color-shade-0: oklch(16.0% 0.028 180 / 0);
  --color-shade-40: oklch(16.0% 0.028 180 / 0.4);
  --color-shade-60: oklch(16.0% 0.028 180 / 0.6);
  --color-shade-85: oklch(16.0% 0.028 180 / 0.85);
  --color-shade-95: oklch(16.0% 0.028 180 / 0.95);
}
[data-farbe="5"] { /* Botanik */
  --color-night: oklch(15.0% 0.012 150);
  --color-night-2: oklch(19.0% 0.015 150);
  --color-night-3: oklch(24.0% 0.016 150);
  --color-rule: oklch(34.0% 0.017 150);
  --color-rule-soft: oklch(27.0% 0.016 150);
  --color-ink: oklch(96.0% 0.012 95);
  --color-ink-soft: oklch(86.0% 0.014 110);
  --color-ink-mute: oklch(73.0% 0.016 130);
  --color-ink-ghost: oklch(96.0% 0.012 95 / 0.42);
  --color-kaktus: oklch(45.0% 0.065 162);
  --color-kaktus-deep: oklch(39.0% 0.055 162);
  --color-kaktus-light: oklch(80.0% 0.075 158);
  --color-pink: oklch(67.0% 0.190 2);
  --color-pink-fill: oklch(52.0% 0.180 2);
  --color-pink-press: oklch(46.0% 0.180 2);
  --color-on-kaktus: oklch(97.0% 0.012 95);
  --color-on-kaktus-soft: oklch(89.0% 0.030 140);
  --color-on-pink: oklch(98.0% 0.010 20);
  --color-shade-0: oklch(15.0% 0.012 150 / 0);
  --color-shade-40: oklch(15.0% 0.012 150 / 0.4);
  --color-shade-60: oklch(15.0% 0.012 150 / 0.6);
  --color-shade-85: oklch(15.0% 0.012 150 / 0.85);
  --color-shade-95: oklch(15.0% 0.012 150 / 0.95);
}

/* Am Desktop etwas mehr Rand, damit die Social-Leiste links nie Inhalt ueberdeckt */
@media (min-width: 62rem) {
  :root { --gutter: clamp(4.25rem, 2rem + 3vw, 5rem); }
}