/*
 * Melanchthon-Herolde Bretten e.V. – Design v3 „Feuer & Nacht“
 * Pfad: media/templates/site/cassiopeia_herolde/css/user.css
 *       (wird von Cassiopeia automatisch nach template.css geladen)
 *
 * Farben:
 *   Nacht #0E0C0B · Nacht 2 #171412 · Karte #221E1B · Linie #2E2824
 *   Text #F4EFE8 · Text leise #BFB6AA · Fackel #FF8A2A · Glut #FFB070
 *
 * Schriften: nur lokal eingebunden (keine Google-Server).
 *   Fraktur: UnifrakturMaguntia, SIL Open Font License (fonts/OFL.txt)
 *   Inter Tight (optional, sobald unter fonts/ abgelegt), SIL Open Font License
 *   Fallback: Systemschriften
 */

/* ================================================================== */
/* Schriften                                                          */
/* ================================================================== */
@font-face {
  font-family: "Herolde Fraktur";
  src: url("../fonts/unifrakturmaguntia.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Herolde Sans";
  src: url("../fonts/intertight.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ================================================================== */
/* Grundwerte                                                         */
/* ================================================================== */
:root {
  --hd-nacht: #0e0c0b;
  --hd-nacht-2: #171412;
  --hd-karte: #221e1b;
  --hd-linie: #2e2824;
  --hd-text: #f4efe8;
  --hd-text-leise: #bfb6aa;
  --hd-fackel: #ff8a2a;
  --hd-glut: #ffb070;

  --hd-fraktur: "Herolde Fraktur", "UnifrakturMaguntia", Georgia, serif;
  --hd-sans: "Herolde Sans", "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;

  --hd-radius: 1.25rem;
  --hd-rand: clamp(1rem, 4vw, 2.5rem);
  --hd-innen: max(var(--hd-rand), calc((100vw - 1280px) / 2));
  --hd-kopf-hoehe: 5rem;

  /* Cassiopeia und Bootstrap auf dunkel stellen */
  --cassiopeia-color-primary: var(--hd-nacht);
  --cassiopeia-color-link: var(--hd-fackel);
  --cassiopeia-color-hover: var(--hd-glut);
  --body-bg: var(--hd-nacht);
  --body-color: var(--hd-text);
  --bs-body-bg: var(--hd-nacht);
  --bs-body-color: var(--hd-text);
  --bs-emphasis-color: var(--hd-text);
  --bs-secondary-color: var(--hd-text-leise);
  --bs-border-color: var(--hd-linie);
  --bs-heading-color: var(--hd-text);
  --link-color: var(--hd-fackel);
  --link-hover-color: var(--hd-glut);
  --bs-link-color: var(--hd-fackel);
  --bs-link-color-rgb: 255, 138, 42;
  --bs-link-hover-color: var(--hd-glut);
  --bs-link-hover-color-rgb: 255, 176, 112;
  --bs-tertiary-bg: var(--hd-nacht-2);
  --bs-secondary-bg: var(--hd-karte);
  color-scheme: dark;
}

html { scroll-padding-top: calc(var(--hd-kopf-hoehe) + 1rem); }

body.site {
  background: var(--hd-nacht);
  color: var(--hd-text);
  font-family: var(--hd-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3, h4,
.page-header h1, .page-header h2 {
  font-family: var(--hd-sans);
  color: var(--hd-text);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
}

h1, .page-header h1 { font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.5rem); }
h2, .page-header h2 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 800; }

a { color: var(--hd-fackel); text-underline-offset: .2em; }
a:hover, a:focus { color: var(--hd-glut); }

:focus-visible { outline: 3px solid var(--hd-fackel); outline-offset: 3px; }
::selection { background: var(--hd-fackel); color: var(--hd-nacht); }

hr { border-color: var(--hd-linie); opacity: 1; }

.site-grid { row-gap: 0; }
.container-component { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }

/* ================================================================== */
/* Kopfleiste                                                         */
/* ================================================================== */
.container-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--hd-kopf-hoehe);
  padding: .5rem var(--hd-innen);
  background: rgba(14, 12, 11, .96);
  background-image: none;
  border-bottom: 1px solid var(--hd-linie);
  box-shadow: none;
  transition: background-color .3s ease, border-color .3s ease;
}

.container-header > .grid-child { max-width: none; width: auto; margin: 0; padding: 0; }
.container-header .container-nav { flex: 1 1 auto; justify-content: flex-end; padding: 0; }

/* Startseite: Kopfleiste liegt über dem Startbild */
body.view-featured .container-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
}

html.hd-gescrollt body.view-featured .container-header {
  background: rgba(14, 12, 11, .94);
  border-bottom-color: var(--hd-linie);
}

/* Wortmarke */
.container-header .navbar-brand { display: flex; flex-direction: column; margin: 0; padding: 0; }

.container-header .brand-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--hd-text);
  text-decoration: none;
}

.container-header .brand-logo::before {
  content: "";
  flex: 0 0 auto;
  width: 2.3rem;
  height: 3.3rem;
  background: url("../images/wappen@2x.png") center / contain no-repeat;
}

.container-header .brand-logo span {
  font-family: var(--hd-fraktur);
  font-size: clamp(1.4rem, 1.05rem + 1.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1;
}

.container-header .brand-logo:hover,
.container-header .brand-logo:focus { color: var(--hd-glut); }

.container-header .site-description { display: none; }

/* Hauptmenü */
.container-header .navbar { padding: 0; }
.container-header .metismenu.mod-menu { gap: .4rem; align-items: center; }

.container-header .metismenu.mod-menu .metismenu-item > a {
  color: var(--hd-text);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: .6rem .85rem;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}

.container-header .metismenu.mod-menu .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .metismenu-item > a:focus { color: var(--hd-fackel); }

.container-header .metismenu.mod-menu .metismenu-item.active > a {
  color: var(--hd-fackel);
  box-shadow: inset 0 0 0 2px var(--hd-fackel);
}

.container-header .navbar-toggler {
  color: var(--hd-text);
  border: 2px solid var(--hd-text);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: 1.1rem;
}
.container-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 138, 42, .5); }

/* Untermenü (z. B. Geschichte › Geschichten) */
.container-header .metismenu.mod-menu .mm-toggler {
  color: var(--hd-text);
  padding: .6rem .35rem;
}
.container-header .metismenu.mod-menu .mm-toggler::after { border-top-color: currentColor; }
.container-header .metismenu.mod-menu .mm-toggler:hover,
.container-header .metismenu.mod-menu .mm-toggler:focus { color: var(--hd-fackel); }

.container-header .metismenu.mod-menu .mm-collapse {
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--hd-nacht-2);
  border: 1px solid var(--hd-linie);
  border-radius: 1rem;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .55);
}

.container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a {
  display: block;
  padding: .55rem 1rem;
  border-radius: .6rem;
  white-space: nowrap;
}

.container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a:focus {
  background: var(--hd-karte);
}

.container-header .metismenu.mod-menu .mm-collapse .metismenu-item.active > a,
.container-header .metismenu.mod-menu .mm-collapse .metismenu-item.current > a {
  box-shadow: none;
  background: var(--hd-karte);
  color: var(--hd-fackel);
}

@media (max-width: 991.98px) {
  /* Cassiopeia setzt hier position: relative !important */
  .container-header { position: sticky !important; }
  body.view-featured .container-header { position: fixed !important; }
  .container-header .container-nav,
  .container-header .navbar { position: static; }

  .container-header .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hd-nacht);
    border-bottom: 1px solid var(--hd-linie);
    padding: .5rem var(--hd-rand) 1.5rem;
  }

  .container-header .metismenu.mod-menu { flex-direction: column; align-items: stretch; }
  .container-header .metismenu.mod-menu .metismenu-item { width: 100%; }

  .container-header .metismenu.mod-menu .metismenu-item > a {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    padding: .8rem 0;
    border-radius: 0;
    border-bottom: 1px solid var(--hd-linie);
  }

  .container-header .metismenu.mod-menu .metismenu-item.active > a { box-shadow: none; }

  .container-header .metismenu.mod-menu .metismenu-item.parent { display: flex; flex-wrap: wrap; align-items: center; }
  .container-header .metismenu.mod-menu .metismenu-item.parent > a { flex: 1 1 auto; }
  .container-header .metismenu.mod-menu .mm-toggler { padding: .8rem .5rem; font-size: 1.3rem; }

  .container-header .metismenu.mod-menu .mm-collapse {
    position: static;
    flex: 1 0 100%;
    padding: 0 0 0 1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a {
    font-size: 1.15rem;
    font-weight: 600;
    padding: .65rem 0;
    border-radius: 0;
    background: transparent;
  }
}

/* ================================================================== */
/* Buttons                                                            */
/* ================================================================== */
.hd-button,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--hd-fackel);
  border: 2px solid var(--hd-fackel);
  color: var(--hd-nacht);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  padding: .9rem 1.75rem;
  border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.hd-button:hover, .hd-button:focus,
.btn-primary:hover, .btn-primary:focus {
  background: var(--hd-glut);
  border-color: var(--hd-glut);
  color: var(--hd-nacht);
  transform: translateY(-1px);
}

.hd-button--rahmen {
  background: transparent;
  border-color: var(--hd-text);
  color: var(--hd-text);
}
.hd-button--rahmen:hover, .hd-button--rahmen:focus {
  background: var(--hd-text);
  border-color: var(--hd-text);
  color: var(--hd-nacht);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--hd-text);
  color: var(--hd-text);
  border-radius: 999px;
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--hd-text); color: var(--hd-nacht); }

/* ================================================================== */
/* Startbild (Modul „Startbild“, Position banner)                     */
/* ================================================================== */
.container-banner { padding: 0; margin: 0; }

.hd-hero {
  position: relative;
  min-height: max(36rem, 100svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--hd-nacht);
  isolation: isolate;
}

.hd-hero__bild,
.hd-hero__bild img,
.hd-hero__bild video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  z-index: -2;
}

.hd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 12, 11, .6);
}

.hd-hero__inhalt {
  width: 100%;
  max-width: calc(58rem + var(--hd-innen));
  padding: calc(var(--hd-kopf-hoehe) + 3rem) var(--hd-rand) clamp(4rem, 10vh, 6rem) var(--hd-innen);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.hd-hero__titel {
  margin: 0;
  color: var(--hd-text);
  font-size: clamp(3.4rem, 2rem + 7vw, 7.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.03em;
}

.hd-hero__titel .hd-fraktur {
  font-family: var(--hd-fraktur);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--hd-fackel);
}

.hd-hero__text {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.5;
  color: #e6ded3;
}

.hd-hero__aktionen { display: flex; flex-wrap: wrap; gap: .85rem; margin: .4rem 0 0; }

/* ================================================================== */
/* Leitsatz auf der Startseite (Beitrag „Herzlich willkommen“)        */
/* ================================================================== */
body.view-featured .container-component {
  padding-top: clamp(4rem, 9vw, 7.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.view-featured .blog-featured .page-header,
body.view-featured .blog-featured .item-title,
body.view-featured .blog-featured h2 { display: none; }

.hd-leitsatz {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--hd-text);
}

.hd-leitsatz span { color: var(--hd-fackel); }

.hd-leitsatz-text {
  margin: 1.75rem 0 0;
  max-width: 40rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--hd-text-leise);
}

/* Startseite ohne Navigationspfad */
body.view-featured .mod-breadcrumbs__wrapper,
body.view-featured .container-breadcrumbs { display: none; }

/* ================================================================== */
/* Bereiche unten in voller Breite (bottom-a, bottom-b)               */
/* ================================================================== */
.container-bottom-a,
.container-bottom-b {
  display: block;
  grid-column: full-start / full-end;
}

.container-bottom-a > *,
.container-bottom-b > * { width: 100%; max-width: none; }

.hd-bereich {
  padding: clamp(4rem, 9vw, 7rem) var(--hd-innen);
}

.hd-bereich--dunkel { background: var(--hd-nacht-2); }

.hd-bereich__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hd-bereich__kopf h2 { margin: 0; }
.hd-bereich__kopf a { font-weight: 800; }

/* Bildraster */
.hd-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(9rem, 15vw, 14rem);
  grid-auto-flow: row dense;
  gap: 1rem;
}

.hd-raster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--hd-radius);
}

.hd-raster .hd-raster__gross { grid-column: span 2; grid-row: span 2; }
.hd-raster .hd-raster__hoch { grid-row: span 2; }

@media (max-width: 767.98px) {
  .hd-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-raster .hd-raster__hoch { grid-row: span 1; }
}

/* ================================================================== */
/* Nächste Auftritte (DPCalendar Upcoming, Position bottom-a)         */
/* ================================================================== */
.container-bottom-a > .card {
  margin: 0;
  padding: clamp(4rem, 9vw, 7rem) var(--hd-innen);
  background: var(--hd-nacht-2);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.container-bottom-a > .card > .card-header {
  margin: 0 0 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--hd-text);
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
}

.container-bottom-a > .card > .card-body { padding: 0; }

.mod-dpcalendar-upcoming-default__events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.mod-dpcalendar-upcoming .dp-event {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0;
  padding: 1.75rem;
  background: var(--hd-karte);
  border: 0;
  border-radius: var(--hd-radius);
  color: var(--hd-text);
}

.mod-dpcalendar-upcoming .dp-flatcalendar {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: .5rem;
  width: auto;
  margin: 0;
  background: none;
  box-shadow: none;
}

.mod-dpcalendar-upcoming .dp-flatcalendar__day {
  order: 1;
  width: auto;
  text-align: left;
  padding: 0;
  background: none;
  border: 0;
  color: var(--hd-fackel);
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
}

.mod-dpcalendar-upcoming .dp-flatcalendar__month {
  order: 2;
  position: static;
  width: auto;
  text-align: left;
  padding: 0;
  background: none !important;
  box-shadow: none !important;
  color: var(--hd-fackel) !important;
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: none;
}

.mod-dpcalendar-upcoming .dp-event-url {
  color: var(--hd-text);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}
.mod-dpcalendar-upcoming .dp-event-url:hover,
.mod-dpcalendar-upcoming .dp-event-url:focus { color: var(--hd-fackel); }

.mod-dpcalendar-upcoming-default__date {
  margin-top: .35rem;
  color: var(--hd-text-leise);
  font-size: .98rem;
}

.mod-dpcalendar-upcoming .dp-icon { fill: currentColor; }

/* ================================================================== */
/* Zitate                                                             */
/* ================================================================== */
.hd-zitate {
  padding: clamp(4rem, 9vw, 7rem) var(--hd-innen);
  text-align: center;
}

.hd-zitate__rahmen { display: grid; max-width: 62rem; margin: 0 auto; }

.hd-zitat {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}

.hd-zitat.is-aktiv {
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease, visibility 0s;
}

.hd-zitat blockquote { margin: 0 0 1rem; }

.hd-zitat blockquote p {
  margin: 0;
  font-family: var(--hd-fraktur);
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem);
  line-height: 1.3;
  color: var(--hd-fackel);
}

.hd-zitat figcaption { font-size: .95rem; color: var(--hd-text-leise); }

.hd-zitate__punkte {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.hd-zitate__punkte button {
  width: .8rem;
  height: .8rem;
  padding: 0;
  border: 2px solid var(--hd-fackel);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.hd-zitate__punkte button[aria-current="true"] { background: var(--hd-fackel); }

.hd-zitate__mehr { margin: 1.75rem 0 0; }
.hd-zitate__mehr a { font-weight: 700; }

/* ================================================================== */
/* Peter und Paul (Position bottom-a)                                 */
/* ================================================================== */
.hd-fest { padding: clamp(4rem, 9vw, 7rem) var(--hd-innen); }

.hd-fest__kopf {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.hd-fest__marke {
  margin: 0 0 .75rem;
  color: var(--hd-glut);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hd-fest h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
}

.hd-fest h2 .hd-fraktur { color: var(--hd-fackel); font-weight: 400; letter-spacing: 0; }

.hd-fest__text > p:last-child { margin: 0; color: var(--hd-text-leise); font-size: 1.15rem; line-height: 1.6; }

.hd-fest__bild {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--hd-radius);
}

.hd-fest__karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.hd-fest__karte {
  margin: 0;
  overflow: hidden;
  background: var(--hd-karte);
  border-radius: var(--hd-radius);
}

.hd-fest__karte img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hd-fest__karte figcaption {
  padding: 1.25rem 1.5rem 1.5rem;
  color: var(--hd-text-leise);
  line-height: 1.55;
}

.hd-fest__karte figcaption strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--hd-text);
  font-size: 1.3rem;
  font-weight: 800;
}

@media (max-width: 767.98px) {
  .hd-fest__kopf { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* Mitmachen (Position bottom-b)                                      */
/* ================================================================== */
.hd-mitmachen {
  position: relative;
  isolation: isolate;
  min-height: 32rem;
  display: flex;
  align-items: center;
  padding: clamp(4rem, 9vw, 6rem) var(--hd-innen);
  overflow: hidden;
}

.hd-mitmachen > img {
  position: absolute;
  object-position: 70% 50%;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hd-mitmachen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 12, 11, .92) 0%, rgba(14, 12, 11, .78) 45%, rgba(14, 12, 11, .55) 100%);
}

.hd-mitmachen__inhalt { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; max-width: 56rem; }
.hd-mitmachen__inhalt p:not(:has(a)) { max-width: 36rem; }

.hd-mitmachen h2 {
  margin: 0;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 5.25rem);
  line-height: .95;
}

.hd-mitmachen p { margin: 0; font-size: 1.2rem; line-height: 1.5; color: #e6ded3; }

/* ================================================================== */
/* Unterseiten: Karten, Navigationspfad, Beiträge                     */
/* ================================================================== */
.card {
  background: var(--hd-karte);
  color: var(--hd-text);
  border: 0;
  border-radius: var(--hd-radius);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--hd-linie);
  color: var(--hd-text);
  font-weight: 800;
}

.mod-breadcrumbs__wrapper,
.container-breadcrumbs .breadcrumb { background: transparent; font-size: .9rem; color: var(--hd-text-leise); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hd-text-leise); }

.page-header { margin-bottom: 1.75rem; }

/* Geschichte */
.hd-geschichte { max-width: 46rem; }

.hd-geschichte .hd-einleitung {
  font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem);
  line-height: 1.55;
  color: var(--hd-text);
}

.hd-geschichte p { color: #e0d8cd; }
.hd-geschichte h2 { margin-top: 3.5rem; }

.hd-geschichte figure.hd-bild { margin: 2.5rem 0; }

.hd-geschichte figure.hd-bild img {
  max-width: min(100%, 22rem);
  height: auto;
  border-radius: .5rem;
}

.hd-geschichte figure.hd-bild figcaption {
  margin-top: .75rem;
  font-size: .88rem;
  color: var(--hd-text-leise);
}

.hd-zitat-inline {
  margin: 2.25rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--hd-karte);
  border-radius: var(--hd-radius);
}

.hd-zitat-inline p {
  margin: 0 0 .6rem;
  font-family: var(--hd-fraktur);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.35;
  color: var(--hd-fackel) !important;
}

.hd-zitat-inline footer { font-size: .9rem; color: var(--hd-text-leise); }

.hd-zeitleiste {
  list-style: none;
  margin: 2rem 0 2rem .5rem;
  padding: 0;
  border-left: 2px solid var(--hd-linie);
}

.hd-zeitleiste li { position: relative; margin: 0 0 1.4rem; padding-left: 1.6rem; color: #e0d8cd; }

.hd-zeitleiste li::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: .4rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--hd-fackel);
  border: 3px solid var(--hd-nacht);
}

.hd-zeitleiste strong { display: block; color: var(--hd-fackel); font-size: 1rem; font-weight: 800; }

.hd-quellen { font-size: .92rem; color: var(--hd-text-leise); }
.hd-quellen li { margin-bottom: .4rem; }

/* ================================================================== */
/* Formulare (Gästebuch, Login, Kontakt)                              */
/* ================================================================== */
.form-control,
.form-select {
  background-color: var(--hd-karte);
  border: 1px solid #4a423c;
  color: var(--hd-text);
  border-radius: .75rem;
}

.form-control::placeholder { color: #8f857a; }

.form-control:focus,
.form-select:focus {
  background-color: var(--hd-karte);
  border-color: var(--hd-fackel);
  color: var(--hd-text);
  box-shadow: 0 0 0 .2rem rgba(255, 138, 42, .3);
}

.form-check-input { background-color: var(--hd-karte); border-color: #6b6159; }
.form-check-input:checked { background-color: var(--hd-fackel); border-color: var(--hd-fackel); }

.form-label, label { color: var(--hd-text); }

/* ================================================================== */
/* Fußbereich                                                         */
/* ================================================================== */
.container-footer {
  background: var(--hd-nacht);
  background-image: none;
  color: var(--hd-text-leise);
  border-top: 1px solid var(--hd-linie);
}

.container-footer a { color: var(--hd-text-leise); }
.container-footer a:hover, .container-footer a:focus { color: var(--hd-fackel); }

.back-to-top-link {
  background-color: var(--hd-fackel);
  color: var(--hd-nacht);
  border: 0;
  border-radius: 50%;
}

/* ================================================================== */
/* Wartungsseite (Website offline)                                    */
/* ================================================================== */
.offline-card { background: var(--hd-karte); color: var(--hd-text); }

.offline-card .header {
  background: var(--hd-nacht);
  background-image: none;
  border-bottom: 1px solid var(--hd-linie);
  color: var(--hd-text-leise);
}

.offline-card .header h1,
.offline-card .header h1 span {
  color: var(--hd-text);
  font-family: var(--hd-fraktur);
  font-weight: 400;
}

.offline-card .logo-icon {
  background: var(--hd-nacht) url("../images/wappen@2x.png") center / 70% auto no-repeat;
  border: 2px solid var(--hd-fackel);
}

.offline-card .logo-icon svg { visibility: hidden; }

/* ================================================================== */
/* Handy                                                              */
/* ================================================================== */
@media (max-width: 767.98px) {
  :root { --hd-kopf-hoehe: 4.25rem; }
  body.site { font-size: 1rem; }

  .container-header .brand-logo::before { width: 2rem; height: 2.9rem; }

  .hd-hero { min-height: max(34rem, 94svh); }
  .hd-hero::after { background: rgba(14, 12, 11, .66); }
  .hd-hero__aktionen .hd-button { flex: 1 1 auto; justify-content: center; }
}

/* ================================================================== */
/* Weniger Bewegung, wenn im System eingestellt                       */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ================================================================== */
/* Design v4: großes Wappen, Menü als Slideover, Ton-Knopf             */
/* ================================================================== */

/* Wortmarke mit größerem Wappen */
.container-header { min-height: 5.5rem; }
.container-header .brand-logo { gap: 1rem; }

.container-header .brand-logo::before {
  width: 3.6rem;
  height: 5.1rem;
  background-image: url("../images/wappen-320.png");
  filter: drop-shadow(0 0 1px rgba(255, 176, 112, .6)) drop-shadow(0 .35rem .6rem rgba(0, 0, 0, .55));
}

.container-header .brand-logo span { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); }

@media (max-width: 767.98px) {
  .container-header { min-height: 4.5rem; }
  .container-header .brand-logo { gap: .65rem; }
  .container-header .brand-logo::before { width: 2.6rem; height: 3.7rem; }
  .container-header .brand-logo span { font-size: 1.3rem; }
}

/* Menü-Knopf immer sichtbar */
.container-header .navbar-toggler {
  display: inline-flex !important;
  align-items: center;
  gap: .65rem;
  margin-left: auto;
  padding: .65rem 1.15rem;
  color: var(--hd-text);
  background: rgba(14, 12, 11, .35);
  border: 2px solid var(--hd-text);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.container-header .navbar-toggler:hover,
.container-header .navbar-toggler:focus-visible {
  color: var(--hd-fackel);
  border-color: var(--hd-fackel);
}

.hd-menue-linien,
.hd-menue-linien span,
.hd-menue-linien::before,
.hd-menue-linien::after {
  display: block;
  width: 1.3rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.hd-menue-linien { position: relative; background: transparent; height: .9rem; }
.hd-menue-linien span { position: absolute; top: 50%; margin-top: -1px; }
.hd-menue-linien::before,
.hd-menue-linien::after { content: ""; position: absolute; left: 0; }
.hd-menue-linien::before { top: 0; }
.hd-menue-linien::after { bottom: 0; }

@media (max-width: 479.98px) {
  .container-header .navbar-toggler { padding: .6rem .8rem; }
  .hd-menue-wort { display: none; }
}

/* Schleier und Panel */
.hd-menue-schleier {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(8, 7, 6, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.hd-menue {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  width: min(28rem, 100vw);
  padding: 1.25rem clamp(1.25rem, 4vw, 2.25rem) 2rem;
  overflow-y: auto;
  background: var(--hd-nacht-2);
  border-left: 1px solid var(--hd-linie);
  box-shadow: -2rem 0 4rem rgba(0, 0, 0, .5);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .35s ease, visibility 0s linear .35s;
}

html.hd-menue-offen { overflow: hidden; }

html.hd-menue-offen .hd-menue-schleier {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s;
}

html.hd-menue-offen .hd-menue {
  transform: none;
  visibility: visible;
  transition: transform .35s ease, visibility 0s;
}

.hd-menue:focus { outline: none; }

.hd-menue__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hd-menue__marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--hd-fraktur);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--hd-text);
}

.hd-menue__wappen {
  flex: 0 0 auto;
  width: 3rem;
  height: 4.3rem;
  background: url("../images/wappen-320.png") center / contain no-repeat;
  filter: drop-shadow(0 0 1px rgba(255, 176, 112, .6));
}

.hd-menue__zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--hd-text);
  background: transparent;
  border: 2px solid var(--hd-linie);
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.hd-menue__zu:hover,
.hd-menue__zu:focus-visible { color: var(--hd-fackel); border-color: var(--hd-fackel); }

.hd-menue .metismenu.mod-menu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-menue .metismenu.mod-menu .metismenu-item { display: block; }

.hd-menue .metismenu.mod-menu .metismenu-item > a {
  display: block;
  padding: .6rem 0;
  color: var(--hd-text);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-decoration: none;
  border-bottom: 1px solid var(--hd-linie);
}

.hd-menue .metismenu.mod-menu .metismenu-item > a:hover,
.hd-menue .metismenu.mod-menu .metismenu-item > a:focus-visible,
.hd-menue .metismenu.mod-menu .metismenu-item.current > a,
.hd-menue .metismenu.mod-menu .metismenu-item.active > a { color: var(--hd-fackel); }

.hd-menue .metismenu.mod-menu .mm-toggler { display: none !important; }
.hd-menue .metismenu.mod-menu .metismenu-item > a::after { display: none; }
.hd-menue .metismenu.mod-menu .metismenu-item > a { text-decoration: none !important; }

.hd-menue .metismenu.mod-menu .mm-collapse {
  position: static !important;
  display: block !important;
  height: auto !important;
  min-width: 0;
  margin: 0;
  padding: .25rem 0 .75rem 1.25rem;
  list-style: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hd-linie);
  box-shadow: none;
}

.hd-menue .metismenu.mod-menu .mm-collapse .metismenu-item > a {
  padding: .4rem 0;
  color: var(--hd-text-leise);
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 0;
}

.hd-menue .metismenu.mod-menu .mm-collapse .metismenu-item.current > a { color: var(--hd-fackel); }

.hd-menue .metismenu.mod-menu .metismenu-item.parent > a { border-bottom: 0; }

.hd-menue__fuss {
  margin: auto 0 0;
  padding-top: 2.5rem;
  color: var(--hd-text-leise);
  font-size: .9rem;
}

/* Ton-Knopf (Begrüßungsfanfare) */
.hd-ton {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem .6rem .8rem;
  color: var(--hd-text);
  background: rgba(23, 20, 18, .88);
  border: 1px solid var(--hd-linie);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
}

.hd-ton svg { width: 1.3rem; height: 1.3rem; }

.hd-ton:hover,
.hd-ton:focus-visible { color: var(--hd-fackel); border-color: var(--hd-fackel); }

.hd-ton.is-spielt { color: var(--hd-glut); }

@media (max-width: 479.98px) {
  .hd-ton__text { display: none; }
  .hd-ton { padding: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-menue,
  .hd-menue-schleier { transition: none !important; }
}

/* ================================================================== */
/* Design v5: Geschichte und Geschichten auf breiten Bildschirmen     */
/* Text links, Bilder und Zitate rechts daneben (schwebend)           */
/* ================================================================== */
@media (min-width: 1100px) {
  .hd-geschichte { max-width: 76rem; }
  .hd-geschichte::after { content: ""; display: table; clear: both; }

  .hd-geschichte > * { max-width: 44rem; }

  .hd-geschichte > .hd-einleitung {
    max-width: 58rem;
    margin-bottom: 1rem;
    font-size: clamp(1.35rem, 1rem + .8vw, 1.7rem);
  }

  .hd-geschichte > figure.hd-bild,
  .hd-geschichte > .hd-zitat-inline:not(.hd-im-text) {
    float: right;
    clear: right;
    width: calc(100% - 47.5rem);
    max-width: 28rem;
    margin: .75rem 0 2rem 3.5rem;
  }

  .hd-geschichte > h2 + figure.hd-bild,
  .hd-geschichte > h2 + .hd-zitat-inline { margin-top: .4rem; }

  .hd-geschichte > figure.hd-bild img {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hd-radius);
  }

  /* Hochformat-Stiche nicht beschneiden, nur begrenzen */
  .hd-geschichte > figure.hd-bild img[src*="titelkupfer"] {
    width: auto;
    max-height: 30rem;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* Jeder Abschnitt beginnt neben seinem eigenen Bild */
  .hd-geschichte > h2 { clear: right; }

  .hd-geschichte > .hd-zitat-inline:not(.hd-im-text) { padding: 1.75rem 2rem; }

  /* Zeitleiste und Quellen quer über die volle Breite */
  .hd-geschichte > h2:has(+ .hd-zeitleiste),
  .hd-geschichte > h2:has(+ .hd-quellen) { clear: both; }

  .hd-geschichte > .hd-zeitleiste {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.5rem 1.25rem;
    max-width: none;
    margin: 2rem 0 1rem;
    padding: 1.75rem 0 0;
    border-left: 0;
    border-top: 2px solid var(--hd-linie);
  }

  .hd-geschichte > .hd-zeitleiste li { margin: 0; padding: 0; }

  .hd-geschichte > .hd-zeitleiste li::before { left: 0; top: -2.3rem; }

  .hd-geschichte > .hd-quellen {
    clear: both;
    max-width: none;
    columns: 2;
    column-gap: 3rem;
  }

  .hd-geschichte > .hd-quellen li { break-inside: avoid; }
}

/* ================================================================== */
/* Design v6: Vertiefungsseiten zur Geschichte, „Mehr“-Links           */
/* ================================================================== */
.hd-zurueck { margin: 0 0 1.5rem; font-size: .95rem; }
.hd-zurueck a { font-weight: 700; text-decoration: none; }
.hd-zurueck a:hover, .hd-zurueck a:focus-visible { text-decoration: underline; }

.hd-geschichte figcaption .hd-bildnachweis {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  opacity: .8;
}

.hd-geschichte ul:not(.hd-quellen):not(.hd-zeitleiste) { padding-left: 1.2rem; }
.hd-geschichte ul:not(.hd-quellen):not(.hd-zeitleiste) li { margin-bottom: .45rem; color: #e0d8cd; }
.hd-geschichte ul:not(.hd-quellen):not(.hd-zeitleiste) li::marker { color: var(--hd-fackel); }

.hd-geschichte .hd-bildnachweise {
  clear: both;
  max-width: none;
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--hd-text-leise);
}

.hd-geschichte .hd-weiter {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  max-width: none;
  margin-top: 2.5rem;
}

.hd-geschichte .hd-mehr { margin: .25rem 0 0; }

.hd-geschichte .hd-mehr a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  color: var(--hd-fackel);
  border: 2px solid var(--hd-fackel);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.hd-geschichte .hd-mehr a:hover,
.hd-geschichte .hd-mehr a:focus-visible {
  color: var(--hd-nacht);
  background: var(--hd-fackel);
}

/* Startbild: zweizeilige Überschrift */
.hd-hero__titel .hd-hero__titel-zwei {
  display: block;
  margin-top: .15em;
  font-size: .55em;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hd-text);
}

/* ================================================================== */
/* Design v7: Fußbereich-Modul, Kontaktseiten                         */
/* ================================================================== */
.container-footer .grid-child { padding-block: 2.5rem; }
.hd-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  width: 100%;
  font-size: .95rem;
}
.hd-fuss__marke { display: flex; align-items: center; gap: .9rem; line-height: 1.45; }
.hd-fuss__marke strong { color: var(--hd-text); font-weight: 700; }
.hd-fuss__wappen {
  flex: none;
  width: 2.6rem;
  height: 3.7rem;
  background: url("../images/wappen-160.png") center / contain no-repeat;
}
.hd-fuss__links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.hd-fuss__links a { text-decoration: none; }
.hd-fuss__links a:hover, .hd-fuss__links a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.hd-fuss__copy { flex-basis: 100%; margin: 0; padding-top: 1rem; border-top: 1px solid var(--hd-linie); font-size: .85rem; }

/* Kontakt / Buchen Sie uns */
.com-contact { max-width: 52rem; }
.com-contact .page-header h1, .com-contact h2 { color: var(--hd-text); }
.com-contact__miscinfo, .com-contact .contact-miscinfo { margin-bottom: 2rem; }
.com-contact h3 { font-size: 1.15rem; margin-top: 1.5rem; color: var(--hd-glut); }
.com-contact .com-contact__form, .com-contact .contact-form {
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.com-contact .contact-form legend { font-size: 1.2rem; color: var(--hd-text); }
.com-contact .form-control {
  background: var(--hd-nacht-2);
  border-color: var(--hd-linie);
  color: var(--hd-text);
}
.com-contact .form-control:focus { border-color: var(--hd-fackel); box-shadow: 0 0 0 .2rem rgba(255, 138, 42, .25); }
.com-contact .btn-primary { background: var(--hd-fackel); border-color: var(--hd-fackel); color: var(--hd-nacht); font-weight: 700; }
.com-contact .btn-primary:hover, .com-contact .btn-primary:focus { background: var(--hd-glut); border-color: var(--hd-glut); }

/* Kontaktseiten: Einleitung vor das Formular, Kontaktblock aus */
.com-contact { display: flex; flex-direction: column; }
.com-contact > .com-contact__container,
.com-contact > h2:has(+ .com-contact__miscinfo) { display: none; }
.com-contact > .page-header { order: 0; }
.com-contact > .icons { order: 1; }
.com-contact > .com-contact__miscinfo { order: 2; }
.com-contact > h2:has(+ .com-contact__form) { order: 3; }
.com-contact > .com-contact__form { order: 4; }
.com-contact__miscinfo dl, .com-contact__miscinfo dd { display: block; margin: 0; }
.com-contact__miscinfo dt { display: none; }
.com-contact__miscinfo p, .com-contact__miscinfo li { font-size: 1.05rem; line-height: 1.65; }

/* ================================================================== */
/* Design v8: Gästebuch – Pergament, Siegel, Fraktur-Initialen        */
/* ================================================================== */
:root {
  --hd-pergament: #efe3c8;
  --hd-pergament-dunkel: #dccaa3;
  --hd-tinte: #2b2118;
  --hd-tinte-leise: #6b5a45;
  --hd-siegel: #8e1b12;
}

/* Einleitung über den Einträgen */
.hd-gb-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem;
  align-items: end;
  margin: 0 0 2.5rem;
  padding: 0 0 2rem;
  border-bottom: 1px solid var(--hd-linie);
}
.hd-gb-intro__titel {
  margin: 0 0 .75rem;
  font-family: var(--hd-fraktur);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--hd-text);
}
.hd-gb-intro__titel span { color: var(--hd-fackel); }
.hd-gb-intro p { max-width: 42rem; margin: 0 0 .8rem; font-size: 1.08rem; line-height: 1.65; color: var(--hd-text); }
.hd-gb-intro p.hd-gb-intro__hinweis { font-size: .92rem; color: var(--hd-text-leise); margin: 0; }
.hd-gb-intro__aktion { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.hd-gb-intro__aktion .hd-button { white-space: nowrap; }
@media (max-width: 760px) {
  .hd-gb-intro { grid-template-columns: 1fr; }
  .hd-gb-intro__aktion { align-items: flex-start; }
}

/* Liste der Einträge */
#phocaguestbook.hd-gb-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.75rem;
  align-items: start;
}
#phocaguestbook.hd-gb-liste > :not(.hd-gb-eintrag) { grid-column: 1 / -1; }
#phocaguestbook.hd-gb-liste > div:empty { display: none; }

#phocaguestbook .hd-gb-eintrag {
  position: relative;
  margin: 0;
  padding: 1.6rem 1.6rem 1.2rem;
  color: var(--hd-tinte);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .45), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(120, 80, 30, .22), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(160, 120, 60, .08), transparent 40%),
    var(--hd-pergament);
  border: 0;
  border-radius: .35rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 18px 40px -18px rgba(0, 0, 0, .8);
  transform: rotate(-.3deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
#phocaguestbook .hd-gb-eintrag:nth-child(even) { transform: rotate(.35deg); }
#phocaguestbook .hd-gb-eintrag:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 24px 48px -18px rgba(0, 0, 0, .9); }
#phocaguestbook .hd-gb-eintrag::before {
  /* feine Randlinie wie auf alten Urkunden */
  content: "";
  position: absolute;
  inset: .45rem;
  border: 1px solid rgba(107, 90, 69, .35);
  border-radius: .2rem;
  pointer-events: none;
}

.hd-gb-kopf { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; }
.hd-gb-siegel {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  font-family: var(--hd-fraktur);
  font-size: 1.7rem;
  line-height: 1;
  color: #f6d9b8;
  background: radial-gradient(circle at 35% 30%, #c0392b, var(--hd-siegel) 60%, #5c0f0a);
  box-shadow: 0 0 0 3px rgba(142, 27, 18, .35), 0 3px 6px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .35);
}
.hd-gb-name { display: block; font-weight: 800; font-size: 1.12rem; line-height: 1.2; color: var(--hd-tinte); }
.hd-gb-ort { display: block; margin-top: .15rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hd-tinte-leise); }

#phocaguestbook .hd-gb-eintrag .pgblockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--hd-tinte);
}
#phocaguestbook .hd-gb-eintrag .pgb-content-inside { overflow: visible; }
#phocaguestbook .hd-gb-eintrag .pgb-content-inside::first-letter {
  float: left;
  margin: .05em .12em 0 0;
  font-family: var(--hd-fraktur);
  font-size: 3.1em;
  line-height: .8;
  color: var(--hd-siegel);
}
#phocaguestbook .hd-gb-eintrag hr { margin: 1.1rem 0 .6rem; border: 0; border-top: 1px dashed rgba(107, 90, 69, .45); opacity: 1; }
#phocaguestbook .hd-gb-eintrag small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .82rem;
  color: var(--hd-tinte-leise);
}
#phocaguestbook .hd-gb-eintrag small .pull-right { float: none; display: flex; gap: .3rem; }
#phocaguestbook .hd-gb-eintrag small .btn {
  padding: .15rem .45rem;
  font-size: .8rem;
  color: var(--hd-tinte-leise);
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(107, 90, 69, .35);
}
#phocaguestbook .hd-gb-leer {
  padding: 2rem;
  text-align: center;
  color: var(--hd-text-leise);
  border: 1px dashed var(--hd-linie);
  border-radius: var(--hd-radius);
}

/* Seite "Ins Gästebuch schreiben" */
.itemid-153 #phocaguestbook > .pgwell > h4 { display: none; }
.itemid-153 #phocaguestbook > .pgwell {
  max-width: 44rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
}
.itemid-153 #phocaguestbook .control-group { margin-bottom: 1.1rem; }
.itemid-153 #phocaguestbook .form-control,
.itemid-153 #phocaguestbook textarea { width: 100%; max-width: none; }
.itemid-153 #phocaguestbook .btn-primary {
  background: var(--hd-fackel);
  border-color: var(--hd-fackel);
  color: var(--hd-nacht);
  font-weight: 700;
}
.hd-gb-schreiben { max-width: 44rem; margin: 0 0 1.75rem; }
.hd-gb-schreiben p { font-size: 1.05rem; line-height: 1.65; }
.hd-gb-schreiben .hd-gb-zurueck { font-size: .95rem; }
.hd-gb-schreiben__titel { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1rem; }

/* ================================================================== */
/* Lenis (weiches Scrollen) – Regeln aus lenis.css 1.3.26, MIT        */
/* ================================================================== */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ================================================================== */
/* Design v10: Ehrenzeichen (Fahnen, Fanfaren, Trommel) statt Wappen  */
/* neben der ursprünglichen Wortmarke                                 */
/* ================================================================== */
.container-header .brand-logo::before {
  width: 5.7rem;
  height: 5.5rem;
  background-image: url("/images/herolde/logo/ehrenzeichen2x.webp");
}
@media (max-width: 767.98px) {
  .container-header .brand-logo::before { width: 3.9rem; height: 3.75rem; }
}

/* ================================================================== */
/* GSAP: Zierlinien, Bildraster-Fokus, Startzustand                   */
/* ================================================================== */
.hd-zierlinie {
  display: block;
  max-width: 100%;
  height: 14px;
  margin: .2rem 0 1.2rem;
  overflow: visible;
}
.hd-zierlinie path { fill: none; stroke: var(--hd-fackel); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hd-zierlinie .hd-zier-raute { fill: var(--hd-fackel); }
.hd-gb-intro .hd-zierlinie { margin-top: -.2rem; }

/* Bis GSAP startet: Startbild-Text kurz verbergen (Sicherheitsnetz im Skript) */
html.hd-bewegung .hd-hero__titel,
html.hd-bewegung .hd-hero__text,
html.hd-bewegung .hd-hero__aktionen { visibility: hidden; }

/* SplitText-Masken sauber halten */
.hd-hero__titel .hd-wort { display: inline-block; }

/* Bildraster: Klick vergrößert ein Bild */
.hd-raster img { cursor: zoom-in; }
.hd-raster img:focus-visible { outline: 3px solid var(--hd-fackel); outline-offset: 3px; }
.hd-raster img.is-fokus { grid-column: 1 / -1; grid-row: span 3; cursor: zoom-out; }
@media (max-width: 767.98px) { .hd-raster img.is-fokus { grid-row: span 2; } }

/* ================================================================== */
/* Mitgliederbereich: Hinweise, Bericht-Formular, Phoca Gallery dunkel */
/* ================================================================== */
.alert-info, .alert.alert-info {
  background: rgba(255, 138, 42, .08);
  border: 1px solid var(--hd-linie);
  color: var(--hd-text);
}

/* Bericht schreiben (Frontend-Formular) */
.edit.item-page joomla-tab [role="tablist"] {
  background: transparent;
  border-bottom: 1px solid var(--hd-linie);
  box-shadow: none;
}
.edit.item-page joomla-tab [role="tab"] {
  background: var(--hd-nacht-2);
  color: var(--hd-text-leise);
  border: 1px solid var(--hd-linie);
  border-bottom: 0;
  border-radius: .6rem .6rem 0 0;
  margin-right: .25rem;
}
.edit.item-page joomla-tab [role="tab"][aria-selected="true"],
.edit.item-page joomla-tab [role="tab"]:hover {
  background: var(--hd-karte);
  color: var(--hd-text);
  box-shadow: inset 0 -3px 0 var(--hd-fackel);
}
.edit.item-page joomla-tab joomla-tab-element,
.edit.item-page joomla-tab > div[role="tabpanel"] {
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-top: 0;
  border-radius: 0 0 var(--hd-radius) var(--hd-radius);
  color: var(--hd-text);
  padding: clamp(1rem, 3vw, 1.75rem);
}
.edit.item-page .control-label label,
.edit.item-page .form-text,
.edit.item-page legend { color: var(--hd-text); }
.edit.item-page .form-text, .edit.item-page small { color: var(--hd-text-leise); }
.edit.item-page .form-control,
.edit.item-page .form-select {
  background-color: var(--hd-nacht-2);
  border-color: var(--hd-linie);
  color: var(--hd-text);
}
.edit.item-page .btn-toolbar .btn-primary,
.edit.item-page .btn-primary { background: var(--hd-fackel); border-color: var(--hd-fackel); color: var(--hd-nacht); font-weight: 700; }

/* Phoca Gallery (Interne Bilder) */
#phocagallery .pg-category-desc { color: var(--hd-text); margin-bottom: 1.5rem; }
#phocagallery .phTabs ul,
#phocagallery .phTabsUl { border-bottom: 1px solid var(--hd-linie); }
#phocagallery .phTabs ul li,
#phocagallery .phTabsUl li {
  background: var(--hd-nacht-2) !important;
  border-color: var(--hd-linie) !important;
  color: var(--hd-text) !important;
}
#phocagallery .phTabs ul li a,
#phocagallery .phTabsUl li a { color: var(--hd-text) !important; }
#phocagallery .phTabsContainer,
#phocagallery #phocagallery-upload {
  background: var(--hd-karte) !important;
  color: var(--hd-text) !important;
  border: 1px solid var(--hd-linie) !important;
  border-radius: 0 var(--hd-radius) var(--hd-radius) var(--hd-radius);
}
#phocagallery #phocagallery-upload { border: 0 !important; padding: clamp(1rem, 3vw, 1.5rem); }
#phocagallery #phocagallery-upload h4,
#phocagallery #phocagallery-upload label,
#phocagallery #phocagallery-upload td { color: var(--hd-text) !important; }
#phocagallery .pg-category-box,
#phocagallery .pg-item-box {
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: .75rem;
}
#phocagallery a { color: var(--hd-fackel); }
#phocagallery .phTabsA {
  background: var(--hd-nacht-2) !important;
  color: var(--hd-text) !important;
  border: 1px solid var(--hd-linie) !important;
  border-bottom: 0 !important;
}
#phocagallery .phTabsA.active { background: var(--hd-karte) !important; box-shadow: inset 0 -3px 0 var(--hd-fackel); }
#phocagallery .phTabsA svg { fill: var(--hd-fackel); }
#phocagallery-upload input[type="text"],
#phocagallery-upload input[type="file"],
#phocagallery-upload textarea {
  background: var(--hd-nacht-2) !important;
  color: var(--hd-text) !important;
  border: 1px solid var(--hd-linie) !important;
  border-radius: .4rem;
  padding: .35rem .6rem;
  max-width: 100%;
}
#phocagallery select,
#phocagallery .form-select,
#phocagallery .form-control,
#phocagallery input::file-selector-button {
  background-color: var(--hd-nacht-2) !important;
  color: var(--hd-text) !important;
  border: 1px solid var(--hd-linie) !important;
}
/* Auswahllisten: Cassiopeia-Hintergrundbild (weiß) durch Pfeil in Fackelfarbe ersetzen */
.form-select {
  background-color: var(--hd-nacht-2);
  color: var(--hd-text);
  border-color: var(--hd-linie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ff8a2a' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-position: right .75rem center !important;
  background-repeat: no-repeat !important;
  padding-right: 2.2rem;
}
/* DPCalendar-Liste: helle Zebrastreifen entfernen */
.com-dpcalendar-list .dp-event {
  background: transparent !important;
  border-bottom: 1px solid var(--hd-linie);
}
.com-dpcalendar-list .dp-event:nth-child(odd) { background: rgba(255, 138, 42, .04) !important; }
/* ================================================================== */
/* Medien-Fenster (Bericht schreiben): lesbar, mit Abbrechen-Knopf     */
/* ================================================================== */
/* Inhalt des Fensters: helle Arbeitsfläche mit dunkler Schrift */
body.contentpane:has(#com-media) { background: #f4efe8; color: #1c1712; }
body.contentpane .subhead { background: #f4efe8 !important; border: 0; }
body.contentpane .subhead .btn {
  background: #fff;
  color: #1c1712;
  border: 1px solid #c9c0b4;
}
#com-media { color: #1c1712; }
#com-media .media-container,
#com-media .media-sidebar,
#com-media .media-browser { background: #fff; color: #1c1712; }
#com-media a,
#com-media summary,
#com-media .media-disk-name,
#com-media .media-tree a,
#com-media .media-browser-item-info,
#com-media .media-breadcrumb a { color: #1c1712 !important; }
#com-media .media-browser-item.selected .media-browser-item-info { color: #fff !important; }
#com-media input[type="text"],
#com-media input[type="search"],
#com-media .form-control {
  background: #fff !important;
  color: #1c1712 !important;
  border: 1px solid #c9c0b4 !important;
}
#com-media input::placeholder { color: #6b6158 !important; }

/* Fensterrahmen: Schließen-Kreuz wird zum sichtbaren Knopf „Abbrechen“ */
joomla-dialog .button-close {
  width: auto;
  height: auto;
  opacity: 1;
  background: none !important;
  border: 1px solid var(--hd-linie);
  border-radius: .5rem;
  padding: .45rem 1rem;
  margin-left: .5rem;
  color: var(--hd-text);
  font-weight: 600;
  line-height: 1.2;
}
joomla-dialog .button-close::before { content: "Abbrechen"; }
joomla-dialog .button-close:hover,
joomla-dialog .button-close:focus-visible { border-color: var(--hd-fackel); color: var(--hd-fackel); }
joomla-dialog .button-success {
  background: var(--hd-fackel) !important;
  border-color: var(--hd-fackel) !important;
  color: var(--hd-nacht) !important;
  font-weight: 700;
}
/* Phoca Gallery: Mehrfach-Upload (plupload) */
#phocagallery a.btn,
#phocagallery a.plupload_button { color: var(--hd-nacht) !important; font-weight: 700; }
#phocagallery a.plupload_add {
  background: transparent !important;
  border: 1px solid var(--hd-fackel) !important;
  color: var(--hd-fackel) !important;
}
#phocagallery a.plupload_start { font-size: 0 !important; }
#phocagallery a.plupload_start::after { content: "Hochladen starten"; font-size: .95rem; }
#phocagallery a.plupload_start svg,
#phocagallery a.plupload_start i { font-size: .95rem; }
#phocagallery a.plupload_disabled { opacity: .45; }
#phocagallery .plupload_header,
#phocagallery .plupload_filelist_header,
#phocagallery .plupload_filelist_footer,
#phocagallery .plupload_filelist,
#phocagallery .plupload_container { background: transparent !important; color: var(--hd-text) !important; }
#phocagallery .plupload_filelist_header div,
#phocagallery .plupload_file_status,
#phocagallery .plupload_file_size { color: var(--hd-text-leise) !important; }
/* ================================================================== */
/* Interne Berichte: Aufmacher + Kartenraster                          */
/* ================================================================== */
.hd-berichte .blog-items { margin: 0 0 2rem; }

/* Karte (Aufmacher und Raster) */
.hd-berichte .blog-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  overflow: hidden;
  margin: 0;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hd-berichte .blog-item .item-image {
  float: none !important;
  margin: 0 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hd-nacht-2);
}
.hd-berichte .blog-item .item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.hd-berichte .blog-item .hd-ohne-bild {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(255, 138, 42, .18), transparent 65%), var(--hd-nacht-2);
}
.hd-berichte .blog-item .hd-ohne-bild::before {
  content: "";
  width: 34%;
  aspect-ratio: 183 / 176;
  background: url("/images/herolde/logo/ehrenzeichen2x.webp") center / contain no-repeat;
  opacity: .55;
}
.hd-berichte .blog-item .item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.25rem 1.3rem;
}
.hd-berichte .blog-item .page-header { margin: 0; padding: 0; border: 0; }
.hd-berichte .blog-item h2 {
  order: 2;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: .35rem 0 .5rem;
}
.hd-berichte .blog-item .item-content > .page-header { order: 2; }
.hd-berichte .blog-item h2 a { color: var(--hd-text); text-decoration: none; }
/* ganze Karte klickbar */
.hd-berichte .blog-item h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hd-berichte .blog-item h2 a:focus-visible { outline: none; }
.hd-berichte .blog-item:has(h2 a:focus-visible) { outline: 2px solid var(--hd-fackel); outline-offset: 3px; }

/* Datum und Verfasser */
.hd-berichte .blog-item .article-info {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin: 0;
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--hd-text-leise) !important;
}
.hd-berichte .blog-item .article-info dd { margin: 0; }
.hd-berichte .blog-item .article-info .published { color: var(--hd-fackel); font-weight: 600; }
.hd-berichte .blog-item .article-info [class^="icon-"] { display: none; }

/* Anreißer: höchstens drei Zeilen, keine Bilder */
.hd-berichte .blog-item .hd-anreisser {
  order: 3;
  color: var(--hd-text-leise);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .9rem;
}
.hd-berichte .blog-item .hd-anreisser p { margin: 0 0 .4rem; }
.hd-berichte .blog-item .hd-anreisser img,
.hd-berichte .blog-item .hd-anreisser figure { display: none; }
.hd-berichte .blog-item .readmore { order: 4; margin: auto 0 0; }
.hd-berichte .blog-item .readmore .btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--hd-fackel);
  font-weight: 600;
}
.hd-berichte .blog-item .readmore .btn::after { content: " →"; transition: margin .3s ease; }

/* Bearbeiten-Knopf bleibt über der klickbaren Fläche */
.hd-berichte .blog-item .icons {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
}
.hd-berichte .blog-item .icons a {
  background: rgba(14, 12, 11, .8);
  color: var(--hd-text);
  border-radius: .5rem;
  padding: .25rem .6rem;
  font-size: .8rem;
  text-decoration: none;
}
.hd-berichte .blog-item .icons [role="tooltip"] { display: none; }

/* Überfahren mit der Maus */
@media (hover: hover) {
  .hd-berichte .blog-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 138, 42, .45);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
  }
  .hd-berichte .blog-item:hover .item-image img { transform: scale(1.06); }
  .hd-berichte .blog-item:hover .readmore .btn::after { margin-left: .3rem; }
}

/* Aufmacher: groß, Bild links, Text rechts */
.hd-berichte .items-leading .blog-item h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.hd-berichte .items-leading .hd-anreisser { -webkit-line-clamp: 5; font-size: 1.05rem; }
@media (min-width: 900px) {
  .hd-berichte .items-leading .blog-item { display: grid; grid-template-columns: 1.45fr 1fr; }
  .hd-berichte .items-leading .item-image { aspect-ratio: auto; min-height: 22rem; }
  .hd-berichte .items-leading .item-content { padding: 2rem 2.2rem; justify-content: center; }
}

/* Raster */
.hd-berichte .blog-items.columns-3,
.hd-berichte .blog-items[class*="columns-"] {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  column-count: auto !important;
}
.hd-berichte .blog-items[class*="columns-"] > .blog-item { break-inside: auto; }

/* Knopf „Neuer Beitrag“ */
.hd-berichte .blog > .btn-primary { margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .hd-berichte .blog-item,
  .hd-berichte .blog-item .item-image img { transition: none; }
}

/* Interne Berichte: Feinschliff */
@media (min-width: 640px) { .hd-berichte .blog-items[class*="columns-"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hd-berichte .blog-items[class*="columns-"] { grid-template-columns: repeat(3, 1fr); } }
.hd-berichte .blog-item .article-info dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hd-berichte .blog-item .readmore .btn [class^="icon-"],
.hd-berichte .blog-item .readmore .btn svg { display: none; }

/* Bericht schreiben: im Reiter „Vorschaubild“ nur Bild und Bildbeschreibung */
.edit.item-page #images .control-group:has(#jform_images_imgclass_intro, #jform_images_float_intro, #jform_images_image_intro_caption, #jform_images_image_fulltext, #jform_images_image_fulltext_alt, #jform_images_image_fulltext_alt_empty, #jform_images_imgclass_fulltext, #jform_images_float_fulltext, #jform_images_image_fulltext_caption, [id^="jform_urls_"]),
.edit.item-page #images fieldset:has([id^="jform_urls_"]) { display: none; }
.edit.item-page #images::before {
  content: "Dieses Bild erscheint als Vorschau in der Übersicht „Interne Berichte“. Am besten ein Querformat-Foto wählen.";
  display: block;
  margin-bottom: 1rem;
  color: var(--hd-text-leise);
}

/* Formular-Reiter in der schmalen Ansicht (Akkordeon) */
.edit.item-page joomla-tab[view="accordion"] button[aria-controls],
.edit.item-page joomla-tab[view="accordion"] > button {
  width: 100%;
  text-align: left;
  background: var(--hd-nacht-2);
  color: var(--hd-text);
  border: 1px solid var(--hd-linie);
  border-radius: .6rem;
  padding: .75rem 1rem;
  margin-top: .5rem;
}
.edit.item-page joomla-tab[view="accordion"] button[aria-expanded="true"] { box-shadow: inset 3px 0 0 var(--hd-fackel); }

/* Kopfzeile auf schmalen Handys: Schriftzug kleiner, Menü-Knopf bleibt sichtbar */
@media (max-width: 479.98px) {
  .container-header .navbar-brand { min-width: 0; flex: 1 1 auto; margin-right: .5rem; }
  .container-header .brand-logo { gap: .5rem; min-width: 0; }
  .container-header .brand-logo::before { width: 3rem; height: 2.9rem; flex: none; }
  .container-header .brand-logo span { font-size: 1.02rem; line-height: 1.15; white-space: normal; }
}

/* ================================================================== */
/* DPCalendar Terminformular: Pro-Funktionen aus, lesbare Auswahlen    */
/* ================================================================== */
/* Felder, die nur in der kostenpflichtigen Version gehen, ausblenden */
.com-dpcalendar-eventform .control-group:has(.dp-free-information-text),
.com-dpcalendar-eventform .control-group[class*="dp-field-scheduling"],
.com-dpcalendar-eventform .dp-field-rrule,
.com-dpcalendar-eventform .dp-field-exdates,
.com-dpcalendar-eventform #dp-tab-booking,
.com-dpcalendar-eventform label[for="dp-tab-booking"],
.com-dpcalendar-eventform .dp-tabs__tab-booking { display: none !important; }

/* Ja/Nein-Schalter: gewählte Beschriftung gut lesbar */
.com-dpcalendar-eventform .dp-form-radio input:checked + label { color: var(--hd-text) !important; font-weight: 600; }

/* Datumsauswahl (Pikaday) dunkel */
.pika-single {
  background: var(--hd-karte) !important;
  border: 1px solid var(--hd-linie) !important;
  border-radius: .75rem;
  color: var(--hd-text) !important;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8) !important;
  font-family: var(--hd-sans);
}
.pika-single .pika-lendar { color: var(--hd-text); }
.pika-single .pika-label { background: transparent !important; color: var(--hd-text) !important; }
.pika-single .pika-table th,
.pika-single .pika-table abbr { color: var(--hd-text-leise) !important; text-decoration: none; }
.pika-single .pika-button {
  background: var(--hd-nacht-2) !important;
  color: var(--hd-text) !important;
  border-radius: .35rem;
  text-align: center;
}
.pika-single .pika-button:hover,
.pika-single .pika-row.pick-whole-week:hover .pika-day { background: rgba(255, 138, 42, .25) !important; color: var(--hd-text) !important; box-shadow: none !important; }
.pika-single .is-today .pika-button { color: var(--hd-fackel) !important; font-weight: 700; }
.pika-single .is-selected .pika-button { background: var(--hd-fackel) !important; color: var(--hd-nacht) !important; box-shadow: none !important; }
.pika-single .is-disabled .pika-button,
.pika-single .is-outside-current-month .pika-button { color: #7d7368 !important; opacity: 1; }
.pika-single .pika-prev,
.pika-single .pika-next { filter: invert(1); opacity: .8; }

/* Vorschlagslisten (Ort-Suche, Uhrzeit) dunkel */
.dp-autocomplete {
  background: var(--hd-karte) !important;
  border: 1px solid var(--hd-linie) !important;
  border-radius: .6rem;
  color: var(--hd-text) !important;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
}
.dp-autocomplete .dp-autocomplete__result {
  color: var(--hd-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--hd-linie);
}
.dp-autocomplete .dp-autocomplete__result:hover,
.dp-autocomplete .dp-autocomplete__result_selected { background: rgba(255, 138, 42, .18) !important; }
.dp-autocomplete .dp-autocomplete__item-title { color: var(--hd-fackel) !important; }
.dp-autocomplete .dp-autocomplete__item-details { color: var(--hd-text-leise) !important; }

/* Karte: Klick übernimmt den Ort */
.com-dpcalendar-eventform .hd-karte-klickbar .leaflet-container,
.com-dpcalendar-eventform .hd-karte-klickbar.leaflet-container { cursor: crosshair; }
.hd-karte-hinweis { margin: .4rem 0 .8rem; font-size: .9rem; color: var(--hd-text-leise); }
.hd-ort-popup .leaflet-popup-content-wrapper,
.hd-ort-popup .leaflet-popup-tip { background: var(--hd-karte); color: var(--hd-text); border: 1px solid var(--hd-linie); }
.hd-ort-popup .leaflet-popup-content { margin: .9rem 1rem; font-family: var(--hd-sans); }
.hd-ort-popup p { margin: 0 0 .5rem; }
.hd-ort-popup .hd-ort-details { font-size: .8rem; color: var(--hd-text-leise); }
.hd-ort-popup label { display: block; font-size: .8rem; color: var(--hd-text-leise); margin-bottom: .2rem; }
.hd-ort-popup input {
  width: 100%;
  background: var(--hd-nacht-2);
  color: var(--hd-text);
  border: 1px solid var(--hd-linie);
  border-radius: .4rem;
  padding: .35rem .5rem;
  margin-bottom: .6rem;
}
.hd-ort-popup button {
  background: var(--hd-fackel);
  color: var(--hd-nacht);
  border: 0;
  border-radius: 999px;
  padding: .4rem .9rem;
  font-weight: 700;
  cursor: pointer;
}
.hd-ort-popup a.leaflet-popup-close-button { color: var(--hd-text-leise); }
.pika-single .pika-table td, .pika-single .pika-table th { border: 0 !important; padding: 1px; }

/* Terminformular: Wahl öffentlicher / interner Text */
.hd-textwahl .controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.hd-textwahl__titel { font-weight: 600; color: var(--hd-text); }
.hd-textwahl__option { display: inline-flex; align-items: center; gap: .45rem; color: var(--hd-text); cursor: pointer; }
.hd-textwahl__option input { accent-color: var(--hd-fackel); width: 1.1rem; height: 1.1rem; }
.hd-textwahl__knopf {
  background: transparent !important;
  border: 1px solid var(--hd-fackel) !important;
  color: var(--hd-fackel) !important;
  border-radius: 999px !important;
  padding: .35rem 1rem !important;
  font-weight: 600;
}
.hd-textwahl__knopf:hover { background: rgba(255, 138, 42, .15) !important; }
.hd-textwahl__hinweis { flex-basis: 100%; margin: 0; font-size: .9rem; color: var(--hd-text-leise); }

/* Auftritte (öffentliche Seite): Termine werden nur im Mitgliederbereich gepflegt */
.itemid-147 .dp-button-create,
.itemid-147 .dp-event__actions,
.itemid-147 .dp-event-tooltip__action,
.itemid-147 .dp-link_delete,
.itemid-147 a[href*="task=event.edit"],
.itemid-147 a[href*="task=event.delete"],
.itemid-147 a[href*="view=form"] { display: none !important; }

/* Systemmeldungen (Erfolg, Hinweis, Fehler) im dunklen Design */
#system-message-container joomla-alert,
joomla-alert {
  background: var(--hd-karte) !important;
  color: var(--hd-text) !important;
  border: 1px solid var(--hd-linie) !important;
  border-left-width: 4px !important;
  border-radius: .6rem;
}
joomla-alert[type="success"] { border-left-color: #5cb85c !important; }
joomla-alert[type="info"] { border-left-color: var(--hd-fackel) !important; }
joomla-alert[type="warning"] { border-left-color: #f0ad4e !important; }
joomla-alert[type="danger"], joomla-alert[type="error"] { border-left-color: #e5534b !important; }
joomla-alert .alert-heading,
joomla-alert .alert-message,
joomla-alert .alert-wrapper,
joomla-alert div { color: var(--hd-text) !important; background: transparent !important; }
joomla-alert .joomla-alert--close,
joomla-alert button { color: var(--hd-text-leise) !important; background: transparent !important; }
/* Auftritte (öffentlich): interner Text nie anzeigen – auch nicht für angemeldete Mitglieder */
.itemid-147 .dp-field-interne-infos { display: none !important; }

/* ================================================================== */
/* Mitgliederbereich: Kacheln (nur die Punkte, die man sehen darf)     */
/* ================================================================== */
.hd-kacheln-modul,
.card.hd-kacheln-modul { background: none !important; border: 0 !important; box-shadow: none !important; margin: 0; }
.hd-kacheln-modul .card-body { padding: 0 !important; }
.hd-kacheln {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 768px) { .hd-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } }
.hd-kacheln > li { margin: 0; padding: 0; }
.hd-kacheln > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .3rem;
  height: 100%;
  min-height: 8.5rem;
  padding: 1.1rem 1.1rem 1rem;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  color: var(--hd-text) !important;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.hd-kacheln > li > a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--hd-fackel);
  margin-bottom: auto;
}
.hd-kacheln > li > a::after {
  font-size: .82rem;
  font-weight: 400;
  color: var(--hd-text-leise);
}
.hd-kacheln .item-154 > a::before { content: "\f1ea"; }
.hd-kacheln .item-154 > a::after  { content: "Lesen, was im Verein los war"; }
.hd-kacheln .item-155 > a::before { content: "\f044"; }
.hd-kacheln .item-155 > a::after  { content: "Neuen internen Bericht verfassen"; }
.hd-kacheln .item-156 > a::before { content: "\f302"; }
.hd-kacheln .item-156 > a::after  { content: "Fotos aus dem Vereinsleben"; }
.hd-kacheln .item-157 > a::before { content: "\f073"; }
.hd-kacheln .item-157 > a::after  { content: "Proben, Auftritte, Ausflüge"; }
.hd-kacheln .item-160 > a::before { content: "\f271"; }
.hd-kacheln .item-160 > a::after  { content: "Auftritt oder internen Termin eintragen"; }
.hd-kacheln .item-161 > a::before { content: "\f0a1"; }
.hd-kacheln .item-161 > a::after  { content: "Öffentliche Neuigkeit schreiben"; }
/* Schreib-Kacheln leicht hervorgehoben */
.hd-kacheln .item-155 > a,
.hd-kacheln .item-160 > a,
.hd-kacheln .item-161 > a { background: linear-gradient(160deg, rgba(255, 138, 42, .16), rgba(255, 138, 42, .03) 60%), var(--hd-karte); }
.hd-kacheln > li > a:hover,
.hd-kacheln > li > a:focus-visible { border-color: var(--hd-fackel); transform: translateY(-3px); outline: none; }
.hd-kacheln > li > a:active { transform: scale(.98); }

/* sanftes Einblenden nacheinander */
@keyframes hd-kachel-ein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hd-kacheln > li { animation: hd-kachel-ein .5s cubic-bezier(.2, .7, .2, 1) both; }
.hd-kacheln > li:nth-child(2) { animation-delay: .06s; }
.hd-kacheln > li:nth-child(3) { animation-delay: .12s; }
.hd-kacheln > li:nth-child(4) { animation-delay: .18s; }
.hd-kacheln > li:nth-child(5) { animation-delay: .24s; }
.hd-kacheln > li:nth-child(6) { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .hd-kacheln > li { animation: none; }
  .hd-kacheln > li > a { transition: none; }
}

/* Abmelden unter den Kacheln, dezent */
.itemid-139 .com-users-logout .btn { background: transparent; border: 1px solid var(--hd-linie); color: var(--hd-text-leise); }

/* Diktier-Hinweis nur auf Touch-Geräten */
.hd-diktat-tipp { display: none; }
@media (pointer: coarse) {
  .hd-diktat-tipp {
    display: block;
    margin: 0 0 .7rem;
    padding: .7rem .9rem .7rem 2.6rem;
    position: relative;
    background: rgba(255, 138, 42, .1);
    border: 1px solid rgba(255, 138, 42, .35);
    border-radius: .7rem;
    font-size: .92rem;
    color: var(--hd-text);
  }
  .hd-diktat-tipp::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: .95rem;
    top: .72rem;
    color: var(--hd-fackel);
  }
}

/* ================================================================== */
/* Termine (DPCalendar-Liste) als Kacheln                              */
/* ================================================================== */
.hd-termine {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  padding: 0 !important;
  margin: 1.5rem 0 2rem !important;
}
@media (min-width: 640px) { .hd-termine { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hd-termine { grid-template-columns: repeat(3, 1fr); } }

.hd-termine > .dp-event {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 0 1.25rem !important;
  background: var(--hd-karte) !important;
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hd-termine > .dp-event.dp-event_finished { opacity: .6; }

/* Bild */
.hd-termine .dp-event__image {
  order: 0;
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0 !important;
  overflow: hidden;
  background: var(--hd-nacht-2);
  max-width: none !important;
  width: 100%;
}
.hd-termine .dp-event__image .dp-figure,
.hd-termine .dp-event__image a { display: block; height: 100%; margin: 0; }
.hd-termine .dp-event__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.hd-termine .dp-event__image.hd-ohne-bild {
  background: radial-gradient(circle at 60% 55%, rgba(255, 138, 42, .18), transparent 65%), var(--hd-nacht-2);
}
.hd-termine .dp-event__image.hd-ohne-bild::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30%;
  aspect-ratio: 183 / 176;
  background: url("/images/herolde/logo/ehrenzeichen2x.webp") center / contain no-repeat;
  opacity: .5;
}

/* Kalenderblatt auf dem Bild */
.hd-termin-blatt {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.6rem;
  padding: .45rem .55rem .4rem;
  background: rgba(14, 12, 11, .82);
  border: 1px solid rgba(255, 138, 42, .55);
  border-radius: .7rem;
  backdrop-filter: blur(4px);
  line-height: 1;
  pointer-events: none;
}
.hd-termin-blatt__tag { font-size: 1.6rem; font-weight: 800; color: var(--hd-text); }
.hd-termin-blatt__monat { margin-top: .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-fackel); }

/* Datum über der Überschrift */
.hd-termin-kopfdatum {
  order: 1;
  margin: 1.05rem 1.25rem 0 !important;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hd-fackel);
}

/* Überschrift, ganze Karte klickbar */
.hd-termine .dp-event__title {
  order: 2;
  margin: .3rem 1.25rem .45rem !important;
  font-size: 1.25rem !important;
  line-height: 1.25;
}
.hd-termine .dp-event__title a { color: var(--hd-text) !important; text-decoration: none !important; }
.hd-termine .dp-event__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hd-termine .dp-event__title-dot { display: none !important; }
.hd-termine > .dp-event:has(.dp-event__title a:focus-visible) { outline: 2px solid var(--hd-fackel); outline-offset: 3px; }

/* Unterzeile: Datum/Uhrzeit, Ort, Kalender */
.hd-termine .dp-event__details {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1rem;
  margin: 0 1.25rem !important;
  padding: 0 !important;
  font-size: .86rem;
  color: var(--hd-text-leise);
  border: 0 !important;
}
.hd-termine .dp-event__details > div { margin: 0 !important; display: inline-flex; align-items: center; gap: .35rem; }
.hd-termine .dp-icon,
.hd-termine .dp-icon svg { width: .95em; height: .95em; color: var(--hd-fackel); fill: currentColor; }
.hd-termine .dp-location { display: inline; }
.hd-termine .dp-location__title { color: var(--hd-text-leise); }
.hd-termine .dp-location__description,
.hd-termine .dp-event__hits,
.hd-termine .dp-event > [itemscope] { display: none !important; }
.hd-termine .dp-event__calendar {
  padding: .1rem .55rem;
  border: 1px solid var(--hd-linie);
  border-radius: 999px;
  font-size: .75rem;
}
.itemid-147 .hd-termine .dp-event__calendar { display: none !important; }

/* Beschreibung: drei Zeilen */
.hd-termine .dp-event__description {
  order: 4;
  margin: .65rem 1.25rem 0 !important;
  color: var(--hd-text-leise);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hd-termine .dp-event__description p { margin: 0 0 .3rem; }
.hd-termine .dp-event__description img { display: none; }

/* Bearbeiten (nur im Mitgliederbereich sichtbar) */
.hd-termine .dp-event__actions {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 3;
  display: flex;
  gap: .3rem;
  margin: 0 !important;
}
.hd-termine .dp-event__actions a {
  display: inline-flex;
  padding: .35rem .5rem;
  background: rgba(14, 12, 11, .82);
  border-radius: .5rem;
  color: var(--hd-text);
}

@media (hover: hover) {
  .hd-termine > .dp-event:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 138, 42, .45);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
  }
  .hd-termine > .dp-event:hover .dp-event__image img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hd-termine > .dp-event,
  .hd-termine .dp-event__image img { transition: none; }
}
.hd-termine .dp-event__image { padding: 0 !important; }
.hd-termine .dp-event__image .dp-figure,
.hd-termine .dp-event__image a { width: 100% !important; height: 100% !important; padding: 0 !important; }
.hd-termine .dp-event__image img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }
/* Knöpfe über der Terminliste */
.com-dpcalendar-list .dp-button {
  background: var(--hd-nacht-2) !important;
  color: var(--hd-text) !important;
  border: 1px solid var(--hd-linie) !important;
  border-radius: .6rem;
}
.com-dpcalendar-list .dp-button:hover { border-color: var(--hd-fackel) !important; color: var(--hd-fackel) !important; }
.com-dpcalendar-list .dp-button-create { background: var(--hd-fackel) !important; border-color: var(--hd-fackel) !important; color: var(--hd-nacht) !important; font-weight: 700; }
.com-dpcalendar-list .dp-button svg { fill: currentColor; }

/* ================================================================== */
/* Vorstand: Formulare und Ablage                                      */
/* ================================================================== */
.hd-kacheln .item-162 > a::before { content: "\f0c0"; }
.hd-kacheln .item-162 > a::after  { content: "Formulare und Ablage (nur Vorstand)"; }
.hd-kacheln .item-162 > a { border-color: rgba(255, 138, 42, .45); }

#hd-formulare { margin-top: 1.5rem; }
.hd-fm-hinweis { color: var(--hd-text-leise); }
.hd-fm-warnung {
  padding: .8rem 1rem;
  border: 1px solid rgba(240, 173, 78, .6);
  border-left-width: 4px;
  border-radius: .6rem;
  background: rgba(240, 173, 78, .08);
  color: var(--hd-text);
}

/* Auswahl-Kacheln */
.hd-fm-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .hd-fm-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hd-fm-kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  min-height: 7.5rem;
  padding: 1rem;
  text-align: left;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  color: var(--hd-text);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.hd-fm-kachel::before {
  content: attr(data-icon);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--hd-fackel);
  margin-bottom: auto;
}
.hd-fm-kachel strong { font-size: 1rem; line-height: 1.2; }
.hd-fm-kachel span { font-size: .8rem; color: var(--hd-text-leise); line-height: 1.3; }
.hd-fm-kachel:hover, .hd-fm-kachel:focus-visible { border-color: var(--hd-fackel); transform: translateY(-2px); outline: none; }
.hd-fm-kachel.is-aktiv { border-color: var(--hd-fackel); background: linear-gradient(160deg, rgba(255, 138, 42, .18), rgba(255, 138, 42, .03) 60%), var(--hd-karte); }
.hd-fm-kachel--ablage { border-style: dashed; }

/* Formular */
.hd-fm-titel { margin: 0 0 1rem; }
.hd-fm-form { max-width: 60rem; }
.hd-fm-abschnitt {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
}
.hd-fm-abschnitt > legend {
  float: none;
  width: auto;
  margin: 0 0 .6rem;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hd-fackel);
}
.hd-fm-abschnitt-hinweis { margin: -.2rem 0 .8rem; font-size: .9rem; color: var(--hd-text-leise); }
.hd-fm-raster { display: grid; grid-template-columns: 1fr; gap: .9rem 1.2rem; }
@media (min-width: 640px) { .hd-fm-raster { grid-template-columns: 1fr 1fr; } }
.hd-fm-feld--breit { grid-column: 1 / -1; }
.hd-fm-feld[hidden], .hd-fm-abschnitt[hidden] { display: none !important; }
.hd-fm-label, .hd-fm-optionen > legend { display: block; margin-bottom: .3rem; font-size: .9rem; font-weight: 600; color: var(--hd-text); float: none; width: auto; padding: 0; }
.hd-fm-pflicht { color: var(--hd-fackel); }
.hd-fm-feld input[type="text"], .hd-fm-feld input[type="date"], .hd-fm-feld input[type="email"],
.hd-fm-feld input[type="tel"], .hd-fm-feld textarea, .hd-fm-tabelle input, .hd-fm-suche {
  width: 100%;
  padding: .6rem .75rem;
  background: var(--hd-nacht-2);
  color: var(--hd-text);
  border: 1px solid var(--hd-linie);
  border-radius: .55rem;
  font: inherit;
  color-scheme: dark;
}
.hd-fm-feld input:focus, .hd-fm-feld textarea:focus, .hd-fm-tabelle input:focus, .hd-fm-suche:focus { outline: none; border-color: var(--hd-fackel); box-shadow: 0 0 0 3px rgba(255, 138, 42, .2); }
.hd-fm-typ-iban input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .05em; }
.hd-fm-optionen { border: 0; margin: 0; padding: 0; }
.hd-fm-optionen-reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.hd-fm-option, .hd-fm-check { display: inline-flex; align-items: flex-start; gap: .55rem; cursor: pointer; color: var(--hd-text); }
.hd-fm-option {
  padding: .45rem .8rem;
  border: 1px solid var(--hd-linie);
  border-radius: 999px;
  background: var(--hd-nacht-2);
}
.hd-fm-option:has(input:checked) { border-color: var(--hd-fackel); background: rgba(255, 138, 42, .15); }
.hd-fm-option input, .hd-fm-check input { accent-color: var(--hd-fackel); width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: none; }
.hd-fm-hilfe { margin: .3rem 0 0; font-size: .8rem; color: var(--hd-text-leise); }
.hd-fm-fehler { margin: .25rem 0 0; font-size: .85rem; color: #ff8f86; min-height: 0; }
.hd-fm-fehler:empty { display: none; }
.hd-fm-feld.is-fehler input, .hd-fm-feld.is-fehler textarea { border-color: #e5534b; }
.hd-fm-feld.is-fehler .hd-fm-option, .hd-fm-feld.is-fehler .hd-fm-check { color: #ffb3ad; }

.hd-fm-tabelle-rahmen { overflow-x: auto; }
.hd-fm-tabelle { width: 100%; border-collapse: collapse; }
.hd-fm-tabelle th { text-align: left; font-size: .8rem; color: var(--hd-text-leise); font-weight: 600; padding: .3rem .4rem; border-bottom: 1px solid var(--hd-linie); }
.hd-fm-tabelle td { padding: .3rem .4rem; border-bottom: 1px solid var(--hd-linie); color: var(--hd-text); vertical-align: middle; }
.hd-fm-tabelle td:first-child { width: 2rem; color: var(--hd-text-leise); }
.hd-fm-tabelle input { padding: .4rem .55rem; min-width: 8rem; }

/* Knöpfe und Meldungen */
.hd-fm-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 2rem; }
.hd-fm-knopf {
  padding: .7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--hd-fackel);
  background: transparent;
  color: var(--hd-fackel);
  font-weight: 700;
  cursor: pointer;
}
.hd-fm-knopf:hover { background: rgba(255, 138, 42, .15); }
.hd-fm-knopf--haupt { background: var(--hd-fackel); color: var(--hd-nacht); }
.hd-fm-knopf--haupt:hover { background: var(--hd-glut); }
.hd-fm-knopf--leise { border-color: var(--hd-linie); color: var(--hd-text-leise); }
.hd-fm-knopf--klein { padding: .3rem .75rem; font-size: .85rem; }
.hd-fm-knopf--gefahr { border-color: rgba(229, 83, 75, .6); color: #ff8f86; }
.hd-fm-knopf--gefahr:hover { background: rgba(229, 83, 75, .15); }
.hd-fm-meldung:empty { display: none; }
.hd-fm-meldung { margin-top: 1rem; padding: .75rem 1rem; border-radius: .6rem; border: 1px solid var(--hd-linie); background: var(--hd-nacht-2); color: var(--hd-text); }
.hd-fm-meldung.is-ok { border-color: rgba(92, 184, 92, .6); }
.hd-fm-meldung.is-fehler { border-color: rgba(229, 83, 75, .7); }
.hd-fm-link { background: none; border: 0; padding: 0; color: var(--hd-fackel); text-decoration: underline; cursor: pointer; font: inherit; }

/* Ablage */
.hd-fm-suche { max-width: 26rem; margin: .5rem 0 1rem; }
.hd-fm-zeilenaktionen { white-space: nowrap; text-align: right; }
.hd-fm-zeilenaktionen .hd-fm-knopf + .hd-fm-knopf { margin-left: .4rem; }
@media (max-width: 639.98px) {
  .hd-fm-ablagetabelle thead { display: none; }
  .hd-fm-ablagetabelle tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--hd-linie); }
  .hd-fm-ablagetabelle td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; }
  .hd-fm-ablagetabelle td::before { content: attr(data-label); color: var(--hd-text-leise); font-size: .8rem; }
  .hd-fm-ablagetabelle td.hd-fm-zeilenaktionen { justify-content: flex-start; padding-top: .4rem; }
  .hd-fm-ablagetabelle td.hd-fm-zeilenaktionen::before { content: none; }
}
.hd-fm-ablagetabelle td:first-child { width: auto; white-space: nowrap; color: var(--hd-text); }

/* Vorstandsformulare: Blanko-Vordruck */
.hd-fm-blanko {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: -.25rem 0 1.25rem;
  padding: .6rem .8rem;
  border: 1px dashed var(--hd-linie);
  border-radius: .6rem;
}
.hd-fm-blanko-text { font-size: .9rem; color: var(--hd-text-leise); margin-right: .25rem; }

/* Mitglieder: eigene Einwilligungen mit elektronischer Unterschrift */
.hd-kacheln a[href$="/einwilligungen"]::before { content: "\f573"; }
.hd-kacheln a[href$="/einwilligungen"]::after  { content: "Fotos und Kontaktdaten – online unterschreiben"; }
.hd-fm-kacheln--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.hd-fm-kachel .hd-fm-status { font-weight: 600; }
.hd-fm-kachel.is-offen .hd-fm-status { color: var(--hd-fackel); }
.hd-fm-kachel.is-erledigt .hd-fm-status { color: #8fd19e; }
.hd-fm-erledigt {
  max-width: 60rem;
  padding: 1.25rem;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
}
.hd-fm-erledigt .hd-fm-aktionen { margin-bottom: .5rem; }
.hd-fm-papier { margin-top: -1rem; font-size: .9rem; }
.hd-fm-signatur-rahmen { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.hd-fm-signatur-flaeche {
  position: relative;
  width: 100%;
  max-width: 36rem;
  height: 11rem;
  background: #f7f3ea;
  border: 2px dashed rgba(255, 138, 42, .55);
  border-radius: .7rem;
  overflow: hidden;
}
.hd-fm-signatur-rahmen.is-unterschrieben .hd-fm-signatur-flaeche { border-style: solid; border-color: var(--hd-fackel); }
.hd-fm-signatur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  z-index: 1;
}
.hd-fm-signatur-linie {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 2.2rem;
  border-top: 1px solid #b9ad98;
  padding-top: .2rem;
  font-size: .75rem;
  color: #8a7f6c;
  pointer-events: none;
}
.hd-einwilligung-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(255, 138, 42, .6);
  border-left-width: 4px;
  border-radius: .7rem;
  background: rgba(255, 138, 42, .1);
}
.hd-einwilligung-hinweis p { margin: 0; color: var(--hd-text); }
.hd-einwilligung-hinweis__knopf {
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: var(--hd-fackel);
  color: var(--hd-nacht) !important;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
.hd-einwilligung-hinweis__knopf:hover { background: var(--hd-glut); }

/* Mitglieder: Profil und Abmelden als Kacheln (über die Adresse, unabhängig von Menü-IDs) */
.hd-kacheln a[href$="/mein-profil"]::before { content: "\f2bd"; }
.hd-kacheln a[href$="/mein-profil"]::after  { content: "Passwort, E-Mail und Zwei-Faktor-Anmeldung"; }
.hd-kacheln a[href*="/abmelden"]::before { content: "\f2f5"; }
.hd-kacheln a[href*="/abmelden"]::after  { content: "Sicher abmelden"; }

/* Benutzerprofil und Multi-Faktor-Einstellungen im dunklen Design */
.com_users .bg-light:not([class*="method-image"]) { background: var(--hd-karte) !important; border-color: var(--hd-linie) !important; color: var(--hd-text) !important; }
.com_users .text-muted, .com_users .form-text, .com_users small { color: var(--hd-text-leise) !important; }
.com_users .btn-outline-primary, .com_users .btn-secondary, .com_users .btn-outline-secondary {
  color: var(--hd-fackel) !important;
  border-color: var(--hd-fackel) !important;
  background: transparent !important;
  border-radius: 999px;
  font-weight: 700;
}
.com_users .btn-outline-primary:hover, .com_users .btn-secondary:hover, .com_users .btn-outline-secondary:hover { background: rgba(255, 138, 42, .15) !important; }
.com_users .btn-primary { background: var(--hd-fackel) !important; border-color: var(--hd-fackel) !important; color: var(--hd-nacht) !important; border-radius: 999px; font-weight: 700; }
.com_users .btn-danger { border-radius: 999px; }
.com_users .card { background: var(--hd-karte); border-color: var(--hd-linie); color: var(--hd-text); }
.com_users .card-header, .com_users .card-footer { background: transparent; border-color: var(--hd-linie); }
.com_users dl dt { color: var(--hd-text-leise); font-weight: 600; }
.com_users fieldset legend { color: var(--hd-fackel); }
.com_users .form-control, .com_users .form-select {
  background-color: var(--hd-nacht-2);
  color: var(--hd-text);
  border-color: var(--hd-linie);
  color-scheme: dark;
}
.com_users .form-control:focus, .com_users .form-select:focus { border-color: var(--hd-fackel); box-shadow: 0 0 0 3px rgba(255, 138, 42, .2); }
.com_users .table { color: var(--hd-text); --table-bg: transparent; }

/* Gästebuch: Spalten mit Bildern in den Lücken */
#phocaguestbook .hd-gb-spalten { display: flex; align-items: flex-start; gap: 1.75rem; }
#phocaguestbook .hd-gb-spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.75rem; }
#phocaguestbook .hd-gb-spalte > .hd-gb-eintrag:nth-child(even) { transform: rotate(.35deg); }
#phocaguestbook .hd-gb-spalte > .hd-gb-eintrag:nth-child(odd) { transform: rotate(-.3deg); }
#phocaguestbook .hd-gb-spalte > .hd-gb-eintrag:hover { transform: rotate(0) translateY(-3px); }
.hd-gb-bild {
  position: relative;
  margin: 0;
  padding: .45rem;
  box-sizing: border-box;
  background: var(--hd-pergament);
  border-radius: .35rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 18px 40px -18px rgba(0, 0, 0, .8);
  transform: rotate(.4deg);
  overflow: hidden;
}
.hd-gb-spalte > .hd-gb-bild:nth-child(even) { transform: rotate(-.45deg); }
.hd-gb-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .2rem;
  filter: sepia(.2) saturate(.85) brightness(.92) contrast(1.04);
  opacity: 0;
  transition: opacity .6s ease;
}
.hd-gb-bild.is-geladen img { opacity: 1; }
.hd-gb-bild::after {
  /* leichte Vignette wie bei alten Abzügen */
  content: "";
  position: absolute;
  inset: .45rem;
  border-radius: .2rem;
  box-shadow: inset 0 0 40px rgba(40, 25, 10, .45);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hd-gb-bild img { transition: none; } }

/* Interne Galerie: Ordner */
.hd-ordner { margin: 0 0 2rem; }
.hd-ordner__titel { font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: var(--hd-fackel); margin: 0 0 .9rem; }
.hd-ordner__titel--bilder { margin: 2rem 0 0; }
.hd-ordner__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.hd-ordner__kachel {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .6rem .6rem .8rem;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  color: var(--hd-text) !important;
  text-decoration: none !important;
  transition: border-color .2s ease, transform .2s ease;
}
.hd-ordner__kachel:hover, .hd-ordner__kachel:focus-visible { border-color: var(--hd-fackel); transform: translateY(-2px); outline: none; }
.hd-ordner__bild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: .45rem;
  border-radius: .5rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgba(255, 138, 42, .16), transparent 65%), var(--hd-nacht-2);
}
.hd-ordner__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-ordner__kachel--leer .hd-ordner__bild::before {
  content: "\f07b";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--hd-fackel);
  opacity: .75;
}
.hd-ordner__name { font-size: 1rem; line-height: 1.25; padding: 0 .2rem; }
.hd-ordner__info { font-size: .8rem; color: var(--hd-text-leise); padding: 0 .2rem; }
.hd-ordner-zurueck { display: inline-block; margin: 0 0 .4rem; font-weight: 600; color: var(--hd-fackel); text-decoration: none; }
.hd-ordner-zurueck:hover { text-decoration: underline; }
.hd-ordner-leer { padding: 1rem 1.2rem; border: 1px dashed var(--hd-linie); border-radius: .7rem; color: var(--hd-text-leise); }
#phocagallery .pg-item-box:has(.ph-si-back-medium) { display: none; }

/* Interne Galerie: Kachel „Neuer Ordner“ */
.hd-ordner__kachel--neu { border-style: dashed; padding: 0; }
.hd-ordner__neu-knopf {
  display: flex; flex-direction: column; gap: .2rem; width: 100%; height: 100%;
  padding: .6rem .6rem .8rem; background: none; border: 0; color: var(--hd-text); text-align: left; cursor: pointer;
}
.hd-ordner__neu-knopf .hd-ordner__bild::before {
  content: "\f65e";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 2.4rem; color: var(--hd-fackel);
}
.hd-ordner__form { display: flex; flex-direction: column; gap: .5rem; padding: .8rem; }
.hd-ordner__form[hidden] { display: none; }
.hd-ordner__form input {
  width: 100%; padding: .55rem .7rem; background: var(--hd-nacht-2); color: var(--hd-text);
  border: 1px solid var(--hd-linie); border-radius: .5rem; font: inherit;
}
.hd-ordner__form input:focus { outline: none; border-color: var(--hd-fackel); box-shadow: 0 0 0 3px rgba(255, 138, 42, .2); }
.hd-ordner__fehler { margin: 0; font-size: .82rem; color: #ff8f86; }
.hd-ordner__fehler:empty { display: none; }
.hd-ordner__aktionen { display: flex; flex-wrap: wrap; gap: .4rem; }
.hd-ordner__ok, .hd-ordner__abbrechen {
  padding: .45rem .9rem; border-radius: 999px; font-weight: 700; cursor: pointer; font-size: .9rem;
}
.hd-ordner__ok { background: var(--hd-fackel); color: var(--hd-nacht); border: 1px solid var(--hd-fackel); }
.hd-ordner__ok:disabled { opacity: .6; cursor: wait; }
.hd-ordner__abbrechen { background: transparent; color: var(--hd-text-leise); border: 1px solid var(--hd-linie); }

/* ==========================================================
   Lesbarkeit: Formulare, Auswahllisten, Tabellen (08.11.2026)
   Behebt helle Schrift auf hellem und dunkle Schrift auf
   dunklem Grund in Bearbeiten-Formularen und Dialogen.
   ========================================================== */

/* Brotkrumen: aktuelle Seite */
.breadcrumb { --bs-breadcrumb-item-active-color: var(--hd-text-leise); }
.breadcrumb-item.active,
.breadcrumb-item.active span { color: var(--hd-text-leise); }

/* Fieldsets mit weissem Hintergrund (z. B. "Metadaten", "Veroeffentlichung") */
fieldset.options-form {
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: .75rem;
  color: var(--hd-text);
}
fieldset.options-form > legend {
  background: var(--hd-karte);
  color: var(--hd-text);
}
fieldset.options-form label,
fieldset.options-form .control-label,
fieldset.options-form .star { color: var(--hd-text); }
fieldset.options-form .form-text,
fieldset.options-form small { color: var(--hd-text-leise); }

/* Auswahlfelder mit Suche (Kategorie, Schlagwoerter, Position, Kalender) */
.choices__inner {
  background-color: var(--hd-nacht-2) !important;
  border-color: var(--hd-linie) !important;
  color: var(--hd-text) !important;
}
.choices__list--single .choices__item,
.choices__list--multiple .choices__item { color: var(--hd-text) !important; }
.choices__list--multiple .choices__item {
  background-color: var(--hd-karte) !important;
  border-color: var(--hd-linie) !important;
}
.choices__input,
.choices__input--cloned {
  background-color: transparent !important;
  color: var(--hd-text) !important;
}
.choices__input::placeholder { color: #a39a8e; }
.choices__button_joomla,
.choices__button { color: var(--hd-text) !important; }
/* Joomla legt ein weisses Hintergrundbild (mit Pfeil) unter das Feld; durch eigenen Pfeil ersetzen */
.choices__inner { background-image: none !important; padding-right: 2.5rem !important; }
.choices[data-type*="select-one"]::after,
.choices[data-type*="select-multiple"]::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border: 5px solid transparent;
  border-top-color: var(--hd-fackel);
  pointer-events: none;
}
.choices.is-open[data-type*="select-one"]::after,
.choices.is-open[data-type*="select-multiple"]::after {
  margin-top: -7px;
  border-top-color: transparent;
  border-bottom-color: var(--hd-fackel);
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: var(--hd-nacht-2) !important;
  border-color: var(--hd-linie) !important;
  color: var(--hd-text) !important;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item { color: var(--hd-text) !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--hd-fackel) !important;
  color: var(--hd-nacht) !important;
}
.choices__heading { color: var(--hd-text-leise) !important; border-color: var(--hd-linie) !important; }
.choices__item--disabled { color: #a39a8e !important; }

/* Klappfelder: Eintraege der aufgeklappten Liste */
/* Cassiopeia setzt hier Weiss (auch bei Status-Feldern success/danger) -> ueberschreiben */
select option,
select optgroup,
.form-select option,
.form-select optgroup,
.custom-select option,
.form-select.form-select-success option,
.form-select.form-select-danger option,
.form-select.form-select-color-state option {
  background-color: var(--hd-nacht-2) !important;
  color: var(--hd-text) !important;
}
select option:disabled,
.form-select option:disabled { color: #a39a8e !important; }
.form-select[multiple] option:checked,
select[multiple] option:checked {
  background-color: var(--hd-fackel) !important;
  color: var(--hd-nacht) !important;
}

/* Status-Auswahl mit Farbe (gruen/rot) */
.form-select.form-select-color-state { color: #fff !important; }

/* Tabellen (Profil, Auswahldialoge "Menue", "Beitrag", "Kontakt" ...) */
.table {
  --bs-table-color: var(--hd-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--hd-linie);
  --bs-table-striped-color: var(--hd-text);
  --bs-table-striped-bg: rgba(244, 239, 232, .05);
  --bs-table-hover-color: var(--hd-text);
  --bs-table-hover-bg: rgba(244, 239, 232, .08);
  --bs-table-active-color: var(--hd-text);
  --bs-table-active-bg: rgba(244, 239, 232, .1);
  color: var(--hd-text);
}
.table th,
.table td { color: var(--hd-text); }
.table .small,
.table small { color: var(--hd-text-leise); }
caption,
.table caption { color: var(--hd-text-leise); }
.contentpane .js-stools,
.contentpane .js-stools-container-bar { color: var(--hd-text); }

/* Gedaempfte Hinweistexte (z. B. Zeichenzaehler) auf dunklem Grund */
.text-muted { color: var(--hd-text-leise) !important; }

/* ================================================================== */
/* Mitgliederbereich: Anzeige „Angemeldet als …“                       */
/* (Modul „Angemeldet als“, Override html/mod_login/default_logout.php) */
/* ================================================================== */
.hd-angemeldet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.2rem;
  margin: 0 0 1.5rem;
  padding: .7rem 1.1rem;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-left: 3px solid var(--hd-fackel);
  border-radius: calc(var(--hd-radius) / 2);
  font-family: var(--hd-sans);
  font-size: .95rem;
  color: var(--hd-text-leise);
}
.hd-angemeldet__text {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
}
.hd-angemeldet__punkt {
  width: .55rem;
  height: .55rem;
  flex: none;
  border-radius: 50%;
  background: #5fd38a;
  box-shadow: 0 0 0 3px rgba(95, 211, 138, .18);
}
.hd-angemeldet__name {
  color: var(--hd-text);
  font-weight: 600;
}
.hd-angemeldet__aktionen {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hd-angemeldet__profil {
  color: var(--hd-fackel);
  text-decoration: none;
}
.hd-angemeldet__profil:hover,
.hd-angemeldet__profil:focus-visible {
  color: var(--hd-glut);
  text-decoration: underline;
}
.hd-angemeldet__abmelden {
  padding: .3rem .9rem;
  font: inherit;
  color: var(--hd-text);
  background: transparent;
  border: 1px solid var(--hd-linie);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.hd-angemeldet__abmelden:hover,
.hd-angemeldet__abmelden:focus-visible {
  color: var(--hd-glut);
  border-color: var(--hd-fackel);
}
@media (max-width: 575.98px) {
  .hd-angemeldet { font-size: .9rem; padding: .6rem .9rem; }
}


/* Fest-Karten: bei fünf Karten 2 + 1 + 2, jede Reihe volle Breite */
@media (min-width: 768px) {
  .hd-fest__karten:has(> .hd-fest__karte:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-fest__karten:has(> .hd-fest__karte:nth-child(5):last-child) > .hd-fest__karte img { aspect-ratio: 16 / 9; }
  .hd-fest__karten:has(> .hd-fest__karte:nth-child(5):last-child) > .hd-fest__karte:nth-child(3) { grid-column: 1 / -1; }
  .hd-fest__karten:has(> .hd-fest__karte:nth-child(5):last-child) > .hd-fest__karte:nth-child(3) img { aspect-ratio: 21 / 9; }
}


/* ================================================================== */
/* Zeitleiste: senkrecht, Linie füllt sich beim Scrollen              */
/* (abwechselnd links/rechts ab 900 px, Animation in user.js)         */
/* ================================================================== */
.hd-geschichte > ol.hd-zeitleiste {
  --zl-fort: 1;
  position: relative;
  display: block;
  clear: both;
  max-width: 60rem;
  margin: 2.5rem auto 2rem;
  padding: 0 0 0 2.25rem;
  border: 0;
  list-style: none;
}
.hd-geschichte > ol.hd-zeitleiste::before,
.hd-geschichte > ol.hd-zeitleiste::after {
  content: "";
  position: absolute;
  top: .75rem;
  bottom: .75rem;
  left: .55rem;
  width: 2px;
}
.hd-geschichte > ol.hd-zeitleiste::before { background: var(--hd-linie); }
.hd-geschichte > ol.hd-zeitleiste::after {
  background: linear-gradient(to bottom, var(--hd-fackel), #ffc27a);
  box-shadow: 0 0 12px rgba(255, 138, 42, .55);
  transform-origin: top;
  transform: scaleY(var(--zl-fort));
}
.hd-geschichte > ol.hd-zeitleiste > li {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--hd-karte);
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  color: #e0d8cd;
  line-height: 1.55;
  transition: border-color .5s ease, box-shadow .5s ease;
}
.hd-geschichte > ol.hd-zeitleiste > li::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: calc(-2.25rem + 1px);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--hd-nacht);
  border: 2px solid var(--hd-linie);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
  z-index: 1;
}
.hd-geschichte > ol.hd-zeitleiste > li strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--hd-fackel);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
}
/* erreichte Einträge (ohne Animation: alle) */
.hd-geschichte > ol.hd-zeitleiste:not(.ist-animiert) > li::before,
.hd-geschichte > ol.hd-zeitleiste > li.ist-erreicht::before {
  background: var(--hd-fackel);
  border-color: var(--hd-fackel);
  box-shadow: 0 0 0 5px rgba(255, 138, 42, .18), 0 0 14px rgba(255, 138, 42, .7);
}
.hd-geschichte > ol.hd-zeitleiste > li.ist-erreicht::before { transform: scale(1.15); }
.hd-geschichte > ol.hd-zeitleiste > li.ist-erreicht {
  border-color: rgba(255, 138, 42, .55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

@media (min-width: 900px) {
  .hd-geschichte > ol.hd-zeitleiste {
    --zl-abst: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--zl-abst) * 2);
    row-gap: .9rem;
    padding: 0;
  }
  .hd-geschichte > ol.hd-zeitleiste::before,
  .hd-geschichte > ol.hd-zeitleiste::after { left: 50%; margin-left: -1px; }
  .hd-geschichte > ol.hd-zeitleiste > li { margin: 0; align-self: start; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(odd)  { grid-column: 1; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(even) { grid-column: 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(1) { grid-row: 1 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(2) { grid-row: 2 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(3) { grid-row: 3 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(4) { grid-row: 4 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(5) { grid-row: 5 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(6) { grid-row: 6 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(7) { grid-row: 7 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(8) { grid-row: 8 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(9) { grid-row: 9 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(10) { grid-row: 10 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(11) { grid-row: 11 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(12) { grid-row: 12 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(13) { grid-row: 13 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(14) { grid-row: 14 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(15) { grid-row: 15 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(16) { grid-row: 16 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(17) { grid-row: 17 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(18) { grid-row: 18 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(19) { grid-row: 19 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(20) { grid-row: 20 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(21) { grid-row: 21 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(22) { grid-row: 22 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(23) { grid-row: 23 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(24) { grid-row: 24 / span 2; }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(odd)::before  { left: auto; right: calc(-1 * var(--zl-abst) - .55rem - 1px); }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(even)::before { left: calc(-1 * var(--zl-abst) - .55rem - 1px); }
  /* kurzer Steg von der Karte zum Punkt */
  .hd-geschichte > ol.hd-zeitleiste > li::after {
    content: "";
    position: absolute;
    top: 1.65rem;
    width: calc(var(--zl-abst) - .55rem);
    height: 2px;
    background: var(--hd-linie);
    transition: background-color .4s ease;
  }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(odd)::after  { right: calc(-1 * var(--zl-abst) + .55rem); }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(even)::after { left: calc(-1 * var(--zl-abst) + .55rem); }
  .hd-geschichte > ol.hd-zeitleiste:not(.ist-animiert) > li::after,
  .hd-geschichte > ol.hd-zeitleiste > li.ist-erreicht::after { background: var(--hd-fackel); }
  .hd-geschichte > ol.hd-zeitleiste > li:nth-child(odd) { text-align: right; }
}


/* Bearbeiten-Knopf des Menümoduls (nur für Angemeldete): neben statt über dem Menü-Knopf */
.container-header .navbar > a.jmodedit {
  position: static;
  order: 1;
  flex: 0 0 auto;
  margin-left: .5rem;
}


/* Hundle-Zeichnung (Naeher 1895): ganzes Hochformat zeigen, Rest der alten Bildunterschrift unten abschneiden */
.hd-geschichte > figure.hd-bild.hd-bild--hundle img {
  aspect-ratio: 464 / 497;
  height: auto;
  object-fit: cover;
  object-position: top;
}