/*
Theme Name: ARGA 2027
Theme URI: https://github.com/
Author: Kevin Spaqaj
Author URI: https://github.com/
Description: Eigenständiges WordPress-Theme für die ARGA, die Gewerbeausstellung
  Aaretal-Kirchspiel. Übernimmt das Design des statischen Phase-1-Prototyps (Blau/Grün,
  eigene Duoton-Illustrationen), macht Event-Daten über den Customizer editierbar und
  bildet Aussteller als eigenen Beitragstyp ab.
Version: 1.4.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rega-2027
*/

/*
  ACHTUNG: Alles zwischen diesem Kommentar und dem Abschnitt
  "WordPress-spezifische Ergänzungen" am Dateiende ist eine wortgleiche Kopie
  von assets/css/style.css aus dem statischen Prototyp. Änderungen am Design
  gehören dorthin und werden von hier übernommen, nicht umgekehrt. So bleibt
  das Theme optisch deckungsgleich mit der abgenommenen Vorlage.
*/

:root {
  --color-primary: #1a6ea8;
  --color-primary-light: #4a90c4;
  --color-primary-dark: #0d3f61;
  --color-accent: #5aa62e;
  --color-accent-light: #8dc63f;
  --color-accent-dark: #3f7d1f;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f8fb;
  --color-text: #1c2321;
  --color-text-muted: #5c6663;
  --color-border: #e2e9ec;
  --radius: 14px;
  --radius-sm: 8px;
  --max-width: 1160px;
  --shadow-sm: 0 1px 2px rgba(15, 35, 28, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(15, 35, 28, 0.25);
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-base: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  line-height: 1.2;
}

.brand .brand-logo {
  display: block;
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

/* Untertitel neben dem Logo, auf zwei Zeilen, mit feiner Trennlinie zum Logo. */
.brand .brand-sub {
  display: block;
  max-width: 9rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--color-border);
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .brand .brand-logo {
    height: 34px;
  }
  .brand .brand-sub {
    display: none;
  }
}

/* Grosses Logo im Hero-Bereich, weisse Fassung auf dem dunklen Verlauf. */
.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

.hero-logo .hero-logo-bild {
  display: block;
  height: 68px;
  width: auto;
}

.hero-logo .hero-logo-sub {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 480px) {
  .hero-logo .hero-logo-bild {
    height: 51px;
  }
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}

nav.main-nav a {
  color: var(--color-text);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

nav.main-nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

nav.main-nav a[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.nav-toggle {
  display: none;
  border: none;
  background: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-primary);
}

@media (max-width: 780px) {
  nav.main-nav {
    display: none;
    width: 100%;
  }
  nav.main-nav.open {
    display: block;
  }
  nav.main-nav ul {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
  }
  .site-header .container {
    flex-wrap: wrap;
  }
  .nav-toggle {
    display: block;
  }
}

/* Hero */
.hero {
  position: relative;
  background: radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.12), transparent 35%),
    linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-accent) 100%);
  color: #fff;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35;
  pointer-events: none;
}

.hero.hero-sub {
  padding: 3.25rem 0 4rem;
}

.hero .container {
  position: relative;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 700;
  margin: 0 0 0.85rem;
  max-width: 38rem;
}

.hero p {
  font-size: 1.15rem;
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.92);
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.hero-fact {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  min-width: 180px;
  backdrop-filter: blur(3px);
}

.hero-fact .label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}

.hero-fact .value {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

/* Countdown */
.countdown {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

.countdown .unit {
  background: rgba(13, 63, 97, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  min-width: 78px;
  text-align: center;
}

.countdown .unit .num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-light);
}

.countdown .unit .unit-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.3rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  background: var(--color-accent-dark);
  color: #ffffff;
  margin-top: 1.85rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(90, 166, 46, 0.55);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  margin-left: 0.75rem;
  box-shadow: none;
}

/* Sections */
section.block {
  padding: 4rem 0;
  border-bottom: 1px solid var(--color-border);
}

section.block.alt {
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}

section.block.alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(26, 110, 168, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

section.block.alt .container {
  position: relative;
}

section.block h2 {
  position: relative;
  font-size: 1.85rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  color: var(--color-primary);
}

section.block h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-accent);
}

.gate h2 {
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}

.gate h2::after {
  display: none;
}

section.block .lead {
  color: var(--color-text-muted);
  max-width: 42rem;
  font-size: 1.05rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 2.25rem;
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card .icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 1rem;
}

.card .icon svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  margin-top: 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.card p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.placeholder-img {
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(26, 110, 168, 0.08), rgba(90, 166, 46, 0.14));
  border: 1px dashed rgba(26, 110, 168, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
  padding: 1rem;
  gap: 0.6rem;
}

.placeholder-img svg {
  width: 40px;
  height: 40px;
  opacity: 0.65;
}

.map-embed {
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 63, 97, 0.45);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 500;
}

.map-hint.visible {
  opacity: 1;
}

/* Hinweis, wenn der Kartendienst keine Kacheln liefert (siehe
   zeigeKartenausfall() in assets/js/script.js). Steht anstelle der Karte im
   selben Kasten, darum dieselbe Flaeche und kein eigener Rahmen. */
.map-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.25rem;
  background: var(--color-surface-alt, #f4f6f8);
  color: var(--color-text, #222);
  font-size: 0.92rem;
}

.map-fallback p {
  margin: 0;
  max-width: 34rem;
}

/* Die zwei gleichwertigen Anmeldewege auf der Aussteller-Seite nebeneinander,
   auf schmalen Bildschirmen untereinander. */
.anmeldewege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.85rem;
  margin-bottom: 0.9rem;
}

/* Im Flex-Container zaehlt der gap. Die Einzelabstaende der Knoepfe wuerden
   sich damit addieren, darum hier auf null. */
.anmeldewege .btn {
  margin-top: 0;
  margin-left: 0;
}

/*
  .btn.secondary ist fuer dunkle Flaechen gemacht: weisse Schrift auf weissem
  Rand. Der Anmelde-Abschnitt ist hell, dort war der Knopf damit unsichtbar.
  Gleiche Korrektur wie bei .plan-doc-actions weiter oben.
*/
.anmeldewege .btn.secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.anmeldewege .btn.secondary:hover {
  background: rgba(13, 63, 97, 0.06);
}

/* Kleiner Zusatz unter dem Titel des Standplans, siehe buildDoc() in site-plan.js. */
.plan-doc-hinweis {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, #5a6672);
}


/* ==========================================================================
   Interaktiver Lageplan (Vektor-Messeplan aus echten OpenStreetMap-Geodaten)
   Markup wird von assets/js/site-plan.js erzeugt.
   ========================================================================== */
/* --- Bereichs-Chips ueber dem Plan (Hauptbedienung auf dem Handy) --------- */
.plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
    background 0.18s ease, color 0.18s ease;
}

.plan-chip .n {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  transition: background 0.18s ease, color 0.18s ease;
}

.plan-chip:hover,
.plan-chip.is-hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary-light);
}

.plan-chip:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.plan-chip--primary.is-active,
.plan-chip--all.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.plan-chip--accent.is-active {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

.plan-chip--muted.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

.plan-chip.is-active .n {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* --- Plan-Flaeche -------------------------------------------------------- */
.plan-canvas {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: #fff;
}

.plan-svg {
  display: block;
  width: 100%;
  height: auto;
}

.plan-ground {
  fill: #eff4f8;
}

.plan-campus {
  fill: var(--color-accent);
  fill-opacity: 0.09;
}

.plan-pitch {
  fill: var(--color-accent);
  fill-opacity: 0.2;
}

.plan-streets .plan-street-base {
  fill: none;
  stroke: #dde5eb;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-streets .plan-street-dash {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 9 11;
  stroke-linecap: round;
}

.plan-context polygon {
  fill: #d5dee5;
  stroke: #c6d1da;
  stroke-width: 1;
}

/* Klickbare Bereiche: echte Grundrisse bzw. echter Innenhof */
.plan-zone {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill-opacity 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease;
  animation: rega-zone-in 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.plan-zone--primary {
  fill: var(--color-primary);
  fill-opacity: 0.5;
  stroke: var(--color-primary-dark);
  stroke-width: 2;
}

.plan-zone--accent {
  fill: var(--color-accent);
  fill-opacity: 0.5;
  stroke: var(--color-accent-dark);
  stroke-width: 2;
}

.plan-zone--muted {
  fill: var(--color-text-muted);
  fill-opacity: 0.16;
  stroke: var(--color-text-muted);
  stroke-width: 1.75;
  stroke-dasharray: 7 5;
}

.plan-zone.is-hover {
  fill-opacity: 0.72;
  filter: drop-shadow(0 3px 8px rgba(13, 63, 97, 0.35));
}

.plan-zone--muted.is-hover {
  fill-opacity: 0.3;
}

.plan-zone.is-active {
  fill-opacity: 0.85;
  stroke-width: 3;
  animation: rega-zone-pulse 2.4s ease-in-out infinite;
}

.plan-zone--muted.is-active {
  fill-opacity: 0.38;
}

/* Eingang, Nordpfeil, Massstab */
.plan-entrance circle {
  fill: var(--color-accent-dark);
  stroke: #fff;
  stroke-width: 2.5;
}

.plan-entrance path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-compass circle {
  fill: rgba(255, 255, 255, 0.9);
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.plan-compass path {
  fill: var(--color-primary);
}

.plan-compass text {
  fill: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
}

.plan-scale line {
  stroke: var(--color-text-muted);
  stroke-width: 1.75;
  stroke-linecap: round;
}

.plan-scale text {
  fill: var(--color-text-muted);
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 600;
}

/* --- Labels als HTML ueber dem SVG (echte Typografie, immer waagrecht) ---- */
.plan-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.plan-label {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 42%;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 2px solid var(--color-primary);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 63, 97, 0.2);
  animation: rega-label-in 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 70ms + 160ms);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    color 0.18s ease, border-color 0.18s ease;
}

.plan-label--accent {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}

.plan-label--muted {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.plan-label .n {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.plan-label--accent .n {
  background: var(--color-accent-dark);
}

.plan-label .n--empty {
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.62rem;
}

.plan-label:hover,
.plan-label.is-hover {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 5px 16px rgba(13, 63, 97, 0.32);
  background: #fff;
}

.plan-label:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.plan-label.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.plan-label--accent.is-active {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

.plan-label--muted.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

.plan-label.is-active .n {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Strassennamen und Flaechenbeschriftung, dezent und nicht klickbar */
.plan-street-label,
.plan-area-label,
.plan-entrance-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-base);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.plan-street-label {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.72);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

.plan-area-label {
  color: var(--color-accent-dark);
  opacity: 0.85;
}

.plan-entrance-label {
  color: var(--color-accent-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
}

/* --- Legende ------------------------------------------------------------- */
.plan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin: 1rem auto 0;
  max-width: 720px;
  padding: 0.85rem 1rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--color-text);
}

.plan-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plan-legend .swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-block;
}

.plan-legend .swatch--primary {
  background: var(--color-primary);
  opacity: 0.6;
}

.plan-legend .swatch--accent {
  background: var(--color-accent);
  opacity: 0.6;
}

.plan-legend .swatch--muted {
  background: transparent;
  border: 2px dashed var(--color-text-muted);
}

.plan-legend .swatch--context {
  background: #d5dee5;
}

/* --- Infrastruktur-Ebene ueber dem Plan (Schalter, standardmaessig aus) --- */
.plan-layers {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.9rem;
}

.plan-layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.plan-layer-toggle .box {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 2px solid var(--color-text-muted);
  flex-shrink: 0;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.plan-layer-toggle.is-on {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
  background: rgba(90, 166, 46, 0.08);
}

.plan-layer-toggle.is-on .box {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.plan-layer-toggle.is-on .box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.plan-layer-toggle:hover {
  border-color: var(--color-primary-light);
}

.plan-layer-toggle:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.plan-infra-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.plan-canvas.show-infra .plan-infra-layer {
  opacity: 1;
  visibility: visible;
}

.infra-pin {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.9);
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.42rem 0.16rem 0.26rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid var(--color-primary-dark);
  color: var(--color-primary-dark);
  font-family: var(--font-base);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 1px 5px rgba(13, 63, 97, 0.28);
  transition: transform 0.25s ease;
}

.plan-canvas.show-infra .infra-pin {
  transform: translate(-50%, -50%) scale(1);
}

.infra-pin svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: currentColor;
}

/* Farbe nach Art: Betrieb/Gastro gruen, Sicherheit rot, Rest blau */
.infra-pin--food,
.infra-pin--stage,
.infra-pin--kids,
.infra-pin--play {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}

.infra-pin--care,
.infra-pin--exit {
  border-color: #b3261e;
  color: #b3261e;
}

/* Notausgang: kleine Marke auf dem Gebaeuderand */
@media (max-width: 620px) {
  .infra-pin {
    font-size: 0.6rem;
    padding: 0.12rem 0.34rem 0.12rem 0.2rem;
  }
  .infra-pin svg {
    width: 11px;
    height: 11px;
  }
}

/* --- Bereichsmarkierung nach einer Standsuche ---------------------------- */
.plan-locator {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stand-locator {
  position: absolute;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  animation: rega-locator-in 0.4s ease both;
}

.stand-locator .nr {
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: #b3261e;
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.stand-locator .hint {
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-muted);
  font-family: var(--font-base);
  font-size: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
}

@keyframes rega-locator-in {
  from { opacity: 0; transform: translate(-50%, -8px) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stand-locator {
    animation: none;
  }
}

/* --- Ergebnis-Panel unter dem Vektorplan --------------------------------- */
.plan-result {
  max-width: 720px;
  margin: 1.25rem auto 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.plan-result--in {
  animation: rega-panel-in 0.4s ease;
}

.plan-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.plan-result-title {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.plan-result-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: rgba(90, 166, 46, 0.12);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-result-hint {
  margin: 0;
  font-size: 0.88rem;
}

.plan-result .plan-exhibitor-list {
  margin-top: 0;
}

.plan-group-title {
  margin: 1.3rem 0 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-primary-dark);
}

.plan-group-title:first-child {
  margin-top: 0;
}

/* ==========================================================================
   Standplan: die offizielle Standeinteilung als PDF, dazu Standsuche und
   Bereichsuebersicht. Markup kommt aus assets/js/site-plan.js.
   Keine nachgebaute Karte mehr, damit der Plan genau so aussieht wie das
   Dokument des Auftraggebers und im wp-admin austauschbar bleibt.
   ========================================================================== */
.site-plan-widget {
  margin-top: 1.5rem;
  max-width: 780px;
}

/* --- Der Plan selbst ----------------------------------------------------- */
.plan-doc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  overflow: hidden;
}

.plan-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
}

.plan-doc-head h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-primary-dark);
}

.plan-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.plan-doc-actions .btn {
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
}

.plan-doc-actions .btn.secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Vorschaubild: auf schmalen Bildschirmen statt des PDF-Viewers */
.plan-doc-image {
  display: none;
  border-top: 1px solid var(--color-border);
  background: #fff;
}

.plan-doc-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* PDF-Viewer des Browsers, nur wo genug Platz ist */
.plan-doc-frame {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: #fff;
}

@media (max-width: 780px) {
  .plan-doc-frame {
    display: none;
  }
  .plan-doc-image {
    display: block;
  }
}

/* --- Standsuche ---------------------------------------------------------- */
.stand-finder {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(26, 110, 168, 0.07), rgba(90, 166, 46, 0.07));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.stand-finder label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  margin-bottom: 0.55rem;
}

.stand-finder input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-base);
  font-size: 0.92rem;
  color: var(--color-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.stand-finder input:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(74, 144, 196, 0.2);
}

.stand-finder-result:not(:empty) {
  margin-top: 0.9rem;
}

.finder-suggestions {
  display: grid;
  gap: 0.4rem;
}

.finder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 0.87rem;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.finder-row:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

.finder-row:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.finder-row .name {
  font-weight: 600;
  color: var(--color-primary);
}

.finder-row .stand {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: rgba(90, 166, 46, 0.12);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

.finder-more {
  margin-top: 0.5rem;
}

/* Ergebniskarte der Standsuche */
.stand-result-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  animation: rega-panel-in 0.35s ease;
}

.stand-result-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

.stand-result-nr {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Dasselbe im Suchergebnis: gestrichelter Rahmen statt gefuellter Kachel. */
.stand-result-nr--offen {
  background: transparent;
  color: var(--color-text-muted);
  border: 2px dashed var(--color-border);
  font-size: 0.85rem;
}

.stand-result-head strong {
  display: block;
  color: var(--color-primary-dark);
  font-size: 0.98rem;
  line-height: 1.35;
}

.stand-result-area {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* --- Bereichsuebersicht -------------------------------------------------- */
.plan-areas {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.plan-area {
  padding: 1rem 1.15rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.plan-area h4 {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
  color: var(--color-primary-dark);
}

.plan-area-meta {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.plan-exhibitor-list {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: 0.85rem;
}

.plan-exhibitor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem;
  font-size: 0.84rem;
  animation: rega-card-in 0.35s ease both;
  animation-delay: calc(var(--i, 0) * 18ms);
}

.plan-exhibitor-card .name {
  font-weight: 600;
  color: var(--color-primary);
}

.plan-exhibitor-card .stand {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: rgba(90, 166, 46, 0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

/*
  Noch keine Stand-Nr. vergeben. Bewusst neutral und nicht im Akzentgruen: eine
  offene Zuteilung darf nicht aussehen wie eine feste Standnummer.
*/
.plan-exhibitor-card .stand--offen {
  color: var(--color-text-muted);
  background: var(--color-border);
  font-weight: 600;
}

.plan-source-note {
  margin-top: 1rem;
}

@keyframes rega-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rega-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.stats-strip .stat {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.stats-strip .stat .stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stats-strip .stat .stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Bokeh-Lichtkreise im Hero-Himmel, mit sanfter Schwebe-Animation */
.hero-bokeh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-bokeh span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(1px);
  animation: rega-float 9s ease-in-out infinite;
}

.hero-bokeh span:nth-child(1) { width: 70px; height: 70px; top: 12%; left: 22%; opacity: 0.2; animation-duration: 10s; animation-delay: -1s; }
.hero-bokeh span:nth-child(2) { width: 34px; height: 34px; top: 30%; left: 60%; opacity: 0.25; animation-duration: 7s; animation-delay: -3s; }
.hero-bokeh span:nth-child(3) { width: 110px; height: 110px; top: 6%; left: 72%; opacity: 0.16; animation-duration: 13s; animation-delay: -5s; }
.hero-bokeh span:nth-child(4) { width: 20px; height: 20px; top: 55%; left: 40%; opacity: 0.22; animation-duration: 6s; animation-delay: -2s; }
.hero-bokeh span:nth-child(5) { width: 46px; height: 46px; top: 18%; left: 10%; opacity: 0.18; animation-duration: 11s; animation-delay: -4s; }
.hero-bokeh span:nth-child(6) { width: 26px; height: 26px; top: 62%; left: 16%; opacity: 0.22; animation-duration: 8s; animation-delay: -6s; }
.hero-bokeh span:nth-child(7) { width: 60px; height: 60px; top: 46%; left: 4%; opacity: 0.15; animation-duration: 12s; animation-delay: -2.5s; }
.hero-bokeh span:nth-child(8) { width: 16px; height: 16px; top: 72%; left: 33%; opacity: 0.24; animation-duration: 5.5s; animation-delay: -1.5s; }

@keyframes rega-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -16px); }
}

/* Bewegung reduzieren: siehe zentraler Block am Ende dieser Datei */

/* Wellen-Fuss (Grün->Blau, weisses Band) am unteren Hero-Rand, auf allen Seiten */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 64px;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 480px) {
  .hero-wave {
    height: 40px;
  }
}

/* Kleine thematische Duoton-Vignetten auf Karten (Kulinarik, Familie, Showbühne) */
.card-vignette {
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: -1.75rem -1.75rem 1.1rem;
  background: linear-gradient(160deg, #eaf4fb 0%, #f4faf1 100%);
}

.card-vignette svg {
  width: 100%;
  height: 100%;
  display: block;
}

table.info-table,
.info-table > table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Sehr kleine Displays */
@media (max-width: 480px) {
  .hero .btn.secondary {
    display: block;
    margin-left: 0;
    margin-top: 0.75rem;
    text-align: center;
  }

  table.info-table,
  .info-table > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .countdown .unit {
    min-width: 64px;
    padding: 0.6rem 0.7rem;
  }

  .countdown .unit .num {
    font-size: 1.5rem;
  }
}

table.info-table th,
table.info-table td,
.info-table > table th,
.info-table > table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

table.info-table th,
.info-table > table th {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
}

table.info-table tbody tr:last-child td,
.info-table > table tbody tr:last-child td {
  border-bottom: none;
}

/* Sponsor / partner strip */
.partner-strip {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.partner-strip .strip-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.partner-logo {
  width: 140px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
  padding: 0.5rem;
}

/* Password gate */
.gate {
  max-width: 26rem;
  margin: 4rem auto;
  padding: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.gate .icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.gate .icon svg {
  width: 26px;
  height: 26px;
}

/*
  Passwortfeld. Gleicher Fokuszustand wie im WordPress-Theme
  (.post-password-form), damit beide Fassungen sich gleich anfuehlen.

  1.5px Rahmen und nicht 1px: beim Fokus wechselt nur die Farbe, nicht die
  Dicke. Sonst springt das Feld beim Anklicken um einen halben Pixel.
*/
.gate input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin: 1rem 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gate input[type="password"]:hover {
  border-color: var(--color-primary-light);
}

.gate input[type="password"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 110, 168, 0.18);
}

/*
  Falsches Passwort: das Feld wird rot und ruettelt einmal kurz. Die Klasse
  setzt initExhibitorGate() und nimmt sie beim naechsten Tippen wieder weg.

  Ohne das wechselte nur stumm ein Text unter dem Feld, und wer auf das Feld
  schaut, uebersieht das leicht und tippt dasselbe Passwort nochmals.
*/
.gate input[type="password"].is-error {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
  animation: rega-shake 0.32s ease;
}

@keyframes rega-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

.gate .error {
  color: #b3261e;
  font-size: 0.9rem;
  min-height: 1.2rem;
}

/* Die Meldung blendet ein, statt hart zu erscheinen. */
.gate .error:not(:empty) {
  animation: rega-error-in 0.22s ease;
}

@keyframes rega-error-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/*
  Der Schloss-Knopf wippt beim Laden einmal. Kein Dauerlauf: eine Animation,
  die nie aufhoert, zieht die Aufmerksamkeit vom Formular weg.

  Auf den Formularbereich eingeschraenkt und NICHT auf .gate .icon: das Haekchen
  im Erfolgsfall steckt ebenfalls in .gate und wuerde sonst mitgenommen. Es
  bekommt weiter unten seine eigene Bewegung.
*/
#exhibitor-gate-form-area .icon {
  animation: rega-lock-in 0.5s ease both;
}

@keyframes rega-lock-in {
  0% { opacity: 0; transform: scale(0.82) translateY(6px); }
  60% { transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rega-check-in {
  0% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* Der Knopf soll beim Absenden sichtbar reagieren. */
.gate .btn:active {
  transform: translateY(1px);
}

/*
  Wer Bewegung abgestellt hat, bekommt die Zustaende ohne Animation. Farbe und
  Rahmen bleiben, die Rueckmeldung geht also nicht verloren.
*/
@media (prefers-reduced-motion: reduce) {
  .gate input[type="password"],
  .gate input[type="password"].is-error,
  .gate .error:not(:empty),
  #exhibitor-gate-form-area .icon,
  .gate-success .icon {
    animation: none;
    transition: none;
  }
}

.hidden {
  display: none !important;
}

.gate-success {
  padding: 1rem 0 0.5rem;
}

/*
  Das Haekchen nach erfolgreichem Login. Kraeftiger als das Schloss oben, es
  ist eine Bestaetigung. Die Animation laeuft von selbst an, wenn der Bereich
  sichtbar wird: ein Element mit display:none fuehrt keine Animation aus, beim
  Einblenden startet sie darum neu.
*/
.gate-success .icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  animation: rega-check-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.gate-success .icon svg {
  width: 26px;
  height: 26px;
}

.gate-success p {
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.fade-in {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-Reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.grid .card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.18s ease;
}

.grid.reveal-visible .card {
  opacity: 1;
  transform: translateY(0);
}

.grid.reveal-visible .card:hover {
  transform: translateY(-3px);
}

/*
  Gestaffelte Einblendung ueber --i (wird in initScrollReveal() gesetzt).
  Vorher war die Staffelung als nth-child(1..5) fest verdrahtet und hoerte
  nach der fuenften Karte auf.
*/
.grid.reveal-visible .card {
  transition-delay: calc(var(--i, 0) * 45ms);
}

.grid.reveal-visible .card:hover {
  transition-delay: 0s;
}

/* ==========================================================================
   Bewegung reduzieren: ein zentraler Block fuer alle Animationen der Seite
   (vorher drei verstreute Blöcke fuer Reveal, Bokeh und Lageplan).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .grid .card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-bokeh span,
  .plan-exhibitor-card,
  .exhibitor-card,
  .stand-result-card,
  .fade-in {
    animation: none;
  }

  .plan-exhibitor-card,
  .exhibitor-card,
  .finder-row,
  .stand-finder input,
  .card,
  .btn {
    transition: none;
  }
}

.badge {
  display: inline-block;
  background: var(--color-accent-dark);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/*
  Nebentext, kein Warnkasten. Frueher war das ein gelber Hinweisblock; die
  Vorbehalte darin sind entfallen, uebrig sind nur noch nuetzliche oder
  rechtlich noetige Angaben. Die duennen Linien statt einer Farbflaeche halten
  sie ruhig, ohne sie zu verstecken.
*/
.note {
  border-left: 2px solid var(--color-border);
  padding: 0.1rem 0 0.1rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.note a {
  color: var(--color-primary);
}

/*
  Quellenangabe unter dem Plan und der Verbindlichkeitshinweis im geschuetzten
  Bereich: noch leiser, ganz ohne Linie. Die OpenStreetMap-Zeile ist Pflicht
  (ODbL) und darf nicht entfernt werden, soll aber nicht ins Auge stechen.
*/
.plan-source-note {
  border-left: 0;
  padding-left: 0;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Aussteller-Kartenraster (echte Beispieldaten REGA 2023) */
.exhibitor-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-top: 1.75rem;
}

.exhibitor-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
  animation: rega-card-in 0.35s ease both;
  animation-delay: calc(var(--i, 0) * 16ms);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.exhibitor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.plan-exhibitor-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.plan-exhibitor-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-accent);
}

/* Aussteller-Anmeldeformular */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem 1.4rem;
  margin-top: 1.75rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
}

.form-field .hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 0.95rem;
  color: var(--color-text);
  background: #fff;
}

.form-field textarea {
  resize: vertical;
  min-height: 90px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  grid-column: 1 / -1;
}

.checkbox-row input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--color-accent-dark);
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.form-actions .btn {
  margin-top: 0;
}

/* Anmelde-Modal (natives <dialog>) */
dialog.modal {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: 46rem;
  width: min(92vw, 46rem);
  max-height: 88vh;
  box-shadow: var(--shadow-md);
}

dialog.modal::backdrop {
  background: rgba(13, 63, 97, 0.55);
  backdrop-filter: blur(2px);
}

.modal-inner {
  padding: 2rem 2rem 2.25rem;
  overflow-y: auto;
  max-height: 88vh;
}

/*
  z-index, weil das Formular im Seiteninhalt steht: dort hat die Überschrift
  des Formulars position: relative (section.block h2) und lag sonst über dem
  X, der Klick kam nie an.
*/
.modal-close {
  position: sticky;
  z-index: 2;
  top: 0;
  float: right;
  margin: -0.5rem -0.5rem 0 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.modal-close:hover {
  background: var(--color-border);
}

.modal-inner h2 {
  padding-bottom: 0.75rem;
  margin-top: 0;
}

@media (max-width: 480px) {
  .modal-inner {
    padding: 1.5rem 1.25rem 1.75rem;
  }
}

/* --- Bildtafel (z. B. Parkplan Industriepark) ---------------------------- */
.plan-figure {
  margin: 0 0 1.75rem;
  max-width: 540px;
}

.plan-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.plan-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Footer */
footer.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 2rem;
  font-size: 0.92rem;
}

footer.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

footer.site-footer a:hover {
  color: #fff;
}

footer.site-footer .footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

footer.site-footer h4 {
  color: #fff;
  margin-top: 0;
  font-size: 1rem;
  font-family: var(--font-heading);
}

footer.site-footer .footer-bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}


/* ==========================================================================
   Ausstellerverzeichnis im geschuetzten Bereich

   Suchfeld zuerst: die Liste hat rund 260 Betriebe, gezeigt wird erst, was
   gesucht wird. Darum eine eigene Klassenfamilie member-* statt der alten
   directory-*: die war auf Stand-Nummern und Bereichsfilter gebaut, die diese
   Liste nicht hat.

   Im WordPress-Theme gelten dieselben Klassen, dort rendert das Template die
   Karten serverseitig.
   ========================================================================== */

.member-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1.25rem;
}

.member-search {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
}

.member-search svg {
  position: absolute;
  left: 0.85rem;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.member-search input {
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-base);
  font-size: 0.95rem;
  background: var(--color-bg);
  color: var(--color-text);
}

.member-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 110, 168, 0.15);
}

.member-branche-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.member-controls select {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 0.9rem;
  background: var(--color-bg);
  color: var(--color-text);
  max-width: 100%;
}

.member-controls select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.member-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Leeres Raster darf keinen Abstand erzeugen, sonst klafft eine Luecke,
   solange noch nicht gesucht wurde. */
.member-grid:empty {
  display: none;
}

.member-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.member-name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.member-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.member-link {
  font-size: 0.82rem;
  color: var(--color-primary);
  word-break: break-all;
}

.member-more {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
}

@media (max-width: 560px) {
  .member-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .member-branche-label {
    margin-bottom: -0.5rem;
  }
}

/* --- Gruppenfoto auf der Organisation-Seite ----------------------------- */
/*
  Eigene Klasse und nicht .plan-figure, weil das ein Portraitformat in
  Bildbreite ist und keine technische Zeichnung. Begrenzte Breite, damit ein
  Gruppenfoto auf einem grossen Bildschirm nicht die ganze Spalte einnimmt.
*/
.ok-figure {
  margin: 0 0 2.25rem;
  max-width: 820px;
}

.ok-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.ok-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Hinweis-Banner ueber dem Menue

   Aufbau: .site-top umschliesst Banner und Kopf und ist das sticky Element,
   damit die wechselnde Kopfhoehe keine Rolle spielt. Inhalt und Sichtbarkeit
   kommen aus der Konfiguration (statisch site-config.js, im Theme der
   Customizer), das Schliessen merkt sich der Browser.
   ========================================================================== */

.site-top {
  position: sticky;
  top: 0;
  /* Muss ueber .map-hint (500) und den Leaflet-Ebenen (bis 800) liegen. */
  z-index: 1000;
}

/*
  Angemeldet liegt oben die WordPress-Leiste (fest, 32 px, schmal 46 px).
  Ohne Versatz klebte der Hinweis-Banner darunter und war verdeckt. Unter
  600 px scrollt die Leiste mit, dort bleibt es bei 0.
*/
.admin-bar .site-top {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-top {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .site-top {
    top: 0;
  }
}

.rega-banner {
  background: var(--color-primary-dark);
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.45;
}

.rega-banner .container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.9rem;
  /* rechts Platz lassen, damit der Text nicht unter den Schliessen-Knopf laeuft */
  padding: 0.55rem 2.75rem;
}

.rega-banner-text {
  font-weight: 500;
}

.rega-banner-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.rega-banner-link:hover {
  text-decoration-thickness: 2px;
}

.rega-banner-close {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.rega-banner-close:hover,
.rega-banner-close:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 560px) {
  .rega-banner {
    font-size: 0.82rem;
  }

  .rega-banner .container {
    padding-left: 1rem;
    padding-right: 2.5rem;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ==========================================================================
   Ausstellungs-Reglement
   Eigenes Dokumentlayout: schmale Spalte, klare Nummerierung, Logo im Kopf.
   Das Druck-Stylesheet weiter unten macht daraus ueber "Drucken > Als PDF
   speichern" eine saubere PDF, ohne Navigation und ohne Farbflaechen.
   ========================================================================== */

.reglement {
  padding: 3rem 0 4.5rem;
  background: var(--color-bg-alt);
}

.reglement-sheet {
  max-width: 820px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 3rem 3.25rem 3.5rem;
}

.reglement-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 3px solid var(--color-primary);
}

.reglement-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--color-primary);
}

.reglement-logo-mark {
  color: var(--color-accent);
  flex: none;
}

.reglement-logo-word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--color-primary-dark);
}

.reglement-logo-word small {
  display: block;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.reglement-meta {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: right;
}

.reglement h1 {
  font-size: 2rem;
  margin: 1.75rem 0 0.5rem;
  color: var(--color-primary-dark);
}

.reglement .lead {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

.reglement-chapter {
  margin-top: 2.25rem;
}

.reglement-chapter h2 {
  font-size: 1.2rem;
  color: var(--color-primary);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.reglement-chapter h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-text);
}

.reglement-chapter p,
.reglement-chapter li {
  font-size: 0.95rem;
  line-height: 1.7;
}

.reglement-chapter ul {
  margin: 0.5rem 0 1rem 1.2rem;
  padding: 0;
}

.reglement-chapter li {
  margin-bottom: 0.4rem;
}

.reglement-address {
  border-left: 3px solid var(--color-accent);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1rem 0;
  line-height: 1.6;
}

/* Hinweis an den Auftraggeber: was er selbst noch ergaenzen muss. */
.reglement-todo {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.reglement-sign {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  line-height: 2.2;
}

.reglement-blank {
  display: inline-block;
  min-width: 11rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.reglement-print {
  margin: 0 0 1.5rem;
}

@media (max-width: 640px) {
  .reglement-sheet {
    padding: 1.75rem 1.25rem 2.25rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .reglement-meta {
    text-align: left;
  }

  .reglement h1 {
    font-size: 1.55rem;
  }
}

/* --- Druckansicht ------------------------------------------------------- */
@media print {
  /* Navigation, Fuss und Dekoration gehoeren nicht in ein gedrucktes Reglement. */
  .site-top,
  .site-header,
  .site-footer,
  .no-print,
  .hero-bokeh,
  .hero-wave,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .reglement {
    padding: 0;
    background: #fff;
  }

  .reglement-sheet {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  .reglement-head {
    border-bottom: 2px solid #000;
  }

  /* Das Logo soll auch gedruckt farbig bleiben, darum kein Schwarz erzwingen. */
  .reglement-logo,
  .reglement-logo-word,
  .reglement-logo-mark {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .reglement h1,
  .reglement-chapter h2,
  .reglement-chapter h3 {
    color: #000;
  }

  .reglement-chapter h2 {
    border-bottom: 1px solid #999;
  }

  .reglement-address {
    border-left: 2px solid #000;
  }

  /* Abschnitte nicht ueber Seitenumbrueche zerreissen. */
  .reglement-chapter {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .reglement-chapter h2,
  .reglement-chapter h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .reglement-chapter p,
  .reglement-chapter li {
    font-size: 10.5pt;
    line-height: 1.55;
    orphans: 3;
    widows: 3;
  }

  @page {
    margin: 18mm 16mm;
  }
}


/* ==========================================================================
   WordPress-spezifische Ergänzungen

   Regeln, die es im statischen Prototyp nicht geben kann, weil sie Markup
   betreffen, das erst WordPress erzeugt: das Custom-Logo, die Menü-Klasse für
   die aktive Seite, das eingebaute Passwortformular anstelle des selbstgebauten
   .gate, die Aussteller-Karten aus dem Beitragstyp und die Meldungen des
   Anmeldeformulars.
   ========================================================================== */

nav.main-nav .current-menu-item > a,
nav.main-nav a[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.exhibitor-card .exhibitor-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.exhibitor-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--color-primary);
}

.exhibitor-card .exhibitor-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.exhibitor-card .badge-lehrbetrieb {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-top: 0.4rem;
}

.form-message {
  grid-column: 1 / -1;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.form-message.success {
  background: #eaf6e3;
  border: 1px solid #bfe3ab;
  color: var(--color-accent-dark);
}

.form-message.error {
  background: #fdecea;
  border: 1px solid #f3b8b2;
  color: #b3261e;
}

.gate p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Formular von WordPress, umgebaut in rega_password_form() */
.post-password-form {
  margin-top: 1.25rem;
}

.post-password-form p {
  margin: 0;
}

.post-password-form input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.85rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-base);
  color: var(--color-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.post-password-form input[type="password"]:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(74, 144, 196, 0.2);
}

.post-password-form .btn {
  width: 100%;
  justify-content: center;
}

.post-password-form input[type="password"]:hover {
  border-color: var(--color-primary-light);
}

.post-password-form .btn:active {
  transform: translateY(1px);
}

/* Nur fuer Screenreader, sichtbar ausgeblendet */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


@media (prefers-reduced-motion: reduce) {
  .post-password-form input[type="password"] {
    animation: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * Karte: Knopf "Zum Standort"
 *
 * Er sitzt IN der Karte und erscheint nur, wenn der Marker aus dem Bild
 * gewandert ist. Zuvor liess sich die Karte so weit hinauszoomen und
 * wegschieben, dass der Standort nicht mehr auffindbar war; der Knopf unter
 * der Karte half nicht, weil er ausserhalb des Blickfelds liegt.
 *
 * Nicht display:none, sondern durchsichtig und nicht anklickbar: so lässt
 * sich das Erscheinen weich überblenden, statt zu springen.
 * ------------------------------------------------------------------ */
.map-recenter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.map-recenter.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.map-recenter svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.map-recenter:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.map-recenter:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Auf schmalen Geräten ist der Platz knapp, das Symbol trägt die Aussage. */
@media (max-width: 480px) {
  .map-recenter span { display: none; }
  .map-recenter { padding: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .map-recenter { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Partner-Leiste mit echtem Logo
 *
 * Der Kasten hat eine feste Groesse, damit die Leiste ruhig bleibt, egal wie
 * unterschiedlich die gelieferten Logos sind. Das Bild passt sich ein und wird
 * nie verzerrt: object-fit: contain laesst lieber Rand als falsche
 * Seitenverhaeltnisse.
 * ------------------------------------------------------------------ */
.partner-logo.hat-bild {
  background: #fff;
  padding: 0.5rem;
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.partner-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Ein verlinktes Logo darf sich beim Darueberfahren zeigen, aber dezent. */
.partner-logo a:hover img {
  opacity: 0.75;
}

.partner-logo a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Sprungmarken der Aussteller-Seite: nicht unter der klebenden Kopfzeile landen. */
#anmeldung,
.rega-bereich-anker {
  scroll-margin-top: 6rem;
}

/* Termine-Tabelle als Tabellenblock im Editor: Rahmen und Abstände des Blocks zurücknehmen. */
.wp-block-table.info-table {
  margin: 0;
}

.wp-block-table.info-table thead {
  border-bottom: 0;
}

.wp-block-table.info-table th,
.wp-block-table.info-table td {
  border: 0;
  border-bottom: 1px solid var(--color-border);
}

/* Block-Stil "Kachel" aus dem Seiten-Editor, gleich wie .card. */
.is-style-rega-kachel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.is-style-rega-kachel h3 {
  margin-top: 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.is-style-rega-kachel p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Kacheln nebeneinander mit dem Block "Spalten", Abstände wie .grid. */
section.block .wp-block-columns {
  gap: 1.5rem;
  margin-top: 2.25rem;
  margin-bottom: 0;
}

.is-style-rega-kachel {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.is-style-rega-kachel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Symbol oben in einer Kachel: Bildblock mit der Klasse rega-symbol. */
.wp-block-image.rega-symbol {
  margin: 0 0 1rem;
}

.wp-block-image.rega-symbol img {
  width: 46px;
  height: 46px;
  display: block;
}

/* Intro der Startseite (Block "ARGA Intro"), blendet nach --rega-intro-dauer aus. */
.rega-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: #fff;
  cursor: pointer;
  background: radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.12), transparent 35%),
    linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-accent) 100%);
  animation: rega-intro-aus 0.8s ease var(--rega-intro-dauer, 3s) forwards;
}

.rega-intro-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  animation: rega-intro-ein 0.9s ease both;
}

.rega-intro-logo {
  width: min(320px, 70vw);
  height: auto;
}

.rega-intro-sub {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.rega-intro-datum {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  margin-top: 0.4rem;
}

.rega-intro.rega-intro-weg {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

@keyframes rega-intro-ein {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes rega-intro-aus {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .rega-intro {
    animation-delay: 1s;
    animation-duration: 0.01s;
  }
  .rega-intro-inhalt {
    animation: none;
  }
}

/* Knöpfe aus dem Seiten-Editor (Block "Buttons"), gleich wie .btn. */
section.block .wp-block-buttons {
  margin-top: 1.85rem;
}

section.block .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  background: var(--color-accent-dark);
  color: #fff;
  border: 1px solid var(--color-accent-dark);
  box-shadow: 0 8px 18px -8px rgba(90, 166, 46, 0.55);
  transition: transform 0.15s ease, filter 0.15s ease;
}

section.block .wp-block-button__link:hover {
  text-decoration: none;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Stil "Kontur": umrandet in der Hauptfarbe, wie der Knopf der Ausstellerzeitung. */
section.block .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: none;
}

/* Bild oben in einer Kachel (Highlights), bündig wie .card-vignette. */
.is-style-rega-kachel > .wp-block-image.rega-vignette:first-child {
  margin: -1.75rem -1.75rem 1.1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.wp-block-image.rega-vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.is-style-rega-kachel ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}

/* Einzelne Kachel, nicht über die ganze Breite (Kinderbetreuung). */
.rega-schmal {
  max-width: 28rem;
  margin-top: 1rem;
}

/* Abstand zwischen Kacheln und Karte, wie bisher. */
section.block .wp-block-columns + .map-embed {
  margin-top: 2rem;
}

/* ==========================================================================
   Startbild und Intro als Rahmen mit normalen Blöcken (ab 1.2.0)
   Gleiches Aussehen wie die früheren festen Felder.
   ========================================================================== */

.hero .wp-block-image.hero-logo-bild {
  margin: 0 0 0.55rem;
}

.hero .wp-block-image.hero-logo-bild img {
  display: block;
  height: 68px;
  width: auto;
}

.hero p.hero-logo-sub {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.5rem;
}

.hero p.eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 1.1rem;
}

.hero p.eyebrow.has-text-align-center,
.hero .wp-block-image.aligncenter img {
  margin-left: auto;
  margin-right: auto;
}

.hero .wp-block-columns.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 2.25rem 0 0;
}

.hero .wp-block-columns.hero-facts > .wp-block-column.hero-fact {
  flex: 0 0 auto;
  flex-basis: auto;
  width: auto;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  min-width: 180px;
  backdrop-filter: blur(3px);
}

.hero .wp-block-column.hero-fact > p {
  margin: 0;
  max-width: none;
}

.hero .wp-block-column.hero-fact > p.label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}

.hero .wp-block-column.hero-fact > p.value {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: #fff;
}

.hero .wp-block-buttons {
  margin-top: 1.85rem;
  gap: 0.75rem;
}

.hero .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  background: var(--color-accent-dark);
  color: #fff;
  border: 1px solid var(--color-accent-dark);
  box-shadow: 0 8px 18px -8px rgba(90, 166, 46, 0.55);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.hero .wp-block-button__link:hover {
  text-decoration: none;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.hero .wp-block-button.is-style-outline .wp-block-button__link {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: none;
}

@media (max-width: 480px) {
  .hero .wp-block-image.hero-logo-bild img {
    height: 51px;
  }
}

/* Intro: Blöcke darin untereinander, mittig */
.rega-intro-inhalt > * {
  margin: 0;
}

.rega-intro .wp-block-image.rega-intro-logo img {
  display: block;
  width: min(320px, 70vw);
  height: auto;
  margin: 0 auto;
}

.rega-intro p.rega-intro-sub {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.rega-intro p.rega-intro-datum {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  margin-top: 0.4rem;
}

.rega-intro h1,
.rega-intro h2,
.rega-intro h3 {
  color: #fff;
  margin: 0;
}

/* ==========================================================================
   Weitere Rahmen mit Blöcken (ab 1.3.0): Kopfzeile, Banner, Fusszeile,
   Seitenkopf, Kennzahlen, Partnerleiste, Passwortfeld. Gleiches Aussehen.
   ========================================================================== */

/* Kopfzeile: Logo-Bild und Zeile daneben */
.brand > * {
  margin: 0;
}

.brand .wp-block-image.brand-logo img {
  display: block;
  height: 42px;
  width: auto;
}

.brand .wp-block-image.brand-logo {
  height: auto;
}

.brand p.brand-sub {
  max-width: 9rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--color-border);
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .brand .wp-block-image.brand-logo img {
    height: 34px;
  }
}

/* Banner: Absätze darin, Links unterstrichen */
.rega-banner-text p {
  display: inline;
  margin: 0;
}

.rega-banner-text p + p::before {
  content: " ";
}

.rega-banner-text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fusszeile: Spalten mit Überschriften, unten Copyright und Rechtliches */
footer.site-footer .wp-block-columns.footer-grid {
  margin: 0;
}

footer.site-footer .footer-grid > .wp-block-column > * {
  margin-top: 0;
}

footer.site-footer .footer-grid > .wp-block-column > p + p {
  margin-top: 0.35rem;
}

footer.site-footer p.fuss-notiz {
  font-size: 0.78rem;
  opacity: 0.7;
}

footer.site-footer .footer-bottom.wp-block-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
}

footer.site-footer .footer-bottom > p {
  margin: 0;
}

footer.site-footer .footer-bottom > p.rega-rechtliches::before {
  content: "· ";
}

/* Seitenkopf: leere Überschrift einer neuen Seite nicht anzeigen */
.hero h1:empty,
.hero p:empty {
  display: none;
}

/* Kennzahlen: je Gruppe "stat" eine Zahl und eine Beschriftung */
.stats-strip > .wp-block-group.stat > p {
  margin: 0;
}

.stats-strip > .wp-block-group.stat > p.stat-num,
.stats-strip > .wp-block-group.stat > p.stat-label {
  display: block;
}

/* Partnerleiste: Logos als Bilder in der Gruppe "partner-logos" */
.partner-strip > p.strip-label {
  margin-top: 0;
}

.partner-logos.wp-block-group > * {
  margin: 0;
}

.partner-logo.wp-block-image img {
  display: block;
}

/* Passwortfeld: Blöcke im Kasten */
.gate h2 {
  margin-top: 0;
}

.gate p.lead {
  margin: 0 auto;
}

.gate p.note {
  margin-top: 1.5rem;
}

/* Abstände in Kennzahlen und Logo wie bisher (Blockabstände von WordPress zurücknehmen). */
section.block .stats-strip > .wp-block-group.stat > p.stat-num,
section.block .stats-strip > .wp-block-group.stat > p.stat-label {
  margin: 0;
}

section.block .stats-strip > .wp-block-group.stat > p.stat-label {
  margin-top: 0.35rem;
}

.brand .wp-block-image.brand-logo a {
  display: block;
}

/*
  Klassische Themes: WordPress legt in jede Gruppe einen inneren Behälter
  (.wp-block-group__inner-container). Die Regeln gelten darum für Nachfahren,
  und Reihen (Logos, Zeile unten in der Fusszeile) liegen auf diesem Behälter.
*/
section.block .stats-strip .wp-block-group.stat p.stat-num,
section.block .stats-strip .wp-block-group.stat p.stat-label {
  margin: 0;
}

section.block .stats-strip .wp-block-group.stat p.stat-label {
  margin-top: 0.35rem;
}

.partner-logos.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.partner-logos .wp-block-group__inner-container > * {
  margin: 0;
}

footer.site-footer .footer-bottom.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
}

footer.site-footer .footer-bottom p {
  margin: 0;
}

footer.site-footer .footer-bottom p.rega-rechtliches::before {
  content: "· ";
}

/* Beschreibung eines Betriebs im Ausstellerverzeichnis */
.member-text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text);
}