/* ==========================================================================
   AL60 Design System V2 — Design Tokens & Base Styles
   Zielgruppe: 60+  |  Loaded after style.css via enqueue.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --al60-bg:           #F1EEE6;
  --al60-surface:      #FFFFFF;
  --al60-surface-soft: #DFE9E4;

  /* Text */
  --al60-text:         #17211D;
  --al60-text-muted:   #36443E;

  /* Primary — Customizer-Inline-CSS überschreibt diese Defaults direkt */
  --al60-primary:      #1F6A55;
  --al60-primary-dark: #123F35;
  --al60-primary-soft: #DCEBE4;

  /* Accent (Ocker) */
  --al60-accent:       #965307;
  --al60-accent-soft:  #F3E1C8;

  /* UI */
  --al60-border:       #827C72;
  --al60-focus:        #FFD400;

  /* Radien */
  --al60-radius-sm:    10px;
  --al60-radius-md:    14px;
  --al60-radius-lg:    20px;

  /* Schatten */
  --al60-shadow-soft:  0 6px 18px rgba(0, 0, 0, 0.06);

  /* Layout */
  --al60-container:    1120px;

  /* Typografie */
  --al60-font:         'Segoe UI', Arial, Helvetica, sans-serif;
  --al60-font-size:    19px;
  --al60-line-height:  1.75;
  --al60-font-size-sm: 17px;
  --al60-font-size-lg: 22px;
  --al60-font-size-xl: 28px;
  --al60-font-size-2xl: 36px;

  /* Abstände */
  --al60-space-xs:  0.5rem;
  --al60-space-sm:  1rem;
  --al60-space-md:  1.5rem;
  --al60-space-lg:  2.5rem;
  --al60-space-xl:  4rem;

  /* Minimum Klickfläche */
  --al60-tap-min:  48px;
}

/* --------------------------------------------------------------------------
   02. GLOBAL BASE
   -------------------------------------------------------------------------- */
body {
  background-color: var(--al60-bg);
  color: var(--al60-text);
  font-family: var(--al60-font);
  font-size: var(--al60-font-size);
  line-height: var(--al60-line-height);
}

/* Normal content pages use the same warm background as event/course areas. */
body.page:not(.home):not(.front-page) .site-main,
body.page:not(.home):not(.front-page) .content-area {
  background: var(--al60-bg);
}

/* --------------------------------------------------------------------------
   03. TYPOGRAFIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--al60-text);
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: var(--al60-font-size-2xl); }
h2 { font-size: var(--al60-font-size-xl); }
h3 { font-size: var(--al60-font-size-lg); }

p, li {
  font-size: var(--al60-font-size);
  color: var(--al60-text);
}

.text-muted {
  color: var(--al60-text-muted);
  font-size: var(--al60-font-size-sm);
}

/* --------------------------------------------------------------------------
   04. FOKUS
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--al60-focus);
  outline-offset: 4px;
  border-radius: var(--al60-radius-sm);
}

/* --------------------------------------------------------------------------
   05. BUTTONS
   -------------------------------------------------------------------------- */
.btn,
.button,
a.btn,
a.button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--al60-tap-min);
  padding: 0.75rem 1.75rem;
  font-size: var(--al60-font-size);
  font-weight: 600;
  border-radius: var(--al60-radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  line-height: 1.2;
}

/* Primary Button */
.btn-primary,
.button-primary {
  background: var(--al60-primary);
  color: #fff;
  border-color: var(--al60-primary);
}

.btn-primary:hover,
.button-primary:hover {
  background: var(--al60-primary-dark);
  border-color: var(--al60-primary-dark);
  color: #fff;
}

/* Outline Button */
.btn-outline {
  background: transparent;
  color: var(--al60-primary);
  border-color: var(--al60-primary);
}

.btn-outline:hover {
  background: var(--al60-primary-soft);
}

/* Start page "Tipps & Tricks" more button: keep hover contrast readable. */
.al60-news-more-btn,
a.al60-news-more-btn {
  background: #fff;
  color: var(--al60-primary-dark);
  border-color: var(--al60-primary);
}

.al60-news-more-btn:hover,
.al60-news-more-btn:focus-visible,
a.al60-news-more-btn:hover,
a.al60-news-more-btn:focus-visible {
  background: var(--al60-primary-dark);
  color: #fff;
  border-color: var(--al60-primary-dark);
}

/* Accent Button */
.btn-accent {
  background: var(--al60-accent);
  color: #fff;
  border-color: var(--al60-accent);
}

/* --------------------------------------------------------------------------
   06. KARTEN
   -------------------------------------------------------------------------- */
.card,
.event-card,
.post-card {
  background: var(--al60-surface);
  border: 1px solid var(--al60-border);
  border-radius: var(--al60-radius-lg);
  box-shadow: var(--al60-shadow-soft);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover,
.event-card:hover,
.post-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
}

.card-body {
  padding: var(--al60-space-md);
}

.card-title {
  font-size: var(--al60-font-size-lg);
  font-weight: 700;
  color: var(--al60-text);
  margin-bottom: var(--al60-space-xs);
}

.card-meta {
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text-muted);
}

/* --------------------------------------------------------------------------
   07. LINKS
   -------------------------------------------------------------------------- */
a {
  color: var(--al60-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--al60-primary-dark);
}

/* --------------------------------------------------------------------------
   08. FORMULARFELDER
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
  min-height: var(--al60-tap-min);
  padding: 0.65rem 1rem;
  font-size: var(--al60-font-size);
  border: 2px solid var(--al60-border);
  border-radius: var(--al60-radius-md);
  background: var(--al60-surface);
  color: var(--al60-text);
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--al60-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
}

/* --------------------------------------------------------------------------
   09. LAYOUT-HILFSMITTEL
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--al60-container);
  margin-inline: auto;
  padding-inline: var(--al60-space-md);
}

/* --------------------------------------------------------------------------
   10. SURFACE-VARIANTEN
   -------------------------------------------------------------------------- */
.surface-soft {
  background: var(--al60-surface-soft);
  border-radius: var(--al60-radius-lg);
  padding: var(--al60-space-md);
}

.surface-primary {
  background: var(--al60-primary);
  color: #fff;
  border-radius: var(--al60-radius-lg);
  padding: var(--al60-space-md);
}

.surface-accent {
  background: var(--al60-accent-soft);
  border-radius: var(--al60-radius-lg);
  padding: var(--al60-space-md);
}

/* ==========================================================================
   11. HEADER
   ========================================================================== */
.site-header {
  background: var(--al60-surface);
  border-bottom: 2px solid var(--al60-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}

/* Branding */
.site-branding a {
  text-decoration: none;
  color: var(--al60-text);
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--al60-primary);
  line-height: 1.2;
  margin: 0;
}

.site-tagline {
  font-size: 0.88rem;
  color: var(--al60-text-muted);
  margin: 0.15rem 0 0;
}

.site-branding .custom-logo {
  max-height: 60px;
  width: auto;
}

/* ==========================================================================
   12. NAVIGATION
   ========================================================================== */
.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  /* overflow must NOT be hidden – clips dropdowns */
  overflow: visible;
}

/* Top-level items are positioning anchors for dropdowns */
.main-nav > ul > li {
  position: relative;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--al60-text);
  text-decoration: none;
  border-radius: var(--al60-radius-sm);
  transition: background 0.18s ease, color 0.18s ease;
  line-height: 1.2;
}

.main-nav a:hover {
  background: var(--al60-primary-soft);
  color: var(--al60-primary-dark);
}

:focus-visible {
  outline: 3px solid var(--al60-focus);
  outline-offset: 3px;
}

.main-nav .current-menu-item > a,
.main-nav .current-page-ancestor > a {
  background: var(--al60-primary);
  color: #fff;
}

.main-nav .current-menu-item > a:hover,
.main-nav .current-page-ancestor > a:hover {
  background: var(--al60-primary-dark);
  color: #fff;
}

/* Submenü — Desktop Dropdown */
.main-nav .sub-menu {
  display: none;                         /* hidden by default */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  flex-direction: column;
  background: var(--al60-surface);
  border: 1px solid var(--al60-border);
  border-radius: var(--al60-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.4rem;
  min-width: 220px;
  gap: 0.1rem;
}

/* Show on hover or keyboard focus */
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
  display: flex;
}

.main-nav .sub-menu a {
  font-size: 17px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--al60-radius-sm);
  padding: 0.5rem 0.85rem;
  width: 100%;
}

/* ==========================================================================
   13. MOBILE NAVIGATION
   ========================================================================== */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0.65rem 1.1rem;
  background: var(--al60-primary);
  color: #fff;
  border: none;
  border-radius: var(--al60-radius-md);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.18s ease;
}

.nav-toggle:hover {
  background: var(--al60-primary-dark);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
  }

  .main-nav {
    width: 100%;
    order: 3;
  }

  .site-header .container {
    flex-wrap: wrap;
  }

  /* Hidden by default, shown when JS adds .is-open */
  .main-nav > ul {
    display: none;
  }

  .main-nav > ul.is-open {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--al60-primary-dark);
    border: 2px solid var(--al60-primary-dark);
    border-radius: var(--al60-radius-lg);
    padding: 0.75rem;
    margin-top: 0.5rem;
    box-shadow: var(--al60-shadow-soft);
    /* Im Viewport scrollbar, statt vom Content verdeckt zu werden */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav a {
    width: 100%;
    min-height: 52px;
    font-size: 18px;
    padding: 0.85rem 1.1rem;
  }

  /* Helle, gut lesbare Links auf dunkler Menüfläche */
  .main-nav > ul.is-open a {
    color: #fff;
  }

  .main-nav > ul.is-open a:hover,
  .main-nav > ul.is-open a:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  .main-nav > ul.is-open .current-menu-item > a,
  .main-nav > ul.is-open .current-page-ancestor > a {
    background: var(--al60-accent);
    color: #fff;
  }

  .main-nav .sub-menu {
    display: flex;               /* always visible on mobile (inside is-open menu) */
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0.2rem 0 0.2rem 1rem;   /* klar eingerückt */
    margin-left: 0.4rem;
    background: rgba(0, 0, 0, 0.18);
    border-left: 3px solid var(--al60-accent);
    border-radius: var(--al60-radius-sm);
  }

  .main-nav .sub-menu a {
    font-size: 17px;
    min-height: 46px;
  }
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--al60-surface-soft);
  border-top: 2px solid var(--al60-border);
  color: var(--al60-text);
  padding: 3rem 0 1.5rem;
  font-size: var(--al60-font-size-sm);
}

.footer-col-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--al60-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--al60-primary-soft);
}

.footer-col a {
  color: var(--al60-text-muted);
  text-decoration: none;
  font-size: var(--al60-font-size-sm);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: color 0.18s ease;
}

.footer-col a:hover {
  color: var(--al60-primary);
  text-decoration: underline;
}

.footer-col p {
  color: var(--al60-text-muted);
  font-size: var(--al60-font-size-sm);
  line-height: 1.65;
  margin: 0 0 0.5rem;
}

.footer-col ul {
  gap: 0.3rem;
}

.footer-copy {
  font-size: 15px;
  color: var(--al60-text-muted);
  border-top: 1px solid var(--al60-border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  text-align: center;
}

/* ==========================================================================
   15. HERO — STARTSEITE
   ========================================================================== */
.hero-portal {
  background: linear-gradient(150deg, var(--al60-primary-dark) 0%, var(--al60-primary) 60%, #2A715F 100%);
  color: #fff;
  padding: 5rem 0 4.5rem;
  text-align: center;
}

.hero-portal h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  max-width: 820px;
  margin-inline: auto;
}

.hero-portal p {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

.hero-portal .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.hero-portal .btn {
  min-height: 54px;
  padding: 0.9rem 2.2rem;
  font-size: 18px;
  border-radius: var(--al60-radius-md);
}

.hero-portal .btn-primary {
  background: #fff;
  color: var(--al60-primary-dark);
  border-color: #fff;
  font-weight: 700;
}

.hero-portal .btn-primary:hover {
  background: var(--al60-accent-soft);
  border-color: var(--al60-accent-soft);
  color: var(--al60-primary-dark);
}

.hero-portal .btn-outline {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.hero-portal .btn-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border-color: #fff;
}

/* Wenn Hero-Bild gesetzt: Overlay stärken */
.hero-portal--has-image {
  background-size: cover;
  background-position: center;
}

@media (max-width: 640px) {
  .hero-portal {
    padding: 3.5rem 0 3rem;
  }

  .hero-portal .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-portal .btn {
    width: 100%;
    max-width: 340px;
  }
}

/* ==========================================================================
   16. PORTAL-KARTEN (Schnellzugriffe)
   ========================================================================== */
.section-white { background: var(--al60-surface); }
.section-light  { background: var(--al60-surface-soft); }
.section-alt    { background: var(--al60-bg); }

.section {
  padding: 3.5rem 0;
}

.section-title {
  font-size: var(--al60-font-size-xl);
  font-weight: 700;
  color: var(--al60-text);
  margin-bottom: 1.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--al60-primary-soft);
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .portal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .portal-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.portal-card {
  background: var(--al60-surface);
  border: 2px solid var(--al60-border);
  border-radius: var(--al60-radius-lg);
  padding: 2rem 1.25rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--al60-text);
  box-shadow: var(--al60-shadow-soft);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.portal-card:hover,
.portal-card:focus-visible {
  border-color: var(--al60-primary);
  box-shadow: 0 8px 24px rgba(31, 111, 91, 0.14);
  transform: translateY(-3px);
  color: var(--al60-text);
}

.portal-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.portal-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--al60-text);
  line-height: 1.25;
}

.portal-card-desc {
  font-size: 15px;
  color: var(--al60-text-muted);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .portal-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
  }

  .portal-card {
    padding: 1.5rem 0.85rem 1.25rem;
  }

  .portal-card-icon {
    width: 60px;
    height: 60px;
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   17. EVENT-KARTEN
   ========================================================================== */

/* Datum + Kategorie in einer Zeile */
.event-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

/* Datum-Badge: grün, gut lesbar */
.card-date-badge {
  background: var(--al60-primary);
  color: #fff;
  border-radius: var(--al60-radius-sm);
  padding: 0.35rem 0.65rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  line-height: 1.1;
  flex-shrink: 0;
}

.card-date-badge .badge-day {
  font-size: 1.4rem;
  font-weight: 800;
  display: block;
}

.card-date-badge .badge-month {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Kategorie-Badge: dezenter Ocker-Ton */
.event-category-badge {
  background: var(--al60-accent-soft);
  color: var(--al60-accent);
  border: 1px solid rgba(139, 79, 11, 0.45);
  border-radius: 99px;
  padding: 0.2rem 0.75rem;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Kartentitel */
.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--al60-text);
  line-height: 1.3;
  margin: 0 0 0.4rem;
}

.card-title a {
  color: var(--al60-text);
  text-decoration: none;
}

.card-title a:hover {
  color: var(--al60-primary);
}

/* Ort */
.event-location {
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text-muted);
  margin: 0 0 0.3rem;
  font-weight: 500;
}

.event-location-name {
  font-weight: 600;
  color: var(--al60-text);
}

/* Uhrzeit */
.event-time {
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text-muted);
  margin: 0 0 0.5rem;
}

/* Excerpt: 2 Zeilen */
.card-excerpt {
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text-muted);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card-Footer: prominenter CTA */
.card-footer {
  padding: 1rem 1.25rem 1.5rem;
  background: var(--al60-surface-soft);
  border-top: 1px solid var(--al60-border);
  text-align: center;
}

.card-footer .btn {
  min-height: 48px;
  font-size: var(--al60-font-size-sm);
  width: 100%;
  max-width: 260px;
}

/* Karte selbst */
.card {
  border-radius: var(--al60-radius-lg);
  border: 1px solid var(--al60-border);
  box-shadow: var(--al60-shadow-soft);
  background: var(--al60-surface);
}

.card:hover {
  border-color: var(--al60-primary);
  box-shadow: 0 10px 28px rgba(31, 111, 91, 0.1);
  transform: translateY(-2px);
}

/* ==========================================================================
   18. ARCHIV-HEADER & LEERZUSTAND
   ========================================================================== */
.archive-wrap {
  padding: 2rem 0 3.5rem;
  background: var(--al60-bg);
}

.archive-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.archive-title {
  font-size: var(--al60-font-size-xl);
  font-weight: 700;
  color: var(--al60-text);
  margin: 0;
}

.archive-count {
  font-size: 15px;
  color: var(--al60-text-muted);
  background: var(--al60-primary-soft);
  border-radius: 99px;
  padding: 0.2rem 0.85rem;
  font-weight: 600;
}

/* Leerzustand */
.empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--al60-surface);
  border-radius: var(--al60-radius-lg);
  border: 1px solid var(--al60-border);
}

.empty-state-icon {
  display: block;
  font-size: 3.5rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.empty-state h2 {
  font-size: var(--al60-font-size-xl);
  color: var(--al60-text);
  margin-bottom: 0.75rem;
}

.empty-state p {
  font-size: var(--al60-font-size);
  color: var(--al60-text-muted);
  max-width: 520px;
  margin: 0 auto 1.75rem;
  line-height: 1.65;
}

/* ==========================================================================
   19. FILTER-BAR
   ========================================================================== */
.filter-bar {
  background: var(--al60-surface);
  border-bottom: 2px solid var(--al60-border);
  padding: 1.25rem 0;
  position: sticky;
  top: 72px; /* unterhalb sticky header */
  z-index: 90;
}

.filter-bar .container {
  display: block;
}

.filter-label {
  font-size: var(--al60-font-size-sm);
  font-weight: 700;
  color: var(--al60-text);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
  display: block;
}

.filter-select {
  min-height: 52px;
  font-size: var(--al60-font-size-sm);
  border: 2px solid var(--al60-border);
  border-radius: var(--al60-radius-md);
  background: var(--al60-surface);
  color: var(--al60-text);
  padding: 0.65rem 1rem;
  width: 100%;
  transition: border-color 0.18s ease;
}

.filter-select:focus {
  border-color: var(--al60-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.18);
}

.filter-group--submit {
  align-items: flex-end;
}

.filter-bar .btn {
  min-height: 52px;
  font-size: var(--al60-font-size-sm);
  border-radius: var(--al60-radius-md);
}

.filter-bar .btn-primary {
  background: var(--al60-primary);
  border-color: var(--al60-primary);
  color: #fff;
}

.filter-bar .btn-primary:hover {
  background: var(--al60-primary-dark);
  border-color: var(--al60-primary-dark);
}

.filter-bar .btn-outline {
  color: var(--al60-primary);
  border-color: var(--al60-primary);
  background: transparent;
}

.filter-bar .btn-outline:hover {
  background: var(--al60-primary-soft);
}

@media (max-width: 768px) {
  .filter-bar {
    position: static;
    top: auto;
  }

  .filter-group--submit {
    width: 100%;
  }
}

/* ==========================================================================
   20. EVENT-DETAILSEITE
   ========================================================================== */

/* Zurück-Link Bar */
.event-breadcrumb {
  background: var(--al60-surface-soft);
  border-bottom: 1px solid var(--al60-border);
  padding: 0.85rem 0;
}

.event-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: var(--al60-font-size-sm);
  font-weight: 600;
  color: var(--al60-primary);
  text-decoration: none;
  border-radius: var(--al60-radius-sm);
  padding: 0.3rem 0.6rem;
  transition: background 0.18s ease;
}

.event-back-link:hover {
  background: var(--al60-primary-soft);
  color: var(--al60-primary-dark);
}

/* Hero-Bild */
.event-hero-image {
  padding: 1.75rem 0 0;
}

.event-hero-image img {
  width: 100%;
  max-width: 760px;
  display: block;
  margin-inline: auto;
  border-radius: var(--al60-radius-lg);
  height: auto;
}

/* Seitentitel */
.entry-header h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--al60-text);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Infobox (Wann? Wo? etc.) */
.event-info-dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.event-info-group {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--al60-border);
}

.event-info-group:last-child {
  border-bottom: none;
}

.event-info-group dt {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--al60-text-muted);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.event-info-icon {
  font-style: normal;
  font-size: 1rem;
}

.event-info-group--when dt { color: var(--al60-primary); }
.event-info-group--where dt { color: var(--al60-primary); }

.event-info-group dd {
  margin: 0;
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text);
  line-height: 1.6;
}

.event-info-group--when dd {
  font-size: var(--al60-font-size);
  font-weight: 600;
}

/* Widgets */
.widget {
  background: var(--al60-surface);
  border: 1px solid var(--al60-border);
  border-radius: var(--al60-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--al60-shadow-soft);
}

.widget-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--al60-text);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--al60-primary-soft);
}

/* Action-Widgets: Anmeldung, Teilen */
.event-widget-text {
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text-muted);
  margin-bottom: 1rem;
  line-height: 1.55;
}

.event-widget-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: var(--al60-font-size-sm);
  margin-bottom: 0.65rem;
}

.event-widget-btn:last-child {
  margin-bottom: 0;
}

.event-widget-action .event-widget-btn.btn-primary {
  background: var(--al60-primary);
  border-color: var(--al60-primary);
}

.event-widget-action .event-widget-btn.btn-primary:hover {
  background: var(--al60-primary-dark);
  border-color: var(--al60-primary-dark);
}

.event-widget-share .btn-outline {
  color: var(--al60-primary);
  border-color: var(--al60-primary);
}

.event-widget-share .btn-outline:hover {
  background: var(--al60-primary-soft);
}

/* Entry-Content lesbar für 60+ */
.entry-content {
  font-size: var(--al60-font-size);
  line-height: var(--al60-line-height);
  color: var(--al60-text);
  max-width: 72ch;
}

.entry-content p,
.entry-content li {
  font-size: var(--al60-font-size);
  margin-bottom: 1rem;
}

.entry-content h2 {
  font-size: var(--al60-font-size-xl);
  margin-top: 2rem;
  color: var(--al60-text);
}

.entry-content h3 {
  font-size: var(--al60-font-size-lg);
  margin-top: 1.5rem;
  color: var(--al60-text);
}

/* V3-F-006: Portal-Editor-Inhalt (Digitale Hilfe, Reisen) – volle Containerbreite.
   Behält die lesbare 60+ Typografie, lässt Editor-HTML/Blöcke aber breit darstellen. */
.portal-editor-content {
  font-size: var(--al60-font-size);
  line-height: var(--al60-line-height);
  color: var(--al60-text);
  max-width: var(--al60-container);
}

.portal-editor-content > * {
  max-width: none;
}

.portal-editor-content p,
.portal-editor-content li {
  font-size: var(--al60-font-size);
  margin-bottom: 1rem;
  max-width: 72ch;
}

.portal-editor-content h2 {
  font-size: var(--al60-font-size-xl);
  margin-top: 2rem;
  color: var(--al60-text);
}

.portal-editor-content h3 {
  font-size: var(--al60-font-size-lg);
  margin-top: 1.5rem;
  color: var(--al60-text);
}

.portal-editor-content .wp-block-columns,
.portal-editor-content .wp-block-group,
.portal-editor-content .wp-block-html,
.portal-editor-content .wp-block-query,
.portal-editor-content .wp-block-post-template {
  max-width: none;
}

@media (max-width: 768px) {
  .event-hero-image {
    padding: 1rem 0 0;
  }

  .entry-header h1 {
    font-size: 1.7rem;
  }
}

/* ==========================================================================
   21. PAGE-TITLE-BAR (global)
   ========================================================================== */
.page-title-bar {
  background: var(--al60-surface-soft);
  border-bottom: 2px solid var(--al60-border);
  padding: 2rem 0 1.75rem;
  margin-bottom: 0;
}

.page-title-bar h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--al60-text);
  margin: 0 0 0.4rem;
}

.page-title-sub {
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   22. ARZTFINDER — DIR-CARDS
   ========================================================================== */
.directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .directory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .directory-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dir-card {
  background: var(--al60-surface);
  border: 1px solid var(--al60-border);
  border-radius: var(--al60-radius-lg);
  box-shadow: var(--al60-shadow-soft);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dir-card:hover {
  border-color: var(--al60-primary);
  box-shadow: 0 8px 24px rgba(31, 111, 91, 0.1);
  transform: translateY(-2px);
}

.dir-card-avatar {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.dir-card-name {
  font-size: var(--al60-font-size-lg);
  font-weight: 700;
  color: var(--al60-text);
  margin: 0;
  line-height: 1.25;
}

.dir-card-specialty {
  font-size: var(--al60-font-size-sm);
  color: var(--al60-primary);
  font-weight: 600;
  margin: 0;
}

.dir-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: var(--al60-font-size-sm);
  color: var(--al60-text-muted);
}

.dir-card-meta a {
  color: var(--al60-primary);
  text-decoration: none;
  font-weight: 600;
}

.dir-card-meta a:hover {
  text-decoration: underline;
}

.dir-card-actions {
  margin-top: auto;
  padding-top: 1rem;
}

.dir-card-actions .btn {
  width: 100%;
  min-height: 48px;
  font-size: var(--al60-font-size-sm);
  justify-content: center;
  color: var(--al60-primary);
  border-color: var(--al60-primary);
}

.dir-card-actions .btn:hover {
  background: var(--al60-primary-soft);
}

/* ==========================================================================
   23. EVENT-KARTEN-GRID, THUMBNAIL, PAGINATION, BUNDESLAND-NAV, FILTER-LAYOUT
   ========================================================================== */

/* ---- Karten-Grid ---- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Event-Karte: Flex-Struktur ---- */
.card-grid .card {
  display: flex;
  flex-direction: column;
}

.card-grid .card .card-body {
  flex: 1;
}

/* ---- Thumbnail ---- */
.card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--al60-surface-soft);
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.card-thumb:hover img {
  transform: scale(1.03);
}

.card-thumb-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--al60-surface-soft);
  font-size: 3rem;
  color: var(--al60-border);
}

/* ---- Filter-Formular-Layout ---- */
.filter-form {
  width: 100%;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;
  min-width: 160px;
}

.filter-group--submit {
  flex: 0 1 auto;
  flex-direction: row;
  gap: 0.5rem;
  align-items: flex-end;
}

.filter-group--submit .btn {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .filter-row {
    flex-direction: column;
  }

  .filter-group {
    flex: 1 1 100%;
  }

  .filter-group--submit {
    flex-direction: column;
    width: 100%;
  }

  .filter-group--submit .btn {
    width: 100%;
    min-height: 54px;
  }
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 2rem 0;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--al60-radius-sm);
  border: 1px solid var(--al60-border);
  background: var(--al60-surface);
  color: var(--al60-text);
  font-size: var(--al60-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.pagination .page-numbers:hover {
  border-color: var(--al60-primary);
  background: var(--al60-primary-soft);
  color: var(--al60-primary);
}

.pagination .page-numbers.current {
  background: var(--al60-primary);
  border-color: var(--al60-primary);
  color: #fff;
}

.pagination .page-numbers:focus-visible {
  outline: 3px solid var(--al60-focus);
  outline-offset: 2px;
}

/* ---- Bundesland-Navigation ---- */
.bundeslaender-section {
  background: var(--al60-surface-soft);
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--al60-border);
}

.bundeslaender-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 600px) {
  .bundeslaender-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 900px) {
  .bundeslaender-grid {
    grid-template-columns: repeat(9, 1fr);
  }
}

.bundesland-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  background: var(--al60-surface);
  border: 1px solid var(--al60-border);
  border-radius: var(--al60-radius-md);
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.bundesland-card:hover,
.bundesland-card.is-active {
  border-color: var(--al60-primary);
  background: var(--al60-primary-soft);
  box-shadow: 0 4px 12px rgba(31, 111, 91, 0.12);
}

.bundesland-emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.bundesland-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--al60-text);
  text-align: center;
  line-height: 1.25;
}

.bundesland-card.is-active .bundesland-label {
  color: var(--al60-primary);
}

.bundesland-card:focus-visible {
  outline: 3px solid var(--al60-focus);
  outline-offset: 2px;
}

/* ---- Bundesland-Abschnitt Untertitel ---- */
.bundeslaender-section .section-subtitle {
  text-align: center;
  color: var(--al60-text-muted);
  font-size: var(--al60-font-size-sm);
  margin-top: -0.5rem;
  margin-bottom: 0;
}

/* ==========================================================================
   24. CONTENT-AREA LAYOUT (Seite mit/ohne Sidebar)
   ========================================================================== */
.content-area {
  padding: 2.5rem 0 3.5rem;
}

/* Standard: einspaltig */
.content-area .container {
  display: block;
}

/* Zweispaltig wenn Sidebar vorhanden */
.content-area .container.has-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .content-area .container.has-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Sidebar-Widgets gestapelt */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Entry-Content volle Breite ohne Sidebar */
.content-area .container:not(.has-sidebar) .entry-content,
.content-area .container:not(.has-sidebar) .entry {
  max-width: 780px;
  margin-inline: auto;
}

/* Footer: Datenschutz + Impressum immer im Copyright-Balken */
.footer-copy-links {
  display: inline;
  margin-left: 1.25rem;
}

.footer-copy-links a {
  color: var(--al60-text-muted);
  text-decoration: underline;
  font-size: 15px;
  margin-left: 0.75rem;
}

.footer-copy-links a:hover {
  color: var(--al60-primary);
}

/* ==========================================================================
   V3 FIX — Kein horizontales Scrollen auf Mobil
   ========================================================================== */
@media (max-width: 768px) {
  /* Seite nicht horizontal scrollbar (clip bricht sticky Header nicht) */
  html {
    overflow-x: clip;
  }

  /* Medien dürfen Container nicht sprengen */
  .site-main img,
  .site-main svg,
  .site-main video,
  .site-main iframe,
  .entry-content img,
  .entry-content iframe {
    max-width: 100%;
    height: auto;
  }

  /* Tabellen scrollen innerhalb ihres Containers, nicht die ganze Seite */
  .entry-content table,
  .wp-block-table,
  .wp-block-table > table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Lange Wörter / Links umbrechen */
  .entry-content,
  .entry-content p,
  .entry-content li,
  .entry-content a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ==========================================================================
   V3-B 002: Event detail content readability
   Nur Event-Detail-Hauptinhalt optisch ordnen (CSS-only, scoped: .single-events)
   ========================================================================== */

/* Hauptinhalt als ruhige, helle Content-Card */
.single-events .content-area article.entry {
  background: var(--al60-surface);
  border: 1px solid var(--al60-border);
  border-radius: var(--al60-radius-lg);
  box-shadow: var(--al60-shadow-soft);
  padding: 2rem 2.25rem;
  box-sizing: border-box;
  max-width: 100%;
}

/* Titelbereich ruhiger / weniger massiv */
.single-events .entry-header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--al60-border);
}

.single-events .entry-header h1 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0;
}

/* Beschreibung besser lesbar */
.single-events .entry-content {
  font-size: 18px;
  line-height: 1.75;
  max-width: 70ch;
}

.single-events .entry-content p {
  margin: 0 0 1.15rem;
}

.single-events .entry-content p:last-child {
  margin-bottom: 0;
}

/* Terminliste im Hauptinhalt: keine rohen Bullets, klare Zeilen-Abstände */
.single-events .content-area article.entry ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 1px solid var(--al60-border);
  border-radius: var(--al60-radius-md);
  background: var(--al60-surface-soft);
  overflow: hidden;
}

.single-events .content-area article.entry ul li {
  position: relative;
  margin: 0;
  padding: 0.7rem 1rem 0.7rem 2.1rem;
  border-bottom: 1px solid var(--al60-border);
  line-height: 1.5;
}

.single-events .content-area article.entry ul li:last-child {
  border-bottom: none;
}

.single-events .content-area article.entry ul li::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 1.15rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--al60-primary);
}

/* Mobile: kleinerer Titel, kompakteres Padding, kein Overflow */
@media (max-width: 768px) {
  .single-events .content-area article.entry {
    padding: 1.25rem 1.1rem;
  }

  .single-events .entry-header {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
  }

  .single-events .entry-header h1 {
    font-size: 1.45rem;
  }

  .single-events .content-area article.entry ul li {
    padding: 0.65rem 0.85rem 0.65rem 1.9rem;
  }
}

/* ==========================================================================
   V3-E 009 / chat9: visible desktop filter + short detail text CSS-only fix
   Quelle: geprüft aus aktivleben60-theme-v3-E-008.zip.
   Geändert wird nur design-v2.css. Keine PHP-/Plugin-/Eventlogik.
   ========================================================================== */

/* ---- Desktop: Event-Archiv-Filter wirklich als sichtbare kompakte Box ---- */
@media (min-width: 901px) {
  .filter-bar {
    width: min(1040px, calc(100% - 48px));
    max-width: 1040px;
    margin: 1rem auto 1.75rem;
    padding: 1rem 1.15rem;
    background: var(--al60-surface);
    border: 1px solid var(--al60-border);
    border-radius: var(--al60-radius-lg);
    box-shadow: var(--al60-shadow-soft);
    position: relative;
    top: auto;
    z-index: 20;
    box-sizing: border-box;
  }

  .filter-bar .filter-form {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .filter-bar .filter-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
  }

  .filter-bar .filter-group {
    min-width: 0;
    flex: none;
  }

  .filter-bar .filter-group--submit {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.6rem;
    min-width: max-content;
  }

  .filter-bar .filter-select {
    min-height: 48px;
  }

  .filter-bar .btn {
    min-height: 48px;
    padding-inline: 1.2rem;
    white-space: nowrap;
  }
}

/* Zwischenbreite: Filter bleibt bedienbar und bricht kontrolliert um. */
@media (min-width: 901px) and (max-width: 1180px) {
  .filter-bar .filter-row {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

  .filter-bar .filter-group--submit {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ---- Event-Detail: kurzes Textfeld ruhiger und Titelbox weniger dominant ---- */
body.is-event .content-area .container.has-sidebar > article.entry,
body.single-events .content-area .container.has-sidebar > article.entry {
  padding: 1.65rem 1.9rem;
}

body.is-event .content-area .container.has-sidebar > article.entry > .entry-header,
body.single-events .content-area .container.has-sidebar > article.entry > .entry-header,
body.is-event article.entry > .entry-header,
body.single-events article.entry > .entry-header {
  background: color-mix(in srgb, var(--al60-primary-soft) 32%, #ffffff);
  border: 1px solid var(--al60-border);
  border-left: 6px solid var(--al60-primary);
  border-radius: var(--al60-radius-md);
  box-shadow: none;
  padding: 1rem 1.2rem;
  margin: 0 0 1.25rem;
}

body.is-event .content-area .container.has-sidebar > article.entry > .entry-header h1,
body.single-events .content-area .container.has-sidebar > article.entry > .entry-header h1,
body.is-event article.entry > .entry-header h1,
body.single-events article.entry > .entry-header h1 {
  margin: 0;
  color: var(--al60-text);
  font-weight: 800;
  line-height: 1.22;
}

body.is-event .content-area .container.has-sidebar > article.entry > .entry-content,
body.single-events .content-area .container.has-sidebar > article.entry > .entry-content,
body.is-event article.entry > .entry-content,
body.single-events article.entry > .entry-content {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--al60-text);
}

body.is-event article.entry > .entry-content > :first-child,
body.single-events article.entry > .entry-content > :first-child {
  margin-top: 0;
}

body.is-event article.entry > .entry-content > :last-child,
body.single-events article.entry > .entry-content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  body.is-event .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry {
    padding: 1.2rem 1rem;
  }

  body.is-event article.entry > .entry-header,
  body.single-events article.entry > .entry-header {
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border-left-width: 5px;
  }
}

/* ==========================================================================
   V3-E 010 / chat9: calmer archive filter, detail text card, sidebar buttons
   CSS-only. No PHP, no plugin, no event logic.
   ========================================================================== */

/* Desktop archive filter: calmer, lower, clearly separated from the full page. */
@media (min-width: 901px) {
  .filter-bar {
    width: min(1000px, calc(100% - 64px));
    max-width: 1000px;
    margin: 1.25rem auto 1.5rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--al60-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(28, 42, 36, 0.08);
    position: relative;
    top: auto;
    z-index: 20;
    box-sizing: border-box;
  }

  .filter-bar .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .filter-bar .filter-form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .filter-bar .filter-row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
  }

  .filter-bar .filter-group {
    min-width: 0;
    flex: none;
  }

  .filter-bar .filter-label {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
  }

  .filter-bar .filter-select {
    min-height: 46px;
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    box-sizing: border-box;
  }

  .filter-bar .filter-group--submit {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: max-content;
  }

  .filter-bar .btn {
    min-height: 46px;
    padding: 0.55rem 1.05rem;
    border-radius: 14px;
    white-space: nowrap;
    box-sizing: border-box;
  }
}

/* Desktop/tablet edge: keep buttons below instead of squeezing controls. */
@media (min-width: 901px) and (max-width: 1120px) {
  .filter-bar {
    width: min(900px, calc(100% - 48px));
  }

  .filter-bar .filter-row {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .filter-bar .filter-group--submit {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Event detail: remove the alert/form look; make short text feel intentional. */
body.is-event .content-area .container.has-sidebar > article.entry,
body.single-events .content-area .container.has-sidebar > article.entry {
  padding: 1.65rem 1.85rem 1.75rem;
  border-radius: 18px;
  box-sizing: border-box;
}

body.is-event .content-area .container.has-sidebar > article.entry > .entry-header,
body.single-events .content-area .container.has-sidebar > article.entry > .entry-header,
body.is-event article.entry > .entry-header,
body.single-events article.entry > .entry-header {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--al60-primary-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0.75rem;
  margin: 0 0 1rem;
}

body.is-event .content-area .container.has-sidebar > article.entry > .entry-header h1,
body.single-events .content-area .container.has-sidebar > article.entry > .entry-header h1,
body.is-event article.entry > .entry-header h1,
body.single-events article.entry > .entry-header h1 {
  margin: 0;
  color: var(--al60-text);
  font-weight: 800;
  line-height: 1.22;
}

body.is-event .content-area .container.has-sidebar > article.entry > .entry-content,
body.single-events .content-area .container.has-sidebar > article.entry > .entry-content,
body.is-event article.entry > .entry-content,
body.single-events article.entry > .entry-content {
  max-width: 66ch;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--al60-text);
}

body.is-event article.entry > .entry-content > :first-child,
body.single-events article.entry > .entry-content > :first-child {
  margin-top: 0;
}

body.is-event article.entry > .entry-content > :last-child,
body.single-events article.entry > .entry-content > :last-child {
  margin-bottom: 0;
}

/* Sidebar buttons: prevent overflow caused by width:100% plus button padding/border. */
body.is-event .event-widget-btn,
body.single-events .event-widget-btn,
body.is-event .widget .btn,
body.single-events .widget .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  white-space: normal;
  text-align: center;
}

@media (max-width: 768px) {
  body.is-event .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry {
    padding: 1.2rem 1rem;
  }

  body.is-event article.entry > .entry-header,
  body.single-events article.entry > .entry-header {
    padding-bottom: 0.7rem;
    margin-bottom: 0.9rem;
  }
}


/* ==========================================================================
   V3-E 018 / chat9: desktop-only event text card height hardening
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* Desktop only: force the frontend event text card to become visibly taller.
   Added to both CSS files because the previous design-v2-only rule did not apply visibly. */
@media (min-width: 1024px) {
  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    min-height: 520px !important;
    padding-bottom: 12rem !important;
    box-sizing: border-box !important;
  }

  .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single-events .content-area .container.has-sidebar > article.entry > .entry-content,
  body.is-event .content-area .container.has-sidebar > article.entry > .entry-content {
    min-height: 260px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    min-height: 460px !important;
    padding-bottom: 9rem !important;
  }

  .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single-events .content-area .container.has-sidebar > article.entry > .entry-content,
  body.is-event .content-area .container.has-sidebar > article.entry > .entry-content {
    min-height: 220px !important;
  }
}


/* ==========================================================================
   V3-E 019 / chat9: balanced desktop text card + soft unified content area
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* Desktop only:
   - reduce the oversized empty text card from V3-E-018
   - give photo + text a calmer, visually related presentation
   - mobile stays unchanged
*/
@media (min-width: 1024px) {
  /* Soften and visually frame the lead image area without using hard/dashed borders */
  .event-hero-image {
    max-width: 780px !important;
    margin: 0 auto 1.25rem !important;
    padding: 1rem 1rem 1.05rem !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(197, 191, 176, 0.85) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 26px rgba(28, 42, 36, 0.06) !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(1.5px) !important;
  }

  .event-hero-image img {
    display: block !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }

  /* Make the text card larger than the original small version,
     but remove the overly empty height from V3-E-018 */
  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    min-height: 370px !important;
    padding: 2.3rem 2.55rem 5rem !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(197, 191, 176, 0.9) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 28px rgba(28, 42, 36, 0.06) !important;
    box-sizing: border-box !important;
  }

  .content-area .container.has-sidebar > article.entry > .entry-header,
  body.single .content-area .container.has-sidebar > article.entry > .entry-header,
  body.single-events .content-area .container.has-sidebar > article.entry > .entry-header,
  body.is-event .content-area .container.has-sidebar > article.entry > .entry-header {
    margin-bottom: 1.05rem !important;
    padding-bottom: 0.85rem !important;
  }

  .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single-events .content-area .container.has-sidebar > article.entry > .entry-content,
  body.is-event .content-area .container.has-sidebar > article.entry > .entry-content {
    min-height: 140px !important;
    max-width: 70ch !important;
  }
}

/* Medium desktop / smaller notebooks */
@media (min-width: 1024px) and (max-width: 1180px) {
  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    min-height: 340px !important;
    padding-bottom: 4.2rem !important;
  }

  .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single .content-area .container.has-sidebar > article.entry > .entry-content,
  body.single-events .content-area .container.has-sidebar > article.entry > .entry-content,
  body.is-event .content-area .container.has-sidebar > article.entry > .entry-content {
    min-height: 120px !important;
  }
}


/* ==========================================================================
   V3-E 020 / chat9: desktop photo area refinement
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* Desktop only:
   Refine the photo block so it feels calmer and more connected to the content card. */
@media (min-width: 1024px) {
  .event-hero-image {
    max-width: 730px !important;
    margin: 0 auto 1rem !important;
    padding: 0.75rem !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(197, 191, 176, 0.82) !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 22px rgba(28, 42, 36, 0.05) !important;
    backdrop-filter: none !important;
  }

  .event-hero-image img {
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  /* Bring the content card a bit closer to the photo area */
  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    margin-top: 0.25rem !important;
  }
}

/* Slightly smaller laptops */
@media (min-width: 1024px) and (max-width: 1180px) {
  .event-hero-image {
    max-width: 690px !important;
    padding: 0.65rem !important;
  }
}


/* ==========================================================================
   V3-E 021 / chat9: desktop photo spacing fine-tune
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

@media (min-width: 1024px) {
  /* More space above, slimmer side frame, closer to the text card */
  .event-hero-image {
    margin: 0.85rem auto 0.55rem !important;
    max-width: 720px !important;
    padding: 0.55rem !important;
    border-radius: 20px !important;
    border-width: 1px !important;
  }

  .event-hero-image img {
    border-radius: 14px !important;
  }

  /* Pull the text card slightly closer to the photo block */
  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    margin-top: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .event-hero-image {
    max-width: 680px !important;
    padding: 0.5rem !important;
  }
}


/* ==========================================================================
   V3-E 022 / chat9: photo frame thinner + smaller gap to text
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

@media (min-width: 1024px) {
  .event-hero-image {
    max-width: 710px !important;
    padding: 0.38rem !important;
    margin-bottom: 0.3rem !important;
  }

  .event-hero-image img {
    border-radius: 12px !important;
  }

  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    margin-top: -0.1rem !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .event-hero-image {
    max-width: 670px !important;
    padding: 0.34rem !important;
  }
}


/* ==========================================================================
   V3-E 023 / chat9: photo frame equalized + balanced spacing
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

@media (min-width: 1024px) {
  /* Photo block:
     - slightly more space above
     - equal inner frame on all sides
     - gap to the text card aligned more closely with the right sidebar widget rhythm */
  .event-hero-image {
    max-width: 708px !important;
    margin: 1.1rem auto 1.35rem !important;
    padding: 0.5rem !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .event-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
  }

  /* Keep the text card close enough, but with a clean, consistent gap */
  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    margin-top: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .event-hero-image {
    max-width: 670px !important;
    margin-top: 1rem !important;
    margin-bottom: 1.2rem !important;
    padding: 0.46rem !important;
  }
}


/* ==========================================================================
   V3-E 024 / chat9: mobile photo frame + spacing
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

@media (max-width: 768px) {
  /* Apply the same calmer photo-box idea on mobile:
     - equal inner frame
     - a bit more spacing above
     - cleaner gap to the text card
  */
  .event-hero-image {
    width: auto !important;
    max-width: none !important;
    margin: 0.95rem 1rem 1rem !important;
    padding: 0.38rem !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(197, 191, 176, 0.82) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(28, 42, 36, 0.05) !important;
    box-sizing: border-box !important;
  }

  .event-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }

  .content-area .container.has-sidebar > article.entry,
  body.single .content-area .container.has-sidebar > article.entry,
  body.single-events .content-area .container.has-sidebar > article.entry,
  body.is-event .content-area .container.has-sidebar > article.entry {
    margin-top: 0 !important;
  }
}

@media (max-width: 380px) {
  .event-hero-image {
    margin-left: 0.85rem !important;
    margin-right: 0.85rem !important;
    margin-top: 0.85rem !important;
    margin-bottom: 0.9rem !important;
    padding: 0.32rem !important;
    border-radius: 16px !important;
  }

  .event-hero-image img {
    border-radius: 12px !important;
  }
}


/* ==========================================================================
   V3-E 025 / chat9: event detail structural alignment (photo + text card)
   Foto und Textkarte liegen jetzt in einem gemeinsamen Links-Spalten-Wrapper
   (.event-detail-main, ergaenzt in single-events.php) und richten sich dadurch
   automatisch als Einheit aus. Ersetzt die bisherigen blinden Pixel-/min-height-
   Versuche: die alten "> article.entry"-Desktop-Hacks greifen in der neuen
   Struktur nicht mehr und die Karte faellt auf ihren ruhigen Basis-Stand zurueck.
   CSS-only Layout. Keine PHP-Eventlogik, kein Plugin, keine Query/Sortier/Filter.
   Desktop wird harmonisiert; der bestehende mobile Stand bleibt erhalten.
   ========================================================================== */

/* Linke Spalte: Fotoblock und Textkarte stapeln, gleiche Breite => ausgerichtet */
.content-area .container.has-sidebar > .event-detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  /* Bewusster, harmonischer Abstand Foto -> Textkarte */
  .content-area .container.has-sidebar > .event-detail-main {
    gap: 1.5rem;
  }

  /* Foto: dezente Bildkarte, gleichmaessiger Innenrand, gleiche Designsprache
     wie die Textkarte; volle Spaltenbreite, damit beide Kanten fluchten. */
  .event-detail-main .event-hero-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.6rem !important;
    background: var(--al60-surface) !important;
    border: 1px solid var(--al60-border) !important;
    border-radius: var(--al60-radius-lg) !important;
    box-shadow: var(--al60-shadow-soft) !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
  }

  .event-detail-main .event-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: var(--al60-radius-md) !important;
  }

  /* Textkarte: moderat groesser als der kleine Ausgangsstand, aber nicht riesig
     leer (kein erzwungenes 370-520px / kein uebergrosses Bottom-Padding mehr). */
  .content-area .container.has-sidebar > .event-detail-main > article.entry {
    width: 100%;
    min-height: 280px;
    margin: 0;
    padding: 2.25rem 2.5rem;
    box-sizing: border-box;
  }
}


/* ==========================================================================
   V3-E 026 / chat9: responsive detail layout stack for mobile/tablet
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* The V3-E-025 structure is good on desktop.
   On narrow / tablet-like viewports the 2-column layout becomes cramped.
   Stack earlier so photo, text and sidebar become a clean single-column flow. */
@media (max-width: 1100px) {
  .content-area .container.has-sidebar {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
  }

  .event-detail-main {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .event-detail-main .event-hero-image,
  .event-detail-main article.entry {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .event-detail-main .event-hero-image {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .sidebar {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Real mobile: keep the page compact and avoid oversized cards. */
@media (max-width: 768px) {
  .content-area {
    padding-top: 1.4rem !important;
  }

  .content-area .container.has-sidebar {
    gap: 1.15rem !important;
  }

  .event-detail-main {
    max-width: none !important;
  }

  .event-detail-main .event-hero-image {
    margin-top: 0.75rem !important;
    margin-bottom: 0.85rem !important;
    padding: 0.32rem !important;
    border-radius: 16px !important;
  }

  .event-detail-main .event-hero-image img {
    border-radius: 12px !important;
  }

  .event-detail-main article.entry {
    min-height: 0 !important;
    padding: 1.25rem 1.1rem !important;
  }

  .sidebar {
    max-width: none !important;
    gap: 1rem !important;
  }

  .sidebar .widget {
    padding: 1.2rem 1.1rem !important;
  }
}


/* ==========================================================================
   V3-E 027 / chat9: mobile image slightly larger
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* Android/mobile: image was OK but slightly too small.
   Make the photo block a little wider without changing the desktop layout. */
@media (max-width: 768px) {
  .event-detail-main .event-hero-image {
    margin-left: 0.55rem !important;
    margin-right: 0.55rem !important;
    padding: 0.28rem !important;
  }

  .event-detail-main .event-hero-image img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  .event-detail-main .event-hero-image {
    margin-left: 0.45rem !important;
    margin-right: 0.45rem !important;
    padding: 0.25rem !important;
  }
}


/* ==========================================================================
   V3-E 028 / chat9: mobile image slight left alignment
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* Mobile: photo is good, only a touch too far right.
   Shift the photo box slightly left without changing desktop. */
@media (max-width: 768px) {
  .event-detail-main .event-hero-image {
    transform: translateX(-0.25rem) !important;
  }
}

@media (max-width: 380px) {
  .event-detail-main .event-hero-image {
    transform: translateX(-0.18rem) !important;
  }
}


/* ==========================================================================
   V3-E 029 / chat9: final tiny mobile photo alignment
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* Mobile: final tiny left correction after visual phone test. */
@media (max-width: 768px) {
  .event-detail-main .event-hero-image {
    transform: translateX(-0.34rem) !important;
  }
}

@media (max-width: 380px) {
  .event-detail-main .event-hero-image {
    transform: translateX(-0.24rem) !important;
  }
}


/* ==========================================================================
   V3-E 030 / chat9: slightly more mobile photo shift left
   CSS-only. No PHP. No plugin. No event logic.
   ========================================================================== */

/* Mobile visual follow-up: shift the hero image block a touch more left. */
@media (max-width: 768px) {
  .event-detail-main .event-hero-image {
    transform: translateX(-0.44rem) !important;
  }
}

@media (max-width: 380px) {
  .event-detail-main .event-hero-image {
    transform: translateX(-0.30rem) !important;
  }
}


/* ==========================================================================
   V3-E 031 / 099M-B: authoritative desktop hero override (regression fix)
   Root cause: design-v2.css loads AFTER style.css (it depends on 'akl-theme'),
   so it is the authoritative source for .event-hero-image. The 099M style.css
   edit could not change the result. The earlier V3-E-019..023 blocks still
   carry `max-width: 780px !important` (and 730/720/710/708/690/680/670px)
   caps that shrank and centered the lead image. This final, real-markup,
   last-defined desktop rule re-asserts the large full-width image in the left
   main column so the cap can never win again. Event-specific only; normal
   posts, course posts and archive cards are untouched. Mobile (<=1100px) keeps
   the existing stacked treatment. CSS-only. No PHP/plugin/event logic.
   ========================================================================== */
@media (min-width: 1024px) {
  .event-detail-main .event-hero-image {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .event-detail-main .event-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ==========================================================================
   V3-E-032 / 099M-C: Event detail grid and breakpoint final fix
   Root cause: V3-E-026 added `@media (max-width: 1100px){ ...has-sidebar{
   grid-template-columns: 1fr !important } }`, force-stacking the event detail
   into one column on every viewport up to 1100px. The theme's own base rule
   (around line 1641) intends two columns from >=901px, so V3-E-026 effectively
   raised the desktop breakpoint to 1101px. Normal desktops/laptops — whose CSS
   width is frequently <=1100px under Windows display scaling — therefore saw
   the stacked, too-narrow layout with the footer riding up. This was a grid /
   breakpoint regression, not a hero-image problem.
   This final, event-scoped, last-defined rule restores the reliable two-column
   layout (main left, sidebar right) from >=901px (matching the base breakpoint)
   and neutralizes the V3-E-026 single-column caps in the 901-1100px range.
   Mobile/tablet (<=900px) stays stacked. Normal posts and course posts are not
   affected (event-scoped selectors). CSS-only. No PHP/plugin/event logic.
   ========================================================================== */
@media (min-width: 901px) {
  body.is-event .content-area .container.has-sidebar,
  body.single-events .content-area .container.has-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 2.5rem !important;
    align-items: start !important;
  }

  /* Left/main column: full track width, drop the stacked-view centering caps. */
  body.is-event .content-area .container.has-sidebar > .event-detail-main,
  body.single-events .content-area .container.has-sidebar > .event-detail-main {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Right sidebar column: stable right placement, drop stacked-view caps. */
  body.is-event .content-area .container.has-sidebar > .sidebar,
  body.single-events .content-area .container.has-sidebar > .sidebar {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Large hero image, full width of the main column. */
  body.is-event .event-detail-main .event-hero-image,
  body.single-events .event-detail-main .event-hero-image {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  body.is-event .event-detail-main .event-hero-image img,
  body.single-events .event-detail-main .event-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
}


/* ==========================================================================
   V3-E-033 / 099N: Restore Event and Post Image Frame
   Cause: the 099M frame-strip (background:none/border:0/box-shadow:none/padding:0)
   removed the white image surface from the event hero while fixing the broken
   card, and normal post images (.al60-post-hero-image) have a surface but no
   visible border/shadow/padding. This final desktop block re-adds the calm white
   image frame (surface + subtle border + rounded corners + soft shadow + balanced
   padding) for BOTH the event hero and the post detail hero. It keeps the image
   large/full-width in the main column (no max-width cap reintroduced) and does NOT
   touch the 099M-C grid/breakpoint/sidebar layout. Desktop only (>=901px) so the
   existing mobile treatment is unchanged. Event-/post-detail scoped: archive,
   portal, event-archive and course cards are not affected.
   ========================================================================== */
@media (min-width: 901px) {
  /* Event detail hero: full-width image WITH the white frame restored. */
  body.is-event .content-area .container.has-sidebar .event-detail-main .event-hero-image,
  body.single-events .content-area .container.has-sidebar .event-detail-main .event-hero-image {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.25rem !important;
    padding: 0.6rem !important;
    background: var(--al60-surface) !important;
    border: 1px solid var(--al60-border) !important;
    border-radius: var(--al60-radius-lg) !important;
    box-shadow: var(--al60-shadow-soft) !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.is-event .content-area .container.has-sidebar .event-detail-main .event-hero-image img,
  body.single-events .content-area .container.has-sidebar .event-detail-main .event-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: var(--al60-radius-md) !important;
  }

  /* Normal post detail hero (single.php): same calm white image frame. */
  .al60-post-detail__main .al60-post-hero-image {
    margin: 0 0 1.5rem;
    padding: 0.6rem;
    background: var(--al60-surface);
    border: 1px solid var(--al60-border);
    border-radius: var(--al60-radius-lg);
    box-shadow: var(--al60-shadow-soft);
    box-sizing: border-box;
    overflow: visible;
  }

  .al60-post-detail__main .al60-post-hero-image img {
    display: block;
    width: 100%;
    border-radius: var(--al60-radius-md);
  }
}


/* ==========================================================================
   V3-F-012 / 099O: Menu Color Polish + Event Active State
   Authoritative, last-defined menu override (design-v2.css loads after style.css).
   - Desktop: readable dark links on the light header; calm soft-green hover AND
     matching keyboard focus (focus-visible); clear, consistent active/current
     state (full set of WP current-* classes, not just current-menu-item).
   - Mobile (.is-open): readable light links + submenu on the dark menu surface;
     visible hover/focus and a clear active item.
   - Event detail (body.single-events / body.is-event): the top-level
     "Veranstaltungen" (/events/) link is marked active to match the archive.
     The item is a custom link to /events/, so WordPress adds no current-* class
     on single events — hence CSS targets body + the top-level href only.
   Colors/states only — no menu layout/spacing/order/dropdown/URL changes.
   ========================================================================== */

/* Desktop: calm hover + keyboard-focus parity */
.main-nav a:hover,
.main-nav a:focus-visible {
  background: var(--al60-primary-soft);
  color: var(--al60-primary-dark);
}

/* Desktop: clear, consistent active/current state */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current_page_parent > a,
.main-nav .current_page_ancestor > a,
.main-nav .current-page-ancestor > a {
  background: var(--al60-primary);
  color: #fff;
}

.main-nav .current-menu-item > a:hover,
.main-nav .current_page_item > a:hover,
.main-nav .current-menu-parent > a:hover,
.main-nav .current-menu-ancestor > a:hover,
.main-nav .current_page_parent > a:hover,
.main-nav .current_page_ancestor > a:hover,
.main-nav .current-page-ancestor > a:hover {
  background: var(--al60-primary-dark);
  color: #fff;
}

/* Desktop: "Veranstaltungen" (/events/) active on event detail pages */
body.single-events .main-nav > ul > li > a[href$="/events/"],
body.single-events .main-nav > ul > li > a[href$="/events"],
body.is-event .main-nav > ul > li > a[href$="/events/"],
body.is-event .main-nav > ul > li > a[href$="/events"] {
  background: var(--al60-primary);
  color: #fff;
}

body.single-events .main-nav > ul > li > a[href$="/events/"]:hover,
body.single-events .main-nav > ul > li > a[href$="/events"]:hover,
body.is-event .main-nav > ul > li > a[href$="/events/"]:hover,
body.is-event .main-nav > ul > li > a[href$="/events"]:hover {
  background: var(--al60-primary-dark);
  color: #fff;
}

@media (max-width: 768px) {
  /* Mobile: readable light links on the dark open-menu surface */
  .main-nav > ul.is-open a {
    color: #fff;
  }

  .main-nav > ul.is-open a:hover,
  .main-nav > ul.is-open a:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  /* Mobile: clear active/current item */
  .main-nav > ul.is-open .current-menu-item > a,
  .main-nav > ul.is-open .current_page_item > a,
  .main-nav > ul.is-open .current-menu-parent > a,
  .main-nav > ul.is-open .current-menu-ancestor > a,
  .main-nav > ul.is-open .current_page_parent > a,
  .main-nav > ul.is-open .current_page_ancestor > a,
  .main-nav > ul.is-open .current-page-ancestor > a {
    background: var(--al60-accent);
    color: #fff;
  }

  /* Mobile: "Veranstaltungen" active on event detail pages */
  body.single-events .main-nav > ul.is-open > li > a[href$="/events/"],
  body.single-events .main-nav > ul.is-open > li > a[href$="/events"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events/"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events"] {
    background: var(--al60-accent);
    color: #fff;
  }
}


/* ==========================================================================
   V3-F-013 / 099O-B: Mobile Menu + Mobile Filter Fix
   Authoritative, last-defined mobile override (design-v2.css loads after style.css).
   Mobile menu: re-assert a balanced, readable open menu (dark surface, white links,
   clear active item, readable nested submenu, visible hover/focus). Colours/spacing
   only — no order/URL/dropdown/header/desktop changes.
   Mobile filter root cause: the base .filter-row goes flex-direction:column on
   mobile while @media (max-width:600px) sets .filter-group{flex:1 1 100%}. In a
   COLUMN flex container flex-basis:100% sizes the MAIN (vertical) axis and
   flex-grow:1 expands each group vertically -> huge vertical gaps / torn-apart
   layout. Fix: stack the groups with flex:0 0 auto + width:100% + align-items:
   stretch and calm gaps. Scoped to .filter-bar so other forms are untouched;
   desktop (>=901px) filter is not affected.
   ========================================================================== */
@media (max-width: 768px) {
  /* ---- Mobile menu: balanced + readable ---- */
  .main-nav > ul.is-open {
    background: var(--al60-primary-dark);
    gap: 0.3rem;
    max-width: 100%;
  }

  .main-nav > ul.is-open a {
    width: 100%;
    max-width: 100%;
    color: #fff;
    border-radius: var(--al60-radius-sm);
  }

  .main-nav > ul.is-open a:hover,
  .main-nav > ul.is-open a:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  /* Clear active/current item on the dark surface (incl. event detail) */
  .main-nav > ul.is-open .current-menu-item > a,
  .main-nav > ul.is-open .current_page_item > a,
  .main-nav > ul.is-open .current-menu-parent > a,
  .main-nav > ul.is-open .current-menu-ancestor > a,
  .main-nav > ul.is-open .current_page_parent > a,
  .main-nav > ul.is-open .current_page_ancestor > a,
  .main-nav > ul.is-open .current-page-ancestor > a,
  body.single-events .main-nav > ul.is-open > li > a[href$="/events/"],
  body.single-events .main-nav > ul.is-open > li > a[href$="/events"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events/"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events"] {
    background: var(--al60-accent);
    color: #fff;
    font-weight: 700;
  }

  /* Readable, clearly nested submenu — no extra width (no overflow) */
  .main-nav > ul.is-open .sub-menu {
    background: rgba(0, 0, 0, 0.16);
    border-left: 3px solid var(--al60-accent);
    border-radius: var(--al60-radius-sm);
    margin: 0.1rem 0 0.3rem;
    padding: 0.25rem 0.5rem 0.25rem 0.85rem;
    max-width: 100%;
  }

  .main-nav > ul.is-open .sub-menu a {
    color: #fff;
  }

  .main-nav > ul.is-open .sub-menu .current-menu-item > a,
  .main-nav > ul.is-open .sub-menu .current_page_item > a {
    background: var(--al60-accent);
    color: #fff;
  }

  /* ---- Mobile Event archive filter: compact vertical stack ---- */
  .filter-bar .filter-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.9rem;
    align-items: stretch;
  }

  .filter-bar .filter-group {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  .filter-bar .filter-label {
    margin: 0 0 0.35rem;
  }

  .filter-bar .filter-select {
    width: 100%;
  }

  .filter-bar .filter-group--submit {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    align-items: stretch;
  }

  .filter-bar .filter-group--submit .btn {
    width: 100%;
  }
}


/* ==========================================================================
   V3-F-014 / 099O-C: Section Parent Active State + Mobile Submenu Stripe Removal
   The PHP nav_menu_css_class filter adds `al60-section-active` to the matching
   top-level item (and `al60-subsection-active` to the exact current submenu item)
   so the related main-menu section keeps its green active marking on detail /
   archive / category pages. The mobile submenu's orange/brown left stripe is
   removed and the active markings are unified to a clear, readable green.
   Authoritative, last-defined (design-v2.css loads after style.css). No layout,
   order, URL, filter, event-detail or image-frame changes.
   ========================================================================== */

/* Desktop: section parent / exact subsection marked clear green (matches the
   direct current item, which stays at least as strong). */
.main-nav .al60-section-active > a,
.main-nav .al60-subsection-active > a {
  background: var(--al60-primary);
  color: #fff;
}

.main-nav .al60-section-active > a:hover,
.main-nav .al60-section-active > a:focus-visible,
.main-nav .al60-subsection-active > a:hover,
.main-nav .al60-subsection-active > a:focus-visible {
  background: var(--al60-primary-dark);
  color: #fff;
}

@media (max-width: 768px) {
  /* Remove the orange/brown left stripe beside the mobile submenu */
  .main-nav .sub-menu {
    border-left: 0 !important;
  }

  /* Unify mobile active markings to a clear green pill that reads well on the
     dark menu surface (section parent + exact current/submenu item). */
  .main-nav > ul.is-open .al60-section-active > a,
  .main-nav > ul.is-open .al60-subsection-active > a,
  .main-nav > ul.is-open .current-menu-item > a,
  .main-nav > ul.is-open .current_page_item > a,
  .main-nav > ul.is-open .sub-menu .current-menu-item > a,
  .main-nav > ul.is-open .sub-menu .current_page_item > a {
    background: var(--al60-primary-soft) !important;
    color: var(--al60-primary-dark) !important;
    font-weight: 600;
  }
}


/* ==========================================================================
   V3-F-015 / 099O-D: Category-Aware Submenu Active State
   The PHP nav filter now adds al60-subsection-active to the submenu item that
   matches the current post category / category archive (not only exact-URL
   matches), so under "Tipps & Tricks" the relevant item (e.g. "Reisen &
   Ausflüge") is clearly marked. Give the active submenu item the strongest,
   clearly-green treatment on desktop and mobile; keep the orange stripe gone.
   Authoritative, last-defined. No layout/order/URL/filter/event changes.
   ========================================================================== */
.main-nav .sub-menu li.al60-subsection-active > a,
.main-nav .sub-menu li.current-menu-item > a,
.main-nav .sub-menu li.current_page_item > a {
  background: var(--al60-primary);
  color: #fff;
  font-weight: 600;
}

.main-nav .sub-menu li.al60-subsection-active > a:hover,
.main-nav .sub-menu li.al60-subsection-active > a:focus-visible,
.main-nav .sub-menu li.current-menu-item > a:hover,
.main-nav .sub-menu li.current-menu-item > a:focus-visible {
  background: var(--al60-primary-dark);
  color: #fff;
}

@media (max-width: 768px) {
  /* Mobile: active submenu item clearly green (overrides the soft pill so the
     exact current item is the strongest), no orange stripe. */
  .main-nav > ul.is-open .sub-menu li.al60-subsection-active > a,
  .main-nav > ul.is-open .sub-menu li.current-menu-item > a,
  .main-nav > ul.is-open .sub-menu li.current_page_item > a {
    background: var(--al60-primary) !important;
    color: #fff !important;
    font-weight: 600;
  }

  .main-nav > ul.is-open .sub-menu,
  .main-nav .sub-menu {
    border-left: 0 !important;
  }
}


/* ==========================================================================
   V3-F-018 / 099O-G: Menu Active Font Weight Polish
   ========================================================================== */
.main-nav > ul > li.al60-section-active > a,
.main-nav .sub-menu li.al60-subsection-active > a,
.main-nav .sub-menu li.current-menu-item > a,
.main-nav .sub-menu li.current_page_item > a {
    font-weight: 600;
}

@media (max-width: 768px) {
    .main-nav > ul.is-open > li.al60-section-active > a,
    .main-nav > ul.is-open .sub-menu li.al60-subsection-active > a,
    .main-nav > ul.is-open .sub-menu li.current-menu-item > a,
    .main-nav > ul.is-open .sub-menu li.current_page_item > a {
        font-weight: 600 !important;
    }
}


/* ==========================================================================
   V3-F-019 / 099O-I: Menu Active Font Weight Final Polish
   ========================================================================== */
.main-nav > ul > li.al60-section-active > a,
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current_page_item > a,
.main-nav .sub-menu li.al60-subsection-active > a,
.main-nav .sub-menu li.current-menu-item > a,
.main-nav .sub-menu li.current_page_item > a {
    font-weight: 500 !important;
}

@media (max-width: 768px) {
    .main-nav > ul.is-open > li.al60-section-active > a,
    .main-nav > ul.is-open > li.current-menu-item > a,
    .main-nav > ul.is-open > li.current_page_item > a,
    .main-nav > ul.is-open .sub-menu li.al60-subsection-active > a,
    .main-nav > ul.is-open .sub-menu li.current-menu-item > a,
    .main-nav > ul.is-open .sub-menu li.current_page_item > a {
        font-weight: 500 !important;
    }
}


/* ==========================================================================
   V3-F-020 / 099M-099L-Menu-Visual-Polish:
   Parent section is light when an active submenu item exists.
   ========================================================================== */
.main-nav > ul > li.al60-section-active:has(.sub-menu li.al60-subsection-active) > a,
.main-nav > ul > li.al60-section-active:has(.sub-menu li.current-menu-item) > a,
.main-nav > ul > li.al60-section-active:has(.sub-menu li.current_page_item) > a {
    background: color-mix(in srgb, var(--color-accent) 10%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--color-accent) 38%, #ffffff) !important;
    color: var(--color-accent-dark) !important;
    box-shadow: 0 3px 10px rgba(20, 40, 30, 0.08) !important;
    font-weight: 500 !important;
}

@media (max-width: 768px) {
    .main-nav > ul.is-open > li.al60-section-active:has(.sub-menu li.al60-subsection-active) > a,
    .main-nav > ul.is-open > li.al60-section-active:has(.sub-menu li.current-menu-item) > a,
    .main-nav > ul.is-open > li.al60-section-active:has(.sub-menu li.current_page_item) > a {
        background: color-mix(in srgb, var(--color-accent) 10%, #ffffff) !important;
        border-color: color-mix(in srgb, var(--color-accent) 38%, #ffffff) !important;
        color: var(--color-accent-dark) !important;
        box-shadow: 0 3px 10px rgba(20, 40, 30, 0.08) !important;
        font-weight: 500 !important;
    }
}

/* ==========================================================================
   V3-F-013: Normal page background polish
   Header stays warm; content/card area is lighter like the event overview.
   ========================================================================== */
body.page:not(.home):not(.front-page),
body.page:not(.home):not(.front-page) .site-wrapper,
body.page:not(.home):not(.front-page) .site-main {
  background: var(--al60-bg) !important;
}

body.page:not(.home):not(.front-page) .page-title-bar {
  background: var(--al60-surface-soft) !important;
  border-bottom-color: var(--al60-border) !important;
}

body.page:not(.home):not(.front-page) .content-area,
body.page:not(.home):not(.front-page) .site-main > .section-white {
  background: var(--al60-bg) !important;
}

body.page:not(.home):not(.front-page) .content-area > .container,
body.page:not(.home):not(.front-page) .entry-content,
body.page:not(.home):not(.front-page) .portal-editor-content {
  background: transparent !important;
}

/* ==========================================================================
   V3-F-021: Footer affiliate banner carousel spacing
   design-v2.css loads after style.css, so this is the authoritative footer
   placement rule for the affiliate banner widget/shortcode area.
   ========================================================================== */
.site-footer .al60-affiliate-footer-box,
.site-footer .widget_block:has(.al60-affiliate-banner-carousel),
.site-footer .wp-block-group:has(.al60-affiliate-banner-carousel) {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-top: 24px !important;
  padding-bottom: 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.site-footer .al60-affiliate-footer-box::before,
.site-footer .widget_block:has(.al60-affiliate-banner-carousel)::before,
.site-footer .wp-block-group:has(.al60-affiliate-banner-carousel)::before {
  content: "Werbung";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

.site-footer .al60-affiliate-footer-box .wp-block-shortcode,
.site-footer .al60-affiliate-footer-box .al60-affiliate-banner-carousel,
.site-footer .widget_block:has(.al60-affiliate-banner-carousel) .wp-block-shortcode,
.site-footer .widget_block:has(.al60-affiliate-banner-carousel) .al60-affiliate-banner-carousel,
.site-footer .wp-block-group:has(.al60-affiliate-banner-carousel) .wp-block-shortcode,
.site-footer .wp-block-group:has(.al60-affiliate-banner-carousel) .al60-affiliate-banner-carousel {
  margin: 0 !important;
}

.site-footer .al60-affiliate-footer-box .al60-affiliate-banner-placement-footer,
.site-footer .widget_block:has(.al60-affiliate-banner-carousel) .al60-affiliate-banner-placement-footer,
.site-footer .wp-block-group:has(.al60-affiliate-banner-carousel) .al60-affiliate-banner-placement-footer {
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-footer .al60-affiliate-footer-box img,
.site-footer .widget_block:has(.al60-affiliate-banner-carousel) img,
.site-footer .wp-block-group:has(.al60-affiliate-banner-carousel) img {
  display: block !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
}


/* ==========================================================================
   V3-F-021 / 3.0.71: Post affiliate shortcode + footer link button polish
   ========================================================================== */
.al60-post-recommendation-banner .al60-affiliate-banner-carousel,
.al60-post-recommendation-banner [class*="al60-affiliate-banner-placement-"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

.al60-post-recommendation-banner img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 12px !important;
}

body .site-footer .footer-col ul {
  gap: 0.55rem;
  margin: 0;
  padding: 0;
}

body .site-footer .footer-col li {
  margin: 0;
}

body .site-footer .footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.34rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff !important;
  text-decoration: none !important;
  text-underline-offset: 0;
  line-height: 1.25;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

body .site-footer .footer-col a:hover,
body .site-footer .footer-col a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff !important;
  transform: translateY(-1px);
}

body .site-footer .footer-col a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* V3 3.0.75: Tiny ad label below post/reisen affiliate banner boxes */
.al60-post-affiliate-box::after,
.al60-affiliate-box::after,
.al60-sidebar-ad::after,
.al60-widget-ad::after,
.al60-affiliate-banner-placement-post::after,
.al60-affiliate-banner-placement-reisen::after {
    content: "Werbung";
    display: block;
    margin-top: 6px;
    text-align: center;
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(31, 41, 55, 0.42);
    font-weight: 500;
}

.al60-post-affiliate-box .al60-affiliate-banner-placement-post::after,
.al60-post-affiliate-box .al60-affiliate-banner-placement-reisen::after,
.al60-affiliate-box .al60-affiliate-banner-placement-post::after,
.al60-affiliate-box .al60-affiliate-banner-placement-reisen::after {
    content: none;
}

/* V3 3.0.76: Small accessible font-size controls (content only, no page zoom) */
.al60-font-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.25rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--al60-primary, var(--color-accent)) 18%, #ffffff);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 8px rgba(20, 40, 30, 0.05);
    white-space: nowrap;
}

.al60-font-tools__label {
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 700;
    color: var(--al60-text-muted, var(--color-muted));
    padding: 0 0.25rem 0 0.1rem;
}

.al60-font-tools__button {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--al60-primary, var(--color-accent)) 20%, #ffffff);
    border-radius: 999px;
    background: #ffffff;
    color: var(--al60-primary-dark, var(--color-accent-dark));
    cursor: pointer;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 0.5rem;
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1;
}

.al60-font-tools__button--large {
    font-size: 0.88rem;
}

.al60-font-tools__button--xlarge {
    font-size: 0.98rem;
}

.al60-font-tools__button:hover,
.al60-font-tools__button:focus-visible,
.al60-font-tools__button[aria-pressed="true"] {
    background: var(--al60-primary, var(--color-accent));
    border-color: var(--al60-primary-dark, var(--color-accent-dark));
    color: #ffffff;
}

/* Reader scaling: content areas only. Header, footer, buttons, banners and layout are not zoomed. */
html.al60-font-large {
    --al60-reader-scale: 1.09;
}

html.al60-font-xlarge {
    --al60-reader-scale: 1.18;
}

html.al60-font-large .site-main :where(p, li),
html.al60-font-xlarge .site-main :where(p, li) {
    font-size: calc(1em * var(--al60-reader-scale, 1));
    line-height: 1.82;
}

html.al60-font-large .site-main :where(.entry-content, .post-content, .portal-editor-content, .event-description, .al60-kurs),
html.al60-font-xlarge .site-main :where(.entry-content, .post-content, .portal-editor-content, .event-description, .al60-kurs) {
    font-size: calc(1em * var(--al60-reader-scale, 1));
}

html.al60-font-large .site-main :where(h2, h3),
html.al60-font-xlarge .site-main :where(h2, h3) {
    line-height: 1.28;
}

/* Keep functional UI stable. */
html.al60-font-large .site-main :where(button, .btn, .event-card-button, .al60-post-card-button, .al60-affiliate-banner, iframe, img),
html.al60-font-xlarge .site-main :where(button, .btn, .event-card-button, .al60-post-card-button, .al60-affiliate-banner, iframe, img) {
    font-size: inherit;
}

@media (max-width: 768px) {
    .al60-font-tools {
        order: 3;
        margin-left: 0;
        padding: 0.25rem;
    }

    .al60-font-tools__label {
        font-size: 0.68rem;
    }

    .al60-font-tools__button {
        min-width: 2.2rem;
        min-height: 2.2rem;
    }
}

/* V3 3.0.77: Compact header font-size controls */
.site-header .al60-font-tools {
    gap: 0.18rem !important;
    margin-left: 0.55rem !important;
    padding: 0.18rem 0.25rem !important;
    border-radius: 999px !important;
}

.site-header .al60-font-tools__label {
    font-size: 0.66rem !important;
    padding: 0 0.18rem 0 0.05rem !important;
}

.site-header .al60-font-tools .al60-font-tools__button {
    min-width: 1.75rem !important;
    width: auto !important;
    min-height: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0 0.42rem !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
}

.site-header .al60-font-tools .al60-font-tools__button--large {
    font-size: 0.78rem !important;
}

.site-header .al60-font-tools .al60-font-tools__button--xlarge {
    font-size: 0.82rem !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
}

@media (max-width: 1180px) {
    .site-header .al60-font-tools__label {
        display: none;
    }

    .site-header .al60-font-tools {
        margin-left: 0.35rem !important;
    }
}

@media (max-width: 768px) {
    .site-header .al60-font-tools {
        margin-left: 0 !important;
        padding: 0.18rem !important;
    }

    .site-header .al60-font-tools .al60-font-tools__button {
        min-width: 2rem !important;
        min-height: 2rem !important;
        height: 2rem !important;
    }
}

/* V3 3.0.78: Single compact font-size toggle button */
.site-header .al60-font-tools--single {
    gap: 0 !important;
    margin-left: 0.45rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.site-header .al60-font-tools--single .al60-font-tools__cycle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
    min-height: 2.15rem !important;
    height: 2.15rem !important;
    padding: 0 0.7rem !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

.site-header .al60-font-tools__cycle-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    opacity: 0.86 !important;
}

.site-header .al60-font-tools__cycle-value {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.site-header .al60-font-tools--single .al60-font-tools__cycle[data-al60-current-size="large"] .al60-font-tools__cycle-value {
    font-size: 1rem !important;
}

.site-header .al60-font-tools--single .al60-font-tools__cycle[data-al60-current-size="xlarge"] .al60-font-tools__cycle-value {
    font-size: 1.05rem !important;
}

@media (max-width: 1180px) {
    .site-header .al60-font-tools--single .al60-font-tools__cycle-label {
        display: none !important;
    }

    .site-header .al60-font-tools--single .al60-font-tools__cycle {
        width: 2.35rem !important;
        min-width: 2.35rem !important;
        padding: 0 !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .site-header .al60-font-tools--single {
        margin-left: 0 !important;
    }

    .site-header .al60-font-tools--single .al60-font-tools__cycle {
        width: auto !important;
        min-width: 2.55rem !important;
        height: 2.25rem !important;
        min-height: 2.25rem !important;
        padding: 0 0.55rem !important;
    }
}

/* ==========================================================================
   AL60 Footer Affiliate Banner – 728x90 Desktop + mobil sauber
   ========================================================================== */

.al60-affiliate-banner-placement-footer {
  max-width: 728px !important;
  width: 100% !important;
  height: 90px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.al60-affiliate-banner-placement-footer a {
  width: 100% !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  line-height: 0 !important;
}

/* Normale 728x90-Banner wie Lidl / ASI */
.al60-affiliate-banner-placement-footer img {
  width: 100% !important;
  height: 100% !important;
  max-width: 728px !important;
  max-height: 90px !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* Sonderfall: großes Trivago-Logo */
.al60-affiliate-banner-placement-footer img[src*="trivago" i],
.al60-affiliate-banner-placement-footer img[alt*="trivago" i] {
  width: auto !important;
  height: auto !important;
  max-width: 36% !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto !important;
  display: block !important;
}

/* Mobil: nie breiter als der Footer-Inhalt */
@media (max-width: 768px) {
  .al60-affiliate-banner-placement-footer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 728 / 90 !important;
  }

  .al60-affiliate-banner-placement-footer a {
    height: 100% !important;
    min-height: 0 !important;
  }

  .al60-affiliate-banner-placement-footer img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .al60-affiliate-banner-placement-footer img[src*="trivago" i],
  .al60-affiliate-banner-placement-footer img[alt*="trivago" i] {
    width: auto !important;
    height: auto !important;
    max-width: 42% !important;
    max-height: 50% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
  }
}

/* ==========================================================================
   AL60 3.1.3 – einfacher WPB Button nach Vorlage
   ========================================================================== */

/*
   Neuer finaler Ansatz:
   Einfache eigene Button-Klasse nach der bereitgestellten Vorlage.
   Kein Flex.
   Keine feste Höhe.
   Kein Pseudo-Element.
   Kein Spezial-Textlink-Button.
   Kein Eingriff in bestehende Theme-Buttons.
*/

.wpb_button,
.entry-content a.wpb_button,
.portal-editor-content a.wpb_button {
  background-color: var(--al60-primary) !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 15px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color 0.3s ease !important;
  font-size: var(--al60-font-size) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.wpb_button:hover,
.wpb_button:focus-visible,
.entry-content a.wpb_button:hover,
.entry-content a.wpb_button:focus-visible,
.portal-editor-content a.wpb_button:hover,
.portal-editor-content a.wpb_button:focus-visible {
  background-color: var(--al60-primary-dark) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Alte manuelle Hinweiszeilen aus früheren Tests ausblenden, falls noch im Inhalt vorhanden. */
.al60-textlink-note,
.al60-affiliate-textlink-note {
  display: none !important;
}

/* Reise-/Trivago-Angebotsbuttons: Schrift weniger fett, bestehende Form bleibt. */
.al60-travel-offers .btn,
.al60-travel-offers a.btn,
.al60-travel-offers button,
.al60-travel-offers a[class*="button"],
.al60-travel-offers a[class*="cta"],
.al60-travel-card .btn,
.al60-travel-card a.btn,
.al60-travel-card a[class*="button"],
.al60-travel-card a[class*="cta"],
.al60-travel-offer .btn,
.al60-travel-offer a.btn,
.al60-travel-offer a[class*="button"],
.al60-travel-offer a[class*="cta"],
.al60-travel-offer-card .btn,
.al60-travel-offer-card a.btn,
.al60-travel-offer-card a[class*="button"],
.al60-travel-offer-card a[class*="cta"],
.al60-offer-card .btn,
.al60-offer-card a.btn,
.al60-offer-card a[class*="button"],
.al60-offer-card a[class*="cta"] {
  font-weight: 600 !important;
}


/* Screen-reader helper used by the header search labels. */
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ============================================================================
   AL60 3.3.6 – Header-Suche V2 (normale WordPress-Suche, ohne Plugin)
   - Nur Lupen-Button im Header, kein sichtbarer Text "Suche"
   - Suchfeld wird per kleinem JS ein-/ausgeblendet
   - Formular nutzt die normale WP-Suche über ?s=
   - Events werden über functions.php in die Hauptsuche aufgenommen
   ============================================================================ */
.al60-header-search {
  position: relative;
  flex: 0 0 auto;
  margin-left: 0.35rem;
  z-index: 500;
}

.al60-header-search__toggle {
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--al60-primary, #1F6F5B) 16%, #ffffff);
  border-radius: 999px;
  background: #ffffff;
  color: var(--al60-primary-dark, #145443);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 1px 10px rgba(20, 40, 30, 0.06);
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.al60-header-search__toggle:hover,
.al60-header-search__toggle:focus-visible,
.al60-header-search.is-open .al60-header-search__toggle {
  background: var(--al60-primary, #1F6F5B);
  border-color: var(--al60-primary-dark, #145443);
  color: #ffffff;
}

.al60-header-search__toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--al60-primary, #1F6F5B) 35%, #ffffff);
  outline-offset: 3px;
}

.al60-header-search__form[hidden] {
  display: none !important;
}

.al60-header-search__form {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  width: min(410px, calc(100vw - 2rem));
  padding: 0.65rem;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--al60-primary, #1F6F5B) 18%, #ffffff);
  border-radius: var(--al60-radius-md, 14px);
  box-shadow: 0 12px 30px rgba(20, 40, 30, 0.18);
}

.al60-header-search__form::before {
  content: "";
  position: absolute;
  top: -0.48rem;
  right: 1.05rem;
  width: 0.9rem;
  height: 0.9rem;
  background: #ffffff;
  border-left: 1px solid color-mix(in srgb, var(--al60-primary, #1F6F5B) 18%, #ffffff);
  border-top: 1px solid color-mix(in srgb, var(--al60-primary, #1F6F5B) 18%, #ffffff);
  transform: rotate(45deg);
}

.al60-header-search__form input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 2.8rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--al60-border, #D8D3C7);
  border-radius: var(--al60-radius-sm, 10px);
  background: #ffffff;
  color: var(--al60-text, #1F2933);
  font-size: 1rem;
  line-height: 1.2;
}

.al60-header-search__form input[type="search"]::placeholder {
  color: #6b7280;
}

.al60-header-search__form input[type="search"]:focus {
  border-color: var(--al60-primary, #1F6F5B);
  outline: 3px solid color-mix(in srgb, var(--al60-primary, #1F6F5B) 18%, #ffffff);
  outline-offset: 1px;
}

.al60-header-search__form button[type="submit"] {
  flex: 0 0 auto;
  min-height: 2.8rem;
  margin: 0;
  padding: 0.6rem 1.15rem;
  border: 0;
  border-radius: var(--al60-radius-sm, 10px);
  background: var(--al60-primary, #1F6F5B);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.al60-header-search__form button[type="submit"]:hover,
.al60-header-search__form button[type="submit"]:focus-visible {
  background: var(--al60-primary-dark, #145443);
  color: #ffffff;
}

@media (max-width: 900px) {
  .al60-header-search__form {
    right: -3.75rem;
  }

  .al60-header-search__form::before {
    right: 4.25rem;
  }
}

@media (max-width: 520px) {
  .al60-header-search {
    margin-left: auto;
  }

  .al60-header-search__toggle {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .al60-header-search__form {
    right: -4.5rem;
    flex-direction: column;
    width: calc(100vw - 1rem);
    max-width: none;
  }

  .al60-header-search__form::before {
    right: 5rem;
  }

  .al60-header-search__form button[type="submit"] {
    width: 100%;
  }
}


/* AL60 3.3.8 – Search results V3: compact cards + strict search support */
.search-results .al60-search-results-area .container,
.search-no-results .al60-search-results-area .container {
  display: block !important;
}

.al60-search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  align-items: start;
}

.al60-search-result-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--al60-border, #d8d2c4);
  border-radius: var(--al60-radius, 16px);
  box-shadow: var(--al60-shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.06));
}

.al60-search-result-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--al60-surface, #f7f4ed);
}

.al60-search-result-thumb a,
.al60-search-result-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}

.al60-search-result-thumb img {
  object-fit: cover;
  object-position: center center;
}

.al60-search-result-body {
  flex: 1 1 auto;
  padding: 1.35rem 1.45rem 1.15rem;
  min-height: 0;
}

.al60-search-result-type {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(31, 111, 91, 0.10);
  color: var(--al60-primary-dark, #145443);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.al60-search-result-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.al60-search-result-title a {
  color: var(--al60-text, #1f2933);
  text-decoration: none;
}

.al60-search-result-title a:hover,
.al60-search-result-title a:focus-visible {
  color: var(--al60-primary-dark, #145443);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.al60-search-result-excerpt {
  margin: 0;
  color: var(--al60-text, #1f2933);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.al60-search-result-footer {
  margin-top: auto;
  padding: 1rem 1.45rem;
  border-top: 1px solid var(--al60-border, #d8d2c4);
  background: var(--al60-surface, #f7f4ed);
}

.al60-search-result-button,
.al60-search-result-footer .btn,
.al60-search-result-footer a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 2.85rem !important;
  padding: 0.72rem 1rem !important;
  border: 2px solid var(--al60-primary, #1F6F5B) !important;
  border-radius: var(--al60-radius-sm, 10px) !important;
  background: #ffffff !important;
  color: var(--al60-primary-dark, #145443) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
}

.al60-search-result-button:hover,
.al60-search-result-button:focus-visible,
.al60-search-result-footer .btn:hover,
.al60-search-result-footer .btn:focus-visible,
.al60-search-result-footer a.btn:hover,
.al60-search-result-footer a.btn:focus-visible {
  background: var(--al60-primary, #1F6F5B) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.al60-search-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 2.2rem auto 0;
}

.al60-search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--al60-border, #d8d2c4);
  border-radius: 0.6rem;
  background: #ffffff;
  color: var(--al60-primary-dark, #145443);
  font-weight: 700;
  text-decoration: none;
}

.al60-search-pagination .page-numbers.current,
.al60-search-pagination .page-numbers:hover,
.al60-search-pagination .page-numbers:focus-visible {
  background: var(--al60-primary, #1F6F5B);
  color: #ffffff;
  border-color: var(--al60-primary, #1F6F5B);
}

.al60-search-no-results {
  max-width: 48rem;
  padding: 1.5rem;
  border: 1px solid var(--al60-border, #d8d2c4);
  border-radius: var(--al60-radius, 16px);
  background: #ffffff;
}

@media (max-width: 980px) {
  .al60-search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .al60-search-results-grid {
    grid-template-columns: 1fr;
  }

  .al60-search-result-body {
    padding: 1.15rem 1.2rem 1rem;
  }

  .al60-search-result-footer {
    padding: 0.95rem 1.2rem;
  }
}


/* AL60 3.3.9 – Search results compact fix
   Fix: search.php now outputs plain excerpt text. These overrides keep results compact. */
.search-results .al60-search-results-grid {
  gap: 1.35rem !important;
  align-items: start !important;
}

.search-results .al60-search-result-card {
  height: auto !important;
  min-height: 0 !important;
}

.search-results .al60-search-result-thumb {
  aspect-ratio: 16 / 8.4 !important;
  max-height: 155px !important;
}

.search-results .al60-search-result-body {
  padding: 1rem 1.15rem 0.95rem !important;
}

.search-results .al60-search-result-type {
  margin-bottom: 0.55rem !important;
  padding: 0.18rem 0.48rem !important;
  font-size: 0.74rem !important;
}

.search-results .al60-search-result-title {
  margin-bottom: 0.65rem !important;
  font-size: clamp(1rem, 1.35vw, 1.15rem) !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.search-results .al60-search-result-excerpt {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.48 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.search-results .al60-search-result-footer {
  margin-top: 0 !important;
  padding: 0.75rem 1.15rem !important;
}

.search-results .al60-search-result-button,
.search-results .al60-search-result-footer .btn,
.search-results .al60-search-result-footer a.btn {
  min-height: 2.45rem !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.92rem !important;
}

.search-results .al60-search-pagination {
  margin-top: 1.75rem !important;
}

@media (max-width: 640px) {
  .search-results .al60-search-result-thumb {
    max-height: none !important;
  }
}


/* AL60 3.3.10 – Search results layout fix
   Ziel: Suchergebnis-Karten auf allen Suchseiten gleichmäßig, kompakt und ohne Masonry-/Sprungwirkung.
   Nur Suchergebnisse betroffen. Keine Event-Templates, keine Eventdaten, keine Plugins. */
.search-results .al60-search-results-grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
  gap: 1.35rem !important;
}

.search-results .al60-search-result-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.search-results .al60-search-result-thumb {
  flex: 0 0 145px !important;
  height: 145px !important;
  max-height: 145px !important;
  aspect-ratio: auto !important;
}

.search-results .al60-search-result-thumb a,
.search-results .al60-search-result-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.search-results .al60-search-result-thumb img {
  object-fit: cover !important;
  object-position: center center !important;
}

.search-results .al60-search-result-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0.95rem 1.05rem 0.85rem !important;
}

.search-results .al60-search-result-type {
  margin-bottom: 0.48rem !important;
  padding: 0.16rem 0.44rem !important;
  font-size: 0.70rem !important;
  line-height: 1.15 !important;
}

.search-results .al60-search-result-title {
  margin: 0 0 0.55rem !important;
  font-size: clamp(0.98rem, 1.25vw, 1.08rem) !important;
  line-height: 1.18 !important;
  min-height: calc(2 * 1.18em) !important;
  max-height: calc(2 * 1.18em) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.search-results .al60-search-result-excerpt {
  margin: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.42 !important;
  min-height: calc(3 * 1.42em) !important;
  max-height: calc(3 * 1.42em) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.search-results .al60-search-result-footer {
  margin-top: auto !important;
  padding: 0.62rem 1.05rem !important;
}

.search-results .al60-search-result-button,
.search-results .al60-search-result-footer .btn,
.search-results .al60-search-result-footer a.btn {
  min-height: 2.25rem !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.86rem !important;
}

.search-results .al60-search-pagination {
  margin-top: 1.55rem !important;
}

@media (max-width: 980px) {
  .search-results .al60-search-result-thumb {
    flex-basis: 140px !important;
    height: 140px !important;
    max-height: 140px !important;
  }
}

@media (max-width: 640px) {
  .search-results .al60-search-results-grid {
    grid-auto-rows: auto !important;
  }

  .search-results .al60-search-result-thumb {
    flex-basis: 150px !important;
    height: 150px !important;
    max-height: 150px !important;
  }

  .search-results .al60-search-result-title {
    min-height: 0 !important;
    max-height: calc(2 * 1.18em) !important;
  }

  .search-results .al60-search-result-excerpt {
    min-height: 0 !important;
    max-height: calc(3 * 1.42em) !important;
  }
}

/* AL60 3.3.11 – Search title mobile overflow fix
   Ziel: Lange Suchbegriffe dürfen mobil keine horizontale Überbreite erzeugen.
   Nur Suchergebnis-Titelbereich betroffen. Keine Event-Templates, keine Eventdaten, keine Plugins. */
.search-results .al60-search-title-bar,
.search-no-results .al60-search-title-bar {
  overflow: hidden !important;
}

.search-results .al60-search-title-bar .container,
.search-no-results .al60-search-title-bar .container {
  min-width: 0 !important;
  max-width: 100% !important;
}

.search-results .al60-search-page-title,
.search-no-results .al60-search-page-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  line-height: 1.14 !important;
}

.search-results .al60-search-page-title-prefix,
.search-no-results .al60-search-page-title-prefix,
.search-results .al60-search-page-title-query,
.search-no-results .al60-search-page-title-query {
  display: inline !important;
  max-width: 100% !important;
}

.search-results .al60-search-page-title-query,
.search-no-results .al60-search-page-title-query {
  font-style: italic !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (max-width: 640px) {
  .search-results .al60-search-title-bar,
  .search-no-results .al60-search-title-bar {
    padding: 1.55rem 0 1.45rem !important;
  }

  .search-results .al60-search-page-title,
  .search-no-results .al60-search-page-title {
    font-size: clamp(1.75rem, 7.2vw, 2.15rem) !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 420px) {
  .search-results .al60-search-page-title,
  .search-no-results .al60-search-page-title {
    font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
  }
}


/* AL60 3.3.12 – Header search mobile overflow fix
   Problem: On Android/mobile the opened search form could extend beyond the viewport,
   because the absolute dropdown was shifted with a negative right offset.
   Fix: keep the dropdown inside the viewport on small screens.
   Only header search CSS affected. No search logic, no Event plugin/data/templates. */
@media (max-width: 520px) {
  .al60-header-search {
    position: relative !important;
    max-width: 100% !important;
  }

  .al60-header-search__form {
    right: 0 !important;
    left: auto !important;
    width: min(22rem, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .al60-header-search__form::before {
    right: 1rem !important;
  }

  .al60-header-search__form input[type="search"],
  .al60-header-search__form button[type="submit"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* AL60 3.3.13 – Mobile sticky header/menu compact fix
   Ziel: Auf Android/Mobil soll der sticky Header im geschlossenen Zustand deutlich niedriger sein.
   Wenn das Menü geöffnet wird, darf es die Seite nicht dauerhaft nach unten drücken und nicht fast 1/3 der Seite bedecken.
   Lösung: mobile Header-Elemente in eine kompakte Ein-Zeilen-Anordnung; geöffnetes Menü als internes Scroll-Panel unter dem Header.
   Nur Header/Mobile-Menü-CSS betroffen. Keine Suche-Logik, keine Event-Templates, keine Eventdaten, keine Plugins. */
@media (max-width: 768px) {
  .site-header {
    padding: 0.35rem 0 !important;
  }

  .site-header .container {
    display: grid !important;
    grid-template-columns: minmax(92px, 1fr) auto auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 0.45rem !important;
    row-gap: 0.3rem !important;
    flex-wrap: nowrap !important;
    position: relative !important;
  }

  .site-branding {
    min-width: 0 !important;
  }

  .site-branding .custom-logo {
    max-height: 42px !important;
    max-width: 125px !important;
    width: auto !important;
  }

  .main-nav {
    width: auto !important;
    order: 0 !important;
    min-width: 0 !important;
  }

  .nav-toggle {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 0.82rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    border-radius: 15px !important;
    white-space: nowrap !important;
  }

  .al60-header-search {
    margin-left: 0 !important;
    position: relative !important;
  }

  .al60-header-search__toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 1.05rem !important;
  }

  .site-header .al60-font-tools--single {
    margin-left: 0 !important;
  }

  .site-header .al60-font-tools--single .al60-font-tools__cycle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .site-header .al60-font-tools__cycle-label {
    display: none !important;
  }

  /* Menüpanel nicht mehr als zusätzliche hohe Header-Zeile rendern, sondern unter dem Sticky-Header öffnen. */
  .main-nav > ul.is-open {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 900 !important;
    width: 100% !important;
    max-height: min(46vh, 310px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top: 0 !important;
    padding: 0.5rem !important;
    gap: 0.25rem !important;
    box-sizing: border-box !important;
  }

  .main-nav > ul.is-open a {
    min-height: 42px !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.18 !important;
  }

  .main-nav > ul.is-open .sub-menu {
    padding: 0.15rem 0 0.15rem 0.55rem !important;
    margin: 0.15rem 0 0.1rem 0.25rem !important;
    gap: 0.15rem !important;
  }

  .main-nav > ul.is-open .sub-menu a {
    min-height: 38px !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.94rem !important;
  }
}

@media (max-width: 380px) {
  .site-header .container {
    grid-template-columns: minmax(82px, 1fr) auto auto auto !important;
    column-gap: 0.35rem !important;
  }

  .site-branding .custom-logo {
    max-height: 38px !important;
    max-width: 108px !important;
  }

  .nav-toggle {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 0.72rem !important;
    font-size: 0.94rem !important;
  }

  .al60-header-search__toggle,
  .site-header .al60-font-tools--single .al60-font-tools__cycle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .main-nav > ul.is-open {
    max-height: min(44vh, 280px) !important;
  }
}


/* AL60 3.3.14 – Mobile menu full-open / tap accuracy fix
   Problem: 3.3.13 made the Android mobile menu compact but used an internal scroll panel.
   On some Android devices/touch emulation the panel scrollbar/touch handling caused mis-taps
   where the menu item underneath was opened. The panel also required an extra inner scroll.
   Ziel: Menu may open fully without its own inner scrollbar. If it is taller than the viewport,
   the normal page scroll is used. Closed mobile header stays compact/sticky.
   Scope: Mobile header/menu CSS only. No search logic, no events, no plugins, no DB. */
@media (max-width: 768px) {
  /* While the menu is open, make the header normal in the document flow so a
     long menu can be reached by normal page scroll instead of an inner panel. */
  .site-header:has(.main-nav > ul.is-open) {
    position: relative !important;
    top: auto !important;
    z-index: 1000 !important;
  }

  .site-header .container:has(.main-nav > ul.is-open) {
    align-items: center !important;
  }

  /* Full opened menu: no internal scrollbar, no max-height clipping. */
  .main-nav > ul.is-open {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    left: 0.65rem !important;
    right: 0.65rem !important;
    width: auto !important;
    max-width: calc(100vw - 1.3rem) !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
    padding: 0.42rem !important;
    gap: 0.28rem !important;
    z-index: 1200 !important;
    box-sizing: border-box !important;
  }

  .main-nav > ul.is-open,
  .main-nav > ul.is-open * {
    touch-action: manipulation !important;
  }

  .main-nav > ul.is-open li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  .main-nav > ul.is-open a {
    min-height: 40px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: rgba(29, 96, 79, 0.22) !important;
  }

  .main-nav > ul.is-open .sub-menu {
    margin: 0.12rem 0 0.1rem 0 !important;
    padding: 0.12rem 0 0.12rem 0.45rem !important;
    gap: 0.12rem !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-nav > ul.is-open .sub-menu a {
    min-height: 36px !important;
    padding: 0.42rem 0.65rem !important;
    font-size: 0.93rem !important;
    line-height: 1.14 !important;
  }

  /* The opened menu is now outside the compact header height. Add a small
     visual separation without increasing the closed header. */
  .main-nav > ul.is-open::after {
    content: '' !important;
    display: block !important;
    height: 0.15rem !important;
  }
}

@media (max-width: 380px) {
  .main-nav > ul.is-open {
    left: 0.45rem !important;
    right: 0.45rem !important;
    max-width: calc(100vw - 0.9rem) !important;
    padding: 0.34rem !important;
    gap: 0.22rem !important;
  }

  .main-nav > ul.is-open a {
    min-height: 38px !important;
    padding: 0.46rem 0.62rem !important;
    font-size: 0.94rem !important;
  }

  .main-nav > ul.is-open .sub-menu a {
    min-height: 34px !important;
    padding: 0.38rem 0.56rem !important;
    font-size: 0.90rem !important;
  }
}


/* AL60 3.3.15 – Mobile header open-state + search alignment fix
   Problem 1: 3.3.14 made the header relative while the mobile menu was open. If the user was already scrolled down,
   the sticky header lost its sticky position and the opened menu was no longer visible at the current viewport top.
   Problem 2: the mobile search form was positioned relative to the small search icon and could sit too far left.
   Fix: keep the sticky header sticky when the menu opens, open the menu below the sticky header without an inner
   scroll panel, and position the mobile search form relative to the whole header row with safe left/right margins.
   Scope: Mobile header/menu/search CSS only. No PHP, no search logic, no events, no plugins, no DB. */
@media (max-width: 768px) {
  /* Keep the compact header visible at the current scroll position while the menu is open. */
  .site-header:has(.main-nav > ul.is-open) {
    position: sticky !important;
    top: 0 !important;
    z-index: 1400 !important;
  }

  .site-header .container:has(.main-nav > ul.is-open) {
    position: relative !important;
    overflow: visible !important;
  }

  /* Opened menu remains anchored below the visible sticky header, not at the original page top. */
  .main-nav > ul.is-open {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    left: 0.65rem !important;
    right: 0.65rem !important;
    width: auto !important;
    max-width: calc(100vw - 1.3rem) !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
    z-index: 1500 !important;
  }

  /* Search dropdown is positioned from the full header row, so it no longer starts too far left from the icon box. */
  .site-header .container {
    overflow: visible !important;
  }

  .al60-header-search {
    position: static !important;
  }

  .al60-header-search__form {
    position: absolute !important;
    top: calc(100% + 0.45rem) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    transform: none !important;
    z-index: 1600 !important;
  }

  .al60-header-search__form::before {
    right: 5.1rem !important;
  }
}

@media (max-width: 520px) {
  .al60-header-search__form {
    left: 0.7rem !important;
    right: 0.7rem !important;
    width: auto !important;
    max-width: none !important;
    flex-direction: column !important;
  }

  .al60-header-search__form::before {
    right: 4.9rem !important;
  }
}

@media (max-width: 380px) {
  .main-nav > ul.is-open {
    left: 0.45rem !important;
    right: 0.45rem !important;
    max-width: calc(100vw - 0.9rem) !important;
  }

  .al60-header-search__form {
    left: 0.55rem !important;
    right: 0.55rem !important;
  }

  .al60-header-search__form::before {
    right: 4.65rem !important;
  }
}


/* AL60 3.3.16 – Mobile menu drawer / scroll + section hierarchy fix
   Problem: 3.3.15 anchored the opened mobile menu below the sticky header, but the long menu could extend beyond the viewport and was not scrollable.
   Zusätzlich wirkten Hauptpunkte und Unterpunkte optisch zu ähnlich.
   Lösung: opened mobile menu as a viewport-safe drawer below the sticky header with its own stable scroll area and clearer hierarchy.
   Scope: Mobile menu CSS only. No PHP, no search logic, no events, no plugins, no DB. */
@media (max-width: 768px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1400 !important;
  }

  .site-header .container {
    position: relative !important;
    overflow: visible !important;
  }

  /* Scrollable drawer: visible under sticky header, never wider than viewport. */
  .main-nav > ul.is-open {
    position: absolute !important;
    top: calc(100% + 0.34rem) !important;
    left: 0.55rem !important;
    right: 0.55rem !important;
    width: auto !important;
    max-width: calc(100vw - 1.1rem) !important;
    max-height: calc(100dvh - 5.25rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    z-index: 1800 !important;
    padding: 0.62rem !important;
    margin: 0 !important;
    border: 2px solid var(--al60-primary) !important;
    border-radius: 18px !important;
    background: #f7f5ef !important;
    box-shadow: 0 16px 36px rgba(16, 63, 52, 0.24) !important;
    box-sizing: border-box !important;
    gap: 0.42rem !important;
    scrollbar-width: thin !important;
  }

  .main-nav > ul.is-open,
  .main-nav > ul.is-open * {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: rgba(29, 96, 79, 0.22) !important;
  }

  .main-nav > ul.is-open li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Hauptpunkte: deutlich als Bereiche erkennbar. */
  .main-nav > ul.is-open > li > a {
    min-height: 42px !important;
    padding: 0.64rem 0.86rem !important;
    border-radius: 13px !important;
    border: 1px solid rgba(29, 96, 79, 0.28) !important;
    background: #ffffff !important;
    color: #17211d !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    touch-action: manipulation !important;
  }

  .main-nav > ul.is-open > li > a:hover,
  .main-nav > ul.is-open > li > a:focus-visible,
  .main-nav > ul.is-open > li.al60-section-active > a,
  .main-nav > ul.is-open > li.current-menu-item > a,
  .main-nav > ul.is-open > li.current_page_item > a,
  body.single-events .main-nav > ul.is-open > li > a[href$="/events/"],
  body.single-events .main-nav > ul.is-open > li > a[href$="/events"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events/"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events"] {
    background: var(--al60-primary) !important;
    color: #ffffff !important;
    border-color: var(--al60-primary) !important;
    box-shadow: 0 4px 10px rgba(16, 63, 52, 0.18) !important;
  }

  /* Untermenüs: kompakte eingerückte Liste unter dem jeweiligen Bereich. */
  .main-nav > ul.is-open .sub-menu {
    display: grid !important;
    gap: 0.26rem !important;
    margin: 0.28rem 0 0.42rem 0 !important;
    padding: 0.28rem 0 0.28rem 0.74rem !important;
    border-left: 5px solid rgba(29, 96, 79, 0.22) !important;
    background: transparent !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-nav > ul.is-open .sub-menu a {
    min-height: 38px !important;
    padding: 0.50rem 0.72rem !important;
    border-radius: 11px !important;
    border: 1px solid rgba(23, 33, 29, 0.18) !important;
    background: #ffffff !important;
    color: #17211d !important;
    font-size: 0.94rem !important;
    font-weight: 650 !important;
    line-height: 1.14 !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
  }

  .main-nav > ul.is-open .sub-menu a:hover,
  .main-nav > ul.is-open .sub-menu a:focus-visible,
  .main-nav > ul.is-open .sub-menu li.al60-subsection-active > a,
  .main-nav > ul.is-open .sub-menu li.current-menu-item > a,
  .main-nav > ul.is-open .sub-menu li.current_page_item > a {
    background: #e5f1ec !important;
    color: var(--al60-primary) !important;
    border-color: rgba(29, 96, 79, 0.45) !important;
  }

  /* Avoid the old pseudo spacer inside the new drawer. */
  .main-nav > ul.is-open::after {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 380px) {
  .main-nav > ul.is-open {
    left: 0.4rem !important;
    right: 0.4rem !important;
    max-width: calc(100vw - 0.8rem) !important;
    max-height: calc(100dvh - 5rem) !important;
    padding: 0.5rem !important;
    border-radius: 16px !important;
  }

  .main-nav > ul.is-open > li > a {
    min-height: 40px !important;
    padding: 0.56rem 0.72rem !important;
    font-size: 0.98rem !important;
  }

  .main-nav > ul.is-open .sub-menu {
    padding-left: 0.58rem !important;
  }

  .main-nav > ul.is-open .sub-menu a {
    min-height: 36px !important;
    padding: 0.45rem 0.62rem !important;
    font-size: 0.90rem !important;
  }
}

/* AL60 3.3.17 – Search title desktop alignment fix
   Problem: 3.3.11 protected the mobile search title against overflow by forcing
   the search title container to max-width:100%. On desktop this made the title
   start too far left while the result grid stayed centered in the normal AL60
   container. Fix: restore the normal centered container on desktop and keep the
   mobile overflow protection only for small screens.
   Scope: Search title CSS only. No search logic, no menu, no events, no plugins, no DB. */
.search-results .al60-search-title-bar .container,
.search-no-results .al60-search-title-bar .container {
  max-width: var(--al60-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--al60-space-md) !important;
}

.search-results .al60-search-page-title,
.search-no-results .al60-search-page-title {
  font-size: clamp(1.9rem, 3.2vw, 2.55rem) !important;
  line-height: 1.16 !important;
}

@media (min-width: 981px) {
  .search-results .al60-search-title-bar,
  .search-no-results .al60-search-title-bar {
    padding-top: 1.65rem !important;
    padding-bottom: 1.55rem !important;
  }
}

@media (max-width: 640px) {
  .search-results .al60-search-title-bar .container,
  .search-no-results .al60-search-title-bar .container {
    max-width: 100% !important;
  }
}

/* AL60 3.3.18 – Search: local travel offers section
   Adds locally stored AL60 Awin travel offers to search.php display.
   No live Awin/API requests, no import, no DB writes, no Event plugin changes. */
.al60-search-travel-offers {
  margin-top: 2rem;
}

.al60-search-section-head {
  max-width: 48rem;
  margin: 0 0 1.15rem;
}

.al60-search-section-head h2 {
  margin: 0 0 0.35rem;
  color: var(--al60-text, #1f2933);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.2;
}

.al60-search-section-head p {
  margin: 0;
  color: var(--al60-muted, #3e4b45);
  font-size: 0.92rem;
  line-height: 1.5;
}

.search-results .al60-search-result-card--travel-offer .al60-search-result-type {
  background: rgba(102, 149, 40, 0.13) !important;
}

.al60-search-result-provider {
  display: block;
  margin: -0.18rem 0 0.45rem;
  color: var(--al60-primary-dark, #145443);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.al60-search-result-price {
  margin: 0.55rem 0 0 !important;
  color: var(--al60-primary-dark, #145443);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.al60-search-result-disclosure {
  display: block;
  margin-top: 0.38rem;
  color: var(--al60-muted, #3e4b45);
  font-size: 0.70rem;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 640px) {
  .al60-search-travel-offers {
    margin-top: 1.55rem;
  }

  .al60-search-section-head {
    margin-bottom: 0.9rem;
  }
}


/* ==========================================================================
   AL60 3.3.20 – Seniorenfreundliches Farbschema (nur Farben)
   Research basis: WCAG 2.2 contrast, non-text contrast and use-of-color.
   Scope: colour tokens and colour states only. No font size, spacing, layout,
   event logic, search logic, plugin, database or n8n changes.
   ========================================================================== */
:root {
  --al60-bg:           #F1EEE6;
  --al60-surface:      #FFFFFF;
  --al60-surface-soft: #DFE9E4;
  --al60-text:         #17211D;
  --al60-text-muted:   #36443E;
  --al60-primary:      #1F6A55;
  --al60-primary-dark: #123F35;
  --al60-primary-soft: #DCEBE4;
  --al60-accent:       #965307;
  --al60-accent-soft:  #F3E1C8;
  --al60-border:       #827C72;
  --al60-focus:        #FFD400;
  --al60-focus-ink:    #17211D;
}

/* Warm, low-glare page background with high-contrast text. */
body,
.site-wrapper,
.site-main {
  background-color: var(--al60-bg);
  color: var(--al60-text);
}

/* Secondary text remains clearly readable instead of pale grey. */
.text-muted,
.page-title-sub,
.portal-card-desc,
.footer-col p,
.al60-search-section-head p,
.al60-search-result-disclosure {
  color: var(--al60-text-muted) !important;
}

/* Strong, consistent component boundaries. */
.card,
.event-card,
.portal-card,
.dir-card,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--al60-border) !important;
}

/* High-contrast keyboard focus that remains visible on light and dark areas. */
:focus-visible {
  outline-color: var(--al60-focus) !important;
  box-shadow: 0 0 0 2px var(--al60-focus-ink) !important;
}

/* Accessible amber accent: white text now exceeds WCAG AA for normal text. */
.btn-accent,
.main-nav > ul.is-open .current-menu-item > a,
.main-nav > ul.is-open .current_page_item > a {
  background-color: var(--al60-accent);
  color: #FFFFFF;
  border-color: var(--al60-accent);
}

.event-category-badge {
  background: var(--al60-accent-soft);
  color: var(--al60-accent);
  border-color: rgba(139, 79, 11, 0.45);
}

.search-results .al60-search-result-card--travel-offer .al60-search-result-type {
  background: var(--al60-primary-soft) !important;
  color: var(--al60-primary-dark) !important;
  border-color: rgba(29, 96, 79, 0.45) !important;
}

/* Mobile drawer colour alignment with the same accessible palette. */
@media (max-width: 768px) {
  .main-nav > ul.is-open {
    background: var(--al60-bg) !important;
    border-color: var(--al60-primary) !important;
  }

  .main-nav > ul.is-open > li > a,
  .main-nav > ul.is-open .sub-menu a {
    background: var(--al60-surface) !important;
    color: var(--al60-text) !important;
    border-color: var(--al60-border) !important;
  }

  .main-nav > ul.is-open > li > a:hover,
  .main-nav > ul.is-open > li > a:focus-visible,
  .main-nav > ul.is-open > li.al60-section-active > a,
  .main-nav > ul.is-open > li.current-menu-item > a,
  .main-nav > ul.is-open > li.current_page_item > a,
  body.single-events .main-nav > ul.is-open > li > a[href$="/events/"],
  body.single-events .main-nav > ul.is-open > li > a[href$="/events"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events/"],
  body.is-event .main-nav > ul.is-open > li > a[href$="/events"] {
    background: var(--al60-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--al60-primary) !important;
  }

  .main-nav > ul.is-open .sub-menu {
    border-left-color: var(--al60-primary) !important;
  }

  .main-nav > ul.is-open .sub-menu a:hover,
  .main-nav > ul.is-open .sub-menu a:focus-visible,
  .main-nav > ul.is-open .sub-menu li.al60-subsection-active > a,
  .main-nav > ul.is-open .sub-menu li.current-menu-item > a,
  .main-nav > ul.is-open .sub-menu li.current_page_item > a {
    background: var(--al60-primary-soft) !important;
    color: var(--al60-primary-dark) !important;
    border-color: var(--al60-primary) !important;
  }
}

/* ========================================================================== 
   AL60 3.3.21 – Farbkontrast-Nachbesserung / Footer-Fix (nur Farben)
   - Footer-Texte gegen spaetere globale Muted-Regeln abgesichert.
   - Farbunterschiede zwischen Seitenhintergrund, Sekundaerflaechen und Karten
     klarer sichtbar, ohne Typografie, Abstaende oder Layout zu veraendern.
   - ID-Austria-Inline-CSS bleibt bewusst im temporaeren Seiteninhalt.
   ========================================================================== */
:root {
  --al60-bg:           #F1EEE6;
  --al60-surface:      #FFFFFF;
  --al60-surface-soft: #DFE9E4;
  --al60-text:         #17211D;
  --al60-text-muted:   #36443E;
  --al60-primary:      #1F6A55;
  --al60-primary-dark: #123F35;
  --al60-primary-soft: #DCEBE4;
  --al60-accent:       #965307;
  --al60-accent-soft:  #F3E1C8;
  --al60-border:       #827C72;
}

/* Die neue Palette soll sichtbar, aber ruhig wirken. */
.site-header {
  background-color: #FFFDF8 !important;
  border-bottom-color: #B8B1A5 !important;
}

.page-title-bar,
.section-light {
  background-color: var(--al60-surface-soft) !important;
}

.card,
.event-card,
.post-card,
.portal-card,
.dir-card,
.sidebar-card,
.event-info-group,
.al60-search-result-card {
  background-color: var(--al60-surface) !important;
  border-color: var(--al60-border) !important;
}

/* Footer: alle Textgruppen explizit hell, damit .footer-col p aus dem
   allgemeinen Farbschema nicht mehr dunkel auf dunkel ueberschreibt. */
body .site-footer {
  background: linear-gradient(180deg, #174C3E 0%, #123F35 100%) !important;
  color: #F7FBF8 !important;
  border-top-color: #75A995 !important;
}

body .site-footer .footer-col-title,
body .site-footer .footer-brand {
  color: #FFFFFF !important;
  border-bottom-color: rgba(255,255,255,.28) !important;
}

body .site-footer .footer-col p,
body .site-footer p,
body .site-footer .footer-copy {
  color: #E4EEE9 !important;
}

body .site-footer .footer-copy,
body .site-footer .footer-columns {
  border-color: rgba(255,255,255,.24) !important;
}

body .site-footer a,
body .site-footer .footer-col a,
body .site-footer .footer-copy a {
  color: #FFFFFF !important;
}

body .site-footer a:hover,
body .site-footer a:focus-visible,
body .site-footer .footer-col a:hover,
body .site-footer .footer-col a:focus-visible,
body .site-footer .footer-copy a:hover,
body .site-footer .footer-copy a:focus-visible {
  color: #FFFFFF !important;
  background-color: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.36) !important;
}

body .site-footer .al60-affiliate-footer-box::before,
body .site-footer .widget_block:has(.al60-affiliate-banner-carousel)::before,
body .site-footer .wp-block-group:has(.al60-affiliate-banner-carousel)::before {
  color: rgba(255,255,255,.76) !important;
}


/* ========================================================================== 
   AL60 3.3.22 – Kontrast- und Zustands-Pass (nur Farben)
   Ziel: konsistente Sekundaertexte, Links, Fokus-, Hover-, Aktiv- und
   Deaktiviert-Zustaende. Keine Typografie-, Abstand-, Layout-, Event-,
   Plugin-, Datenbank-, Import-, Cleanup-, Cron- oder n8n-Aenderung.
   ========================================================================== */
:root {
  --al60-link:          #1F6A55;
  --al60-link-hover:    #123F35;
  --al60-link-visited:  #5A3F72;
  --al60-disabled-bg:   #D7D3CA;
  --al60-disabled-text: #4F5652;
  --al60-disabled-line: #8B877D;
}

/* Sekundaerinformationen bleiben auf weissen und cremefarbenen Flaechen
   deutlich lesbar und werden nicht auf sehr helle Grautoene reduziert. */
.text-muted,
.page-title-sub,
.portal-card-desc,
.card-meta,
.entry-meta,
.post-meta,
.event-location,
.event-time,
.card-excerpt,
.archive-count,
.al60-search-section-head p,
.al60-search-result-provider,
.al60-search-result-disclosure,
.al60-search-result-excerpt,
.al60-travel-card-meta,
.al60-travel-offer-meta,
.al60-offer-meta,
.form-help,
.description {
  color: var(--al60-text-muted) !important;
}

/* Inhaltslinks: klar erkennbar, immer unterstrichen. Besuchte Links erhalten
   einen eigenen dunklen Farbzustand. Navigation, Buttons, Karten-CTAs und die
   spezielle ID-Austria-Steuerung bleiben davon ausgenommen. */
.entry-content a:not(.btn):not(.button):not(.wpb_button):not(.al60-ida-button):not(.al60-ida-source):not([class*="button"]):not([class*="cta"]),
.portal-editor-content a:not(.btn):not(.button):not(.wpb_button):not([class*="button"]):not([class*="cta"]),
.single-content a:not(.btn):not(.button):not(.wpb_button):not([class*="button"]):not([class*="cta"]) {
  color: var(--al60-link) !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 0.10em !important;
  text-underline-offset: 0.18em !important;
}

.entry-content a:not(.btn):not(.button):not(.wpb_button):not(.al60-ida-button):not(.al60-ida-source):not([class*="button"]):not([class*="cta"]):visited,
.portal-editor-content a:not(.btn):not(.button):not(.wpb_button):not([class*="button"]):not([class*="cta"]):visited,
.single-content a:not(.btn):not(.button):not(.wpb_button):not([class*="button"]):not([class*="cta"]):visited {
  color: var(--al60-link-visited) !important;
}

.entry-content a:not(.btn):not(.button):not(.wpb_button):not(.al60-ida-button):not(.al60-ida-source):not([class*="button"]):not([class*="cta"]):hover,
.portal-editor-content a:not(.btn):not(.button):not(.wpb_button):not([class*="button"]):not([class*="cta"]):hover,
.single-content a:not(.btn):not(.button):not(.wpb_button):not([class*="button"]):not([class*="cta"]):hover {
  color: var(--al60-link-hover) !important;
  text-decoration-thickness: 0.16em !important;
}

/* Einheitlicher Tastaturfokus: gelber Aussenring plus dunkler Gegenring.
   Die Regel veraendert keine Abmessung und bleibt auf hellen wie dunklen
   Hintergruenden sichtbar. */
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--al60-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--al60-focus-ink) !important;
}

/* Formularfelder: eindeutige Normal-, Hover- und Fokusfarben. */
input:not([type="checkbox"]):not([type="radio"]):not(:disabled),
select:not(:disabled),
textarea:not(:disabled) {
  background-color: var(--al60-surface) !important;
  color: var(--al60-text) !important;
  border-color: var(--al60-border) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not(:disabled):hover,
select:not(:disabled):hover,
textarea:not(:disabled):hover {
  border-color: var(--al60-primary) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not(:disabled):focus,
select:not(:disabled):focus,
textarea:not(:disabled):focus {
  border-color: var(--al60-primary-dark) !important;
  color: var(--al60-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #59645E !important;
  opacity: 1 !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--al60-primary) !important;
}

/* Primaere und Outline-Aktionen: klare Farbstufen fuer Normal und Hover. */
.btn-primary,
.button-primary,
a.btn-primary,
a.button-primary,
input[type="submit"],
button[type="submit"],
.event-card-button,
.al60-post-card-button {
  background-color: var(--al60-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--al60-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.button-primary:hover,
.button-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible,
a.button-primary:hover,
a.button-primary:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
.event-card-button:hover,
.event-card-button:focus-visible,
.al60-post-card-button:hover,
.al60-post-card-button:focus-visible {
  background-color: var(--al60-primary-dark) !important;
  color: #FFFFFF !important;
  border-color: var(--al60-primary-dark) !important;
}

.btn-outline,
a.btn-outline,
.al60-search-result-button,
.al60-search-result-footer .btn,
.al60-search-result-footer a.btn {
  background-color: #FFFFFF !important;
  color: var(--al60-primary-dark) !important;
  border-color: var(--al60-primary) !important;
}

.btn-outline:hover,
.btn-outline:focus-visible,
a.btn-outline:hover,
a.btn-outline:focus-visible,
.al60-search-result-button:hover,
.al60-search-result-button:focus-visible,
.al60-search-result-footer .btn:hover,
.al60-search-result-footer .btn:focus-visible,
.al60-search-result-footer a.btn:hover,
.al60-search-result-footer a.btn:focus-visible {
  background-color: var(--al60-primary-dark) !important;
  color: #FFFFFF !important;
  border-color: var(--al60-primary-dark) !important;
}

/* Aktive Navigation und Pagination nicht nur ueber einen schwachen Farbton,
   sondern mit klarer Vollflaeche kennzeichnen. */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav a[aria-current="page"],
.pagination .page-numbers.current,
.al60-search-pagination .page-numbers.current {
  background-color: var(--al60-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--al60-primary) !important;
}

.pagination .page-numbers:not(.current):hover,
.pagination .page-numbers:not(.current):focus-visible,
.al60-search-pagination .page-numbers:not(.current):hover,
.al60-search-pagination .page-numbers:not(.current):focus-visible {
  background-color: var(--al60-primary-soft) !important;
  color: var(--al60-primary-dark) !important;
  border-color: var(--al60-primary) !important;
}

/* Ocker nur fuer Kategorien und kleine Hinweislabels. */
.event-category-badge,
.cat-badge,
.al60-ida-count {
  background-color: var(--al60-accent-soft) !important;
  color: var(--al60-accent) !important;
  border-color: rgba(150, 83, 7, 0.48) !important;
}

/* Deaktivierte Elemente bleiben lesbar, wirken aber eindeutig inaktiv. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.btn[aria-disabled="true"],
.button[aria-disabled="true"],
a.btn[aria-disabled="true"],
a.button[aria-disabled="true"] {
  background-color: var(--al60-disabled-bg) !important;
  color: var(--al60-disabled-text) !important;
  border-color: var(--al60-disabled-line) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Footer-Zustaende: Weiss bleibt die Grundfarbe, Fokus wird bewusst gelb. */
body .site-footer a,
body .site-footer a:visited,
body .site-footer .footer-col a,
body .site-footer .footer-col a:visited,
body .site-footer .footer-copy a,
body .site-footer .footer-copy a:visited {
  color: #FFFFFF !important;
}

body .site-footer a:hover,
body .site-footer .footer-col a:hover,
body .site-footer .footer-copy a:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

body .site-footer a:focus-visible,
body .site-footer .footer-col a:focus-visible,
body .site-footer .footer-copy a:focus-visible {
  color: #FFFFFF !important;
  outline-color: var(--al60-focus) !important;
  box-shadow: 0 0 0 2px #17211D !important;
}


/* ==========================================================================
   AL60 Theme 3.3.24 — Eventbild-Formate + sauberer Veranstaltungsort
   - Portraitbilder: auf Desktop als ruhiger 16:9-Fotobereich mit kontrolliertem
     Beschnitt, damit keine grossen weissen Seitenflaechen entstehen.
   - Querformatbilder/Plakate: vollstaendig und ohne Beschnitt sichtbar.
   - Quadratische Bilder: kompakt, vollstaendig und mittig.
   - Veranstaltungsort: komma-getrennte Bestandteile zeilenweise, lange Namen
     sauber umbrechbar; keine ACF-, Daten-, Plugin- oder Terminlogik-Aenderung.
   ========================================================================== */

/* New inner media wrapper; mobile keeps the complete original image. */
body.is-event .event-detail-main .event-hero-media,
body.single-events .event-detail-main .event-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--al60-radius-md);
}

body.is-event .event-detail-main .event-hero-media img,
body.single-events .event-detail-main .event-hero-media img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 901px) {
  body.is-event .content-area .container.has-sidebar .event-detail-main .event-hero-image,
  body.single-events .content-area .container.has-sidebar .event-detail-main .event-hero-image {
    display: block !important;
    overflow: hidden !important;
  }

  /* Portrait photos: wide crop similar to the source presentation. */
  body.is-event .event-detail-main .event-hero-image--portrait .event-hero-media,
  body.single-events .event-detail-main .event-hero-image--portrait .event-hero-media {
    aspect-ratio: 16 / 9;
    background: var(--al60-surface-soft);
  }

  body.is-event .event-detail-main .event-hero-image--portrait .event-hero-media img,
  body.single-events .event-detail-main .event-hero-image--portrait .event-hero-media img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 42% !important;
  }

  /* Landscape images and posters remain complete. */
  body.is-event .event-detail-main .event-hero-image--landscape .event-hero-media img,
  body.single-events .event-detail-main .event-hero-image--landscape .event-hero-media img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Square images stay compact and are never cropped. */
  body.is-event .event-detail-main .event-hero-image--square .event-hero-media img,
  body.single-events .event-detail-main .event-hero-image--square .event-hero-media img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Venue lines: output-only formatting inside the existing sidebar block. */
.event-info-group--where .event-location-lines {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.event-info-group--where .event-location-line {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.event-info-group--where .event-location-name {
  font-weight: 700;
  color: var(--al60-text);
}

.event-info-group--where .event-location-address,
.event-info-group--where .event-location-city,
.event-info-group--where .event-location-state {
  font-weight: 400;
  color: var(--al60-text);
}

@media (max-width: 768px) {
  .event-info-group--where .event-location-lines {
    gap: 0.08rem;
  }
}

/* ==========================================================================
   AL60 Theme 3.3.25 — Datum und Uhrzeit getrennt im Veranstaltungsinfo-Block
   - bestehende Datums-/Multi-Date-Logik unverändert
   - Datum und Uhrzeit werden nur bei der HTML-Ausgabe in eigene Zeilen gesetzt
   ========================================================================== */
.event-info-group--when .event-when-lines {
  display: grid;
  gap: 0.12rem;
}

.event-info-group--when .event-info-date,
.event-info-group--when .event-info-time {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   AL60 Theme 3.3.26 — Veranstaltungsort in derselben Schriftgröße wie Datum
   - ausschließlich visuelle Anpassung im bestehenden Event-Info-Block
   - Datums-, Multi-Date-, Location- und Eventlogik unverändert
   ========================================================================== */
.event-info-group--where dd {
  font-size: var(--al60-font-size);
}

/* ==========================================================================
   AL60 Theme 3.3.27 — Ruhigerer Event-Lesetext
   - nur CSS auf Event-Detailseiten
   - schmalere Lesebreite, ruhigere Zeilenhöhe und klarere Absatzabstände
   - keine automatische Textzerlegung, keine Inhalts- oder Importänderung
   ========================================================================== */
body.is-event article.entry > .entry-content,
body.single-events article.entry > .entry-content {
  max-width: 64ch;
  line-height: 1.68;
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

body.is-event article.entry > .entry-content p,
body.single-events article.entry > .entry-content p {
  margin-top: 0;
  margin-bottom: 1.35rem;
}

body.is-event article.entry > .entry-content p:last-child,
body.single-events article.entry > .entry-content p:last-child {
  margin-bottom: 0;
}

body.is-event article.entry > .entry-content h2,
body.single-events article.entry > .entry-content h2,
body.is-event article.entry > .entry-content h3,
body.single-events article.entry > .entry-content h3 {
  text-wrap: balance;
}

@media (max-width: 768px) {
  body.is-event article.entry > .entry-content,
  body.single-events article.entry > .entry-content {
    max-width: 100%;
    line-height: 1.7;
  }

  body.is-event article.entry > .entry-content p,
  body.single-events article.entry > .entry-content p {
    margin-bottom: 1.2rem;
  }
}

/* ==========================================================================
   AL60 Theme 3.3.28 — Automatisch gegliederte lange Eventtexte
   - betrifft nur vom Theme erzeugte Anzeigeabsätze auf Event-Detailseiten
   - gespeicherter Inhalt bleibt unverändert
   ========================================================================== */
body.is-event article.entry > .entry-content .event-auto-paragraph,
body.single-events article.entry > .entry-content .event-auto-paragraph {
  margin: 0 0 1.45rem;
  max-width: 62ch;
}

body.is-event article.entry > .entry-content .event-auto-paragraph--intro,
body.single-events article.entry > .entry-content .event-auto-paragraph--intro {
  font-size: 1.04em;
  font-weight: 500;
  line-height: 1.7;
}

body.is-event article.entry > .entry-content .event-auto-paragraph:last-child,
body.single-events article.entry > .entry-content .event-auto-paragraph:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  body.is-event article.entry > .entry-content .event-auto-paragraph,
  body.single-events article.entry > .entry-content .event-auto-paragraph {
    max-width: 100%;
    margin-bottom: 1.25rem;
  }

  body.is-event article.entry > .entry-content .event-auto-paragraph--intro,
  body.single-events article.entry > .entry-content .event-auto-paragraph--intro {
    font-size: 1em;
    line-height: 1.7;
  }
}