/* Kaktus Bar Wien · Helle Ansicht "Kaktus Tag" und Schalter Hell/Dunkel
 * Hallmark · genre: playful · theme: custom "Kaktus Tag" · macrostructure: Photographic (wie die dunkle Ansicht)
 * axes: light / geometric-sans / chromatic-other (gruen + pink) · pre-emit critique: P4 H4 E4 S5 R4 V4
 * Idee: Fotos liegen wie Abzuege auf hellem Papier. Kaktusgruen und Pink bleiben flaechig.
 * Die Datei laedt nach tokens.css und style.css. Die Klasse "hell" am <html> schaltet die helle Ansicht ein
 * (Standard). Ohne die Klasse gilt die dunkle Ansicht aus style.css. Den Wechsel macht js/thema.js.
 * Kontraste nachgerechnet: Fliesstext mindestens 4.5:1, grosse Schrift und Raender mindestens 3:1.
 * contrast: pass (40, 41) · nav: N9 · footer: Ft5 · geprueft bei 320, 375, 768, 1024, 1280 und 1440 px
 */

html.hell {
  color-scheme: light;

  /* Papier statt Nacht (die Namen der Tokens bleiben, damit style.css unveraendert greift) */
  --color-night:   oklch(97.2% 0.014 98);   /* Seitengrund: warmes Papier */
  --color-night-2: oklch(99.4% 0.004 98);   /* Karten und Felder: fast weiss */
  --color-night-3: oklch(94.0% 0.022 98);   /* zweiter Grund: Sand */
  --color-rule:      oklch(60.0% 0.024 108);
  --color-rule-soft: oklch(86.0% 0.020 100);

  /* Schrift: tiefes Kaktusgruen-Schwarz */
  --color-ink:       oklch(20.0% 0.030 150);
  --color-ink-soft:  oklch(34.0% 0.030 150);
  --color-ink-mute:  oklch(46.0% 0.028 150);
  --color-ink-ghost: oklch(20.0% 0.030 150 / 0.48);   /* blasse Story-Woerter: 3.2:1 auf Papier */

  /* CI als Schriftfarbe auf Papier: dunkler, damit sie lesbar bleibt */
  --color-kaktus-light: oklch(45.0% 0.140 142);   /* nah am bisherigen Kaktusgruen #007105 */
  --color-pink:         oklch(52.0% 0.245 347);
  --color-pink-press:   oklch(46.0% 0.230 347);
  --color-pink-gross:   oklch(58.0% 0.245 347);   /* nur fuer sehr grosse Schrift */

  --color-paper: oklch(99.6% 0.003 98);            /* Rand der Abzuege */
  --color-focus: oklch(20.0% 0.030 150);
  --color-error: oklch(50.0% 0.190 28);

  /* Auf Fotos gilt weiter die helle Schrift der Nacht-Variante */
  --foto-ink:      oklch(97.0% 0.006 300);
  --foto-ink-soft: oklch(86.0% 0.010 300);
  --foto-ink-mute: oklch(72.0% 0.012 300);
  --foto-grund:    oklch(13.0% 0.012 300);
  --foto-linie:    oklch(97.0% 0.006 300 / 0.4);
  --foto-pink:     oklch(66.0% 0.260 345);
  --foto-kaktus:   oklch(88.0% 0.200 135);
  --foto-focus:    oklch(86.0% 0.170 110);

  --radius-lg: 1.75rem;
  --schatten-abzug: 0 1.1rem 2.2rem -1.3rem oklch(20.0% 0.030 150 / 0.5);
}

/* Bereiche, die auf einem Foto liegen */
html.hell .hero__schau,
html.hell .highlight,
html.hell .g-foto {
  --color-ink: var(--foto-ink);
  --color-ink-soft: var(--foto-ink-soft);
  --color-ink-mute: var(--foto-ink-mute);
  --color-night: var(--foto-grund);
  --color-rule: var(--foto-linie);
  --color-pink: var(--foto-pink);
  --color-kaktus-light: var(--foto-kaktus);
  --color-focus: var(--foto-focus);
  color: var(--color-ink);
}

/* ---------- Kopf: Logo als Limetten-Sticker ---------- */
html.hell .marke__logo { background: var(--color-kaktus); border-radius: 50%; color: var(--color-on-kaktus); }
html.hell .kopf.ist-menue .marke__logo { background: none; }

/* Dunkler Knopf im gruenen Menue */
html.hell .btn--nacht { --btn-bg: var(--color-ink); --btn-border: var(--color-ink); --btn-fg: var(--color-night); }
html.hell .btn--nacht:hover,
html.hell .btn--nacht:active { --btn-bg: var(--color-ink-soft); --btn-border: var(--color-ink-soft); }
html.hell .menue__fuss .btn--nacht { color: var(--color-night); }

/* ---------- Hero: Text auf Papier, Diashow als grosser Abzug ---------- */
html.hell .hero { --logo-b: 5.75rem; row-gap: var(--space-md); }
html.hell .hero::before { content: none; }
html.hell .hero__rahmen {
  grid-row: 1; grid-column: 1;
  position: relative; min-height: 34svh;
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: var(--color-kaktus);
}
html.hell .hero__bild { z-index: 0; }
html.hell .hero__logo-feld {
  grid-row: 1; grid-column: 1; z-index: 2;
  place-items: end end; pointer-events: none;
}
/* Sticker sitzt halb auf dem Foto, halb auf dem Papier */
html.hell .hero__logo-knopf { pointer-events: auto; margin: 0 var(--space-sm) calc(var(--logo-b) * -0.4) 0; }
html.hell .hero__logo { width: var(--logo-b); color: var(--color-on-kaktus); }
html.hell .hero__logo .ring { fill: var(--color-kaktus); }
html.hell .hero__unten { justify-items: start; text-align: left; }
html.hell .hero__h1 { justify-items: start; }
html.hell .hero__wort { width: min(84vw, 34rem); }

@media (min-width: 62rem) {
  html.hell .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--space-xl); }
  html.hell .hero__rahmen { grid-column: 2; align-self: stretch; min-height: 0; }
  html.hell .hero__rahmen::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, var(--color-shade-0) 55%, var(--color-shade-60) 100%);
  }
  html.hell .hero__logo-feld { grid-column: 2; align-self: stretch; place-items: end start; }
  html.hell .hero { --logo-b: 11rem; }
  html.hell .hero__logo-knopf { margin: 0 0 calc(var(--logo-b) / -2) calc(var(--logo-b) / -2); }
  html.hell .hero__unten { align-self: center; }
  html.hell .hero__wort { width: min(40vw, 42rem); }
  html.hell .hero__schau {
    right: calc(var(--gutter) + var(--space-md));
    bottom: calc(var(--space-3xl) + var(--space-md));
    width: min(22rem, 26vw);
  }
}

/* Schmaler Desktop: die zwei Knoepfe passen nicht nebeneinander in die Textspalte */
@media (min-width: 62rem) and (max-width: 74.99rem) {
  html.hell .hero__knoepfe { grid-template-columns: minmax(0, 1fr); max-width: 20rem; }
}

/* ---------- Story: Woerter auf Papier, das Foto als Abzug daneben ---------- */
html.hell .story__buehne {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: var(--space-xs); row-gap: var(--space-lg);
  align-items: center;
}
html.hell .story__buehne::after { content: none; }
html.hell .story__fotos {
  position: relative; inset: auto; z-index: 0;
  grid-column: 2; grid-row: 1;
  width: min(41vw, 11.5rem); aspect-ratio: 2 / 3;
  border: 0.375rem solid var(--color-paper); border-radius: var(--radius-sm);
  overflow: hidden; rotate: 2.5deg;
  box-shadow: var(--schatten-abzug);
  background: var(--color-night-3);
}
html.hell .story__woerter { grid-column: 1; grid-row: 1; }
html.hell .story__unten { grid-column: 1 / -1; grid-row: 2; }
html.hell .story__wort { font-size: calc(min(11.6vw, 8.5svh) * var(--breite)); }
html.hell .story__fuell { color: var(--color-pink-gross); }

@media (min-width: 62rem) {
  html.hell .story__buehne {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-content: normal;
    column-gap: var(--space-2xl); row-gap: var(--space-md);
  }
  html.hell .story__fotos { justify-self: end; width: auto; height: min(56svh, 36rem); border-width: 0.75rem; }
  html.hell .story__woerter { grid-row: 1 / -1; }
  html.hell .story__unten { grid-column: 2; }
  html.hell .story__wort { font-size: var(--text-mega); }
}

/* ---------- Medien: Sand als zweiter Grund, Abzuege mit weichem Schatten ---------- */
html.hell .medien { background: var(--color-night-3); }
html.hell .karte-foto { box-shadow: var(--schatten-abzug), 0 0 0 1px var(--color-rule-soft); }

/* ---------- Partner: Logos sind fuer dunklen Grund gezeichnet ---------- */
html.hell .partner__liste li { background: var(--color-ink); }

/* ---------- Fuss: Kaktusgruen flaechig ---------- */
html.hell .fuss {
  background: var(--color-kaktus); border-top: 0;
  --color-ink: var(--color-on-kaktus);
  --color-ink-soft: var(--color-on-kaktus-soft);
  --color-ink-mute: var(--color-on-kaktus-soft);
  --color-rule: var(--color-on-kaktus-soft);
  --color-kaktus-light: var(--color-on-kaktus);
  --color-pink: var(--color-pink-press);
  --color-focus: var(--color-on-kaktus);
  color: var(--color-ink);
}
html.hell .fuss__satz span { color: var(--color-pink-press); }

/* ====================================================================
 * Unterseiten
 * ==================================================================== */

/* ---------- Seitenkopf (Barkarte, Galerie): Titel auf Papier, Foto im Rahmen ---------- */
html.hell .seitenkopf {
  min-height: 0; row-gap: var(--space-lg);
  padding: calc(var(--kopf-h) + env(safe-area-inset-top) + var(--space-2xs)) 0 var(--space-xl);
}
html.hell .seitenkopf::before { content: none; }
html.hell .seitenkopf__rahmen {
  position: relative; margin-inline: var(--gutter); height: clamp(13rem, 34svh, 22rem);
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: var(--color-kaktus);
}
html.hell .seitenkopf__bild { z-index: 0; }
@media (min-width: 62rem) {
  html.hell .seitenkopf {
    --rahmen-b: min(40%, 34rem);
    min-height: min(72svh, 42rem); align-items: center;
    padding: calc(var(--kopf-h) + env(safe-area-inset-top) + var(--space-lg)) 0 var(--space-2xl);
  }
  html.hell .seitenkopf__rahmen {
    position: absolute; margin: 0; height: auto; width: var(--rahmen-b);
    top: calc(var(--kopf-h) + env(safe-area-inset-top) + var(--space-md)); bottom: var(--space-xl);
    right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  }
  html.hell .seitenkopf__innen { padding-right: calc(var(--gutter) + var(--rahmen-b) + var(--space-xl)); }
}

/* ---------- Impressum und Datenschutz ---------- */
html.hell .recht__block:not(.recht__block--credit) h2 { color: var(--color-kaktus-light); }
html.hell .recht__text li::marker { color: var(--color-kaktus-light); }

/* ---------- 404: Kaktusgruen flaechig, ohne Foto ---------- */
html.hell .n4 {
  background: var(--color-kaktus);
  --color-ink: var(--color-on-kaktus);
  --color-ink-soft: var(--color-on-kaktus-soft);
  --color-ink-mute: var(--color-on-kaktus-soft);
  --color-focus: var(--color-on-kaktus);
  color: var(--color-ink);
}
html.hell .n4__bild { display: none; }
html.hell .n4::before { content: none; }
html.hell .n4__zzz,
html.hell .n4__notiz { color: var(--color-pink-press); }

/* ====================================================================
 * Schalter Hell/Dunkel (gilt in beiden Ansichten)
 * ==================================================================== */

/* Dunkle Ansicht: die Rahmen um die Fotos erzeugen keine eigene Box, alles liegt wie auf der Live-Seite */
html:not(.hell) .hero__rahmen,
html:not(.hell) .seitenkopf__rahmen { display: contents; }

.thema-knopf {
  width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; padding: 0;
  border: var(--rule-bold) solid var(--color-ink); border-radius: 50%;
  background: transparent; color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* Ohne JavaScript kann der Knopf nichts: dann bleibt er weg */
html:not(.js) .thema-knopf { display: none; }
.thema-knopf:hover { background: var(--color-ink); color: var(--color-night); }
.thema-knopf:active { transform: scale(0.94); }
.thema-knopf:focus-visible { border-radius: 50%; }
.thema-knopf svg { grid-area: 1 / 1; width: 1.25rem; height: 1.25rem; }
/* Gezeigt wird die Ansicht, in die der Knopf wechselt: Mond in Hell, Sonne in Dunkel */
.thema-knopf__sonne { display: none; }
html:not(.hell) .thema-knopf__mond { display: none; }
html:not(.hell) .thema-knopf__sonne { display: block; }
.kopf.ist-menue .thema-knopf { color: var(--color-on-kaktus); border-color: var(--color-on-kaktus); }
.kopf.ist-menue .thema-knopf:hover { background: var(--color-on-kaktus); color: var(--color-kaktus); }

/* Sehr schmale Handys: Platz fuer den dritten Knopf schaffen */
@media (max-width: 22.4rem) {
  .kopf__innen { gap: var(--space-2xs); }
  .kopf__rechts { gap: var(--space-2xs); }
  .marke { gap: var(--space-2xs); }
  .marke__wort { width: 4.5rem; }
  .menue-knopf { padding-inline: var(--space-xs); }
}

/* Weicher Wechsel zwischen den Ansichten, wo der Browser es kann */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--dur-long); }