/*Seitengrid*/
body.wrapper-fluid .site-grid {
  grid-gap: 0 1.5em;
}

/*Seitenkopf*/
.container-header {
  background-color: var(--gray-500);
  background-image: linear-gradient(75deg, var(--gray-600) 0%, rgba(173, 181, 189, 0.8) 60%, rgba(173, 181, 189, 0.0) 95%), url(../../../../../images/headers/1.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right top;
  box-shadow: 0 2px 5px var(--gray-500);
}

/*Seitenkopf: Logo*/
.container-header .navbar-brand {
    margin-inline-end: auto;
    padding-top: .3125rem;
    display: inline-flex;
    position: relative;
    align-content: center;
}

/*Seitenkopf: Logo*/
.container-header .navbar-brand a{
  align-content: center;
}

/*Seitenkopf: Logo*/
.container-header .brand-logo img {
  max-height: 110px;
  min-height: 50px;
}

/*Seitenkopf: Logo*/
.container-header .brand-logo img :before, :after {
  box-sizing: content-box;
}

/*Seitenkopf: Seitenbeschreibung*/
.container-header .site-description {
  color: white;
  white-space: normal;
  font-size: clamp(20px, 12.8vw, 70px);
  align-content: center;
  margin-left: 0.625rem;/*10pt;*/
  text-shadow: 5px 5px 8px var(--gray-700);
}

/*Seitenkopf: Menü*/
.container-header nav {
  margin-top: 0;
}

/*Seitenkopf: Menü*/
.container-header .container-nav {
  padding-bottom: 0.3125rem;/*5px;*/
  padding-top: 0.3125rem;/*5px;*/
}

/*Seitenkopf: Menü*/
.metismenu.mod-menu .metismenu-item>span, .metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>button {
  text-shadow: 2px 2px 3px var(--gray-700);
  color: var(--gray-100);
}

/*Seitenkopf: Menü*/
.metismenu.mod-menu .metismenu-item:hover>a, .metismenu.mod-menu .metismenu-item:hover>button,
.metismenu.mod-menu .metismenu-item:active>a, .metismenu.mod-menu .metismenu-item:active>button{
  text-decoration: none;
  text-shadow: 3px 3px 5px var(--gray-900);
  color: white;
}

/*Seitenkopf: Kleines Logo*/
.container-header .container-search {
  display: none;
}

/*Seitenkopf: Kleines Logo*/
body.header--shrink .container-header .container-search {
  display: block;
}

/*Überschrift: Beitrag, Kategorie (in Auflistungen)*/
.com-content-categories__item-title-wrapper {
  font-size: calc(1.1rem + .4vw);
  padding-left: 0.625rem;/*10pt;*/
  padding-right: 0.625rem;/*10pt;*/
  background: var(--gray-200);/*rgba(34, 38, 42, .03);*/
  border-bottom: 1px solid var(--gray-300);
  font-weight: bold;
}

/*Kategorie: Auflistung*/
.com-content-categories__item {
  margin-bottom: 0.9375rem;/*15px;*/
}

/*Kategorie: Auflistung Unterkategorien*/
.com-content-categories__children {
  flex-basis: 100%;
  padding-inline-start: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-right: 0.625rem;
}

/*Kategorie: Auflistung Unterkategorien Letztes Item*/
.com-content-categories__children .com-content-categories__item:last-child {
  border-bottom: 1px solid var(--gray-300);
  margin-bottom: 0;
}

/*Kategorie: Auflistung - Beschreibung*/
.com-content-categories__description.category-desc {
  padding: 0.625rem;/*10pt;*/
}

/*Blog: Kategorieüberschrift*/
.com-content-category-blog.blog h1 {
  padding: 0.625rem;/*10pt;*/
  background: var(--gray-300); /*background: var(--gray-200);*/
  border: 1px solid var(--gray-400);
  border-radius: 5px 5px 0 0;
  margin-bottom: -2px;
}

/*Blog: Kategoriebeschreibung*/
.category-desc.clearfix {
  margin-bottom: 15px;
  padding: 0.625rem;/*10pt;*/
  border-radius: 0.3125rem;/*5px;*/
  border: 1px solid var(--gray-400);
  background-color: var(--gray-200);
}

/*Blog: Einzelner Beitrag*/
.blog-item, .item-page,
.com-content-categories__item {
  border: 1px solid var(--gray-300);
  border-radius: 0.3125rem;/*5px;*/
  background: var(--gray-100);
}

/*Beitrag: Überschrift */
.page-header,
.item-title {
  background: var(--gray-200);
  border-bottom: 1px solid var(--gray-300);
}

.page-header h2,
.page-header h1 {
  margin: 0;
  padding-left: 0.625rem;/*10pt;*/
  padding-right: 0.625rem;/*10pt;*/
}

.item-title {
  padding-bottom: 0.625rem;/*10pt;*/
  padding-top: 0.625rem;/*10pt;*/
}

/*Beitrag: Inhaltsbereich*/
.com-content-article__body,
.page-content,
.page-header {
  padding-top: 0.625rem;/*10pt;*/
  padding-bottom: 0.625rem;/*10pt;*/
}

/*Beitrag: Inhalt*/
.item-content p,
.item-content h4,
.item-content h3,
.item-content h2,
.item-content h1,
.item-content table,
/*.item-content div,*/
.com-content-article__body {
  padding-left: 0.625rem;/*10pt;*/
  padding-right: 0.625rem;/*10pt;*/
}

/*Beitrag: Wanderwegkarten*/
.page-content .phocamaps {
  padding-left: 0.625rem;/*10pt;*/
  padding-right: 0.625rem;/*10pt;*/
}

/*Beitrag: Beitragsdetails*/
dl.article-info {
  border-top: 1px solid var(--gray-300);
  text-align: right; 
  margin-bottom: 0px;
  padding-right: 0.625rem;/*10pt;*/
  padding-bottom: 0.3125rem;/*5px;*/
}

/*Beitrag: Beitragsdetails*/
dt.article-info-term,
dd.createdby,
dd.category-name,
dd.published {
  margin-bottom: -2px;
}

/*Beitrag: Tags*/
.tags.list-inline {
    padding-left: 0.625rem;/*10pt;*/
    padding-right: 0.625rem;/*10pt;*/
}

/*Beitrag: Tags*/
.tags {
  margin-bottom: 0;
  margin-right: 0.3125rem;/*5px;*/
  position: relative;
}

/*Beitrag: Vor-/Zurückbuttons*/
nav.pagenavigation {
    padding-left: 0.625rem;/*10pt;*/
    padding-right: 0.625rem;/*10pt;*/
}

/*Sidebar-Module: Überschrift*/
.card-header {
  background: var(--gray-200);
}

/*Sidebar-Module: Inhalt*/
.card {
	background: var(--gray-100);
}

/*Sidebar-Module: Untermenü */
ul.mod-articlescategories.categories-module.mod-list {
  margin-bottom: -0.3125rem;/*-5px;*/
}

/*Sidebar-Module: Untermenü */
.card-body .mod-list li:hover {
    background: var(--gray-100);
}

/*Sidebar-Module: Untermenü */
ul.mod-articlescategories.categories-module.mod-list li {
  border: 1px solid var(--gray-300);
  border-radius: 0.3125rem;/*5px;*/
  margin-bottom: 0.3125rem;/*5px;*/
  font-weight: bold;
  padding-left: 0.625rem;/*10pt;*/
  padding-right: 0.625rem;/*10pt;*/
  background: var(--gray-100);
  border-bottom: 2px solid var(--gray-300);
  text-decoration: underline;
  text-decoration-line: underline;
}

/*Sidebar-Module: Untermenü */
ul.mod-articlescategories.categories-module.mod-list li:hover,
ul.mod-articlescategories.categories-module.mod-list li.active {
  background: var(--gray-200);/*rgba(34, 38, 42, .03);*/
  box-shadow: 2px 2px 2px var(--gray-500);
}

/*Sidebar-Module: Untermenü Aufzählung Untermenüs*/
ul.mod-articlescategories.categories-module.mod-list li ul {
  list-style: none;
  margin-top: 0.3125rem;/*5px;*/
}

/*Sigplus Gallery*/
.sigplus-gallery>ul>li>a,
.sigplus-gallery>ul>li>div>a{
  box-shadow: 5px 5px 8px var(--gray-500);
  margin: 0.3125rem;/*5px;*/
  border: 1px solid var(--gray-200);
  animation: fade-in: 3s;
}

/*Sigplus Gallery*/
.sigplus-gallery>ul>li>a:hover,
.sigplus-gallery>ul>li>div>a:hover {
  box-shadow: 5px 5px 8px var(--gray-600);
  border: 1px solid var(--gray-400);
}

/*Phoca Maps soll nicht über der Kopfzeile der Seite liegen */
div.leaflet-pane {
  z-index: 1;
}

/*Phoca Maps Controls soll nicht über der Kopfzeile der Seite liegen */
div.leaflet-top, div.leaflet-bottom, div.leaflet-left, div.leaflet-right {
  z-index: 2;
}

/*DP Calendar Listen-Ansicht: Tageszeile Bsp. Freitag Februar 21,2025*/
.fc .fc-list-day-cushion {
  padding: 0.3125rem 0.3125rem;/*5px;*/
}

/*DP Calendar Listen-Ansicht Termineintrag*/
.fc .fc-list-table td {
  padding: 0.3125rem 0.3125rem;/*5px;*/
}

/*Fußzeile*/
.container-footer {
    background-color: var(--gray-500);
    background-image: linear-gradient(75deg, var(--gray-600) 0%, var(--gray-600) 60%, var(--gray-500) 100%);
}
.footer ul {
  display: flex;
  flex-direction: row-reverse;
}
.footer .grid-child {
  padding: 1.5rem .5em;
}

* Überschriften */
h1, .h1 {
  font-size: calc(1.325rem + .9vw);
}

@media (width >= 1200px) {
  h1, .h1 {
    font-size: 2.2rem;
  }
}

h2, .h2 {
  font-size: calc(1.3rem + .6vw);
}

@media (width >= 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.1rem + .4vw);
}

@media (width >= 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

/*Toogle-Button für Navigation auf kleinen Bildschirmen*/
.navbar-toggler {
    color: white;
    border: 1px solid white;
}

/* ===== Grundsetup Shrink Header (sanfte Übergänge) ===== */
:root {
  --header-pad-y: 0.75rem;
  --header-pad-y-shrink: 0.25rem;
  --brand-opacity: 1;
  --brand-opacity-shrink: 0;
}

.container-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
  transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  will-change: padding, background-color, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  /*contain: layout paint style;*/
}

.container-header .navbar {
  display: flex;
  align-items: center;
  min-height: 40px;
}

/* Branding sanft ausblenden (ohne harte Höhen-Kollaps) */
.container-header .navbar-brand,
.container-header .site-description,
.container-header .site-title {
  transition: opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease;
  opacity: var(--brand-opacity);
  will-change: opacity;
}

/* ===== Zustand beim Scrollen (body.header--shrink) ===== */
body.header--shrink .container-header {
  padding-top: var(--header-pad-y-shrink);
  padding-bottom: var(--header-pad-y-shrink);
  box-shadow: 0 2px 5px var(--gray-500);
}

/* Branding ausblenden im Shrink */
body.header--shrink .container-header .navbar-brand,
body.header--shrink .container-header .site-description,
body.header--shrink .container-header .site-title {
  opacity: var(--brand-opacity-shrink);
  visibility: hidden;
}

/* >>> WICHTIG: Beim Scrollen .grid-child im Header komplett ausblenden <<< */
body.header--shrink .container-header .logo-row {
  display: none !important;
}

/* ===== Navbar-Toggler: Mobil IMMER sichtbar ===== */
/* Grundzustand: ausblenden */
.navbar-toggler { display: none; }

/* Mobil: immer anzeigen – unabhängig vom Menüzustand */
@media (max-width: 991.98px) { /* ggfs. Breakpoint anpassen */
  .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
  }
}

/* Desktop: Toggler bleibt aus (Menü ist sichtbar) */
@media (min-width: 992px) {
  .navbar-toggler { display: none !important; }
}

/* Optional: wenn zusätzliche Header-Elemente existieren, die im Shrink weg sollen */
body.header--shrink .container-header .mod-breadcrumbs,
body.header--shrink .container-header .toolbar-top,
body.header--shrink .container-header .header-items {
  display: none !important;
}

/* Weniger Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .container-header,
  .container-header .navbar-brand,
  .container-header .site-description,
  .container-header .site-title {
    transition: none !important;
  }
}