/*
Theme Name: Herl Child
Template: kadence
Version: 1.0.0
Text Domain: herl-child
*/

/* =========================================================
   Ortsgemeinde Herl – gemütlich-modern (Wappen-inspiriert)
   - warmes „Papier“-Feeling
   - weiche Schatten, runde Kanten
   - Farben: Schiefer-Blaugrau, Gold, Burgunderrot, Salbei
========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Text */
  --herl-ink: #141A1D;            /* weich, fast schwarz */
  --herl-text: #263238;           /* gut lesbarer Fließtext */
  --herl-muted: #5C6B72;

  /* Wappen-inspiriert */
  --herl-slate: #A9B8C2;          /* blaugrau (Wappengrund) */
  --herl-burgundy: #B11E22;       /* Wappenrot */
  --herl-gold: #E5B61A;           /* warmes Gold */

  /* Mosel / Natur (dezent) */
  --herl-sage: #3F6B5A;           /* ruhiges Grün */
  --herl-sage-dark: #325647;

  /* Flächen */
  --herl-bg: #FBFAF7;             /* warmes Papierweiß */
  --herl-bg-muted: #F3F1EC;       /* warmes hellgrau */
  --herl-card: rgba(255,255,255,.72);

  /* Linien / Schatten / Radius */
  --herl-line: rgba(20,26,29,.10);
  --herl-radius: 18px;
  --herl-radius-lg: 22px;
  --herl-shadow: 0 10px 24px rgba(20,26,29,.08);
  --herl-shadow-strong: 0 18px 44px rgba(20,26,29,.14);

  /* Primär & Akzent */
  --herl-primary: var(--herl-sage);
  --herl-accent: var(--herl-gold);
  --herl-danger: var(--herl-burgundy);

  /* Layout */
  --herl-container: 1200px;
}

/* ---------- Global ---------- */
html, body{
  color: var(--herl-text);
}

body{
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(169,184,194,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(229,182,26,.10), transparent 55%),
    var(--herl-bg);
}

/* Links allgemein (Kadence macht viel selbst – wir halten es dezent) */
a{
  color: var(--herl-primary);
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* ---------- Herl Layout Helper ---------- */
.herl-home{
  color: var(--herl-text);
}

.herl-container{
  width: min(var(--herl-container), calc(100% - 40px));
  margin: 0 auto;
}

.herl-center{ text-align: center; }

.herl-grid{
  display: grid;
  gap: 40px;
}

.herl-grid--2{
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
}

@media (max-width: 900px){
  .herl-grid--2{ grid-template-columns: 1fr; }
}

/* ---------- Typography ---------- */
.herl-h2{
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--herl-ink);
  margin: 0 0 14px 0;
}

.herl-h3{
  font-size: 18px;
  line-height: 1.3;
  color: var(--herl-ink);
  margin: 0 0 10px 0;
}

.herl-text{
  font-size: 16px;
  line-height: 1.75;
  color: var(--herl-text);
  margin: 0 0 10px 0;
}

.herl-muted{
  color: var(--herl-muted);
}

.herl-lead{
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  color: var(--herl-muted);
}

/* ---------- Sections ---------- */
.herl-section{
  padding: 64px 0;
  background: transparent;
}

.herl-section--muted{
  background: var(--herl-bg-muted);
  border-top: 1px solid rgba(20,26,29,.06);
  border-bottom: 1px solid rgba(20,26,29,.06);
}

/* Kadence: Content-Wrapper auf Herl-Seiten etwas entschärfen */
.herl-home .content-area,
.herl-home .site-main{
  padding-top: 0;
}

/* ---------- HERO ---------- */
.herl-hero{
  position: relative;
  min-height: 720px;
  background-size: cover;
  background-position: center;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.herl-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,26,29,.55), rgba(20,26,29,.35)),
    radial-gradient(900px 520px at 50% 25%, rgba(169,184,194,.22), transparent 60%);
}

.herl-hero__inner{
  position: relative;
  padding: 56px 0;
}

.herl-hero__content{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.herl-hero__title{
  margin: 0 0 10px 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.02em;
  text-shadow: 0 14px 32px rgba(0,0,0,.25);
}

.herl-hero__subtitle{
  margin: 0 auto;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,.92);
  text-shadow: 0 12px 26px rgba(0,0,0,.20);
}

.herl-hero__actions{
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Wappen/Logo (wenn in Template genutzt) */
.herl-hero__logo{
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.herl-crest{
  width: 170px;
  height: auto;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

/* ---------- Buttons ---------- */
.herl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  box-shadow: 0 10px 18px rgba(20,26,29,.10);
}

.herl-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(20,26,29,.14);
  text-decoration: none;
}

.herl-btn:focus{
  outline: none;
}

.herl-btn--primary{
  background: var(--herl-primary);
  color: #fff;
}

.herl-btn--primary:hover{
  background: var(--herl-sage-dark);
}

.herl-btn--accent{
  background: var(--herl-accent);
  color: #1a1a1a;
}

.herl-btn--accent:hover{
  filter: brightness(0.98);
}

.herl-btn--light{
  background: rgba(255,255,255,.92);
  color: var(--herl-ink);
}

.herl-btn--light:hover{
  background: rgba(255,255,255,.98);
}

.herl-btn--outline{
  background: transparent;
  color: var(--herl-ink);
  border-color: var(--herl-line);
  box-shadow: none;
}

.herl-btn--outline:hover{
  background: rgba(229,182,26,.10);
  border-color: rgba(229,182,26,.25);
  box-shadow: none;
}

/* ---------- Visitor Counter ---------- */
.herl-counter{
  background: transparent;
  padding: 26px 0 0 0;
}

.herl-counter__card{
  margin: -28px auto 0 auto;
  width: min(560px, 100%);
  background: rgba(255,255,255,.82);
  border: 1px solid var(--herl-line);
  border-radius: var(--herl-radius-lg);
  box-shadow: var(--herl-shadow);
  padding: 18px 18px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.herl-counter__label{
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--herl-muted);
  margin-bottom: 4px;
}

.herl-counter__number{
  font-size: 44px;
  font-weight: 850;
  line-height: 1.1;
  color: var(--herl-burgundy);
  text-shadow: 0 10px 20px rgba(20,26,29,.08);
}

.herl-counter__text{
  display: block;
  font-size: 14px;
  color: var(--herl-muted);
  margin-top: 4px;
}

/* ---------- Media ---------- */
.herl-media{
  border-radius: var(--herl-radius-lg);
  overflow: hidden;
  box-shadow: var(--herl-shadow);
  border: 1px solid var(--herl-line);
  background: rgba(255,255,255,.35);
}

.herl-image{
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Cards (Schnell gefunden / Umgebung) ---------- */
.herl-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 22px;
}

@media (max-width: 980px){
  .herl-cards{ grid-template-columns: 1fr; }
}

.herl-card{
  background: var(--herl-card);
  border: 1px solid var(--herl-line);
  border-radius: var(--herl-radius-lg);
  padding: 22px;
  box-shadow: var(--herl-shadow);
  backdrop-filter: blur(6px);
}

.herl-card__media{
  margin: -22px -22px 14px -22px;
  height: 170px;
  overflow: hidden;
  border-bottom: 1px solid var(--herl-line);
  border-top-left-radius: var(--herl-radius-lg);
  border-top-right-radius: var(--herl-radius-lg);
}

.herl-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.herl-card .herl-btn{
  margin-top: 8px;
  box-shadow: none;
}

/* ---------- Posts / News ---------- */
.herl-posts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 22px;
}

@media (max-width: 980px){
  .herl-posts{ grid-template-columns: 1fr; }
}

.herl-post-card{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--herl-line);
  border-radius: var(--herl-radius-lg);
  overflow: hidden;
  box-shadow: var(--herl-shadow);
  display: grid;
}

.herl-post-card__image{
  display: block;
  text-decoration: none;
}

.herl-post-image{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.herl-post-image--placeholder{
  height: 190px;
  background:
    linear-gradient(135deg, rgba(169,184,194,.26), rgba(229,182,26,.14));
}

.herl-post-card__body{
  padding: 16px 18px 18px 18px;
}

.herl-meta{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--herl-muted);
  margin-bottom: 8px;
}

.herl-post-title a{
  color: var(--herl-ink);
  text-decoration: none;
}

.herl-post-title a:hover{
  text-decoration: underline;
}

.herl-link{
  display: inline-block;
  margin-top: 8px;
  color: var(--herl-primary);
  text-decoration: none;
  font-weight: 700;
}

.herl-link:hover{
  text-decoration: underline;
}

/* ---------- CTA ---------- */
.herl-cta{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(229,182,26,.18), transparent 62%),
    linear-gradient(180deg, rgba(63,107,90,1), rgba(50,86,71,1));
  color: #fff;
  padding: 46px 0;
}

.herl-cta__grid{
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 22px;
  align-items: center;
}

@media (max-width: 980px){
  .herl-cta__grid{ grid-template-columns: 1fr; }
}

.herl-cta__title{
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.herl-cta__text{
  margin: 0;
  color: rgba(255,255,255,.92);
  line-height: 1.75;
}

.herl-cta__actions{
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 980px){
  .herl-cta__actions{ justify-content: flex-start; }
}

/* ---------- Kleine Qualitätsdetails ---------- */
.herl-home img{
  max-width: 100%;
}

/* Buttons/Links in Herl-Bereichen nicht „Kadence-typisch“ unterstrichen */
.herl-home a:hover{
  text-decoration: none;
}

/* Dennoch: Fließtext-Links dürfen unterstrichen sein, falls gewünscht:
   Wenn du das willst, entferne den Block oben oder nutze gezieltere Selektoren. */

   /* =========================================
   Besucherzähler – kompakt (unten / Footer)
   ========================================= */

.herl-counter{
  padding: 18px 0 28px 0;       /* weniger Luft */
  background: transparent;
}

.herl-counter__card{
  margin: 0 auto;              /* kein negatives Margin mehr */
  width: min(720px, 100%);
  padding: 10px 14px;          /* deutlich kompakter */
  border-radius: 999px;        /* Badge-Optik */
  box-shadow: none;            /* unten wirkt ohne Schatten ruhiger */
  background: rgba(255,255,255,.70);
  border: 1px solid var(--herl-line);
  backdrop-filter: blur(8px);

  /* Inhalt in eine Zeile */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.herl-counter__label,
.herl-counter__text{
  display: inline;
  margin: 0;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--herl-muted);
}

.herl-counter__number{
  font-size: 20px;             /* kleiner */
  font-weight: 850;
  line-height: 1;
  color: var(--herl-burgundy);
  text-shadow: none;
  margin: 0 2px;
}

/* Mobile: wenn es eng wird, darf er umbrechen */
@media (max-width: 520px){
  .herl-counter__card{
    border-radius: 16px;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .herl-counter__label,
  .herl-counter__text{
    letter-spacing: .08em;
  }
}

/* =========================================================
   Custom Header (Herl) – Wappen links, Menü + Kontakt rechts
   ========================================================= */

/* Kadence Header ausblenden (damit nicht doppelt) */
#masthead,
.site-header,
.kadence-header-wrap,
.kadence-site-header{
  display: none !important;
}

/* Unser Header */
.herl-site-header{
  position: sticky;
  top: 0;
  z-index: 9999;

  background: rgba(251,250,247,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--herl-line);
}

.herl-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

/* Brand links */
.herl-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 240px;
}

.herl-brand__crest{
  width: 46px;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.55);
  padding: 6px;
  box-shadow: 0 10px 18px rgba(20,26,29,.08);
}

.herl-brand__text{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.herl-brand__name{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--herl-ink);
  font-size: 16px;
}

.herl-brand__tagline{
  font-size: 12px;
  color: var(--herl-muted);
  margin-top: 2px;
}

/* Rechts: Nav + Badge */
.herl-header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Menü (Desktop) */
.herl-nav{
  display: block;
}

.herl-menu{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.herl-menu li{
  margin: 0;
  padding: 0;
}

.herl-menu a{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--herl-ink);
  text-decoration: none;
  font-weight: 650;
  transition: background .12s ease, transform .12s ease;
}

.herl-menu a:hover{
  background: rgba(229,182,26,.12);
  text-decoration: none;
}

/* Aktiver Menüpunkt (WP Klassen) */
.herl-menu .current-menu-item > a,
.herl-menu .current_page_item > a{
  background: rgba(63,107,90,.12);
}

/* Kontakt Badge */
.herl-contact-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--herl-accent);
  color: #1a1a1a;
  font-weight: 800;
  border: 1px solid rgba(20,26,29,.10);
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(20,26,29,.10);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.herl-contact-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(20,26,29,.14);
  filter: brightness(.98);
  text-decoration: none;
}

/* Mobile Toggle Button */
.herl-nav-toggle{
  display: none; /* Desktop aus */
  border: 1px solid var(--herl-line);
  background: rgba(255,255,255,.72);
  color: var(--herl-ink);
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: 0 10px 18px rgba(20,26,29,.08);
}

/* Responsive: Menü klappt auf */
@media (max-width: 980px){
  .herl-brand__tagline{ display: none; }

  .herl-nav-toggle{ display: inline-flex; }

  .herl-header-right{
    gap: 10px;
  }

  /* Nav standardmäßig verstecken */
  .herl-nav{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(251,250,247,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--herl-line);
    padding: 10px 0 14px 0;
  }

  /* Wenn geöffnet */
  .herl-site-header.is-nav-open .herl-nav{
    display: block;
  }

  .herl-menu{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: min(var(--herl-container), calc(100% - 40px));
    margin: 0 auto;
  }

  .herl-menu a{
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(20,26,29,.08);
  }

  /* Kontakt Badge bleibt rechts oben neben Menü-Button */
}

/* ============================
   Header Mobile Fix (Overflow)
   ============================ */

/* Grundsätzlich: Box-Sizing (verhindert Überläufe durch Padding) */
*, *::before, *::after { box-sizing: border-box; }

/* Mobile: Brand darf schrumpfen (min-width weg) */
@media (max-width: 980px){

  .herl-header-inner{
    gap: 8px;                 /* weniger Abstand */
    padding: 8px 0;           /* kompakter */
  }

  .herl-brand{
    min-width: 0;             /* WICHTIG: statt 240px */
    flex: 1 1 auto;           /* darf schrumpfen */
    gap: 10px;
  }

  .herl-brand__crest{
    width: 40px;              /* etwas kleiner */
    padding: 5px;
  }

  .herl-brand__name{
    font-size: 14px;          /* kompakter */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* nicht umbrechen, sondern kürzen */
    max-width: 100%;
  }

  /* Toggle + Badge sollen rechts „zusammenbleiben“ */
  .herl-nav-toggle{
    flex: 0 0 auto;
    padding: 9px 10px;
    margin-left: 0;
  }

  .herl-header-right{
    flex: 0 0 auto;
    gap: 8px;                 /* weniger Abstand */
  }

  .herl-contact-badge{
    flex: 0 0 auto;
    padding: 9px 12px;        /* kleiner, damit es nicht überläuft */
    white-space: nowrap;
  }
}

/* =========================================================
   Footer (Herl) – ruhig, bürgernah, rechtssicher
========================================================= */

.herl-footer{
  margin-top: 30px;
  padding: 44px 0 26px 0;
  background:
    radial-gradient(900px 520px at 90% 0%, rgba(169,184,194,.18), transparent 62%),
    linear-gradient(180deg, rgba(243,241,236,1), rgba(251,250,247,1));
  border-top: 1px solid rgba(20,26,29,.08);
}

.herl-footer__inner{
  display: grid;
  gap: 22px;
}

.herl-footer__brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.herl-footer__crest{
  width: 48px;
  height: auto;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(20,26,29,.10);
  padding: 6px;
  box-shadow: 0 10px 18px rgba(20,26,29,.08);
}

.herl-footer__brandtext{
  line-height: 1.15;
}

.herl-footer__title{
  font-weight: 850;
  color: var(--herl-ink);
  letter-spacing: -0.01em;
}

.herl-footer__subtitle{
  font-size: 12px;
  color: var(--herl-muted);
  margin-top: 2px;
}

.herl-footer__cols{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(20,26,29,.08);
  border-radius: var(--herl-radius-lg);
  padding: 18px;
  box-shadow: var(--herl-shadow);
  backdrop-filter: blur(8px);
}

.herl-footer__h{
  margin: 0 0 8px 0;
  color: var(--herl-ink);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.herl-footer__p{
  margin: 0;
  color: var(--herl-text);
  line-height: 1.7;
  font-size: 15px;
}

.herl-footer__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.herl-footer__link{
  color: var(--herl-primary);
  font-weight: 700;
  text-decoration: none;
}

.herl-footer__link:hover{
  text-decoration: underline;
}

.herl-footer__actions{
  margin-top: 12px;
}

.herl-footer__btn{
  padding: 10px 14px;
  box-shadow: none;
}

.herl-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  color: var(--herl-muted);
  font-size: 13px;
  padding-top: 8px;
}

.herl-footer__sep{
  opacity: .55;
}

/* Responsive */
@media (max-width: 980px){
  .herl-footer__cols{
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .herl-footer__bottom{
    justify-content: flex-start;
  }

  .herl-footer__sep{
    display: none;
  }
}

/* =========================================================
   Gemeinde-Seite (page-gemeinde.php)
========================================================= */

.herl-hero--page{
  min-height: 520px;
}

.herl-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}

/* Infobox "Herl auf einen Blick" */
.herl-infobox{
  background: rgba(255,255,255,.80);
  border: 1px solid var(--herl-line);
  border-radius: var(--herl-radius-lg);
  box-shadow: var(--herl-shadow);
  padding: 18px 18px;
  backdrop-filter: blur(8px);
}

.herl-facts{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--herl-text);
}

.herl-facts li{
  padding: 8px 10px;
  border: 1px solid rgba(20,26,29,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.60);
}

.herl-facts strong{
  color: var(--herl-ink);
}

/* Gemeinderat Topbereich: Bürgermeister + Gruppenbild */
.herl-council-top{
  margin-top: 22px;
}

.herl-person{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--herl-line);
  border-radius: var(--herl-radius-lg);
  overflow: hidden;
  box-shadow: var(--herl-shadow);
}

.herl-person__media{
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid rgba(20,26,29,.08);
}

.herl-person__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.herl-person__body{
  padding: 16px 16px 16px 16px;
}

.herl-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(229,182,26,.16);
  border: 1px solid rgba(229,182,26,.28);
  color: var(--herl-ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.herl-person__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.herl-person--mayor{
  border: 1px solid rgba(229,182,26,.35);
  box-shadow: var(--herl-shadow-strong);
}

.herl-person--mayor .herl-person__media{
  height: 280px;
}

/* Gruppenbild als Figure */
.herl-figure{
  margin: 0;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--herl-line);
  border-radius: var(--herl-radius-lg);
  overflow: hidden;
  box-shadow: var(--herl-shadow);
}

.herl-figure__img{
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.herl-figure__cap{
  padding: 10px 14px 12px 14px;
  font-size: 13px;
  color: var(--herl-muted);
}

/* Ratsmitglieder Grid */
.herl-subhead{
  margin-top: 28px;
  margin-bottom: 14px;
}

.herl-council-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 980px){
  .herl-council-grid{
    grid-template-columns: 1fr;
  }
}

/* Kleine Personen-Cards */
.herl-person--small .herl-person__media{
  height: 180px;
}

.herl-person__name{
  font-weight: 850;
  color: var(--herl-ink);
  letter-spacing: -0.01em;
}

.herl-person__role{
  margin-top: 4px;
  font-size: 13px;
  color: var(--herl-muted);
}

/* Zahlen & Fakten – mini kicker */
.herl-mini-kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--herl-muted);
  margin-bottom: 8px;
}

.herl-cards--facts{
  margin-top: 18px;
}

/* =========================================
   Gemeinderat Portraits – keine abgeschnittenen Köpfe
   ========================================= */

/* Standard: Portrait-Cards (Ratsmitglieder) komplett zeigen */
.herl-person--small .herl-person__media{
  height: 220px;                 /* etwas mehr Höhe, wirkt ruhiger */
  background: rgba(255,255,255,.55);
}

.herl-person--small .herl-person__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* WICHTIG: kein Abschneiden */
  object-position: center top;   /* Kopfbereich bevorzugt */
  padding: 10px;                 /* Luft um das Portrait */
  background: linear-gradient(135deg, rgba(169,184,194,.16), rgba(229,182,26,.10));
  border-radius: 0;              /* Media ist eh im Container */
}

/* Bürgermeister-Karte: weniger aggressives Cropping */
.herl-person--mayor .herl-person__media{
  height: 320px;
  background: rgba(255,255,255,.45);
}

.herl-person--mayor .herl-person__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* darf „heroiger“ bleiben */
  object-position: center 20%;   /* Kopf höher im Bild halten */
}

.herl-person--mayor .herl-person__media img{
  object-fit: contain;
  object-position: center top;
  padding: 10px;
  background: linear-gradient(135deg, rgba(169,184,194,.16), rgba(229,182,26,.10));
}

/* Karten insgesamt etwas edler (wenn Bild nun "contain" ist, wirkt das ruhiger) */
.herl-person--small{
  background: rgba(255,255,255,.86);
}

/* Mobile: Höhe etwas reduzieren */
@media (max-width: 980px){
  .herl-person--small .herl-person__media{ height: 210px; }
  .herl-person--mayor .herl-person__media{ height: 280px; }
}

/* =========================================
   Gemeinderat – 2 Spalten, größere Portraits, wertige Cards
   ========================================= */

/* Grid: statt 3 -> 2 (Desktop) */
.herl-council-grid{
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Mobile: 1 Spalte */
@media (max-width: 980px){
  .herl-council-grid{
    grid-template-columns: 1fr;
  }
}

/* Karte wertiger */
.herl-person--small{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(20,26,29,.10);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(20,26,29,.10);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}

.herl-person--small:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(20,26,29,.14);
}

/* Bildbereich höher + optischer Rahmen */
.herl-person--small .herl-person__media{
  height: 320px;                 /* größer */
  position: relative;
  background:
    radial-gradient(900px 520px at 70% 20%, rgba(169,184,194,.28), transparent 60%),
    linear-gradient(135deg, rgba(243,241,236,1), rgba(251,250,247,1));
}

/* Bild: wieder cover (damit groß), aber Kopf-Fokus */
.herl-person--small .herl-person__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* groß & präsent */
  object-position: 50% 15%;      /* Kopfbereich bevorzugt */
  display: block;
  transform: scale(1.02);
}

/* Eleganter „Fade“ nach unten, damit der Übergang in die Karte weich ist */
.herl-person--small .herl-person__media::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  pointer-events: none;
}

/* Body etwas großzügiger */
.herl-person--small .herl-person__body{
  padding: 16px 18px 18px 18px;
}

/* Name stärker, Rolle dezenter */
.herl-person__name{
  font-size: 16px;
  font-weight: 900;
}

.herl-person__role{
  font-size: 13px;
  color: var(--herl-muted);
}

/* Feiner Trenner (optional) */
.herl-person--small .herl-person__body{
  border-top: 1px solid rgba(20,26,29,.06);
}

/* Bürgermeister-Karte darf noch etwas edler wirken */
.herl-person--mayor{
  border-radius: 22px;
}

/* Responsive Feintuning */
@media (max-width: 1200px){
  .herl-person--small .herl-person__media{ height: 300px; }
}
@media (max-width: 980px){
  .herl-person--small .herl-person__media{ height: 280px; }
}
@media (max-width: 520px){
  .herl-person--small .herl-person__media{ height: 250px; }
}

/* =========================================================
   Gemeinderat – seriöse Portraitkarten (Gesichter erkennbar)
========================================================= */

/* 2 nebeneinander, großzügig */
.herl-council-grid--list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .herl-council-grid--list{
    grid-template-columns: 1fr;
  }
}

/* Card-Design: modern, ruhig, amtlich */
.herl-council-card{
  display: grid;
  grid-template-columns: 160px 1fr; /* Portrait links groß */
  gap: 14px;
  align-items: center;

  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,26,29,.10);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(20,26,29,.10);
  overflow: hidden;
  backdrop-filter: blur(8px);

  transition: transform .14s ease, box-shadow .14s ease;
}

.herl-council-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 56px rgba(20,26,29,.14);
}

/* Portrait-Feld: wirkt wie gerahmt */
.herl-council-card__media{
  height: 190px;
  margin: 10px 0 10px 10px;
  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(900px 520px at 70% 20%, rgba(169,184,194,.22), transparent 60%),
    linear-gradient(135deg, rgba(243,241,236,1), rgba(251,250,247,1));
  border: 1px solid rgba(20,26,29,.10);
  box-shadow: 0 10px 22px rgba(20,26,29,.10);
}

/* Wichtig: kein Cropping, Gesicht bleibt sichtbar */
.herl-council-card__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* zeigt Person komplett */
  object-position: center;      /* neutral */
  display: block;
  padding: 8px;                 /* „Studio“-Rahmen */
}

/* Textbereich */
.herl-council-card__body{
  padding: 16px 16px 16px 0;
}

.herl-council-card__name{
  font-weight: 900;
  color: var(--herl-ink);
  letter-spacing: -0.01em;
  font-size: 16px;
  margin-bottom: 4px;
}

.herl-council-card__role{
  color: var(--herl-muted);
  font-size: 13px;
}

/* Sehr kleine Screens: Portrait oben, Text unten */
@media (max-width: 520px){
  .herl-council-card{
    grid-template-columns: 1fr;
  }
  .herl-council-card__media{
    margin: 12px 12px 0 12px;
    height: 240px;
  }
  .herl-council-card__body{
    padding: 12px 14px 16px 14px;
  }
}

/* =========================================================
   Gemeinderat – Bild füllt Karte, größer, modern-seriös
========================================================= */

.herl-council-grid--list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .herl-council-grid--list{
    grid-template-columns: 1fr;
  }
}

/* Karte */
.herl-council-card{
  display: grid;
  grid-template-columns: 190px 1fr;  /* größer */
  align-items: stretch;
  gap: 0;

  border-radius: 22px;
  overflow: hidden;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,26,29,.10);
  box-shadow: 0 18px 44px rgba(20,26,29,.10);
  backdrop-filter: blur(8px);

  transition: transform .14s ease, box-shadow .14s ease;
}

.herl-council-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(20,26,29,.14);
}

/* Bild füllt linke Spalte */
.herl-council-card__media{
  position: relative;
  min-height: 220px;               /* größer */
  background: rgba(20,26,29,.04);
}

.herl-council-card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;               /* füllt Fläche */
  object-position: 50% 20%;        /* Kopf/ Gesicht priorisieren */
}

/* Dezenter Verlauf, damit Übergang hochwertig wirkt */
.herl-council-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,0));
  pointer-events:none;
}

/* Textbereich */
.herl-council-card__body{
  padding: 16px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.herl-council-card__name{
  font-weight: 900;
  color: var(--herl-ink);
  letter-spacing: -0.01em;
  font-size: 17px;
  margin-top: 6px;
}

.herl-council-card__role{
  margin-top: 4px;
  color: var(--herl-muted);
  font-size: 13px;
}

.herl-council-card__meta{
  margin-top: 8px;
  color: var(--herl-text);
  font-size: 14px;
  line-height: 1.6;
}

/* Bürgermeister hebt sich ab (gleicher Stil, aber "Highlight") */
.herl-council-card--mayor{
  border: 1px solid rgba(229,182,26,.45);
  box-shadow: 0 22px 60px rgba(20,26,29,.14);
}

.herl-council-card--mayor:hover{
  box-shadow: 0 30px 72px rgba(20,26,29,.18);
}

.herl-council-card--mayor .herl-council-card__media{
  min-height: 260px;               /* größer als normale */
}

.herl-council-card--mayor .herl-council-card__media img{
  object-position: 50% 18%;
}

/* Damit Badge + Buttons gut sitzen */
.herl-council-card--mayor .herl-person__actions{
  gap: 10px;
  flex-wrap: wrap;
}

/* Mobile: Bild oben, Text unten (wie moderne Cards) */
@media (max-width: 520px){
  .herl-council-card{
    grid-template-columns: 1fr;
  }

  .herl-council-card__media{
    min-height: 280px;            /* groß genug, damit Gesicht sichtbar */
  }

  .herl-council-card__media::after{
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0));
  }
}

/* =========================================
   Ratsmitglieder – Bild füllt linke Fläche (kein Innenrahmen)
   ========================================= */

.herl-council-card__media{
  padding: 0 !important;            /* killt evtl. alte Regeln */
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;      /* Card übernimmt Radius außen */
  box-shadow: none !important;
  overflow: hidden;                  /* wichtig für saubere Kanten */
  background: rgba(20,26,29,.04);
}

.herl-council-card__media img{
  padding: 0 !important;            /* killt evtl. alte Regeln */
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 20%;
  display: block;
}

/* =========================================================
   Leben-Seite – kleine Ergänzungen
========================================================= */

.herl-cards--leben{
  margin-top: 18px;
}

/* Aktionen in Karten */
.herl-card__actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Umgedrehte 2-Spalten-Reihenfolge (Bild links, Text rechts auf Desktop) */
.herl-grid--reverse{
  align-items: center;
}

@media (min-width: 981px){
  .herl-grid--reverse > :first-child{
    order: 1; /* Bild */
  }
  .herl-grid--reverse > :last-child{
    order: 2; /* Text */
  }
}

/* Kleiner Highlight-Kasten */
.herl-highlight{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(229,182,26,.12);
  border: 1px solid rgba(229,182,26,.25);
  color: var(--herl-text);
  line-height: 1.7;
}

/* =========================================================
   Vereine – zusätzliche Styles (Jugend, Flyer, Divider)
========================================================= */

.herl-grid--align-top{
  align-items: start;
}

.herl-divider{
  height: 1px;
  background: rgba(20,26,29,.10);
  margin: 34px 0 26px 0;
}

/* Feuerwehr Thumbs (falls noch nicht vorhanden) */
.herl-fw-gallery__thumbs{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.herl-fw-thumb{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.7);
  box-shadow: 0 10px 22px rgba(20,26,29,.08);
  aspect-ratio: 130 / 173;
}

.herl-fw-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 520px){
  .herl-fw-gallery__thumbs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Herler Jugend – Flyer Card */
.herl-card--flyer{
  border-radius: 22px;
  overflow: hidden;
}

.herl-flyer{
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.7);
  box-shadow: 0 12px 26px rgba(20,26,29,.10);
}

/* Flyer bewusst kompakt: max. Höhe, responsive */
.herl-flyer img{
  width: 100%;
  height: auto;
  display: block;
  max-height: 520px;     /* "nicht zu groß" */
  object-fit: contain;
  background: rgba(255,255,255,.65);
}

/* Team-Bereich */
.herl-team{
  position: relative;
}

.herl-team__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--herl-ink);
  background: rgba(229,182,26,.18);
  border: 1px solid rgba(229,182,26,.28);
  margin-bottom: 10px;
}

.herl-team__media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.7);
  box-shadow: 0 12px 26px rgba(20,26,29,.10);
}

.herl-team__media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Platzhalter wenn noch kein Team-Bild */
.herl-team__placeholder{
  border-radius: 18px;
  border: 1px dashed rgba(20,26,29,.25);
  background: rgba(255,255,255,.60);
  padding: 18px;
  color: var(--herl-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* Herl Jugend Bereich auf sehr kleinen Screens: Flyer nach oben oder unten bleibt gut lesbar */
@media (max-width: 980px){
  .herl-jugend{
    margin-top: 6px;
  }
}

/* =========================================================
   Herler Jugend – Team kompakt (kleiner, sauberer Block)
========================================================= */

.herl-team--compact .herl-team__media{
  max-width: 520px;   /* begrenzt die Breite, wirkt kompakter */
}

.herl-team--compact .herl-team__media img{
  max-height: 260px;  /* verhindert "zu groß" */
  width: 100%;
  height: auto;
  object-fit: contain;
  background: rgba(255,255,255,.65);
}

.herl-team--compact .herl-team__placeholder{
  max-width: 520px;
}

/* =========================================================
   Herler Jugend – Sidecards + Flyer vollständig
========================================================= */

.herl-jugend__side{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Sidecards einheitlich */
.herl-card--side{
  border-radius: 22px;
  overflow: hidden;
}

/* Medienblock in Sidecards */
.herl-side-media{
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.7);
  box-shadow: 0 12px 26px rgba(20,26,29,.10);
}

.herl-side-media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Flyer: immer komplett sichtbar (kein Abschneiden) */
.herl-flyer--full{
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.7);
  box-shadow: 0 12px 26px rgba(20,26,29,.10);
}

/* Keine max-height mehr, kein object-fit:cover */
.herl-flyer--full img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: rgba(255,255,255,.65);
}

/* Optional: Team-Platzhalter in Sidecard etwas ruhiger */
.herl-card--team .herl-team__placeholder{
  margin-top: 10px;
}

/* Mobile: Sidecards unter Text (automatisch, weil Grid 1 Spalte wird) */
@media (max-width: 980px){
  .herl-jugend__side{
    gap: 12px;
  }
}

/* =========================================================
   Kicker/Badge Kontrast fix
========================================================= */

/* Standard: Kicker auf hellen Flächen gut lesbar */
.herl-kicker{
  color: var(--herl-ink);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,26,29,.12);
  text-shadow: none;
}

/* Im Hero bleibt er hell/weiß (wenn du das so möchtest) */
.herl-hero .herl-kicker{
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.18);
}

/* =========================================================
   Gewerbe – gleichmäßige Karten (Logo + Text + Footer)
========================================================= */

.herl-biz-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 2 nebeneinander */
@media (min-width: 720px){
  .herl-biz-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* 3 nebeneinander */
@media (min-width: 1080px){
  .herl-biz-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.herl-biz-card{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 14px 30px rgba(20,26,29,.10);

  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.herl-biz-card__head{
  padding: 16px 16px 10px 16px;
}

.herl-biz-card__tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--herl-ink);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,26,29,.12);
}

.herl-biz-card__logo{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 22px rgba(20,26,29,.08);

  /* Einheitliche Höhe, Logos werden nicht abgeschnitten */
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.herl-biz-card__logo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.herl-biz-card__title{
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--herl-ink);
}

.herl-biz-card__body{
  padding: 0 16px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.herl-biz-card__desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--herl-ink);
}

.herl-biz-card__meta{
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(20,26,29,.10);
  display: grid;
  gap: 10px;
}

.herl-biz-meta__row{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: start;
}

.herl-biz-meta__label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--herl-muted);
}

.herl-biz-meta__value{
  font-size: 14px;
  line-height: 1.6;
  color: var(--herl-ink);
}

.herl-biz-meta__value a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20,26,29,.25);
}

.herl-biz-card__foot{
  padding: 14px 16px 16px 16px;
  border-top: 1px solid rgba(20,26,29,.10);
  display: flex;
  justify-content: flex-start;
}

/* Mobile: Metadaten schöner umbrechen */
@media (max-width: 420px){
  .herl-biz-meta__row{
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* =========================================================
   Galerie – Grid + Lightbox
========================================================= */

.herl-gal-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 720px){
  .herl-gal-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1100px){
  .herl-gal-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

/* Für kleinere "Featured"-Blöcke */
.herl-gal-grid--featured{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 720px){
  .herl-gal-grid--featured{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.herl-gal-item{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 30px rgba(20,26,29,.08);
  transform: translateZ(0);
}

.herl-gal-item img{
  width: 100%;
  height: auto;
  display: block;

  /* Einheitliche, moderne Kacheln */
  aspect-ratio: 4 / 3;
  object-fit: cover;

  transform: scale(1.01);
  transition: transform .25s ease, filter .25s ease;
}

.herl-gal-item::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.0), rgba(0,0,0,.25));
  opacity: .0;
  transition: opacity .25s ease;
}

@media (hover:hover){
  .herl-gal-item:hover img{
    transform: scale(1.05);
    filter: contrast(1.03) saturate(1.03);
  }
  .herl-gal-item:hover::after{
    opacity: .9;
  }
}

/* Kleine Hinweisbox (wenn du sie noch nicht hast) */
.herl-note{
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,26,29,.10);
  color: var(--herl-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Lightbox Overlay */
.herl-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(10,12,14,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}

.herl-lightbox.is-open{
  display: flex;
}

.herl-lightbox__dialog{
  width: min(1100px, 94vw);
  max-height: 90vh;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}

.herl-lightbox__media{
  position: relative;
  background: #0b0d0f;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.herl-lightbox__media img{
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain; /* wichtig: groß = NICHT abgeschnitten */
  display: block;
}

.herl-lightbox__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
}

.herl-lightbox__caption{
  font-size: 14px;
  color: var(--herl-muted);
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.herl-lightbox__close{
  appearance: none;
  border: 1px solid rgba(20,26,29,.14);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

/* =========================
   KONTAKTSEITE
   ========================= */

.herl-page--kontakt .herl-section__head {
  margin-bottom: 22px;
}

.herl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
  align-items: start;
}

.herl-card--contact .herl-card__content,
.herl-card--form .herl-card__content,
.herl-card--route .herl-card__content {
  padding: 18px;
}

.herl-contact-list {
  display: grid;
  gap: 14px;
}

.herl-contact-item__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 4px;
}

.herl-contact-item__value {
  font-size: 15px;
  line-height: 1.65;
}

.herl-contact-item__value a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.herl-contact-item__value a:hover {
  border-bottom-color: rgba(0,0,0,0.35);
}

.herl-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 16px 0;
}

.herl-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.herl-actions--wrap {
  flex-wrap: wrap;
}

.herl-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.75;
}

/* Fluent Forms – optisch passend machen */
.herl-form-wrap .fluentform,
.herl-form-wrap form {
  margin-top: 6px;
}

.herl-form-wrap .ff-el-group {
  margin-bottom: 12px;
}

.herl-form-wrap .ff-el-form-control,
.herl-form-wrap input[type="text"],
.herl-form-wrap input[type="email"],
.herl-form-wrap input[type="tel"],
.herl-form-wrap input[type="url"],
.herl-form-wrap input[type="number"],
.herl-form-wrap input[type="date"],
.herl-form-wrap textarea,
.herl-form-wrap select {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,0.9);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.herl-form-wrap textarea {
  min-height: 140px;
  resize: vertical;
}

.herl-form-wrap .ff-el-form-control:focus,
.herl-form-wrap input:focus,
.herl-form-wrap textarea:focus,
.herl-form-wrap select:focus {
  border-color: rgba(0,0,0,0.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
  background: #fff;
}

.herl-form-wrap .ff-btn,
.herl-form-wrap button[type="submit"],
.herl-form-wrap input[type="submit"] {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
}

/* Falls Fluent Forms eigene Button-Farben setzt, soll’s trotzdem “Herl-Style” bleiben */
.herl-form-wrap .ff-btn:hover,
.herl-form-wrap button[type="submit"]:hover,
.herl-form-wrap input[type="submit"]:hover {
  transform: translateY(-1px);
}

/* ANFAHRT */
.herl-anfahrt-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 22px;
  align-items: start;
}

.herl-route {
  display: grid;
  gap: 10px;
}

.herl-route__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.herl-route__text {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
}

.herl-mini-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.herl-mini-facts__item {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,0.65);
}

.herl-mini-facts__k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 3px;
}

.herl-mini-facts__v {
  font-size: 14px;
  font-weight: 600;
}

/* Karten */
.herl-map-stack {
  display: grid;
  gap: 16px;
}

.herl-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.7);
}

.herl-map__frame {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

.herl-map--wide .herl-map__frame {
  height: 240px;
}

/* Kleine CTA am Ende der Sektion (falls du sie schon global hast, stört das nicht) */
.herl-cta--subtle {
  margin-top: 22px;
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .herl-contact-grid {
    grid-template-columns: 1fr;
  }
  .herl-anfahrt-grid {
    grid-template-columns: 1fr;
  }
  .herl-mini-facts {
    grid-template-columns: 1fr;
  }
  .herl-map__frame {
    height: 320px;
  }
  .herl-map--wide .herl-map__frame {
    height: 220px;
  }
}

@media (max-width: 520px) {
  .herl-actions {
    width: 100%;
  }
  .herl-actions a,
  .herl-actions button,
  .herl-actions input[type="submit"] {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* =========================================
   FIX: Kontakt-Hero sichtbar + Buttons klickbar
   Ursache: Overlay/BG überlagert Content oder Hero hat keine stabile Höhe
   ========================================= */

.herl-hero {
  position: relative;
  min-height: clamp(360px, 44vh, 620px);
  overflow: hidden; /* wichtig für saubere Kanten bei BG/Overlay */
}

.herl-hero__bg,
.herl-hero__overlay {
  position: absolute;
  inset: 0;
}

/* Hintergrundbild wirklich als Fläche rendern */
.herl-hero__bg {
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03); /* leichtes “Bleed” gegen Kanten */
  pointer-events: none;  /* niemals Klicks abfangen */
}

/* Overlay darf NICHT über dem Content klicken können */
.herl-hero__overlay {
  z-index: 1;
  pointer-events: none; /* das ist der wichtigste Klick-Fix */
  /* Falls dein Overlay bisher nicht sichtbar war, hier definieren: */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.45) 100%
  );
}

/* Content muss “oben” liegen */
.herl-hero__content {
  position: relative;
  z-index: 2;
}

/* Optional: Falls irgendwo global pointer-events deaktiviert wurden */
.herl-hero__actions,
.herl-hero__actions a {
  pointer-events: auto;
}

/* =========================================
   FIX: CTA unten nicht links/rechts abgeschnitten
   Ursache: overflow hidden / 100vw / negative margins
   ========================================= */

/* Stellen wir sicher, dass Sektionen nichts clippen */
.herl-section,
.herl-container {
  overflow: visible;
}

/* CTA immer innerhalb des Containers bleiben lassen */
.herl-cta {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  overflow: hidden; /* nur CTA selbst clippt seine Inhalte */
  box-sizing: border-box;
}

/* Falls du den CTA als “full bleed” gebaut hattest: zurück auf normal */
.herl-cta--subtle {
  border-radius: 18px;
}

/* Grid sauber und responsive */
.herl-cta__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  box-sizing: border-box;
}

@media (max-width: 820px) {
  .herl-cta__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .herl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .herl-cta__actions .herl-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* =========================================
   Bonus: “sichere” Klickbarkeit überall
   (falls Header o.ä. mit Overlays arbeitet)
   ========================================= */
.herl-hero a,
.herl-hero button {
  position: relative;
  z-index: 3;
}

/* =========================================
   Kontakt-Hero: Buttons hochwertiger
   ========================================= */

.herl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  align-items: center;
}

.herl-hero__actions .herl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  backdrop-filter: blur(8px); /* wirkt nur, wenn Background halbtransparent ist */
  -webkit-backdrop-filter: blur(8px);
}

.herl-hero__actions .herl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

.herl-hero__actions .herl-btn:active {
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* Light Button im Hero: klar, aber nicht "knallig" */
.herl-hero .herl-btn--light {
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  border: 1px solid rgba(255,255,255,0.65);
}

/* Ghost Button im Hero: glasig, besser lesbar, klarer Rahmen */
.herl-hero .herl-btn--ghost {
  background: rgba(15, 23, 42, 0.22);
  color: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.35);
}

.herl-hero .herl-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.32);
  border-color: rgba(255,255,255,0.45);
}

/* Fokus sichtbar (Accessibility) */
.herl-hero__actions .herl-btn:focus-visible {
  outline: 3px solid rgba(255,255,255,0.65);
  outline-offset: 3px;
}

/* Mobile: Buttons untereinander, volle Breite */
@media (max-width: 640px) {
  .herl-hero__actions {
    gap: 10px;
  }

  .herl-hero__actions .herl-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* =========================================
   Full-bleed / Fullwidth sections (CTA usw.)
   ========================================= */

.herl-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Schutz gegen horizontales Scrollen durch 100vw */
html, body {
  overflow-x: hidden;
}

/* CTA fullwidth: mehr "Seiten-Feeling" wie bei anderen Sektionen */
.herl-cta.herl-fullbleed {
  padding: 44px 0;
}

/* Subtle CTA: über volle Breite, aber trotzdem hochwertig */
.herl-cta--subtle.herl-fullbleed {
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Mobile etwas kompakter */
@media (max-width: 640px) {
  .herl-cta.herl-fullbleed {
    padding: 34px 0;
  }
}

/* ---------- WAPPEN (unter Kurzportrait) ---------- */
.herl-section--wappen .herl-card{
  border-radius: 16px;
}

.herl-wappen{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 780px){
  .herl-wappen{
    grid-template-columns: 1fr;
  }
}

.herl-wappen__figure{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.herl-wappen__img{
  width: 96px;
  height: auto;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.herl-wappen__head{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.herl-wappen__title{
  margin: 0;
}

.herl-wappen__text .herl-text{
  line-height: 1.8;
}

/* ---------- WAPPEN (größer) ---------- */
.herl-wappen{
  display: grid;
  grid-template-columns: 150px 1fr; /* vorher 110px */
  gap: 20px;
  align-items: start;
}

@media (max-width: 780px){
  .herl-wappen{
    grid-template-columns: 200px 1fr;
  }
}

.herl-wappen__img{
  width: 200px;        /* vorher 96px */
  height: auto;
  border-radius: 16px; /* minimal runder */
  background: #fff;
  padding: 12px;       /* etwas mehr „Rahmen“ */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* ---------- Foto-Credit (edler Accent + größeres Logo) ---------- */
.herl-photo-credit{
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;

  margin: 18px 0 26px 0;
  padding: 16px 18px 16px 18px;

  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);

  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Accent-Streifen links (wie “Brand-Akzent”, aber dezent) */
.herl-photo-credit::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(229,182,26,.95),
    rgba(63,107,90,.95)
  );
  opacity: .9;
}

.herl-photo-credit__logo{
  width: 72px;   /* deutlich größer */
  height: 72px;
  object-fit: contain;
  flex: 0 0 auto;

  border-radius: 14px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  padding: 10px;

  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.herl-photo-credit__text{
  display: grid;
  gap: 6px;
}

.herl-photo-credit__title{
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  color: rgba(0,0,0,.78);
  letter-spacing: -0.01em;
}

.herl-photo-credit__links{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,.62);

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.herl-photo-credit__label{
  font-weight: 700;
  color: rgba(0,0,0,.70);
}

.herl-photo-credit__links a{
  color: rgba(0,0,0,.74);
  text-decoration: none;
  font-weight: 700;
}

.herl-photo-credit__links a:hover{
  text-decoration: underline;
}

.herl-photo-credit__sep{
  opacity: .45;
}

@media (max-width: 780px){
  .herl-photo-credit{
    padding: 14px 14px;
    gap: 14px;
  }
  .herl-photo-credit::before{
    top: 8px;
    bottom: 8px;
    width: 6px;
  }
  .herl-photo-credit__logo{
    width: 64px; /* mobil auch noch gut erkennbar */
    height: 64px;
    padding: 9px;
  }
}

/* --- WAPPEN SECTION --- */
.herl-section--wappen{
  padding: 54px 0;
}

.herl-wappen-card{
  padding: 0;
  overflow: hidden;
}

.herl-wappen{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 26px;
  align-items: start;
  padding: 26px;
}

/* Bildbox */
.herl-wappen__figure{
  margin: 0;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px;
  display: grid;
  place-items: center;
}

.herl-wappen__img{
  width: 100%;
  max-width: 200px; /* Desktop-Größe */
  height: auto;
  display: block;
}

/* Content */
.herl-wappen__content{
  max-width: 74ch; /* angenehme Lesebreite */
}

.herl-wappen__head{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.herl-wappen__title{
  margin: 0;
}

.herl-wappen__more{
  margin-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 14px;
}

.herl-wappen__more summary{
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(0,0,0,.78);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* kleiner Pfeil */
.herl-wappen__more summary::after{
  content: "▾";
  transform: translateY(-1px);
  opacity: .8;
  transition: transform .2s ease;
}

.herl-wappen__more[open] summary::after{
  transform: rotate(180deg);
}

.herl-wappen__more summary::-webkit-details-marker{
  display: none;
}

/* --- Mobile --- */
@media (max-width: 780px){
  .herl-section--wappen{ padding: 36px 0; }

  .herl-wappen{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .herl-wappen__figure{
    padding: 14px;
    border-radius: 16px;
    width: 100%;
  }

  .herl-wappen__img{
    max-width: 240px; /* auf Mobile sichtbar größer */
  }

  /* Kopf zentriert, Text bleibt gut lesbar links */
  .herl-wappen__head{
    justify-content: center;
    text-align: center;
  }

  .herl-wappen__content{
    max-width: 100%;
  }

  .herl-wappen__content .herl-text{
    text-align: left;
    line-height: 1.75;
  }
}

/* Newsletter-Wrapper */
.herl-nl { margin: 0; }
.herl-nl__card { padding: 22px; }

.herl-nl__head { margin-bottom: 14px; }
.herl-nl__title { margin: 8px 0 6px 0; font-size: 22px; letter-spacing: -0.01em; }
.herl-nl__subtitle { margin: 0; opacity: .85; line-height: 1.6; }

.herl-nl__msg{
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 14px;
  line-height: 1.6;
}
.herl-nl__msg--ok { background: rgba(0,151,120,.10); border: 1px solid rgba(0,151,120,.25); }
.herl-nl__msg--err{ background: rgba(242,144,45,.12); border: 1px solid rgba(242,144,45,.28); }

.herl-nl__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 860px){
  .herl-nl__grid{ grid-template-columns: 1fr; }
}

.herl-nl__field label{
  display:block;
  font-size: 13px;
  opacity: .85;
  margin: 0 0 6px 0;
}

.herl-nl__field input{
  width: 100%;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  outline: none;
}

.herl-nl__field input:focus{
  border-color: rgba(63,107,90,.55);
  box-shadow: 0 0 0 4px rgba(63,107,90,.12);
}

/* Consent 2-Spalten */
.herl-nl__consent{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  margin: 14px 0 4px 0;
}

.herl-consent__box{
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: rgba(63,107,90,1);
}

.herl-consent__text{
  display:block;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(20,20,20,.88);
}

.herl-consent__text a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.herl-nl__actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 860px){
  .herl-nl__actions{ justify-content:flex-start; }
}

/* Footer Actions: 2 Buttons nebeneinander */
.herl-footer__actions--two{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.herl-footer__actions--two .herl-footer__btn{
  white-space:nowrap;
}

/* Modal */
.herl-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  padding: 24px 16px;
  align-items: center;
  justify-content: center;
}

.herl-modal.is-open{
  display: flex;
}

.herl-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* Dialog nicht mehr mit vh-Margin positionieren */
.herl-modal__dialog{
  position: relative;
  width: min(760px, 100%);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  max-height: calc(100vh - 48px);
}

/* Moderne Viewport-Unit: stabiler bei Browser-UI/Keyboard */
@supports (height: 100dvh){
  .herl-modal__dialog{
    max-height: calc(100dvh - 48px);
  }
}

.herl-modal__content{
  padding: 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 88px); /* Platz für Close-Button/Head */
}

@supports (height: 100dvh){
  .herl-modal__content{
    max-height: calc(100dvh - 88px);
  }
}

.herl-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  background: rgba(0,0,0,.08);
  font-size: 22px;
  line-height: 40px;
  cursor:pointer;
  z-index: 2;
}

.herl-modal__close:hover{
  background: rgba(0,0,0,.12);
}

.herl-modal__close{
  position: absolute;
  top: 10px;
  right: 12px;

  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.08);
  cursor: pointer;
  z-index: 2;

  /* Icon-Rendering */
  font-size: 22px;
  line-height: 1;         /* wichtig: nicht 40px */
  padding: 0;             /* verhindert Offsets */
}

.herl-modal__close:hover{
  background: rgba(0,0,0,.12);
}

/* Falls du ein "×" nutzt: leicht optisch ausgleichen */
.herl-modal__close span{
  display: block;
  transform: translateY(-1px);
}

.herl-lightbox__viewport{
  position: relative;
  overflow: hidden;
  touch-action: none;
}

/* Bild sauber zentrieren */
.herl-lightbox__img{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Overlay */
.herl-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.70);
  display: none;
  z-index: 99999;
}

.herl-lightbox.is-open{ display:block; }

/* Dialog = Fenster */
.herl-lightbox__dialog{
  position: absolute;
  inset: 40px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* Bildbereich MUSS Höhe bekommen */
.herl-lightbox__viewport{
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  overflow: hidden;
  touch-action: none;
}

/* Bild zentriert */
.herl-lightbox__img{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Toolbar */
.herl-lightbox__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.herl-lightbox__caption{
  font-size: 14px;
  color: #444;
}

.herl-lightbox__controls{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Dialog mittig platzieren */
.herl-lightbox__dialog{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(1100px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);

  background: #fff;
  border-radius: 18px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* Mobil etwas mehr Rand und kleinere Rundung */
@media (max-width: 480px){
  .herl-lightbox__dialog{
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 14px;
  }
}

/* ===== HERL Lightbox – Look & Feel (scoped) ===== */

/* Overlay dunkler & edler */
.herl-lightbox{
  background: rgba(7, 18, 32, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Dialog / Fenster */
.herl-lightbox__dialog{
  background: #f3f6fa;                 /* nicht krell weiß */
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
}

/* Bildbereich dezent gestalten */
.herl-lightbox__viewport{
  background: radial-gradient(circle at 50% 45%, rgba(0,98,173,.06), transparent 55%);
}

/* Toolbar unten */
.herl-lightbox__bar{
  background: rgba(255,255,255,.55);
  border-top: 1px solid rgba(17,24,39,.08);
  padding: 14px 16px;
  gap: 12px;
}

/* Caption */
.herl-lightbox__caption{
  color: #6b7280;
  font-size: 14px;
  line-height: 1.2;
}

/* Buttons */
.herl-lightbox__btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.08);
  background: #0062ad;
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 18px rgba(0,98,173,.18);
}

/* Hover/Active */
.herl-lightbox__btn:hover{
  background: #004f8a;
}
.herl-lightbox__btn:active{
  transform: translateY(1px);
}

/* Focus (Barrierefreiheit) */
.herl-lightbox__btn:focus-visible{
  outline: 3px solid rgba(0,98,173,.35);
  outline-offset: 2px;
}

/* "Schließen" etwas prominenter */
.herl-lightbox__btn--primary{
  background: #0062ad;
  box-shadow: 0 10px 22px rgba(0,98,173,.24);
}

/* Mobile: etwas kompakter */
@media (max-width: 480px){
  .herl-lightbox__bar{
    padding: 12px 12px;
  }
  .herl-lightbox__btn{
    padding: 9px 10px;
    border-radius: 10px;
  }
}

.herl-lightbox__btn{
  box-shadow: none;
}

/* ===== Lightbox "Vollbild" mit Rand ===== */
.herl-lightbox__dialog{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* nahezu Vollbild, aber mit Luft außen */
  width: calc(100vw - 28px);
  height: calc(100vh - 28px);

  max-width: 1400px; /* optional: damit es auf Ultra-Wide nicht zu breit wird */
  max-height: none;

  display: flex;
  flex-direction: column;
}

/* Desktop etwas mehr Rand */
@media (min-width: 900px){
  .herl-lightbox__dialog{
    width: calc(100vw - 80px);
    height: calc(100vh - 80px);
  }
}

/* iPhone/Notch safe-area */
@supports (padding: env(safe-area-inset-top)){
  .herl-lightbox__dialog{
    width: calc(100vw - max(28px, env(safe-area-inset-left)) - max(28px, env(safe-area-inset-right)));
    height: calc(100vh - max(28px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)));
  }
  @media (min-width: 900px){
    .herl-lightbox__dialog{
      width: calc(100vw - max(80px, env(safe-area-inset-left)) - max(80px, env(safe-area-inset-right)));
      height: calc(100vh - max(80px, env(safe-area-inset-top)) - max(80px, env(safe-area-inset-bottom)));
    }
  }
}

.herl-hero__overlay{
  background: transparent !important;
}

/* =========================================================
   GLOBAL HERO OVERLAY – dezenter Schleier für Lesbarkeit
   ========================================================= */

/* Dezenten Schleier aktivieren (gilt für alle .herl-hero Header) */
.herl-hero .herl-hero__overlay{
  background: rgba(0, 0, 0, 0.10) !important; /* Stärke hier einstellen */
  pointer-events: none;
}

/* Typo wieder hell + leichtes Shadow für Klarheit */
.herl-hero .herl-hero__title{
  color: #fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.45);
}

.herl-hero .herl-hero__subtitle{
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.40);
}

/* Optional: Auf sehr kleinen Screens minimal stärker, weil Kontrast oft schlechter wirkt */
@media (max-width: 640px){
  .herl-hero .herl-hero__overlay{
    background: rgba(0, 0, 0, 0.30) !important;
  }
}