/*
Theme Name: Eintracht Lemgo (2026)
Theme URI: https://www.eintrachtlemgo.de/
Author: Louis Hagemann
Author URI: https://wordpress.org/
Description: Theme für eintrachtlemgo.de (2026).
Version: 1.0
Text Domain: el
*/
@charset "UTF-8";

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --el-navy:        #171e55;
  --el-navy-900:    #0b1038;
  --el-navy-800:    #11163f;
  --el-navy-600:    #232c70;
  --el-sky:         #3abbe4;
  --el-sky-700:     #1487b3;
  --el-sky-100:     #e3f6fc;
  --el-gold:        #f4c20d;
  --el-gold-600:    #d8a800;
  --el-white:       #ffffff;
  --el-ink:         #0c1130;
  --el-slate-700:   #3a4163;
  --el-slate-500:   #6b7191;
  --el-slate-300:   #b9bdd0;
  --el-slate-200:   #dadce7;
  --el-slate-100:   #eef0f6;
  --el-paper:       #f6f7fb;

  --font-display:   'Permanent Marker', cursive;
  --font-body:      'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --font-longform:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shadow-sm:      0 2px 8px rgba(12, 17, 48, 0.08);
  --shadow-md:      0 8px 24px rgba(12, 17, 48, 0.12);
  --shadow-card:    0 10px 30px rgba(12, 17, 48, 0.10);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base:       220ms;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: 0.6px;
  color: var(--el-ink);
  background: var(--el-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.4em;
}

p { margin: 0 0 1em; }

a {
  color: inherit;
  text-underline-offset: 3px;
  transition: opacity var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.8; }

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


/* ============================================================
   HEADER
   ============================================================ */
#header {
  z-index: 2000;
  background: rgba(11, 16, 56, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
}

/* Flex-Layout: Links | Logo | Rechts */
.el-header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 78px;
  gap: 48px;
}

/* Linke + rechte Seite */
.el-header-nav__left,
.el-header-nav__right {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
}
.el-header-nav__left {
  justify-content: flex-end;
}
.el-header-nav__right {
  justify-content: flex-start;
}

/* Logo zentriert */
.el-header-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
#header .logo {
  height: 68px;
  width: auto;
  display: block;
}
.el-header-nav__logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #ffffff;
  line-height: 1;
}

/* Menü-Links */
.el-header-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.el-header-menu li a {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.el-header-menu li a:hover {
  color: var(--el-sky);
  opacity: 1;
}
.el-header-menu li.current-menu-item a {
  color: var(--el-sky);
}

/* CTA-Button: Gold + Blur-Glow */
.el-header-cta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--el-gold);
  color: var(--el-navy) !important;
  padding: 8px 22px;
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(244, 194, 13, 0.4),
              0 0 40px rgba(244, 194, 13, 0.15);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) ease;
}
.el-header-cta:hover {
  background: #ffffff;
  color: var(--el-navy) !important;
  box-shadow: 0 0 24px rgba(244, 194, 13, 0.55),
              0 0 60px rgba(244, 194, 13, 0.2);
  opacity: 1;
}

/* Mobile: nur Logo, Menüpunkte ausblenden */
@media (max-width: 991px) {
  .el-header-nav__left,
  .el-header-nav__right {
    display: none;
  }
  .el-header-nav {
    justify-content: center;
  }
}


/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background: var(--el-navy-900);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-body);
  letter-spacing: 0.6px;
}

#footer a {
  color: rgba(255, 255, 255, 0.75);
}
#footer a:hover {
  color: var(--el-sky);
  opacity: 1;
}

#footer .footer-legal {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}


/* ============================================================
   BLOCK STYLES — Sektions-Hintergründe
   is-style-navy / is-style-sky / is-style-navy-900
   ============================================================ */

/* Navy (Farbe 1) */
.wp-block-group.is-style-navy,
.wp-block-cover.is-style-navy {
  background: var(--el-navy) !important;
  color: #ffffff !important;
}
.wp-block-group.is-style-navy h1,
.wp-block-group.is-style-navy h2,
.wp-block-group.is-style-navy h3,
.wp-block-group.is-style-navy h4,
.wp-block-group.is-style-navy p,
.wp-block-group.is-style-navy li {
  color: #ffffff;
}
.wp-block-group.is-style-navy .wp-block-separator {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Sky (Farbe 2) */
.wp-block-group.is-style-sky,
.wp-block-cover.is-style-sky {
  background: var(--el-sky) !important;
  color: var(--el-navy) !important;
}
.wp-block-group.is-style-sky h1,
.wp-block-group.is-style-sky h2,
.wp-block-group.is-style-sky h3,
.wp-block-group.is-style-sky h4,
.wp-block-group.is-style-sky p,
.wp-block-group.is-style-sky li {
  /*color: var(--el-navy);*/
}

/* Navy 900 (tiefes Nacht-Navy) */
.wp-block-group.is-style-navy-900 {
  background: var(--el-navy-900) !important;
  color: #ffffff !important;
}
.wp-block-group.is-style-navy-900 h1,
.wp-block-group.is-style-navy-900 h2,
.wp-block-group.is-style-navy-900 h3,
.wp-block-group.is-style-navy-900 h4,
.wp-block-group.is-style-navy-900 p {
  color: #ffffff;
}

/* Paper (heller Hintergrund) */
.wp-block-group.is-style-paper {
  background: var(--el-paper) !important;
  color: var(--el-ink) !important;
}


/* ============================================================
   BLOCK STYLES — Buttons
   ============================================================ */
.wp-block-button .wp-block-button__link {
  font-family: var(--font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all var(--dur-base) var(--ease-out);
}

/* Outline-Variante auf dunklem Hintergrund */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--el-gold) !important;
  border-color: var(--el-gold) !important;
}

/* Gold-Variante */
.wp-block-button.is-style-gold .wp-block-button__link {
  background: var(--el-gold) !important;
  color: var(--el-navy) !important;
  border: none !important;
}
.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background: #ffffff !important;
  color: var(--el-navy) !important;
}

/* Sky-Variante */
.wp-block-button.is-style-sky .wp-block-button__link {
  background: var(--el-sky) !important;
  color: var(--el-navy) !important;
  border: none !important;
}


/* ============================================================
   TYPOGRAFIE-STILE — Heading-Größen ohne semantischen Tag
   Verwendung: Absatz-Block → Stile → "H2-Stil" etc.
   SEO-Vorteil: visuelle Größe ≠ DOM-Struktur
   ============================================================ */

/*
 * Basis-Mixin für alle Heading-Stil-Klassen.
 * Gilt für:
 *   wp-block-paragraph.is-style-hX-stil   → Absatz-Block mit Stil
 *   wp-block-heading.is-style-hX-stil     → Heading-Block mit anderem Größen-Stil
 *   .has-hX-font-style                    → manuelle Utility-Klasse (via "Zusätzliche CSS-Klasse")
 */

/* — H1-Stil — */
.wp-block-paragraph.is-style-h1-stil,
.wp-block-heading.is-style-h1-stil,
.has-h1-font-style {
  font-family: var(--font-display) !important;
  font-size: var(--wp--preset--font-size--h1) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  font-weight: 400 !important;
  margin-bottom: 0.4em !important;
}

/* — H2-Stil — */
.wp-block-paragraph.is-style-h2-stil,
.wp-block-heading.is-style-h2-stil,
.has-h2-font-style {
  font-family: var(--font-display) !important;
  font-size: var(--wp--preset--font-size--h2) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  font-weight: 400 !important;
  margin-bottom: 0.4em !important;
}

/* — H3-Stil — */
.wp-block-paragraph.is-style-h3-stil,
.wp-block-heading.is-style-h3-stil,
.has-h3-font-style {
  font-family: var(--font-display) !important;
  font-size: var(--wp--preset--font-size--h3) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  font-weight: 400 !important;
  margin-bottom: 0.4em !important;
}

/* — H4-Stil — */
.wp-block-paragraph.is-style-h4-stil,
.wp-block-heading.is-style-h4-stil,
.has-h4-font-style {
  font-family: var(--font-display) !important;
  font-size: var(--wp--preset--font-size--h4) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  font-weight: 400 !important;
  margin-bottom: 0.4em !important;
}

/* — H5-Stil (Label-Größe) — */
.wp-block-paragraph.is-style-h5-stil,
.wp-block-heading.is-style-h5-stil,
.has-h5-font-style {
  font-family: var(--font-body) !important;
  font-size: var(--wp--preset--font-size--h5) !important;
  line-height: 1.3 !important;
  letter-spacing: 1px !important;
  font-weight: 400 !important;
  margin-bottom: 0.4em !important;
}

/* — Eyebrow-Label — Absatz oder Heading, kein <h5> nötig — */
.wp-block-paragraph.is-style-eyebrow,
.wp-block-heading.is-style-eyebrow,
.has-eyebrow-style {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--el-sky) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

/* Eyebrow auf Navy / Navy-900: Sky-Textfarbe */
.wp-block-group.is-style-navy    .wp-block-paragraph.is-style-eyebrow,
.wp-block-group.is-style-navy    .wp-block-heading.is-style-eyebrow,
.wp-block-group.is-style-navy    .has-eyebrow-style,
.wp-block-group.is-style-navy-900 .wp-block-paragraph.is-style-eyebrow,
.wp-block-group.is-style-navy-900 .wp-block-heading.is-style-eyebrow,
.wp-block-group.is-style-navy-900 .has-eyebrow-style {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  margin-bottom: 0.5rem !important;
  color: var(--el-sky) !important;
}

/* Eyebrow auf Sky: Navy-Textfarbe — Rest identisch */
.wp-block-group.is-style-sky .wp-block-paragraph.is-style-eyebrow,
.wp-block-group.is-style-sky .wp-block-heading.is-style-eyebrow,
.wp-block-group.is-style-sky .has-eyebrow-style {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  margin-bottom: 0.5rem !important;
  color: var(--el-navy) !important;
}

/* Farbanpassung H-Stile auf dunklen Sektionen */
.wp-block-group.is-style-navy    .wp-block-paragraph.is-style-h1-stil,
.wp-block-group.is-style-navy    .wp-block-paragraph.is-style-h2-stil,
.wp-block-group.is-style-navy    .wp-block-paragraph.is-style-h3-stil,
.wp-block-group.is-style-navy    .wp-block-paragraph.is-style-h4-stil,
.wp-block-group.is-style-navy    .wp-block-paragraph.is-style-h5-stil,
.wp-block-group.is-style-navy-900 .wp-block-paragraph.is-style-h1-stil,
.wp-block-group.is-style-navy-900 .wp-block-paragraph.is-style-h2-stil,
.wp-block-group.is-style-navy-900 .wp-block-paragraph.is-style-h3-stil,
.wp-block-group.is-style-navy-900 .wp-block-paragraph.is-style-h4-stil,
.wp-block-group.is-style-navy-900 .wp-block-paragraph.is-style-h5-stil {
  color: #ffffff !important;
}


/* ============================================================
   BLOCK STYLES — Bild
   ============================================================ */
.wp-block-image.is-style-rounded img {
  border-radius: 14px;
}
.wp-block-image.is-style-circle img {
  border-radius: 999px;
  aspect-ratio: 1/1;
  object-fit: cover;
}


/* ============================================================
   FLIESSTEXT — Lesbarkeit in langen Absätzen
   Bebas Neue ist eine Display-Schrift (all-caps, kondensiert).
   Für längere Texte auf Sky/Paper-Sektionen auf Systemschrift wechseln.
   ============================================================ */

/* Alle Absatz-Blöcke in Sky- und Paper-Sektionen → Systemschrift */
.wp-block-group.is-style-sky .wp-block-paragraph,
.wp-block-group.is-style-paper .wp-block-paragraph,
.wp-block-media-text .wp-block-media-text__content p,
.wp-block-media-text .wp-block-media-text__content .wp-block-paragraph {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Absätze in Navy-Sektionen bleiben in Bebas, aber leicht größer + aufgelockerter */
.wp-block-group.is-style-navy .wp-block-paragraph,
.wp-block-group.is-style-navy-900 .wp-block-paragraph {
  font-size: 1.15rem;
  line-height: 1.45;
  letter-spacing: 0.4px;
}

/* ============================================================
   KONTAKT-FORMULAR — Button styling (WPForms / CF7 / Core Form)
   ============================================================ */

/* WPForms */
.wpforms-submit,
/* Contact Form 7 */
.wpcf7-submit,
/* WP Core Form Block */
.wp-block-form button[type="submit"],
.wp-block-button__link[type="submit"],
/* Generisch */
form input[type="submit"],
form button[type="submit"] {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: var(--el-navy) !important;
  color: #ffffff !important;
  border: 2px solid var(--el-navy) !important;
  border-radius: 999px !important;
  padding: 0.75rem 2rem !important;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease !important;
  display: inline-block;
}

form input[type="submit"]:hover,
form button[type="submit"]:hover,
.wpforms-submit:hover,
.wpcf7-submit:hover {
  background: var(--el-navy-600) !important;
  border-color: var(--el-navy-600) !important;
}

/* Auf Sky-Sektionen: Navy-Button */
.wp-block-group.is-style-sky form input[type="submit"],
.wp-block-group.is-style-sky form button[type="submit"],
.wp-block-group.is-style-sky .wpforms-submit,
.wp-block-group.is-style-sky .wpcf7-submit {
  background: var(--el-navy) !important;
  color: #ffffff !important;
  border-color: var(--el-navy) !important;
}

/* Formular-Felder */
.wp-block-group.is-style-sky input[type="text"],
.wp-block-group.is-style-sky input[type="email"],
.wp-block-group.is-style-sky input[type="tel"],
.wp-block-group.is-style-sky textarea,
.wp-block-group.is-style-sky select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  border: 2px solid var(--el-slate-200);
  border-radius: 10px;
  padding: 0.625rem 1rem;
  width: 100%;
  background: #ffffff;
  color: var(--el-ink);
  transition: border-color 200ms ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--el-sky);
  box-shadow: 0 0 0 3px rgba(58, 187, 228, 0.18);
}
.wp-block-columns .wp-block-column .border-gold {
  border:2px solid var(--el-gold) !important;
  border-radius: 10px !important;
}
/* ============================================================
   KONTAKTFORMULAR — weißer Kasten, zentriert in Spalte
   ============================================================ */

/* Formular-Wrapper (Contact Form 7) */
.wp-block-group.is-style-sky .wpcf7 {
  background: #ffffff;
  border: 1px solid var(--el-slate-200, #dadce7);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(12, 17, 48, 0.08);
  padding: 28px 28px 24px;
  max-width: 520px;
  margin: 0 auto;
}

/* Labels linksbündig */
.wpcf7 label {
  display: block;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--el-navy, #171e55);
  margin-bottom: 6px;
  text-align: left;
}

/* Felder volle Breite */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100% !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1rem !important;
  border: 2px solid var(--el-slate-200, #dadce7) !important;
  border-radius: 10px !important;
  padding: 0.625rem 1rem !important;
  background: #ffffff !important;
  color: var(--el-ink, #0c1130) !important;
  transition: border-color 200ms ease !important;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none !important;
  border-color: var(--el-sky, #3abbe4) !important;
  box-shadow: 0 0 0 3px rgba(58, 187, 228, 0.18) !important;
}

/* Abstände zwischen Feldern */
.wpcf7-form p {
  margin-bottom: 16px;
}


/* ============================================================
   GUTENBERG LAYOUT — Allgemein
   ============================================================ */
.wp-block-group.alignfull + .wp-block-group.alignfull {
  margin-top: 0;
}

.entry-content > .wp-block-group.alignfull:first-child {
  margin-top: 0;
}

/* Cover margin reset */
.wp-block-cover {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Alignment: constrained layout wide/full on large screens */
@media screen and (min-width: 1200px) {
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body .is-layout-constrained > .alignwide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   BILDER
   ============================================================ */
.wp-block-image img {
  border-radius: 14px; /* --radius-lg aus dem Design-System */
}

/* Media-Text Bild: kein Border-Radius (liegt an Kante) */
.wp-block-media-text .wp-block-media-text__media img {
  border-radius: 14px;
}

/* Cover: kein ungewollter Radius */
.wp-block-cover {
  border-radius: 0;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.el-eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--el-sky);
  display: inline-block;
}

.el-prose {
  font-family: var(--font-longform);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: 0;
}

.small, small { font-size: 0.875rem; }

/* Smooth image lazy-load fade */
img[data-src] { opacity: 0; }
img.lazyloaded {
  transition: opacity 0.2s linear 0.15s;
  opacity: 1;
}

/* Scroll reveal animation */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   ARCHIV — Beitragsübersicht
   ============================================================ */

/* Hero-Banner */
.el-archive-hero {
  background: var(--el-navy);
  color: #ffffff;
  padding: 5rem 0 3.5rem;
}
.el-archive-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--el-sky);
  display: block;
  margin-bottom: 0.5rem;
}
.el-archive-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  margin: 0;
  color: #ffffff;
}
.el-archive-hero__desc {
  font-family: var(--font-longform);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 1rem 0 0;
  max-width: 52ch;
}

/* Inhalt */
.el-archive-content {
  background: var(--el-paper);
  padding: 3rem 0 4rem;
}

/* Karten-Grid */
.el-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* Post-Card */
.el-post-card {
  background: #ffffff;
  border: 1px solid var(--el-slate-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(12, 17, 48, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.el-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(12, 17, 48, 0.12);
}

.el-post-card__image-link {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.el-post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 400ms var(--ease-out);
}
.el-post-card:hover .el-post-card__image {
  transform: scale(1.04);
}

.el-post-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.el-post-card__category {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--el-sky-700);
  display: inline-block;
}

.el-post-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 4px 0 0;
}
.el-post-card__title a {
  color: var(--el-navy);
  text-decoration: none;
}
.el-post-card__title a:hover {
  color: var(--el-sky-700);
  opacity: 1;
}

.el-post-card__date {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--el-slate-500);
  display: block;
}

.el-post-card__excerpt {
  font-family: var(--font-longform);
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--el-slate-700);
  margin: 4px 0 0;
}

.el-post-card__more {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--el-sky-700);
  text-decoration: none;
  margin-top: auto;
  padding-top: 8px;
  display: inline-block;
}
.el-post-card__more:hover {
  color: var(--el-navy);
  opacity: 1;
}

/* Pagination */
.el-pagination {
  margin-top: 3rem;
  text-align: center;
}
.el-pagination .page-numbers {
  list-style: none;
  display: inline-flex;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.el-pagination .page-numbers li {
  display: inline-block;
}
.el-pagination .page-numbers a,
.el-pagination .page-numbers span {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--el-navy);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background 200ms ease;
}
.el-pagination .page-numbers a:hover {
  background: var(--el-slate-100);
  opacity: 1;
}
.el-pagination .page-numbers .current {
  background: var(--el-navy);
  color: #ffffff;
}

/* Leerer Zustand */
.el-archive-empty {
  text-align: center;
  padding: 4rem 0;
}
.el-archive-empty p {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--el-slate-500);
  margin-bottom: 1.5rem;
}


/* ============================================================
   SINGLE — Beitragsdetailseite
   ============================================================ */

/* Hero */
.el-single-hero {
  background: var(--el-navy);
  color: #ffffff;
  padding: 3rem 0 2.5rem;
  text-align: center;
}

/* Beitragsbild zentriert */
.el-single-hero__image-wrap {
  max-width: 720px;
  margin: 0 auto 2rem;
}
.el-single-hero__image {
  width: 100%;
  border-radius: 14px;
  display: block;
}

.el-single-hero__category {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--el-navy);
  background: var(--el-gold);
  padding: 4px 14px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1rem;
  transition: background 200ms ease;
}
.el-single-hero__category:hover {
  background: var(--el-gold-600);
  opacity: 1;
}

.el-single-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  color: #ffffff;
  margin: 0 auto 1rem;
  max-width: 22ch;
}

.el-single-hero__meta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.el-single-hero__sep {
  color: rgba(255, 255, 255, 0.35);
}

/* Inhalt */
.el-single-content {
  background: var(--el-navy);
  padding: 3rem 0 2rem;
}
.el-single-content__body {
  max-width: 720px;
  margin: 0 auto;
}
.el-single-content__body p,
.el-single-content__body li {
  font-family: var(--font-longform) !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.88);
}
.el-single-content__body h2,
.el-single-content__body h3,
.el-single-content__body h4 {
  color: #ffffff;
  margin-top: 2rem;
}
.el-single-content__body img {
  border-radius: 14px;
  margin: 1.5rem 0;
}
.el-single-content__body a {
  color: var(--el-sky);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.el-single-content__body a:hover {
  color: #ffffff;
  opacity: 1;
}
.el-single-content__body blockquote {
  border-left: 4px solid var(--el-sky);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
}

/* Tags */
.el-single-tags {
  max-width: 720px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.el-single-tags__tag {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  padding: 5px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 200ms ease;
}
.el-single-tags__tag:hover {
  background: rgba(58, 187, 228, 0.2);
  color: var(--el-sky);
  opacity: 1;
}

/* Beitragsnavigation */
.el-single-nav {
  background: var(--el-navy);
  padding: 2rem 0;
}
.el-single-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.el-single-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: background 200ms ease;
}
.el-single-nav__link:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}
.el-single-nav__link--next {
  text-align: right;
}
.el-single-nav__label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--el-sky);
}
.el-single-nav__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  color: #ffffff;
}

@media (max-width: 600px) {
  .el-single-nav__inner {
    grid-template-columns: 1fr;
  }
}

/* Generischer Button */
.el-btn {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: background 220ms ease;
}
.el-btn--gold {
  background: var(--el-gold);
  color: var(--el-navy);
}
.el-btn--gold:hover {
  background: #ffffff;
  color: var(--el-navy);
  opacity: 1;
}


/* ============================================================
   GLOBAL: alle Buttons → weißer Hover
   Hohe Spezifität nötig, da WP die Preset-Klassen
   (.has-gold-background-color) selbst mit !important ausgibt
   und diese NACH der Theme-CSS geladen werden.
   ============================================================ */
.wp-block-buttons .wp-block-button .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.entry-content .wp-block-button__link:hover,
body .el-btn--gold:hover,
body .el-header-cta:hover,
body .el-games-more__btn:hover,
body .el-single-hero__category:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--el-navy) !important;
  border-color: #ffffff !important;
  opacity: 1;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 575px) {
  .wp-block-group {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}


/* ============================================================
   STARTSEITE — Beitrags-Teaser (letzter Beitrag)
   Bild im Zuschnitt "teaser-image" (640x360), Ecken 5px
   Bild füllt die Kachel exakt aus, ohne zu überlaufen
   ============================================================ */
.wp-block-latest-posts__featured-image,
.wp-block-post-featured-image {
  border-radius: 5px;
  overflow: hidden;
  line-height: 0;
}
.wp-block-latest-posts__featured-image img,
.wp-block-post-featured-image img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}

/* Mobil: Bild volle Breite über dem Text */
@media (max-width: 575px) {
  .wp-block-latest-posts__featured-image,
  .wp-block-post-featured-image {
    float: none !important;
    margin-right: 0 !important;
  }
  .wp-block-latest-posts__featured-image img,
  .wp-block-post-featured-image img {
    width: 100%;
    margin-bottom: 1.3rem;
  }
}