/* ============================== POPUP Hinweise ==============================*/

#popup.ui-dialog-content {
  height: auto !important;
  min-height: 0 !important;
}

.ui-dialog {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 30px);
}

.ui-dialog .ui-dialog-content {
  overflow-y: auto;
}
/* Pop Up JT: Schrift und Popup-Rahmen */
#popup,
.ui-dialog:has(#popup),
.ui-dialog:has(#popup) .ui-widget-content {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.1em !important;
  color: #5e5e5e !important;
}

/* Äußerer Rahmen des Popup-Fensters */
.ui-dialog:has(#popup).ui-widget-content,
.ui-dialog:has(#popup) {
  border: 3px solid #ba2c20 !important;
}

/* Textinhalt */
#popup #htmlcontent,
#popup .content,
#popup .content p,
#popup .content li {
  color: #5e5e5e !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-weight: 500 !important;
}


/* ============================== Sprungmarke Versatz ==============================*/

html {
  scroll-padding-top: 35px; /* Höhe des festen Headers */
  scroll-behavior: smooth;
}

/* ============================== TYPO ==============================*/

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --body-font-family: "Montserrat", system-ui, sans-serif;
  --cassiopeia-font-family-body: "Montserrat", system-ui, sans-serif;
  --cassiopeia-font-family-headings: "Montserrat", system-ui, sans-serif;
}

body {
  font-family: "Montserrat", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", system-ui, sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Montserrat", sans-serif;
}

h1, .h1 {
  font-weight: 600; color: #1b97d3;
}

h3, .h3 {
  font-weight: 300; color: #5e5e5e;
}

h5, .h5 {
  font-weight: 600; color: #1b97d3;
}

h6, .h6 {
  font-weight: 600; color: #1b97d3;
}

.superhead {
  font-weight: 600; font-size: 3.5rem;
}

.fussnote {
  font-weight: 400; line-height: 0.8rem; font-size: 0.7rem;
}

/* ============================== TYPO Bulletpoints Haken ==============================*/

.blauehaken {
    line-height: 1.4; 
    margin-bottom: 8px; /* Abstand unter jedem Listenelement*/
    font-family: "Montserrat", sans-serif;
    color: #2A2A2A;
  }
.blauehaken li::marker {
    color: #1b97d3;
    content: "\2714\0020  ";
}

/* ============================== Modul HEADER ==============================*/

.container-header {
  border-style: solid;
  border-color: #1b97d3;
  border-width: 0px 0px 2px 0px; /* 25px top, 10px right, 4px bottom and 35px left */
 box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
}

.container-header .navbar-toggler {
    color: #1b97d3;
    cursor: pointer;
    border: 1px solid #1b97d3;
}
.container-header .grid-child {
    padding-bottom: 0px;
}

.container-header {
    padding-top: 1rem;
}

container-header nav {
    margin-top: : 0px;
}

/* ============================== Blaue Module über volle Fensterbreite ==============================*/

.fullwidth {
  margin-left: calc( -50vw + 50% );
  margin-right: calc( -50vw + 50% );
  max-width: calc( 100vw - 0px );
  padding-top: 20px;
  padding-bottom: 0px;
  margin-bottom: 30px;
}

.blue1 {
    background-color: #1b97d3;
}

/* Smartphone / schmale Fenster */
@media (max-width: 767px) {
  .fullwidth {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);

    margin-left: calc(-50vw + 50% + 20px);
    margin-right: calc(-50vw + 50% + 20px);

    box-sizing: border-box;
  }
}

/* ============================== Module mit Rahmen ==============================*/

.custom-box {
    border: clamp(4px, 0.6vw, 10px) dotted #1b97d3;
  padding-top: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 7vw, 12rem);
  padding-bottom: clamp(0rem, 0vw, 0rem);
  padding-left: clamp(1rem, 7vw, 12rem);
  margin: 2rem auto;
  /* max-width: 1100px;*/
  box-sizing: border-box;
  border-radius: 1rem;
  background: #fff;
}

/* ============================== Abstände veringern wegen Eybl-screen ==============================*/

.container-component>:first-child,.container-sidebar-left>:first-child,.container-sidebar-right>:first-child,.container-component>*+*,.container-sidebar-left>*+*,.container-sidebar-right>*+* {
    margin-top: 0em;
}

.main {
   margin-top: 0em;!important
}

/* ============================== Hintergrund JCE Editor ==============================*/
body.mce-content-body {
  background-color: #f5f5f5!important;
}


/* ============================== Grundstil für alle Eybl-Grids ==============================*/

/* Gemeinsamer Grundstil */
.eybl-grid-112, .eybl-grid-211, .eybl-grid-1111, .eybl-grid-121, .eybl-grid-111, .eybl-grid-111b, .eybl-grid-21, .eybl-grid-12 {
  display: grid;
  gap: 20px;
  align-items: start;
}

/* Bilder immer sauber skalieren */
.eybl-grid-112 img, .eybl-grid-211 img, .eybl-grid-1111 img, .eybl-grid-121 img, .eybl-grid-111 img, .eybl-grid-21 img, .eybl-grid-12 img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* Aufteilung 1:1:2 */
.eybl-grid-112 {
  grid-template-columns: 1fr 1fr 2fr;
}

/* Aufteilung 2:1:1 */
.eybl-grid-211 {
  grid-template-columns: 2fr 1fr 1fr;
}

/* Aufteilung 1:1:1:1 */
.eybl-grid-1111 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 20px;
}

/* Aufteilung 1:2:1 */
.eybl-grid-121 {
  grid-template-columns: 1fr 2fr 1fr;
}

/* Aufteilung 1:1:1 */
.eybl-grid-111 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Aufteilung 1:1:1 ohne 100% Bild */
.eybl-grid-111b {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Aufteilung 2:1 */
.eybl-grid-21 {
  grid-template-columns: 2fr 1fr;
}

/* Aufteilung 1:2 */
.eybl-grid-12 {
  grid-template-columns: 1fr 2fr;
}

/* Responsive: auf Tablet/Handy untereinander */
@media (max-width: 768px) {
  .eybl-grid-112, .eybl-grid-211, .eybl-grid-1111, .eybl-grid-121, .eybl-grid-111, .eybl-grid-111b, .eybl-grid-21, .eybl-grid-12 {
    grid-template-columns: 1fr;
  }
}


/* ============================== HERO Schrift ==============================*/
.hero {
  color: #fff;
  background: #1b97d3;
  box-shadow: 1rem 0 0 #1b97d3, -1rem 0 0 #1b97d3, 1px 2px 2px rgba(0,0,0,.125);
  display: block;
  width: fit-content;
  /*margin-left: auto;
  margin-right: auto;*/
  margin-top: 2.0rem;
  margin-bottom: 2.0rem;
  padding: 0.5rem 0;*/
  line-height: 1.75;
  font-size: 2.5rem;
  /*text-align: center;*/
}

/* ============================== Beitragsbilder ============================== */


.bild-links {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.bild-links2 {
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    border-radius: 10px;
}

.bild-rechts {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
} 

/* Standard: Bild überall ausblenden (Mobile First Ansatz) */
.desktop-only {
    display: none;
}

/* Ab 1025px Bildschirmbreite (Desktop) das Bild anzeigen */
@media (min-width: 1300px) {
    .desktop-only {
        display: block; /* oder inline, flex, etc. */
    }
}

/* Standard: Bild überall ausblenden (Mobile First Ansatz) */
.mobil-only {
    display: none;
}

/* Ab 949 px Bildschirmbreite (Mobil) das Bild anzeigen */
@media (max-width: 1299px) {
    .mobil-only {
        display: block; /* oder inline, flex, etc. */
    }
}

/* ============================== BILDER-ÜBERBLENDER 2 ==============================


.caption27-card {
position:relative;
width:400px;
height:400px;
overflow:hidden;
border-radius:14px;
}*/

.caption27-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 6 / 9;
  overflow: hidden;
  border-radius: 14px;
}

.caption27-card img{
position:absolute;
inset: 0;
width:100%;
height:auto%;
object-fit:cover;
margin:0 !important;
}

.caption27-text{
position:absolute;
left:0;
right:0;
/*bottom:-100%;*/
bottom:0;
padding:20px;
background:linear-gradient(
to top,
rgba(0,0,0,.85),
rgba(0,0,0,0)
);
color:#ffffff;
/*transition:bottom .4s ease;*/
}

.caption27-text h3{
margin:0 0 6px 0;
color:#ffffff;
font-size:20px;
font-weight:700;
text-shadow:0 2px 8px rgba(0,0,0,.6);
}

.caption27-text p{
margin:0;
color:#ffffff;
font-size:14px;
text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/*.caption27-card:hover .caption27-text{
bottom:0;
}*/


/* ============================== Coockie kasten ==============================*/

#cookiehintsubmit,#cookiehintsubmitno			{ background: #1b97d3 !important;}
#cookiehintsubmit:hover,#cookiehintsubmitno:hover		{ background: #156e99 !important;}




/* ============================== Lokale Schriften ==============================*/

/* montserrat-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v31-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/montserrat-v31-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/montserrat-v31-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/montserrat-v31-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/montserrat-v31-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}