/* =========================================================================
   unserhaneu · Modern-CSS-Theming Token-Layer
   Technische Basis: https://una.im/modern-css-theming
   -------------------------------------------------------------------------
   Ziel: EIN Satz semantischer Farb-Tokens ersetzt die parallelen
   Stylesheets (dark.css, theme-dark.css, theme-color.css) und die
   verstreuten Farbregeln aus der bisherigen "zusätzliches CSS".

   Prinzip:
   1. light-dark()      -> Hell/Dunkel ohne Media-Query, gesteuert von color-scheme
   2. @property         -> Tokens typisiert registrieren (abfragbar, animierbar)
   3. contrast-color()  -> lesbare Textfarbe automatisch (WCAG), mit Fallback
   4. relative color    -> Hover/Abstufungen aus EINEM Token ableiten (oklch from)

   WICHTIG: Alle modernen Features stehen in @supports-Blöcken.
   Ohne Support greifen die klassischen --wp--preset--color--* Werte
   als vollwertiger Fallback (BITV/Barrierefreiheit gesichert).
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) Typisierte Token-Registrierung (@property)
   Nur wo Support fehlt, wird der initial-value ignoriert -> Fallback greift.
   ------------------------------------------------------------------------- */
@property --uh-brand {
  syntax: "<color>";
  inherits: true;
  initial-value: #a6121f; /* = accent-2, primäre Aktionsfarbe */
}
@property --uh-surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff; /* = base */
}
@property --uh-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #111111; /* = contrast */
}


/* -------------------------------------------------------------------------
   2) Semantische Tokens – theme-fähig über light-dark()
   Die zweiten Werte stammen 1:1 aus dark.css (--darkmode-*),
   damit der bisherige Dark-Look erhalten bleibt.
   ------------------------------------------------------------------------- */
:root {
  /* color-scheme aktiviert light-dark(). Der Switcher setzt künftig nur noch
     dieses Attribut/Property statt drei Stylesheets zu tauschen. */
  color-scheme: light;

  /* --- Rollen-Tokens (heller Wert / dunkler Wert) --- */
  --uh-page:    #d4e9fb;                 /* Seitenhintergrund (styles.color.background) */
  --uh-surface: #ffffff;                 /* base    */
  --uh-ink:     #111111;                 /* contrast/Text */
  --uh-brand:   #a6121f;                 /* accent-2, primäre Aktion */
  --uh-gold:    #dac68a;                 /* accent-1, H2-Flächen */
  --uh-violet:  #594d7b;                 /* accent-3 */
  --uh-terra:   #bb6d4a;                 /* accent-4 */
}

/* Sobald light-dark() unterstützt wird: dieselben Rollen, aber theme-aware.
   color-scheme:dark (vom Switcher gesetzt) kippt automatisch ALLES – inkl.
   der WP-Standardklassen .has-base-*, .has-contrast-*, Button-Element usw. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --uh-page:    light-dark(#d4e9fb, #121212);
    --uh-surface: light-dark(#ffffff, #1e1e1e);
    --uh-ink:     light-dark(#111111, #f0f0f0);
    --uh-brand:   light-dark(#a6121f, #ff8a80);  /* dark: --darkmode-accent-2 */
    --uh-gold:    light-dark(#dac68a, #dac68a);
    --uh-violet:  light-dark(#594d7b, #b39ddb);  /* dark: --darkmode-accent-3 */
    --uh-terra:   light-dark(#bb6d4a, #ffab91);  /* dark: --darkmode-accent-4 */
  }
}

/* -------------------------------------------------------------------------
   3) Kontrast-Token: lesbare Textfarbe auf farbigen Flächen – automatisch.
   Fallback (kein contrast-color): base-Farbe wie bisher hart gesetzt.
   ------------------------------------------------------------------------- */
:root {
  --uh-on-brand: var(--wp--preset--color--base, #fff); /* Fallback */
}
@supports (color: contrast-color(red)) {
  :root {
    --uh-on-brand: contrast-color(var(--uh-brand));
  }
}


/* =========================================================================
   ANWENDUNG – ersetzt die Farbregeln aus dem bisherigen Zusatz-CSS
   ========================================================================= */

/* -------------------------------------------------------------------------
   Buttons (WP-Element + Block-Button + EM-Suche)
   Vorher: --wp-block-synced-color + color-mix(...black) Hover, 3x dupliziert.
   Nachher: EIN Token; Hover per relative color; Text automatisch kontrastierend.
   :where() hält die Spezifität bei 0 (bewusst niedrig, wie im Bestand).
   ------------------------------------------------------------------------- */
:root :where(.wp-element-button, .wp-block-button__link),
#em-search-form-1 .em-search-submit button.em-search-submit {
  background-color: var(--uh-brand);
  color: var(--uh-on-brand);
  border-radius: 20px;
  border-color: transparent;
  font-weight: bold;
  text-transform: none;
}

/* Hover: klassischer Fallback (dunkler mischen) ... */
:root :where(.wp-element-button:hover, .wp-block-button__link:hover),
:root :where(.wp-element-button:focus, .wp-block-button__link:focus) {
  background-color: color-mix(in srgb, var(--uh-brand) 78%, black);
  color: var(--uh-on-brand);
}
/* ... und moderne Ableitung über OKLCH aus demselben Token */
@supports (color: oklch(from red l c h)) {
  :root :where(.wp-element-button:hover, .wp-block-button__link:hover),
  :root :where(.wp-element-button:focus, .wp-block-button__link:focus) {
    background-color: oklch(from var(--uh-brand) calc(l - 0.12) c h);
  }
}

/* -------------------------------------------------------------------------
   H2-Flächen  (vorher: background-color: accent-1 fest)
   ------------------------------------------------------------------------- */
main h2.wp-block-heading:not(.has-small-font-size) {
  background-color: var(--uh-gold);
  color: var(--uh-ink);
  padding: 0.35em 0.5em;
  margin-top: 1em;
}
@supports (color: contrast-color(red)) {
  main h2.wp-block-heading:not(.has-small-font-size) {
    color: contrast-color(var(--uh-gold));
  }
}

/* -------------------------------------------------------------------------
   Links (vorher: accent-2 fest, in Light + Dark separat gepflegt)
   ------------------------------------------------------------------------- */
:root :where(a:not(.wp-element-button)) {
  color: var(--uh-brand);
}

/* -------------------------------------------------------------------------
   Call-to-Action-Button
   Vorher: Hover kehrte das Bild per filter: invert() um – ein Farb-Hack.
   Nachher: echte Kontrast-Umkehr über Tokens (Bild-Invert als Fallback bleibt).
   ------------------------------------------------------------------------- */
.call-to-action-button {
  position: relative;
  border: 1px solid var(--wp--preset--color--accent-6);
  padding: 15px;
  transition: color .3s, background-color .3s, border-color .3s;
}
.call-to-action-button:hover,
.call-to-action-button:focus-within {
  border-color: var(--uh-brand);
}
@supports (color: contrast-color(red)) {
  .call-to-action-button:hover,
  .call-to-action-button:focus-within {
    background-color: var(--uh-brand);
    color: contrast-color(var(--uh-brand));
  }
  /* Bild-Invert wird überflüssig, sobald echte Kontrastfarbe greift */
  .call-to-action-button:hover img,
  .call-to-action-button:focus-within img {
    filter: none;
  }
}

/* -------------------------------------------------------------------------
   Events-Manager Farbakzente (Beispiel-Migration)
   Vorher: accent-1 / accent-2 fest mit !important.
   ------------------------------------------------------------------------- */
body .em.em-list .em-item .em-item-info {
  border-color: var(--uh-gold);
}
.em.em-list.em-grid > *.highlight .em-item-info,
body .em.em-list .em-item[data-rucurringpattern=""] .em-item-info {
  border-color: var(--uh-brand);
}