/*
 * Eigene Anpassungen für RiO.
 *
 * Ausgelagert aus style-main-new.min.css (dort war der Block nur schwer
 * wartbar und wäre beim nächsten Ersetzen der Kern-Theme-Dateien verloren
 * gegangen). Wird über functions.php nach dem Haupt-Stylesheet geladen
 * (Handle: rio-custom, abhängig von neve-style).
 */

/*
 * Grundstile, die von Neves Vorgaben abweichen. Standen früher direkt in
 * Neves kompilierter style-main-new.min.css und wären bei jedem Neve-Update
 * stillschweigend verloren gegangen. Bewusst am Anfang dieser Datei: Wie
 * vorher sollen alle folgenden Anpassungen sie weiterhin überschreiben
 * können. Neves Originalwert steht jeweils dabei.
 */
.hfg_header.site-header {
  position: fixed; /* Neve: Header scrollt mit */
  width: 100%;
  z-index: 999;
}

.btn:hover,
.button.button-primary:hover,
.is-style-primary .wp-block-button__link:hover,
button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  /* Neve: umgekehrt – Hintergrund --primarybtnhoverbg, Schrift --primarybtnhovercolor */
  background: var(--primarybtnhovercolor);
  color: var(--primarybtnhoverbg);
}

.button.button-secondary:hover,
.button:hover,
.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--primarybtncolor); /* Neve: --secondarybtnhoverbg */
}

p {
  margin-bottom: 20px; /* Neve: 30px */
}

.nav-ul li a {
  text-decoration: none; /* Neve: nicht gesetzt */
}

.nv-non-grid-article {
  margin-bottom: var(--spacing, 20px); /* Neve: Ersatzwert 60px */
}

/*
 * Sticky-Header bekommt beim Scrollen einen sanften Tiefenschatten (Klasse
 * rio-scrolled, gesetzt von js/custom.js). Bewusst nur Schatten, kein
 * Schrumpfen der Höhe – Neves Content-Verschiebung unter dem fixierten
 * Header (main-Abstand von oben) ist nicht sauber an eine Höhenänderung
 * gekoppelt, ein echtes Schrumpfen hätte eine Lücke riskiert.
 */
.hfg_header {
  transition: box-shadow 0.25s ease;
}

.hfg_header.rio-scrolled {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

/*
 * Trennlinien zwischen Startseiten-Abschnitten: Neves Standard ist eine
 * schlichte 2px-Volllinie in Textfarbe (hr{border-top:2px solid;
 * color:inherit}). Hier stattdessen ein weicher Verlauf mit Leuchten in der
 * Akzentfarbe, passend zum Neon-Look des Logos.
 */
#content hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nv-primary-accent, #18b5cd) 50%, transparent);
  box-shadow: 0 0 8px var(--nv-primary-accent, #18b5cd);
}

.blog .posts-wrapper article {
  position: relative;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog .posts-wrapper article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

.blog .posts-wrapper .blog-entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.nv-index-posts {
  margin-top: 220px !important;
}

@media (max-width: 960px) {
  .nv-index-posts {
    margin-top: 180px !important;
  }
}

@media (max-width: 576px) {
  .nv-index-posts {
    margin-top: 160px !important;
  }
}

col {
  padding-top: 160px;
}

#site-footer .wp-block-gallery {
  justify-content: center;
}

#block-21 {
  margin-top: 10px;
}

.tage-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding-top: 10px;
  text-align: center;
}

.tag-spalte h2 {
  margin-top: 0;
}

.tag-spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag-spalte li {
  margin-bottom: 15px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tag-spalte li:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

.tag-spalte img {
  display: block;
  width: 100%;
  height: auto;
}

body {
  background-color: #16323b;
  /* Pfad ohne Domain: Theme-Dateien erfasst ein Domain-Ersetzen in der Datenbank
     nicht – mit fester Domain lud das Bild nach dem Umzug weiter vom alten Server. */
  background-image:
    linear-gradient(rgba(14, 104, 132, 0.7), rgba(16, 48, 58, 0.72)),
    url("/wp-content/uploads/2026/09/RiO_Festival_Website_hg_3500x3500px__09-2026-scaled.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
  overflow-y: scroll;
}

/*
 * Barrierefreiheit: Text auf dem dunklen Seiten-Hintergrund lesbar machen.
 *
 * body{background:#16323b …} (oben) legt einen dunklen Grund über die ganze
 * Seite, Neves Standard-Textfarbe (--nv-text-color, #272626) und UIkits
 * globale Überschriften-Farbe (h1–h6{color:#333}, siehe uikit.min.css) sind
 * aber für einen hellen Hintergrund gedacht. Gemessener Kontrast dadurch nur
 * ~1,1:1 – WCAG 2.1 AA verlangt mindestens 4,5:1 für Fließtext.
 *
 * Nur innerhalb von #content (Hauptinhalt) umgestellt, damit Kopfbereich und
 * Navigation (eigener weißer Hintergrund) unverändert bleiben. --nv-text-dark-bg
 * ist Neves eigene, fürs Zusammenspiel mit dunklem Hintergrund vorgesehene
 * Variable (aktuell #ffffff) – daher hier wiederverwendet statt neu erfunden.
 *
 * --nv-text-color wird lokal neu gesetzt (für Regeln, die var(--nv-text-color)
 * direkt nutzen, z. B. Trennlinien), UND zusätzlich color direkt auf #content
 * gesetzt: Absätze/Spans ohne eigene Farbregel erben von CSS aus sonst die
 * bereits fertig berechnete Farbe von <body> (#272626) – eine neu definierte
 * Variable allein erreicht die nicht, weil Vererbung den berechneten Wert und
 * nicht die Variable weiterreicht. Für h1–h6 zusätzlich eine eigene Regel
 * nötig, weil UIkits globales Reset sie mit fest codiertem #333 überschreibt
 * (nach Neves Stylesheet geladen, gleiche Spezifität, gewinnt sonst per
 * Ladereihenfolge).
 */
#content {
  --nv-text-color: var(--nv-text-dark-bg, #ffffff);
  color: var(--nv-text-dark-bg, #ffffff);
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  color: var(--nv-text-dark-bg, #ffffff);
}

/*
 * HINWEIS zur Vorgeschichte (nicht mehr aktiv): Hier stand ein Override auf
 * ein beliebig gewähltes Blau (#7ec8ff), weil zum Zeitpunkt des ersten
 * Kontrast-Fixes die echten Theme-Einstellungen (Farbpalette) für RiO_2026
 * noch nicht wiederhergestellt waren (leere theme_mods, siehe Commit
 * da95182) und darum --nv-primary-accent/--secondarybtncolor nicht die
 * echte Markenfarbe lieferten. Seit dem theme_mods-Fix liefert die
 * „Dunkler Modus"-Palette bereits die echte Akzentfarbe #18b5cd
 * (Kontrast 5,49:1 auf dem dunklen Hintergrund, passt ohne Zutun) – Links
 * und der sekundäre Button ("Zu den Tickets!", Rahmen via
 * border-color:currentColor) brauchen daher keinen Override mehr. Absichtlich
 * entfernt, nicht nur auskommentiert, damit hier nichts Falsches "schläft".
 */

/*
 * Akkordeon-Titel im Festival-ABC waren <a class="uk-accordion-title" href>
 * (leeres href) – bei JS-Ausfall/Rechtsklick lädt das die Seite neu statt zu
 * togglen. Auf <button type="button"> umgestellt (Seiteninhalt, per WP-CLI
 * angepasst). UIkits eigenes CSS stylt .uk-accordion-title nur klassen-,
 * nicht elementbasiert – Browser-Standard-Button-Rahmen/-Ausrichtung hier
 * explizit zurückgesetzt, damit die Optik exakt wie vorher bleibt. Zusätzlich
 * font-weight und border-radius: Neves generische Button-Regel
 * (button{font-weight:var(--btnfontweight,700);border-radius:var(
 * --primarybtnborderradius,3px)}) matcht jetzt ebenfalls (0,0,1 Spezifität,
 * UIkit setzt hier keins von beiden explizit – wurde daher nicht durch
 * die :hover-Korrektur oben mit abgedeckt) und machte den Titel fett +
 * leicht abgerundet statt normalgewichtig + eckig wie vorher als <a>.
 */
.uk-accordion-title {
  border: none;
  width: 100%;
  text-align: left;
  background: #dadada;
  cursor: pointer;
  font-weight: 400;
  border-radius: 0;
}

/*
 * Als <button> matcht der Titel jetzt zusätzlich Neves generische
 * Button-Hover-Regel (button:hover{background:var(--primarybtnhovercolor)}
 * in style-main-new.min.css) – die griff bei <a> nicht, weil sie nur .btn/
 * .button/button/input[type=...] anspricht. Gleiche Spezifität (0,1,1) wie
 * button:hover, aber custom.css lädt zuletzt und gewinnt den Gleichstand.
 * Ergebnis: wieder UIkits eigentliches, dezentes Hover (nur Textfarbe
 * abgedunkelt, kein Farbwechsel des Hintergrunds).
 */
.uk-accordion-title:hover,
.uk-accordion-title:focus {
  background: #dadada;
  color: #666;
  border-color: transparent;
}

/*
 * Startseiten-Überschrift: war <h2 class="nv-page-title-wrap nv-big-title">
 * (Neves Auto-Titel war per neve_meta_disable_title deaktiviert, Ersatz von
 * Hand als h2 eingefügt), für Barrierefreiheit auf <h1> korrigiert. Als h1
 * greift aber Neves H1-Typografie (40px) statt der H2-Typografie (32px
 * Desktop, entsprechend kleiner auf Tablet/Mobile), auf die diese Seite
 * optisch abgestimmt war – wirkte dadurch zu groß. Hier bewusst nur die
 * Größe/den Zeilenabstand der H2-Einstellung nachgezogen (per CSS-Variable,
 * bleibt responsiv), Semantik bleibt korrekt h1.
 */
h1.nv-big-title {
  font-size: var(--h2fontsize);
  line-height: var(--h2lineheight);
  letter-spacing: var(--h2letterspacing);
}

/*
 * Rechtstexte von eRecht24 (Impressum, Datenschutz): Der Seitentitel ist dort
 * ausgeblendet, weil die Texte eine eigene Überschrift mitbringen. Den Abstand
 * zum fixierten Header liefert sonst der Titelblock (.nv-page-title-wrap,
 * margin-top 60px) – ohne ihn rutscht die Überschrift unter den Header.
 */
.nv-content-wrap > .erecht24-legal-texts:first-child {
  margin-top: 60px;
}

/*
 * Neon-Glow + sanfte Hebung bei Hover auf ALLEN Buttons (auch dem bereits
 * gefüllten "Tickets"-Button im Header – der hatte bisher gar keine
 * Übergangs-Animation, transition-duration:0s, der Farbwechsel beim Hover
 * passierte hart/ohne Animation). Vormals experimentell, vom User bestätigt
 * – Vorschau-Rollback-Tag "vor-hover-glow" bleibt trotzdem als Referenz.
 * Auf Überschriften/Text-Links bewusst NICHT eingesetzt (User-Feedback).
 */
.button {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.button:hover {
  box-shadow: 0 0 16px var(--nv-primary-accent, #18b5cd);
  transform: translateY(-2px);
}

/*
 * .button-primary (der gefüllte "Tickets"-Button im Header) braucht einen
 * kräftigeren Glow als die Rahmen-Buttons: der normale Glow blendet dort
 * mit der eigenen (bereits akzentfarbenen) Füllung, sichtbar wird nur der
 * äußere, weiche Rand vorm schwarzen Header-Hintergrund. Mit Spread (4. Wert)
 * schiebt sich der Leuchtring sichtbar über den Button-Rand hinaus, damit er
 * genauso präsent wirkt wie beim "Zu den Tickets!"-Button unten.
 *
 * Selektor bewusst a.button.button-primary:hover (nicht nur .button-primary):
 * Neve generiert pro Button-Instanz eine eigene Inline-Regel
 * ".button.button-primary:hover{box-shadow:var(--primarybtnhovershadow,none)}"
 * mit höherer Spezifität als ein einzelnes ".button-primary" – der
 * Element-Typ hier stellt sicher, dass unsere Regel eindeutig gewinnt.
 * (Der Header hat zwei "Tickets"-Links im DOM – Desktop sichtbar, Mobile
 * per display:none versteckt fürs Off-Canvas-Menü. Bei der Fehlersuche
 * versehentlich den unsichtbaren geprüft und fälschlich "kein Glow"
 * vermutet; der sichtbare Button hat von Anfang an funktioniert.)
 */
a.button.button-primary:hover {
  box-shadow: 0 0 28px 6px var(--nv-primary-accent, #18b5cd);
}

/*
 * Rahmen-Buttons (z. B. "Zu den Tickets!", .button ohne -primary) füllen
 * sich beim Hover sanft mit der Akzentfarbe, statt nur den Rahmen/Text
 * beizubehalten – gleiche Farbkombi (Akzent-Hintergrund + weißer Text) wie
 * der bereits gefüllte "Tickets"-Button im Header, dadurch stimmiger Übergang.
 * border-color folgt automatisch mit (border-color:currentColor in Neves
 * eigener Regel), kein zusätzliches Overriding nötig.
 */

.button:not(.button-primary):hover {
  background-color: var(--nv-primary-accent, #18b5cd);
  color: #fff;
}

/* ==========================================================================
   EXPERIMENTELL – Neon-Glow bei Hover auf Überschriften
   Stand davor jederzeit erreichbar: git tag "vor-headline-glow" bzw.
   https://github.com/GitteHubertus/rio-rock-in-offenbach-wordpress/releases/tag/vor-headline-glow
   Rückgängig machen: diesen kompletten Block (bis zum END-Marker) entfernen,
   sonst nichts anfassen.
   ========================================================================== */
#content h1,
#content h2,
#content h3 {
  transition: text-shadow 0.25s ease;
}

#content h1:hover,
#content h2:hover,
#content h3:hover {
  text-shadow: 0 0 12px var(--nv-primary-accent, #18b5cd);
}
/* ==========================================================================
   ENDE Neon-Glow bei Hover auf Überschriften
   ========================================================================== */

/* ==========================================================================
   Leuchtstoffröhren-Flackern am Logo – fünf unabhängige Ebenen, nur der
   RiO-Schriftzug, nicht der Text daneben ("ROCK IN OFFENBACH ...").
   Stand davor jederzeit erreichbar: git tag "vor-logo-flicker" bzw.
   https://github.com/GitteHubertus/rio-rock-in-offenbach-wordpress/releases/tag/vor-logo-flicker
   Rückgängig machen: diesen kompletten Block UND den entsprechenden Block
   in js/custom.js entfernen, sonst nichts anfassen.

   4. Anlauf. Technik der Schleier (durchscheinend statt Bildkopie, additiv
   statt verdrängend) und der drei Anker (a.brand / div.site-logo /
   .item--inner.builder-item--logo, per z-index vereinheitlicht) unverändert
   – siehe Git-Historie für die Bug-Vorgeschichte dazu.

   NEU seit diesem Anlauf: Nur noch die reine Optik EINES einzelnen
   Aufflacker-Impulses steckt hier in CSS (@keyframes rio-pulse-*, jeweils
   ein sanftes Auf-Ab). Wie oft und wie viele Impulse hintereinander
   (1–3, zufällig) tatsächlich abgespielt werden, steuert js/custom.js zur
   Laufzeit über ein dynamisches <style>-Tag – reines CSS @keyframes mit
   "infinite" wiederholt sich IMMER exakt gleich (wirkte laut User "zu
   mechanisch/programmiert", z. B. immer exakt 2 Impulse pro Zyklus).
   Pseudo-Elemente sind per JS nicht direkt ansprechbar (kein
   element.style möglich) – daher der Umweg über ein <style>-Tag, dessen
   Inhalt js/custom.js periodisch neu schreibt.

   Ebene 5 (Blitzspitze/"i-Punkt") in diesem Anlauf zusätzlich neu
   vermessen: die Box saß vorher bei top:0/height:28% – das Parallelogramm
   beginnt aber erst bei y≈78px (nicht 0!) und endet bei y≈200px (von 730px
   Gesamthöhe), ist zudem schmaler als angenommen (rechte Kante bei x≈720px,
   nicht 765px – das war die Grenze des GANZEN Blitzes inkl. Zickzack-Körper
   weiter unten, nicht die der oberen Spitze). Per feinem Pixel-Gitter
   (20px-Schritte) visuell exakt nachgemessen und korrigiert.
   ========================================================================== */
a.brand,
div.site-logo,
.item--inner.builder-item--logo {
  position: relative;
}

/* Einzelimpuls-Optik je Ebene – wie oft/wie viele hintereinander steuert
   js/custom.js zur Laufzeit (animation-iteration-count wird dynamisch
   gesetzt), nicht diese Keyframes selbst. */
@keyframes rio-pulse-all { 0%, 100% { opacity: 0; } 50% { opacity: 0.22; } }
@keyframes rio-pulse-r { 0%, 100% { opacity: 0; } 50% { opacity: 0.3; } }
@keyframes rio-pulse-bolt-whole { 0%, 100% { opacity: 0; } 50% { opacity: 0.28; } }
@keyframes rio-pulse-o { 0%, 100% { opacity: 0; } 50% { opacity: 0.32; } }
@keyframes rio-pulse-dot { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } }

a.brand::after,
div.site-logo::before,
div.site-logo::after,
.item--inner.builder-item--logo::before,
a.brand::before {
  content: "";
  position: absolute;
  background: #000;
  opacity: 0;
  pointer-events: none;
  /* z-index nötig: .item--inner.builder-item--logo::before (Ebene O) liegt
     drei Verschachtelungsstufen über dem <img>, dadurch rutscht es ohne
     z-index HINTER das Bild statt davor (per elementFromPoint empirisch
     nachgewiesen – anders als bei den nur 1-2 Stufen tiefen Ankern, wo die
     reine Baumreihenfolge zufällig richtig lag). Mit explizitem z-index
     entsteht ein eindeutiger Stapel, unabhängig von der Verschachtelung. */
  z-index: 1;
}

/* Ebene 1: ganzes RiO (0% – 55%) */
a.brand::after {
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 55.6%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 55.6%, transparent 100%);
}

/* Ebene 2: nur das R (0% – 24,3%) */
div.site-logo::before {
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 23.8%, transparent 24.8%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 23.8%, transparent 24.8%, transparent 100%);
  filter: blur(1.5px);
}

/* Ebene 3: nur der ganze Blitz (24,3% – 32,4%) */
div.site-logo::after {
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 23.8%, #000 24.8%, #000 31.6%, transparent 33.2%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 23.8%, #000 24.8%, #000 31.6%, transparent 33.2%, transparent 100%);
  filter: blur(1.5px);
}

/* Ebene 4: nur das O (32,4% – 55%) */
.item--inner.builder-item--logo::before {
  top: 13.5%;
  height: 73%;
  left: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 31.6%, #000 33.2%, #000 55%, transparent 56%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 31.6%, #000 33.2%, #000 55%, transparent 56%, transparent 100%);
  filter: blur(1.5px);
}

/* Ebene 5: nur die Blitzspitze – Grenzen per Helligkeits-Scan des Original-
   JPGs ermittelt (Schwellwert-Suche je Bildzeile/-spalte statt Augenmaß an
   einem Raster): eigenständige Fläche x=578–743px, y=84–184px (von 2362×730).
   Oben/Höhe unverändert (11,1%/14,5%). Links/rechts auf Nutzerwunsch („muss
   nach rechts und links noch einen Tick größer sein") nochmal um 20px pro
   Seite geweitet, x=555–766px = links 23,5% / rechts 100%-32,43%=67,57%.
   Abstand zu den Nachbarn (per Scan geprüft, jeweils engste Zeile): 42px
   Luft zum R, 10px Luft zum O – Grenze bewusst nicht weiter Richtung O
   verschoben, sonst reißt die Maske in den Buchstaben rein. ACHTUNG "right"
   misst vom rechten Rand aus, nicht links-basiert wie Verlaufs-Masken-Stops. */
a.brand::before {
  top: 11.1%;
  height: 14.5%;
  left: 23.5%;
  right: 67.6%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 5%, #000 12%, #000 88%, transparent 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 5%, #000 12%, #000 88%, transparent 95%, transparent 100%);
  filter: blur(1px);
}

@media (prefers-reduced-motion: reduce) {
  a.brand::after,
  div.site-logo::before,
  div.site-logo::after,
  .item--inner.builder-item--logo::before,
  a.brand::before {
    animation: none !important;
  }
}
/* ==========================================================================
   ENDE Leuchtstoffröhren-Flackern am Logo
   ========================================================================== */