/* ==========================================================================
   0. ZENTRALE DESIGN-VARIABLEN (CSS CUSTOM PROPERTIES)
   ========================================================================== */

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/raleway-v37-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/raleway-v37-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/raleway-v37-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/raleway-v37-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v37-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/raleway-v37-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v37-latin-regular.woff2') format('woff2'); /* Chro-me 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/raleway-v37-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v37-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/raleway-v37-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v37-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/raleway-v37-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/raleway-v37-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/raleway-v37-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/raleway-v37-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/raleway-v37-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-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: 'Raleway';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/raleway-v37-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




:root {
  /* Schriftarten (Zentral gesteuert) */
  --font-main: "Raleway", Arial, sans-serif;
  --font-alt: "Raleway", Arial, sans-serif;
  --font-nav: "Raleway", sans-serif;


  /* Farbpalette (KGS Corporate Identity) */
  --color-brand-green: rgba(137, 201, 81, 1);
  --color-brand-green-dark: #3f7a00;
  --color-brand-green-hover: rgba(0, 0, 0, 0.08);
  --color-brand-green-light: #e6ecd7;
  --color-maroon: #843b2a;
  --color-dark-green: #424632;
  --color-text-dark: #222;
  --color-text-black: #000;
  --color-text-white: #fff;
  
  /* Hintergründe & Grautöne */
  --color-bg-main: #f4f4f4;
  --color-bg-box: #f5f5f5;
  --color-bg-gray: #E0E0E0;
  --color-bg-card: #fff;
  
  /* Übergänge (Standard-Animationen) */
  --transition-fast: all 0.2s ease;
}


/* ==========================================================================
   1. GRUNDLAYOUT & GLOBALE ABSTÄNDE
   ========================================================================== */

body {
  padding-top: 7rem;
  font-family: var(--font-main);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-dark);
  background-color: var(--color-bg-main);
}

body.layout-pagets__1colslider {
  padding-top: 76px;
  margin-top: 20px;
}



p {
  font-family: var(--font-main);
  font-weight: 400;
  margin-bottom: 12px;
  line-height: 1.4;
  text-align: left;
}

p.adresse {
  font-family: var(--font-alt);
  color: var(--color-text-white);
  font-size: 16px;
  text-align: center;
}

li {
  font-family: var(--font-main);
}

td {
  font-family: var(--font-main);
  font-size: 18px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color-maroon);
}

.kgs-accordion-content td {
  font-size: inherit;
  border-bottom: none;
}

img {
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   2. REINE ÜBERSCHRIFTEN (BASIS & GRÖSSEN)
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  font-weight: 700; /* Korrektur: Wieder kräftig (Bold) statt dünn */
  letter-spacing: 0.3px;
  margin-top: 10px;
  margin-bottom: 6px;
  line-height: 1.3;
  border: 1px solid var(--color-brand-green-dark) !important;
}

h1 { font-size: 26px; margin-top: 22px; }
h2 { font-size: 24px; margin-top: 22px; }
h3 { font-size: 22px; margin-top: 22px; }
h4 { font-size: 20px; margin-top: 22px; }
h5 { font-size: 18px; margin-top: 22px; }
h6 { font-size: 16px; margin-top: 22px; }

h2.mb-0 { padding: 0px; margin: 0; }
h3.leerelinie { padding-top: 10px; padding-bottom: 15px; }

h4.kardinal {
  font-family: var(--font-main);
  font-size: 19px;
  padding-top: 4px;
}

.kardinal { margin: 0; }

/* ==========================================================================
   3. ÜBERSCHRIFTEN-VARIANTE: UNDERLINE
   ========================================================================== */




/* ==========================================================================
   4. ÜBERSCHRIFTEN-VARIANTE: HINTERGRÜNDE & BOXEN
   ========================================================================== */


.greenback {
  border: 2px solid var(--color-brand-green);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
}

h1.greenback, h2.greenback, h3.greenback, h4.greenback, h5.greenback {
  border: 3px solid var(--color-brand-green-dark) !important;
  background-color: #f2f2f2;
  padding: 6px 12px;
  border-radius: 4px;
}

h1.greenback {
  font-size: 26px;
  background-color: var(--color-brand-green) !important;
  color: var(--color-text-black);
  padding: 5px;
  padding-left: 15px;
  margin-top: 22px;
}

h2.greenback {
  font-size: 24px;
  border: 2px solid var(--color-brand-green) !important;
  background-color: var(--color-bg-gray);
  color: var(--color-text-black);
  padding: 6px 12px;
  margin-top: 22px;
}

h2.greenbackcenter {
  font-size: 24px;
  border: 2px solid var(--color-brand-green) !important;
  border-radius: 6px;
  background-color: var(--color-bg-box);
  color: var(--color-text-black);
  padding: 5px;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 24px;
}

h3.greenback {
  font-family: var(--font-main);
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  border: 2px solid var(--color-brand-green) !important;
  background-color: var(--color-text-white);
  color: var(--color-text-black);
  padding: 5px;
  padding-left: 15px;
  margin-top: 22px;
}

h3.greenbackcenter {
  font-family: var(--font-main);
  font-weight: 500;
  font-style: normal;
  font-size: 22px;
  border: 2px solid var(--color-brand-green) !important;
  border-radius: 6px;
  background-color: var(--color-bg-box);
  color: var(--color-text-black);
  padding: 8px;
  text-align: center;
  margin-top: 22px;
  margin-bottom: 22px;
}

h4.greenback {
  border: 2px solid var(--color-brand-green);
  background-color: var(--color-text-white);
  padding: 6px 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

h5.greenback {
  font-family: var(--font-main);
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
 border: 3px solid var(--color-brand-green-dark) !important;
  background-color: var(--color-bg-box);
  color: var(--color-text-black);
  padding: 7px;
  padding-left: 15px;
  margin-top: 20px;
}

.greenbackcenter {
  text-align: center;
}




/* ==========================================================
   5. Navigation & Header (Navbar)
   ========================================================== */







/* 4. FOKUS: Entfernt das standardmäßige Browser-Blau und macht es grün */
.ui-visual-focus, 
:focus, 
:focus-visible { 
    box-shadow: 0 0 3px 1px rgb(137, 201, 81) !important; 
    outline: none !important;
}



header.slider {
    margin-bottom: 2rem;
}

/* ==========================================================================
   6. ROOTLINE (BREADCRUMB) & SPRACHMENÜ
   ========================================================================== */

ul.rootline {
  margin: 0 0 1rem 0;
  padding: 0 0 .5rem 0;
  list-style-type: none;
  font-size: 90%;
  border-bottom: 1px solid #468641;
}

ul.rootline li {
  display: inline-block;
}

ul.rootline a, ul.rootline a:visited {
  margin: 0;
  padding: 0;
  color: #666;
}

ul.rootline a:hover {
  text-decoration: underline;
}

ul.rootline span {
  color: #999;
}

ul.rootline a:after {
  display: inline-block;
  content: "/";
  margin: 0 .5rem;
}

ul.languageMenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 90%;
}

ul.languageMenu li {
  display: inline-block;
  margin: 0 .5rem 0 0;
}

ul.languageMenu a, ul.languageMenu a:visited {
  color: var(--color-text-white);
}

ul.languageMenu a:hover {
  color: rgba(255,255,255,.75);
}


/* ==========================================================================
   7. LINKS & BUTTONS
   ========================================================================== */

a {
  font-family: var(--font-main);
  font-size: 14px;
  margin-top: 0px;
  padding: 0px;
  color: var(--color-text-black);
  text-decoration: none;
}

/* Verhindert, dass Navigations- und Breadcrumb-Links umbrechen */
.navbar a,
ul.rootline a,
ul.metaMenu a,
ul.languageMenu a {
  display: inline !important;
  width: auto !important;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  margin-top: 6px;
}

.more-link::before {
  content: "▶";
  font-size: 12px;
}

div.morelink a {
  font-family: var(--font-main);
}

.btn1 { font-size: 12px; margin-top: 0px; }
.btn1-link { font-size: 12px; color: var(--color-text-black); text-decoration: none; }

button.btn.btn-primary {
  background: var(--color-dark-green);
}

span.resetbutt { float: left; margin-top: 20px; margin-right: 50px; }
span.submitbutt { float: left; margin-top: 20px; }


/* ==========================================================================
   8. BOOTSTRAP CARDS & MODERN CARDS
   ========================================================================== */

.card {
  background: var(--color-bg-card);
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-brand-green);
}

.card-header {
  padding: 0;
  margin: 0;
  background: var(--color-bg-card);
  border-style: solid;
  border-color: var(--color-text-white);
  border-width: 4px;
}

.card-modern {
  background: var(--color-bg-card);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.card-modern img {
  border-radius: 6px;
}

/* Ergänzung */

.card-modern {
  background: var(--color-bg-card);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  /* NEU: Verhindert, dass lange Wörter die Karte auf dem Handy sprengen */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.card-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.card-modern img {
  border-radius: 6px;
  /* NEU: Zwingt Bilder, auf Handys und iPads mitzuschrumpfen */
  max-width: 100%;
  height: auto;
}

/* NEU: Macht Tabellen, die Redakteure einfügen, auf dem Handy seitlich wischbar */
.card-modern table {
  width: 100% !important;
  display: block;
  overflow-x: auto;
}


.box, .card {
  border-radius: 6px;
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.footercontent {
  border: 3px solid #424631;
  background-color: var(--color-bg-gray) !important;
  padding: 5px 0;
  margin-top: 0;
  color: var(--color-text-black) !important;
}

.footercontent p {
  color: var(--color-text-black) !important;
  padding: 0;
  margin: 0;
}

.footergeo {
  padding-bottom: 10px 0;
  margin: 0;
  color: var(--color-text-black) !important;
  background-color: var(--color-brand-green) !important;
}


/* ==========================================================================
   10. BILDER, FIGCAPTION & COPYRIGHT
   ========================================================================== */

.copyright {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-main);
  font-size: 10px;
  padding: 2px 8px;
  color: var(--color-text-black);
  overflow: hidden;
  max-height: 2.5em;
}

figcaption {
  margin-top: 5px;
  font-size: 14px;
  font-style: italic;
  padding-left: 2px;
}

.newscopyright {
  position: relative;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-main);
  font-size: 14px;
  padding: 5px 0 0 5px;
  color: var(--color-text-black);
  overflow: hidden;
  max-height: 3em;
  text-align: right;
}

.newscopyright_alt {
  position: relative;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-main);
  font-size: 14px;
  padding: 2px 14px;
  color: var(--color-text-black);
  overflow: hidden;
  max-height: 3em;
}

.bildunter {
  position: relative;
  top: 0;
  left: 0;
  margin-top: -10px;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-main);
  font-size: 16px;
  padding: 0px 0px;
  color: var(--color-text-black);
  overflow: hidden;
  max-height: 3em;
}

.bildunter_alt {
  position: relative;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-main);
  font-size: 16px;
  padding: 4px 12px;
  color: var(--color-text-black);
  overflow: hidden;
  max-height: 3em;
}

.copyunten {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-main);
  font-size: 10px;
  padding: 2px 8px;
  color: var(--color-text-black);
  overflow: hidden;
  max-height: 2.5em;
}

.descriptiontest {
  position: absolute;
  top: 15px;
  left: 0;
  font-family: var(--font-main);
  font-size: 16px;
  padding: 2px 12px;
  color: var(--color-text-black);
  overflow: hidden;
  max-height: 3em;
}


/* ==========================================================================
   11. LINIEN & DEKORATIVE TRENNUNGEN (BOTTOM-LINES / DIVIDER)
   ========================================================================== */

.bottomline { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgb(137,201,81); }
.bottomline2 { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: rgb(137,201,81); }
.bottomline3 { border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: rgb(137,201,81); }
.bottomline10 { border-bottom-style: solid; border-bottom-width: 10px; border-bottom-color: rgb(137,201,81); }

.section-divider { margin: 30px 0; padding: 0; background: transparent; }
.divider, .section-divider { margin: 10px 0 5px 0 !important; }


/* ==========================================================================
   12. FLUID_STYLED_CONTENT (TYPO3 CORE-WRAPPERS & GRIDS)
   ========================================================================== */

.frame, .frame-default, .frame-layout-0 {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-bottom: 20px;
}

.frame {
  margin-bottom: 10px !important;
  margin-top: 0 !important;
}

.container .row {
  margin-bottom: 10px !important;
}

.frame-padding {
  padding: 2rem;
  background: #eee;
}

.ce-intext [data-ce-columns="1"] { width: 100%; }



.ce-center [data-ce-columns="3"] .ce-column,
.ce-right [data-ce-columns="3"] .ce-column,
.ce-left [data-ce-columns="3"] .ce-column { margin-right: 1%; width: 32.33333%; }

.ce-center [data-ce-columns="2"] .ce-column,
.ce-right [data-ce-columns="2"] .ce-column,
.ce-left [data-ce-columns="2"] .ce-column { margin-right: 1%; width: 49%; }

.ce-center [data-ce-columns="4"] .ce-column,
.ce-right [data-ce-columns="4"] .ce-column,
.ce-left [data-ce-columns="4"] .ce-column { margin-right: 1%; width: 24%; }

.ce-center [data-ce-columns="5"] .ce-column,
.ce-right [data-ce-columns="5"] .ce-column,
.ce-left [data-ce-columns="5"] .ce-column { margin-right: 1%; width: 19%; }

.ce-center [data-ce-columns="6"] .ce-column,
.ce-right [data-ce-columns="6"] .ce-column,
.ce-left [data-ce-columns="6"] .ce-column { margin-right: 1%; width: 15.666667%; }

.ce-gallery figure.video { display: block; }

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 100% !important;
  height: 100% !important;
}

.frame-layout-5 .ce-center .ce-inner { position: relative; float: none; right: -50%; }
.frame-layout-5 .ce-textpic, .frame-layout-5 .ce-image, .frame-layout-5 .ce-nowrap .ce-bodytext, .frame-layout-5 .ce-gallery, .frame-layout-5 .ce-row, .ce-uploads li, .frame-layout-5 .ce-uploads div { overflow: visible; }
.frame-layout-5 .ce-left .ce-gallery, .frame-layout-5 .ce-column { float: none; }
.frame-layout-5 .ce-gallery figure { display: block; margin: 0; }
.frame-layout-5 .ce-center .ce-outer { position: relative; float: none; right: 50%; }

/* Spezifischer Inhaltselement-Fix (#c3) */
#c3 .ce-gallery,
#c3 .ce-outer,
#c3 .ce-inner,
#c3 .ce-row,
#c3 .ce-column,
#c3 figure {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#c3 img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* ==========================================================================
   13. EXTENSIONS (NEWS / FELOGIN / KE_SEARCH / ACCORDION)
   ========================================================================== */

/* News Extension */
h5.teaser-text a {
  font-family: var(--font-main);
  font-size: 19px;
  font-style: italic;
  font-weight: bold;
  color: var(--color-text-black);
  background-color: transparent;
}

h5.teaser-text {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding: 3px;
  color: var(--color-text-black);
}

h6.news-text {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: normal;
  padding: 0;
  margin: 0;
  color: var(--color-text-black);
}

p.lead {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: normal;
}

li.list-group-item {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: normal;
  position: relative;
  display: block;
  padding: 10px 15px; 
  margin-bottom: -1px;
  background-color: var(--color-bg-card);
  border: 1px solid transparent; 
  border-bottom: 2px solid var(--color-maroon);
}

span.news-list-date {
  color: var(--color-text-black);
  font-size: 15px;
}

/* felogin (Frontend Login) */
.tx-felogin-pi1 h3 { display: none; }
.tx-felogin-pi1 label { display: block; }
.tx-felogin-pi1 fieldset div { margin: 0 0 .5rem 0; }

.tx-felogin-pi1 input[type=text],
.tx-felogin-pi1 input[type=password] {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: var(--color-bg-card);
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.tx-felogin-pi1 input[type=submit] {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid var(--color-dark-green);
  background-color: var(--color-dark-green);
  color: var(--color-text-white);
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: all .15s ease-in-out;
  cursor: pointer;
}

div.tx-felogin-pi1 {
  font-family: var(--font-main);
}

/* ke_search (Indexierte Suche) */
.tx-kesearch-pi1 #kesearch_results .result-list-item .hit {
  color: var(--color-text-black) !important;
  font-weight: bold;
}

#kesearch_results .result-list-item .result-teaser {
  color: #707070;
}

/* JQuery UI Accordion */
.ui-accordion-header a { text-decoration: none; }

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: .5em .5em .5em .7em;
  font-size: 100%;
  background-color: var(--color-bg-card) !important;
  text-decoration: none;
}

.ui-accordion .ui-accordion-content {
  border: 1px solid var(--color-maroon);
  padding: 1em 2.2em;
  border-top: 0;
  color: var(--color-text-black);
  background-color: var(--color-bg-card) !important;
  overflow: auto;
}

.ui-accordion .ui-accordion-header :active { border: 1px solid var(--color-maroon); }
.ui-helper { background-color: var(--color-bg-card); }
.ui-icon { visibility: hidden !important; } 

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid var(--color-maroon);
  background: var(--color-bg-card);
  font-weight: normal;
  color: var(--color-text-black);
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: var(--color-text-black);
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid var(--color-maroon);
  background: var(--color-bg-card);
  font-weight: normal;
  color: var(--color-text-black);
}

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited,
.ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited,
a.ui-button:hover, a.ui-button:focus {
  color: var(--color-text-black);
  text-decoration: none;
}

.ui-visual-focus { box-shadow: 0 0 3px 1px rgb(94, 158, 214); }

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--color-maroon);
  background: var(--color-bg-card);
  font-weight: normal;
  color: var(--color-text-black);
}

.ui-icon-background, .ui-state-active .ui-icon-background { border: var(--color-text-white); background-color: var(--color-text-white); }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: var(--color-maroon); text-decoration: none; }
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: var(--color-maroon); text-decoration: none; }


/* ==========================================================================
   14. EIGENE KUSTOM-KOMPONENTEN (KGS CARDS & BOOTSTRAP OVERRIDES)
   ========================================================================== */

div.borderkgs { border: 0; padding: 0px; margin-bottom: 10px; }
div.headerkgs { background-color: var(--color-dark-green); color: var(--color-text-white); text-align: center; padding: 0px; margin-bottom: 0px; }
div.infoheaderkgs { background-color: var(--color-maroon); color: var(--color-text-white); text-align: center; padding: 0px; }
div.kgscardimage { text-align: center; width: 100%; }
h3.infocard { font-size: 18px; margin-top: 0px; border-bottom: 0; }

div.textkgs {
  color: var(--color-text-black);
  margin-top: -12px;
  padding: 0 5px 0 0;
  font-size: 14px;
  font-family: var(--font-alt);
  text-align: right;
}

/* Bootstrap Hilfsklassen Überschreibungen */
.text-white { color: var(--color-text-white) !important; }
.text-kgsgreen { color: var(--color-text-black) !important; }


/* Das Wandbild selbst füllt die gestreckte Hülle komplett aus */
img[src*="Mosaik"] {
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  display: block !important;
}
/* Die Bildunterschrift fangen wir wieder ein und zentrieren sie unter dem Bild */
div.container .ce-image:first-of-type figcaption.image-caption {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin: 12px auto 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  color: #333333 !important;
}

/* Das Wandbild über den Dateinamen direkt ansprechen und aufreißen */
img[src*="csm_KGS-Eingang_-_Mosaik"] {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  display: block !important;
  height: auto !important;
}

/* Die direkt darauf folgende Bildunterschrift zentrieren und lösen */
img[src*="csm_KGS-Eingang_-_Mosaik"] + figcaption {
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  width: 100vw !important;
  text-align: center !important;
  display: block !important;
  margin-top: 15px !important;
  color: #333333 !important;
}

/* Dem einen globalen Container und allen Unterhüllen das Abschneiden erlauben */
div.container, 
div.container .ce-image, 
div.container .ce-outer, 
div.container .ce-inner, 
div.container .ce-row, 
div.container .ce-column {
  overflow: visible !important;
}

/* Das Wandbild mit roher CSS-Gewalt auf die volle Displaybreite zwingen */
div.container img[src*="Mosaik"] {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  display: block !important;
  height: auto !important;
}

/* Die Bildunterschrift exakt mittig darunter platzieren */
div.container img[src*="Mosaik"] + figcaption {
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  width: 100vw !important;
  text-align: center !important;
  display: block !important;
  margin-top: 15px !important;
  color: #333333 !important;
}

/* Dem einen globalen Container und allen Unterhüllen das Abschneiden erlauben */
div.container, 
div.container .ce-image, 
div.container .ce-outer, 
div.container .ce-inner, 
div.container .ce-row, 
div.container .ce-column {
  overflow: visible !important;
}

/* Das Wandbild mit roher CSS-Gewalt auf die volle Displaybreite zwingen */
div.container img[src*="Mosaik"] {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  display: block !important;
  height: auto !important;
}

/* Die Bildunterschrift exakt mittig darunter platzieren */
div.container img[src*="Mosaik"] + figcaption {
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  width: 100vw !important;
  text-align: center !important;
  display: block !important;
  margin-top: 15px !important;
  color: #333333 !important;
}

/* Die gesamte Navigationsleiste flexibel an den Inhalt anpassen */
.navbar, 
nav.navbar {
  height: auto !important;
  min-height: 80px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}



/* Den Hintergrund der gesamten Navigation auf Marken-Grün setzen */
.navbar, 
.nav-bar,
header, 
.navigation-wrap { 
    background-color: rgb(137, 201, 81) !important; 
}



/* Den dunklen Bootstrap-Hintergrund mit dem Marken-Grün überschreiben */
nav.navbar.bg-dark {
    background-color: rgb(137, 201, 81) !important;
}

  
  .ce-gallery img,
.image-embed-item {
    max-width: 100%;
    height: auto !important;
}


/*=========*/
/*1. NAVBAR*/
/*=========*/

.navbar {
background-color: rgba(137,201,81,1)!important;
padding: 14px 30px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}


/*========================*/
/* 4. FOKUS-RAHMEN: Ändert das Standard-Blau des Browsers auf das Marken-Grün */
/*=======================*/
.ui-visual-focus, 
:focus, 
:focus-visible { 
    box-shadow: 0 0 3px 1px rgb(137, 201, 81) !important; 
    outline: none !important;
}

/*==============================*/
/* 5. STRUKTUR UND LAYOUT (Ohne Variablen) */
/*=============================*/
.navbar>.container, 
.navbar>.container-fluid {
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
}


/*===================*/
/*Dropdown - moderner*/
/*===================*/


.dropdown-item {
  padding: 8px 16px;
  transition: background 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(0,0,0,0.08);
}

/* Aktiver Menüpunkt */
#navbarNavDropdown li a.active {
  font-style: normal;
  border-bottom: 2px solid #843b2a;
  padding-bottom: 2px;
}


/*===============================*/
/* ul.metamenu, header.slider, kardinal, h4.underline*/
/*================================*/

ul.metaMenu {
    list-style-type: none;
    margin: 0;
}

ul.metaMenu li {
    display: inline-block;
    margin: 0 15px;
}

header.slider {
    margin-bottom: 2rem;
}

.kardinal {
  margin: 0;
}


h4.underline {
  display: inline-block;
}



/* Texte ordentlich umbrechen und Abstände für die Klickfläche */
.dropdown-item {
    white-space: normal;
    padding: 8px 20px;
    line-height: 1.4; /* Sorgt für etwas Luft zwischen den Zeilen */
}


/* Entfernt unerwünschten Abstand oberhalb der Navigation */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.navbar {
    margin-top: 5px !important; /* Dein kleiner "Floating"-Abstand statt eines riesigen */
}

/* Erzeugt einen sauberen Abstand unter der Floating-Navi */
.navbar {
    margin-bottom: 30px !important; /* Hier definierst du den Platz nach unten */
    /* ... deine anderen Werte ... */
}



/* Hover-Effekt für die Eleganz */
.navbar-nav a:hover {
    color: #558b2f; /* Dunkleres Grün beim Drüberfahren */
}

/* --- ANGEPASSTES NAVI-DESIGN (Alles in einer Reihe) --- */

.navbar-container {
    background-color: #ffffff !important;
    border: 2px solid #7cb342;
    padding: 5px 15px; /* Etwas kompakter */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* Erzwingt die eine Zeile */
}


/* --- CLEAN NAV-BOX STYLING --- */

/* Sorgt dafür, dass der Container das Padding für den Text hält */
.greenback {
    padding: 10px 15px !important;
}

/* Link-Styling: Erzwingt Einzeiligkeit und fixiert den Pfeil */
.greenback a {
    display: inline-flex !important;
    align-items: center !important;
    color: #424632 !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* Verhindert Umbruch */
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Dunkler, fetter Pfeil - immer am Ende des Textes */
.greenback a::after {
    content: " ↗";
    color: #424632 !important;
    font-weight: 900 !important;
    font-size: 1em !important;
    margin-left: 8px !important;
}

/* Entfernt jegliche Hover-Effekte */
.greenback:hover,
.greenback a:hover {
    background-color: var(--color-brand-green) !important;
    text-decoration: none !important;
}

/* --- ELLIPSEN-FIX --- */

.greenback a {
    display: flex !important;           /* Wechsel von inline-flex zu flex */
    align-items: center !important;
    width: 100% !important;             /* Link MUSS volle Breite einnehmen */
    max-width: 100% !important;         /* Dürfte nicht über 100% gehen */
    white-space: nowrap !important;
    overflow: hidden !important;        /* Wichtig: Überlauf abschneiden */
    text-overflow: ellipsis !important; /* Hier kommen die drei Punkte */
    color: #424632 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Pfeil fixieren, damit er nicht weggeschnitten wird */
.greenback a::after {
    content: " ↗";
    color: #424632 !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;          /* Pfeil darf nicht schrumpfen */
    margin-left: auto !important;       /* Schiebt den Pfeil ganz nach rechts */
    padding-left: 8px;
}

/* --- DOWNLOAD-BUTTON STYLING (ERZWUNGEN) --- */

.download-box,
a.download-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    border: 2px solid #89c951 !important; /* Ihr Marken-Grün */
    background-color: #f8f9fa !important;
    color: #424632 !important;
    font-weight: 700 !important; /* Etwas kräftiger */
    text-decoration: none !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* Icon-Fix */
.download-box::before {
    content: "📥 ";
    font-size: 1.1em !important;
}

/* Hover-Status erzwingen */
.download-box:hover,
a.download-box:hover {
    background-color: #e9ecef !important;
    color: #424632 !important;
    text-decoration: none !important;
}


/* --- DOWNLOAD-BUTTON STYLING (MAXIMALE PRIORITÄT) --- */

/* Wir adressieren sowohl das h3 als auch das a, um sicherzugehen */
.greenbackcenter,
h3.greenbackcenter {
    padding: 0 !important;
    margin: 0 !important;
}

h3.greenbackcenter {
    margin-bottom: 24px !important;
    background-color: #dfdfdf !important; /* Etwas dunkleres, deutliches Grau */
    color: #222 !important;                /* Noch besserer Kontrast für den Text */
    font-weight: 500 !important;           /* Leicht fettere Schrift für bessere Lesbarkeit */
} 

.greenbackcenter a,
h3.greenbackcenter a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 20px !important;
    border: 2px solid #89c951 !important;
    background-color: #f8f9fa !important;
    color: #424632 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Icon-Fix */
/* --- DOWNLOAD-ICON GRÖSSER --- */

.greenbackcenter a::before {
    content: "📥 ";
    /* Erhöhen Sie den Wert hier für eine größere Darstellung */
    font-size: 1.5em !important; 
    margin-right: 10px !important;
    vertical-align: middle !important;
}

/* Hover-Status erzwingen */
.greenbackcenter a:hover {
    background-color: #e9ecef !important;
    color: #424632 !important;
}

/* --- ZENTRALE ABSTANDSREGELN --- */

/* Abstand für alle Navigations-Boxen (Listen-Elemente) */
.greenback {
    margin-bottom: 12px !important; 
}

/* Abstand für die Überschriften-Box */
.unterlagen-ueberschrift {
    margin-bottom: 24px !important; /* Etwas mehr Abstand nach unten zur Liste */
}


/* Erzwingt, dass die Navbar absolut am oberen Rand klebt */
.navbar.fixed-top {
    top: 8px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}




:root {
  /* Schriftarten (Zentral gesteuert) */
  --font-main: "Raleway", Arial, sans-serif;
  --font-alt: "Raleway", Arial, sans-serif;
  --font-nav: "Raleway", sans-serif;
}



/* Beispiel-Klasse für deine Navigation */
.nav-menu a {
    font-size: 0.9rem;      /* Etwas kleiner als Standard (statt z.B. 1rem) */
    font-weight: 600;       /* Hier etwas leichter als die 800er Überschriften */
    letter-spacing: 0.2px;  /* Minimal angepasst an die kleinere Schrift */
    text-decoration: none;
    /* Deine restlichen Styles wie padding, color etc. */
}




/* Wende diese Klasse auf deine Link-Elemente in den Boxen an */
.box-link {
    display: block;
    white-space: nowrap;      /* Text darf nicht umbrechen */
    overflow: hidden;         /* Alles, was übersteht, wird versteckt */
    text-overflow: ellipsis;  /* Fügt die ... hinzu */
    max-width: 100%;          /* Stellt sicher, dass er nicht über den Rand geht */
    padding: 10px;            /* Optional: Etwas Luft zum Rand */
}



.box-link {
    /* WICHTIG: Damit die Kürzung funktioniert */
    display: inline-block; 
    max-width: 100%;       /* Oder ein fester Wert wie 200px */
    vertical-align: bottom;
    
    /* Kürzen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

/* Die Navigations-Links */
.navbar a {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

/* Grün als "Auftritt" nur beim Hovern */
.navbar a:hover {
  color: #8cc63f; /* Dein schönes Schulfarben-Grün */
}


/* Footer-Container - Schrift anpassen */
.footer {
  font-family: 'Raleway', sans-serif;
  font-size: 0.8rem;      /* Etwas kleiner und dezenter */
  line-height: 1.8;       /* Mehr Luft zwischen den Zeilen */
  color: #444;            /* Ein angenehmes Dunkelgrau */
  padding: 20px;
  text-align: center;
}

/* Die untere grüne Leiste (Links) */
.footer-links {
  background-color: var(--color-brand-green) !important; /* Deine Schulfarbe */
  color: #fff;               /* Weißer Text für den Kontrast */
  padding: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Links im Footer schicker machen */
.footer-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  opacity: 0.8; /* Dezentes Highlight beim Hover */
}

/* ==========================================================================
   SCROLL TO TOP BUTTON [ACTIVE]
   ========================================================================== */

/* Grundzustand des Buttons: Schwebend, aber standardmäßig unsichtbar */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 38px;
    height: 38px;
    background-color: #555555;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                background-color 0.2s;
}

/* Der SVG-Pfeil im Button */
.scroll-to-top svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

/* Hover-Effekt */
.scroll-to-top:hover {
    background-color: #7cbd41;
}

/* Wird per JavaScript gesetzt */
.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

figure.image {
    position: relative;
}

figure.image figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(245,245,245,0.95) !important;
    color: #333;

    padding: 4px 8px;

    font-family: var(--font-main);
    font-size: 13px;
    font-style: italic;
    text-align: center;

    box-sizing: border-box;
    z-index: 10;
}



/* ==========================================================================
   NAVIGATION – SCHLANKE VARIANTE
   ========================================================================== */



/* Menü in einer Zeile halten */

/* Hauptnavigation */


/* Aktiver Menüpunkt */
#navbarNavDropdown li a.active {
    border-bottom: 2px solid #424632;
    color: #000 !important;
    line-height: 1.1;
    padding-bottom: 0px;
}

/* Dropdown */


.dropdown-item {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 400;
    color: #000;
    white-space: nowrap;
    padding: 8px 14px;
}

.dropdown-item:hover {
    background-color: rgba(0,0,0,0.08);
    color: #000;
}

/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */

.scroll-to-top {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 38px;
    height: 38px;

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

    background-color: #555555;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    z-index: 9999 !important;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                background-color 0.2s ease;
}

.scroll-to-top:hover {
    background-color: var(--color-brand-green);
}

.scroll-to-top svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}


#scrollToTop {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;

    width: 40px !important;
    height: 40px !important;

    background: #555 !important;
    color: #fff !important;

    border: 1px solid #ccc !important;

    z-index: 99999 !important;
}

/* H5 Linkboxen */

h3 a {
    color: var(--color-dark-green);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    width: 100%;
    border: 3px solid var(--color-brand-green-dark) !important;
}

h5 a {
    color: var(--color-dark-green);
    text-decoration: none;
    font-weight: 400;
    display: flex;
    align-items: center;
    width: 100%;
    border: 3px solid var(--color-brand-green-dark) !important;
}


h3:hover, h5:hover, h6:hover {
     border-color: #424632 !important;
     }






h3 a:focus::after,
h5 a:focus::after,
h3 a:active::after,
h5 a:active::after,
h6 a:active::after  
{
    background: transparent !important;
    color: #999 !important;
}

h3 a:hover, h5 a:hover, h6 a:hover {
  color: #000 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

h3 a:hover::after, h5 a:hover::after, h6 a::hover::after {
  transform: translate(5px, -5px);
  color: #999 !important;
}




h1, h2, h3, h4, h5 {
  font-family: var(--font-main); 
  border: 1px solid var(--color-brand-green-dark) !important;
  background-color: #f2f2f2;
  padding: 6px 12px;
  border-radius: 4px;
  text-align: left;
  
}

h2 {
    font-family: var(--font-main); 
    border: 1px var(--color-brand-green-dark);
    background-color: #f2f2f2;
    padding: 6px 12px;
    border-radius: 4px;
    text-align: center;
    font-weight: 700;
    margin: 30px 0;
}

   
h4.kardinal {
   background-color: rgba(137, 201, 81, 1);
   }

   
   
   /* ==========================================================================
   ACTIVE MENU INDICATOR
   ========================================================================== */

/* Hauptnavigation */
#navbarNavDropdown li a.active {
    position: relative;
    color: #000 !important;
    border-bottom: none !important; /* alte Linie abschalten */
}

/* Neue Linie */
#navbarNavDropdown li a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.5px; /* näher an den Text */
    height: 1px;
    background-color: #424632;
}

/* Aktiver Dropdown-Eintrag */

    .ce-gallery figure {
    display: block !important;
    width: 100% !important;
}



/* ======================================
   PDF-DOWNLOADS
====================================== */

a[href$=".pdf"] {
    display: inline-flex;
    align-items: center;

    padding: 10px 16px;
    border: 2px solid #89c951;
    border-radius: 4px;

    background-color: #f8f9fa;
    color: #424632;

    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}






.kgs-accordion {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 2rem;
    margin-left: 0;
}


.kgs-accordion-item {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.kgs-accordion-title {
    cursor: pointer;
    padding: 1rem;
    background: #f5f5f5;
    font-weight: 700;
}

.kgs-accordion-title::-webkit-details-marker {
    display: none;
}

.kgs-accordion-title::after {
    content: "+";
    float: right;
}

.kgs-accordion-item[open] .kgs-accordion-title::after {
    content: "-";
}

.kgs-accordion-content {
    padding: 1rem;
    background: #fff;
}

.kgs-accordion-title {
    list-style: none;
}

.kgs-accordion-title::-webkit-details-marker {
    display: none;
}

.kgs-accordion-title::marker {
    content: "";
}

/* KGS Accordion */

.kgs-accordion {
    margin: 2rem 0;
}

.kgs-accordion-heading {
    border: 1px solid #8cc63f;
    padding: 12px 16px;
    color: #132540;
    font-weight: 700;
    margin-bottom: 1rem;
}

.kgs-accordion-item {
    border: 1px solid #8cc63f;
    margin-bottom: 12px;
    background: #fff;
}

.kgs-accordion-title {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    color: #132540;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kgs-accordion-title::-webkit-details-marker {
    display: none;
}

.kgs-accordion-title::marker {
    content: "";
}

.kgs-accordion-title::after {
    content: "+";
    color: #132540;
    font-weight: 700;
    font-size: 18px;
}

.kgs-accordion-item[open] .kgs-accordion-title::after {
    content: "−";
}

.kgs-accordion-content {
    padding: 18px;
    border-top: 1px solid #8cc63f;
    background: #ffffff;
}

/* ==================================================
   KGS Accordion
   ================================================== */

.kgs-accordion {
    margin: 0 0 2rem 0;
}

.kgs-accordion-heading {
    border: 1px solid #98c93c;
    padding: 12px 16px;
    margin-bottom: 1rem;
    background: #fff;
    color: #0f2342;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.kgs-accordion-item {
    border: 1px solid #98c93c;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}

.kgs-accordion-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    background: #fff;
    color: #0f2342;
    font-weight: 600;
    font-size: 14px;
    transition: background-color .2s ease;
}

.kgs-accordion-title:hover {
    background: #f7faf2;
}

.kgs-accordion-title::-webkit-details-marker {
    display: none;
}

.kgs-accordion-title::marker {
    content: "";
}

.kgs-accordion-title::after {
    content: "+";
    color: #0f2342;
    font-weight: 700;
    font-size: 1.2rem;
    margin-left: 20px;
}

.kgs-accordion-item[open] .kgs-accordion-title {
    background: #f7faf2;
}

.kgs-accordion-item[open] .kgs-accordion-title::after {
    content: "−";
}

.kgs-accordion-content {
    padding: 20px;
    border-top: 1px solid #98c93c;
    background: #fff;
    line-height: 1.7;
}

.kgs-accordion-content p:last-child {
    margin-bottom: 0;
}

/*.dropdown-menu .dropdown-menu {
    display: block !important;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: 0;
}*/



.news .article {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.news .footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.news .more {
    margin-bottom: 0 !important;
}

.news .footer p,
.news .footer time {
    margin-top: 0 !important;
}

.news .footer p {
    margin: 0 !important;
}

.news .footer {
    margin: 0 !important;
    padding: 0 !important;
}

.news .footer {
    margin-top: -22px;
    float: right;
}

.news .footer p {
    margin: 0;
}

.news .footer p {
    margin: 0 !important;
}

.news .footer {
    margin: 0 !important;
    padding: 0 !important;
}

.news .article {
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
}

.news-img-wrap img {
    width: 140px !important;
    height: auto !important;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.news-meta .more {
    margin: 0;
}

.news-meta .news-list-date {
    margin: 0;
}

.news .article {
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.news-img-wrap img {
    width: 160px;
    height: auto;
}

.news-backlink-wrap a {
    color: var(--color-brand-green);
}

.kgs-accordion-heading,
.kgs-accordion-item,
.kgs-accordion-item summary,
.kgs-accordion-item[open] > div {
    background: var(--color-bg-card) !important;
}

.kgs-accordion-heading,
.kgs-accordion-item,
.kgs-accordion-item summary {
    background: var(--color-bg-card) !important;
}

.kgs-accordion-heading,
.kgs-accordion-item {
    background: var(--color-bg-card) !important;
    border: 1px solid #98c93c;
}

.kgs-accordion-heading {
    font-family: var(--font-main) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28.8px !important;

    padding: 6px 12px !important;
    margin: 30px 0 !important;

    border: 1px solid rgba(137, 201, 81, 1) !important;
    border-radius: 4px !important;

    background-color: #f2f2f2 !important;
    text-align: center !important;
}


.kgs-accordion-heading {
    /* gleiche Ausrichtung wie News Sammlung */
    text-align: left !important;

    /* Oberkante auf gleiche Höhe bringen */
    margin-top: 0 !important;
    margin-bottom: 30px !important;

    /* gleicher Rahmen wie News Sammlung */
    border: 1px solid rgba(137, 201, 81, 1) !important;
    border-radius: 4px !important;

    /* gleicher Hintergrund */
    background-color: #f2f2f2 !important;
}

.kgs-accordion-heading {
    text-align: left !important;
}

.kgs-accordion-heading {
    text-align: left;
    background-color: #f2f2f2;
    border: 1px solid rgba(137, 201, 81, 1);
    border-radius: 4px;
}

/* ==================================================
   KGS Accordion
   ================================================== */

.kgs-accordion {
    margin: 0 0 0 0;
}

.kgs-accordion-heading {
    border: 1px solid #98c93c;
    padding: 6px 12px;
    margin-bottom: 1rem;
    background: #fff;
    color: #0f2342;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.kgs-accordion-item {
    border: 1px solid #98c93c;
    margin-bottom: 6px;
    background: #fff;
    overflow: hidden;
}

.kgs-accordion-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    cursor: pointer;
    padding: 6px 12px;
    background: #fff;
    color: #0f2342;
    font-weight: 600;
    font-size: 14px;
    transition: background-color .2s ease;
}

.kgs-accordion-title:hover {
    background: #f7faf2;
}

.kgs-accordion-title::-webkit-details-marker {
    display: none;
}

.kgs-accordion-title::marker {
    content: "";
}

.kgs-accordion-title::after {
    content: "+";
    color: #0f2342;
    font-weight: 700;
    font-size: 1.2rem;
    margin-left: 20px;
}

.kgs-accordion-item[open] .kgs-accordion-title {
    background: #f7faf2;
}

.kgs-accordion-item[open] .kgs-accordion-title::after {
    content: "−";
}

.kgs-accordion-content {
    font-size: 14px;
    padding: 20px;
    border-top: 1px solid #98c93c;
    background: #f2f2f2;
    line-height: 1.4;
}

.kgs-accordion-content p:last-child {
    margin-bottom: 0;
}

.kgs-accordion-heading,
.kgs-accordion-item,
.kgs-accordion-item summary,
.kgs-accordion-item[open] > div {
    background: var(--color-bg-card) !important;
}

.kgs-accordion-heading,
.kgs-accordion-item,
.kgs-accordion-item summary {
    background: var(--color-bg-card) !important;
}

.kgs-accordion-heading,
.kgs-accordion-item {
    background: var(--color-bg-card) !important;
    border: 1px solid #98c93c;
}

.kgs-accordion-heading {
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 20.0px !important;

    padding: 6px 12px !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    
    border: 1px solid rgba(137, 201, 81, 1) !important;
    border-radius: 4px !important;

    background-color: #f2f2f2 !important;
    text-align: left !important;
}

  


.news-backlink-wrap a,
.news-backlink-wrap a:visited {
    color: var(--color-brand-green) !important;
}

h3 a,
h5 a {
    color: var(--color-text-black) !important;
    border: 3px solid var(--color-brand-green-dark) !important;
    text-decoration: none !important;
    display: block;
    padding: 12px 16px;
    border: 1px solid #5aa33a;
    border-radius: 4px;
    margin-top: 1rem;
}


h5 a::after, h6 a::after {
    content: "";
    display: inline-block;
    width: 5px; 
    height: 5px;
    border-top: 1.2px solid currentColor; 
    border-right: 1.2px solid currentColor;
    transform: translateY(-50%); 
    margin-left: 15px;
    flex-shrink: 0; 
}

h3 a:hover::after, h5 a:hover::after, h6 a:hover::after {
  transform: translate(5px, -5px);
  color: #999 !important;
}



/* Quelle: ehemals ca. 1509 */
/* Floating Navigation - Überschreibt Bootstrap-Standard */

/*DUBLETTE 1 */
.navbar {
    position: sticky !important;
    top: 15px;
    margin: 0 15px;
    border-radius: 12px;
    z-index: 1050;
    box-shadow: 0 4px 12px rgb(0, 0, 0, 0.15);
    background-color: var(--color-brand-green) !important;
}
/*DUBLETTE 2 */
.navbar {
    background-color: var(--color-brand-green) !important; /* !important erzwingt deine Farbe */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Quelle: ehemals ca. 2183 */

/*DUBLETTE 3 */
.navbar {
    background-color: var(--color-brand-green) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    padding: 8px 20px;
}

.navbar > .container,
.navbar > .container-fluid {
    flex-wrap: nowrap;
}


/* ==========================================================================
   NAVBAR-BRAND - Dubletten vorhanden
   ========================================================================== */
/* Dublette 1 - Logo Bild */
/* Das Logo-Bild sauber innerhalb der Box skalieren */
.navbar-brand img, 
.navbar img {
  max-height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
}
/*Dublette 2 - Flex-Layout*/
.navbar-brand {
display:flex;
align-items: center;
gap: 10px;
}
/*Dublette 3 - Inline Block */
/* Das Logo und der Hamburger-Button sollen nebeneinander bleiben */
    .navbar-brand {
        display: inline-block;
    }
/*Dublette 4 - Inline Block (identisch zu Dublette 3) */
    /* Das Logo und der Hamburger-Button sollen nebeneinander bleiben */
    .navbar-brand {
        display: inline-block;
    }
/*Dublette 5 - Typografie */
    .navbar-brand {
    font-size: 0.5rem; /* Name kleiner */
    font-weight: bold;
    color: #7cb342;
    white-space: nowrap; /* Verhindert Umbruch des Namens */
    margin-right: 15px;
}
/* Dublette 6 - Hover / Focus */
/* Logo ohne Hover-Hintergrund */
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active {
    background: transparent !important;
    box-shadow: none !important;
}
/* Dublette 7 - Hintergrund */
.navbar-brand {
    background: transparent !important;
}

.navbar-brand:hover {
    background-color: var(--color-brand-green) !important;
}

/* ==========================================================================
   HOVER / INTERAKTIONEN
   ========================================================================== */

/* 3. HOVER: Zustand, wenn man mit der Maus über die Links fährt */
.navbar-nav .nav-link:hover,
.navbar-brand:hover,
.dropdown-item:focus, 
.dropdown-item:hover {
    color: rgb(255, 255, 255) !important; /* Text wird beim Drüberfahren weiß */
    background-color: rgb(117, 181, 61) !important; /* Hintergrund wird leicht dunkler grün */
    border-radius: 6px;
}   

nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .navbar-nav .nav-link:hover,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .navbar-brand:hover,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .dropdown-item:hover,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .dropdown-item:focus {
    color: rgb(0, 0, 0) !important;
    background-color: var(--color-brand-green) !important;
    border-radius: 6px;
}

/* ==========================================================================
   NAVBAR-NAV
   ========================================================================== */
/* 2. SCHRIFT: Erzwingt tiefschwarzen Text für alles in der Navigation */
nav[class*="navbar"] *, 
.navbar *, 
.navbar-nav *, 
ul.metaMenu * {
    color: rgb(0, 0, 0) !important;
}

.navbar-nav .nav-link {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fff !important;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover {
  background-color: rgba(0,0,0,0.08);
  border-radius: 6px;
}



.navbar-nav a {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;   /* Etwas kleiner */
    font-weight: 700;     /* Kräftiger */
    color: #7cb342;       /* Grüne Schrift */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.navbar-nav {
    display: flex;
    gap: 10px; /* Abstände zwischen den Punkten verkleinert */
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-nav {
    flex-wrap: nowrap;
}

 .navbar-nav .nav-item {
        margin-bottom: 0.25rem !important;
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.25rem !important;
    }

/* ==========================================================================
   NAV-LINK
   ========================================================================== */
.navbar-nav .nav-link {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #000 !important;
    white-space: nowrap;
    padding: 8px 8px;
    transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(0,0,0,0.06);
    border-radius: 4px;
}

/* Sicherstellen, dass die Schriftfarbe in der Navigation schwarz bleibt/wird */
.navbar-nav .nav-link, 
.navbar-brand,
.navbar a {
    color: #000000 !important;
}

/* Den Text "Kardinal-Galen-Schule" und die Links tiefschwarz färben */
nav.navbar h4.kardinal,
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-brand {
    color: #000000 !important;
}

nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark h4.kardinal,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .navbar-nav .nav-link,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .navbar-brand,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .dropdown-item,
#navbarNavDropdown li a.current,
#navbarNavDropdown li a.active,
ul.metaMenu,
ul.metaMenu li,
ul.metaMenu a {
    color: rgb(0, 0, 0) !important;
    
    /* NEU: Löscht das alte Logo mit maximaler Priorität */
    background-image: none !important;
    padding-left: 0 !important;
}


/* ==========================================================================
   DROPDOWN-MENU
   ========================================================================== */
/* 1. HINTERGRUND: Erzwingt das Grün auf absolut jedem Element der Leiste */
nav[class*="navbar"], 
nav[class*="bg-"], 
.navbar, 
.bg-dark, 
.bg-dark .dropdown-menu {
    background: rgb(137, 201, 81) !important;
    background-color: rgb(137, 201, 81) !important;
    padding: 14px 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .dropdown-menu,
.bg-dark {
 background-color: rgb(137,201,81)!important;
background:rgb(137,201,81)!important;
padding: 14px 30px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.dropdown-menu {
  border-radius: 8px;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  padding: 8px 0;
}

.bg-dark,
.bg-dark .dropdown-menu {
  background-color: rgba(137, 201, 81, 1) !important;
  color: #000 !important;
}

.dropdown-menu a {
  color: #555;
  padding: 8px 0;
  display: block;
}

.dropdown-menu a:hover {
  color: #8cc63f;
  background: none;
}

/* Für den "Schweb-Effekt" des Dropdowns */
.dropdown-menu {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Zarter Schatten */
  border-radius: 0 0 4px 4px;              /* Abgerundete Ecken unten wirken weicher */
}

.dropdown-menu {
    background-color: var(--color-brand-green);
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 4px 0;
}


    .dropdown-menu li {
    position: relative;
}

.navbar-collapse .dropdown-menu {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 0 0 1rem !important;
    background-color: var(--color-brand-green) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 991.98px) 

    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 0 0 1rem !important;
        background-color: var(--color-brand-green) !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .navbar-nav .dropdown-menu {
    min-width: 250px; 
    padding: 10px 0;
}

/* ==========================================================================
   DROPDOWN-ITEM
   ========================================================================== */
/* Korrektur des fehlerhaften Hintergrund-Grüns bei Klick/Status */
    .navbar-collapse .dropdown-item:active,
    .navbar-collapse .dropdown-item.active,
    .navbar-collapse .dropdown-item.current {
        background-color: var(--color-brand-green) !important; /* Hier Ihr gewünschtes Standard-Schulgrün eintragen */
        color: #fff !important;
    }
    
     .navbar-collapse .dropdown-item:active,
    .navbar-collapse .dropdown-item.active,
    .navbar-collapse .dropdown-item.current {
        background-color: var(--color-brand-green) !important;
        color: #fff !important;
    }

    .dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.dropdown-menu .active > a:focus {
    background-color: var(--color-brand-green) !important;
    color: #000 !important;
    background-image: none !important;
    outline: none !important;
}

.dropdown-item.active,
.dropdown-menu .active > a {
    position: relative;
    background-color: var(--color-brand-green) !important;
    color: #000 !important;
    border-bottom: none !important;
}

.dropdown-item.active::after,
.dropdown-menu .active > a::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 2.5px;
    height: 1px;
    background-color: #424632;
    }

/* =========*==================================*=============================
   N*VBAR-COLLAPSE
   =================*==================================*===================== */
/* 1. Standard-Verhalten für Mobilgeräte (unter 992px) */
@media (max-width: 991px) {
    .navbar-collapse {
        display: none; /* Menü standardmäßig ausblenden */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-brand-green) !important;
        padding: 10px;
    }
    
    /* Wenn Menü aktiv (wird durch JS hinzugefügt), dann anzeigen */
    .navbar-collapse.show {
        display: block !important;
    }

    
}

/* 2. Desktop-Ansicht (ab 992px) - Hier wieder die horizontale Leiste */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
    }
    .navbar-toggler {
        display: none; /* Hamburger auf Desktop verstecken */
    }
}

/* 1. Standard-Verhalten für Mobilgeräte (unter 992px) */
@media (max-width: 991px) {
    .navbar-collapse {
        display: none; /* Menü standardmäßig ausblenden */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-brand-green) !important;
        padding: 10px;
    }
    
    /* Wenn Menü aktiv (wird durch JS hinzugefügt), dann anzeigen */
    .navbar-collapse.show {
        display: block !important;
    }

    
}

/* 2. Desktop-Ansicht (ab 992px) - Hier wieder die horizontale Leiste */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
    }
    .navbar-toggler {
        display: none; /* Hamburger auf Desktop verstecken */
    }
}

/* Stellt sicher, dass die Links sauber untereinander stehen */
    .navbar-collapse .dropdown-item {
        padding: 0.5rem 1rem !important;
        display: block !important;
        width: 100% !important;
        color: rgba(255, 255, 255, 0.85) !important; /* Weißer Text im dunklen Menü */
    }

    .navbar-collapse .dropdown-item {
        padding: 0.5rem 1rem !important;
        display: block !important;
        width: 100% !important;
        color: rgba(255,255,255,.85) !important;
    }


/* ============================*==================================*==========
   MEDIA QUERIES
   ===*==================================*==================================* */
@media (min-width: 992px) {
  body {
    padding-top: 8rem;
  }
}

@media screen and (min-width: 768px){
  .ce-intext [data-ce-columns="1"] { width: 50%; }
}

@media screen and (min-width: 991px){
  .ce-intext [data-ce-columns="1"] { width: 33.3333%; }
}

/* Um den Übergang bei kleinen Geräten sauber zu halten */
@media (max-width: 991px) {
    .navbar {
        margin: 0;
        border-radius: 0;
    }
}

@media (max-width: 991px) {
    /* Erhöht den Abstand unter der Navigation speziell für kleine Bildschirme */
    .breadcrumb, 
    .rootline {
        margin-top: 15px !important; /* Hier kannst du die Pixel erhöhen, bis es gut aussieht */
        padding-top: 10px !important;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px; /* Oft ist eine etwas größere Grundschrift auf dem Handy lesbarer */
        line-height: 1.7;
    }
    h3.greenbackcenter {
        font-size: 1.2rem; /* Überschriften auf dem Handy etwas kleiner anpassen */
    }
}

/* Nur anwenden, wenn der Platz knapp wird (z. B. unter 1200px) */
@media (max-width: 1200px) {
    .box-link {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ==========================================================================
   NAVIGATION - ALTLASTEN / HISTORISCHE EXPERIMENTE
   Derzeit nicht aktiv verwendet.
   Nicht löschen, nur geparkt.
   ========================================================================== */

   .main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
}

.main-navigation li {
    position: relative;
}

.site-header {
    min-height: auto;
    height: auto;
}

.mobile-menu,
.mobile-menu ul {
    background-color: #8bc34a !important;
}

.main-navigation {
    position: relative;
    z-index: 1000;
}

/* =====================================================
   HOTFIX NAVIGATION JULI 2026 (Deaktiviert, da durch "Schnelle Notlösung" ersetzt)
   ===================================================== */

/* =====================================================
   SCHNELLE NOTLÖSUNG
   ===================================================== */

@media (max-width: 991px) {

    .navbar,
    .navbar-collapse,
    .navbar-collapse.show,
    .navbar-nav,
    .dropdown-menu,
    .dropdown-menu.show {
        background-color: #89c951 !important;
    }

    .navbar-nav {
        display: block !important;
    }

    .navbar-nav .nav-item {
        display: block !important;
        width: 100% !important;
    }

    .dropdown-item,
    .nav-link {
        color: #000 !important;
        background: transparent !important;
    }
}

/* Dropdown auf Desktop über den Inhalt legen */
@media (min-width: 992px) {

    .navbar .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 99999 !important;
        background-color: #89c951 !important;
    }
}

/* Bilder normal skalieren */

img,
.ce-gallery img,
.ce-image img,
.image-embed-item,
.news-img-wrap img,
figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Verhindert verschobene Layouts */

/*.container,
.row,*/
.ce-bodytext,
.ce-gallery {
    overflow-x: hidden !important;
}

/* Nur das Mosaikbild auf der Startseite begrenzen */

#c3 img,
img[src*="Mosaik"] {
    width: 100% !important;
    height: auto !important;
    max-height: 350px !important;
    object-fit: contain !important;
}

/* Startseite Mosaik */

#c3 img,
img[src*="Mosaik"] {
    width: 100% !important;
    height: auto !important;
    max-height: 350px !important;
    object-fit: contain !important;
}

/* Mobile Navigation: Untermenüs nur nach Klick */

@media (max-width: 991px) {

    .navbar-collapse .dropdown-menu {
        display: none;
    }

    .navbar-collapse .dropdown.show > .dropdown-menu,
    .navbar-collapse .show > .dropdown-menu {
        display: block !important;
    }
}

nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .dropdown-item,
nav.navbar.navbar-expand-lg.fixed-top.navbar-dark.bg-dark .dropdown-menu a {
  font-family: "Raleway", Arial, sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}



/* Steuert den gesamten Balken ganz unten */
.footergeo,
div.footergeo,
#footergeo,
[class*="footergeo"] {
  background: #7cb041 !important; /* Ihr TYPO3-Schulgrün */
  background-color: #7cb041 !important;
  color: #000000 !important;
  padding: 15px 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Formatiert die Links exakt so kompakt wie das Hauptmenü oben */
.footergeo a,
div.footergeo a,
#footergeo a,
[class*="footergeo"] a {
  color: #000000 !important; /* Schwarze Schrift */
  font-family: "Raleway", Arial, sans-serif !important;
  font-weight: 500 !important; /* Gleiche Schriftstärke */
  font-size: 14px !important; /* ETWAS KLEINER - EXAKT WIE DIE MENÜPUNKTE */
  text-transform: uppercase !important; /* Großbuchstaben */
  letter-spacing: 0.5px !important; /* Gleicher Buchstabenabstand */
  margin: 0 15px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* Zeigt beim Drüberfahren eine Unterstreichung */
.footergeo a:hover {
  text-decoration: underline !important;
}


#navbarNavDropdown li a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;   /* tiefer */
    height: 0.5px;    /* dünn */
    background-color: #424632;
    opacity: 0.75;
}

.news-img-wrap img {
    width: 140px !important;
    height: auto !important;
}

/* Styling für die kurzfristige Eilmeldung */
/* Die Box selbst (als h5-Element) */
h5.eilmeldung-banner {
    display: block !important;
    padding: 6px 10px !important; /* Padding wandert auf den Link für bessere Klickbarkeit */
    margin-bottom: 0.5rem !important;
    border: 3px solid var(--color-brand-green-dark) !important;
    border-radius: 4px !important;
    background-color: #fff9c4 !important; 
    letter-spacing: 0.3px;
    font-size:22px;
}

/* 1. DER STANDARD-ZUSTAND (Hier gehört die Transition hin!) */
h5.eilmeldung-banner {
    background-color: #FFF9C4 !important; /* Ihre Standardfarbe */
    transition: background-color 0.2s ease-in-out !important; /* Wirkt in BEIDE Richtungen */
}

/* Der Link innerhalb der Box (Überschreibt customstyles.css:2655) */
h5.eilmeldung-banner a {
    display: flex !important; 
    align-items: center !important;
    padding: 0px !important; 
    width: 100% !important;
    color: #C0392B !important; 
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease-in-out !important; /* Macht auch den Textwechsel weich */
    border: 3px solid var(--color-brand-green-dark) !important;
}

/* 2. DER HOVER-ZUSTAND (Nur noch für die Ziel-Farben) */
h5.eilmeldung-banner:hover {
    background-color: #FFF59D !important;
}

h5.eilmeldung-banner:hover a {
    color: #962D22 !important;
    text-decoration: none !important;
}



/* Die Box selbst (als h5-Element) */
h5.eilmeldung-banner-green {
    display: block !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    border: 3px var(--color-brand-green-dark);
    border-radius: 4px !important;
    background-color: rgba(137, 201, 81, 0.15) !important; /* Transparentes Grün */
}

/* Der Link innerhalb der Box */
h5.eilmeldung-banner-green a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    width: 100% !important;
    color: #1E4620 !important; /* Dunkles Moosgrün */
    text-decoration: none !important;
    font-weight: 600 !important;
    border: 3px solid var(--color-brand-green-dark) !important;
}

/* Hover-Effekt */
h5.eilmeldung-banner-green:hover {
    border: 3px solid var(--color-brand-green-dark) !important;/* Wird etwas kräftiger */
}

h5.eilmeldung-banner-green:hover a {
    color: #0F2610 !important;
    text-decoration: none !important;
}



/* GRAUE VARIANTE - Fängt h5 UND h2 ab, egal was TYPO3 ausgibt */

/* Die Box selbst für h5 oder h2 */
h5.eilmeldung-banner-grey,
h2.eilmeldung-banner-grey {
    display: block !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    border: 3px solid var(--color-brand-green-dark) !important;
    border-radius: 4px !important;
    background-color: #f5efc1 !important; /* Ihr Standard-Hintergrundgrau */
    color: #c0392b;
}

/* Der Link darin für h5 oder h2 */
h5.eilmeldung-banner-grey a,
h2.eilmeldung-banner-grey a,
h5.eilmeldung-banner-grey > a,
h2.eilmeldung-banner-grey > a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    width: 100% !important;
    color: #C0392B !important; /* Klares Signalrot */
    text-decoration: none !important;
    font-weight: 700 !important;
    text-align: left !important;
   border: 3px solid var(--color-brand-green-dark) !important;
}

/* Hover-Effekte für beide Typen */
h5.eilmeldung-banner-grey:hover,
h2.eilmeldung-banner-grey:hover {
    background-color: #E8E8E8 !important;
}
h5.eilmeldung-banner-grey:hover a,
h2.eilmeldung-banner-grey:hover a {
    color: #962D22 !important;
    text-decoration: none !important;
    border: 3px var(--color-brand-green-dark);
}

/* 1. DATUM: Auf normale Schriftstärke setzen */
.tx-events2 dl dt:first-child,
.tx-events2 dl dt:first-of-type {
    font-weight: normal !important;
    display: block !important;
}

/* 2. ICALENDAR-TEXT: Jedes weitere dt-Element in dieser Liste komplett löschen */
.tx-events2 dl dt:nth-child(2),
.tx-events2 dl dt:nth-of-type(2),
.tx-events2 dl dt + dt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. EXPORT-LINK: Alle dd-Elemente (den Link) komplett löschen */
.tx-events2 dl dd {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Events2 kompakter */
.tx-events2 .list-group-item {
    padding-top: 2px;
    padding-bottom: 2px;
}

.tx-events2 .media-heading {
    margin-top: 2px;
    margin-bottom: 2px;
}

.tx-events2 .list-group-item p {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* ==========================================================================
   NEUES SCHULLOGO (ERZWUNGEN ÜBER CSS)
   ========================================================================== */

/* 1. Den alten Text unsichtbar machen (wird visuell ausgeblendet, bleibt für Google lesbar) */
 .cardinal-header h4.kardinal {
    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    
    /* 2. Das neue Logo als Hintergrundbild laden */
    background-image: url("../Images/Kardinal-Text-Test.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    
    /* 3. Die exakten Maße der Logo-Fläche definieren */
    width: 250px !important; 
    height: 50px !important; 
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Optimierung für Smartphones (Logo wird auf sehr schmalen Displays etwas kleiner) */
@media (max-width: 576px) {
    h4.kardinal {
        width: 180px !important;
        height: 40px !important;
    }
}

/* Verhindert, dass das Event-Bild im Frontend quadratisch beschnitten wird */
.tx-sfeventmgt .event-media-list img,
.tx-sfeventmgt .media-body img,
.tx-sfeventmgt img {
    width: 100% !important;
    height: auto !important; /* Erzwingt das originale Breitbild-Verhältnis */
    max-width: 100%;
    object-fit: contain !important; /* Verhindert das Abschneiden an den Rändern */
}

/* Entfernt gleichzeitig den störenden schwarzen Punkt von vorhin */
.tx-sfeventmgt ul, 
.tx-sfeventmgt .event-media-list {
    list-style-type: none !important;
    padding-left: 0 !important;
}

@media (max-width: 1024px) {
    figure.image figcaption {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}


@media (max-width: 820px) {
    figure.image figcaption {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 820px) {
    figure.image figcaption {
        font-size: 11px !important;
        line-height: 1.15 !important;
        padding: 2px 4px !important;
    }
}


/* Normale Überschriften */
h1, h2, h3, h4, h5 {
    border: 1px solid #5aa33a;
    padding-left: 12px;
}

.news-list-view h5 a {
    border: none !important;
}


.info-spalten-link,
.paed-link, 
.kgs-linkbox-link,
.wissen-link {
    border: 1px solid darkgreen !important;
}

.kgs-paed-container
 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.kgs-paed-link
 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F5F5F5;
    border: 1px solid darkgreen !important;
    border-radius: 4px;
    padding: 0 12px;
    text-decoration: none;
    color: #555555;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    min-height: 28px;
    flex: 1;
    box-sizing: border-box;
    transition: background-color 0.2s, color 0.2s;
}

.kgs-paed-link:hover
 {
    background-color: #EAEAEA;
    color: #000000;
    }

.kgs-paed-link::after
 {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 15px;
    flex-shrink: 0;
}

.kgs-accordion-content h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-black);
    margin-bottom: 10px;
}

h5.kgs-accordion-content {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-black);
    margin-bottom: 10px;
}

.footercontent .col-md-4 {
    background: #ffffff;
    padding: 15px;
    
}

.footercontent {
    background: #626360;
    border-top: 2px solid #6ca544;
    padding: 20px 0;
}

.footercontent {
    background: #f7f7f7;
    border-top: 2px solid #5f6d45;
    padding: 20px 0;
}

.footercontent .col-md-4 {
    border-right: 1px solid #6ca544;
}

.footercontent .col-md-4:last-child {
    border-right: none;
}

@media (max-width: 767px) {

    .footercontent .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

}

@media (max-width: 767px) {
    .footercontent .col-md-4 {
        margin-bottom: 0.75rem !important;
    }

    .footercontent strong {
        display: block;
        margin-bottom: 0.2rem;
    }
}

@media (max-width: 767px) {
    .footercontent strong {
        margin-bottom: -1px;
    }
}

.footercontent {
    line-height: 1.3;
}

.footercontent {
    background-color: #b8cf90 !important;
}

.footercontent .col-md-4 {
    background: transparent !important;
    padding: 10px 15px;
}

.footercontent .col-md-4 {
    border-right: 1px solid #8fb36d;
}

.footercontent .col-md-4:last-child {
    border-right: none;
}

.footercontent {
    padding: 15px 0 6px 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {

    .team-member__name {
        white-space: nowrap;
        font-size: 13px;
    }

}


.cardinal-header .header-logo {
    height: 45px !important; /* Passt die Höhe des Logos an die Zeile an */
    width: auto !important; /* Behält das richtige Seitenverhältnis */
    display: block !important;
}


.cardinal-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important; /* Entfernt Hintergrund vom Container */
    margin-top: 20px !important; /* Schiebt die gesamte Leiste nach unten */
    padding: 10px 0 !important;
}

.cardinal-header h5 {
    font-size: 1.75rem !important;
    font-weight: bold !important;
    text-align: center !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important; /* Löscht eventuelle Schatten-Hintergründe */
    background: transparent !important; /* Entfernt den grauen Hintergrund direkt beim Text */
    background-color: transparent !important;
}
/* Zentrierung des Menüs erzwingen und Ränder oben/unten verkleinern */
.navbar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.navbar-collapse {
    justify-content: center !important;
}

.navbar-nav {
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
}

/* Link-Styling im Header für den Startseiten-Link */
.cardinal-header {
    cursor: pointer;
}

/* Obere Leiste extrem kompakt und schmal halten */
.cardinal-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important; /* Knapper Abstand zwischen Grafik und Text */
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-top: 2px !important; /* Rückt ganz nach oben an den Browserrand */
    padding: 0 !important; /* Eliminiert jeglichen inneren Leerraum */
}

/* Schrift feinanpassen */
.cardinal-header h5 {
    font-size: 1.75rem !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 2px 0 !important; /* Schmaler Schutzabstand für die Schrift */
    background: transparent !important;
    border: none !important;
}

/* Logogröße einschränken */
.cardinal-header .header-logo {
    height: 70px !important; /* Leicht verkleinert, damit die Box flach bleibt */
    width: auto !important;
    display: block !important;
}


/* Obere weiße Leiste: Mehr Abstand nach oben und unten */
.cardinal-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-top: 30px !important;    /* Mehr Platz zum ganz oberen Browserrand */
    padding: 10px 0 !important;     /* Erhöht den Abstand zwischen Logo/Titel und dem grünen Balken */
}

/* Grüne Navigationsleiste: Höhe spürbar verkleinern */
.navbar {
    padding-top: 0px !important;    /* Minimiert den grünen Rand oben */
    padding-bottom: 0px !important; /* Minimiert den grünen Rand unten */
}

/* Die Links im Menü ebenfalls flacher anordnen */
.navbar-nav .nav-link {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* 1. Hebt die extreme Fixierung oben auf, damit der weiße Header Platz hat */
nav.navbar.fixed-top {
    position: relative !important; /* Erlaubt dem Menü, unter dem Header zu fließen */
    top: auto !important;
}

/* Erhöht den Abstand der Menüpunkte für ein ausgewogenes Gesamtbild */
nav.navbar.navbar-expand-lg .navbar-nav .nav-link,
nav.navbar.navbar-expand-lg .navbar-brand {
    padding-top: 6px !important;    /* Von 2px auf 6px erhöht – der perfekte "Tuck" mehr Platz */
    padding-bottom: 6px !important; /* Von 2px auf 6px erhöht */
    font-size: 1.05rem !important;  /* Macht die Schrift minimal größer, damit sie nicht verloren wirkt */
    font-weight: 500 !important;    /* Gibt den Buchstaben etwas mehr Gewicht/Dicke */
    line-height: 1.4 !important;    /* Entspannt die Schrifthöhe */
}

/* Passt den grünen Außenbalken harmonisch an die neue Schrifthöhe an */
nav.navbar.navbar-expand-lg {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/*#navbarNavDropdown li a.active::after {
    content: "";
    position: absolute;
    left: 10px !important;
    right: 10px !important;
    bottom: -2px;
    height: 2px;
    background-color: #424632;
}*/

#navbarNavDropdown li a.active {
    display: inline-block;
    border-bottom: 2px solid #424632;
    display: none;
}

#navbarNavDropdown li a.active::after {
    display: none;
}

#navbarNavDropdown li a.active span {
    border-bottom: 2px solid #424632;
    padding-bottom: 2px;
}

.hero {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.hero__image {
    flex: 0 0 40%;
}

.hero__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.hero__content {
    flex: 1;
}

.hero__image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hero {
    display: block;
}

.hero__images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hero__images img {
    width: 100%;
    height: auto;
    display: block;
}

.hero {
    display: block !important;
}

.hero__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero__content {
    display: block;
    width: 100%;
}

.hero__text {
    width: 100%;
}

.hero {
    display: block !important;
}

.hero__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero__images img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.hero__content {
    display: block;
    width: 100%;
    max-width: 900px;
    margin-top: 1rem;
}

.hero__content h6 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 1rem;
    border: 0;
    line-height: 1.3;
}

.hero__text {
    width: 100%;
    line-height: 1.7;
}

.accordion-item {
    padding-bottom: 1rem;
}

.hero__content h6 {
    margin: 0 0 1rem;
    padding-left: 0.75rem;
    border-left: 4px solid var(--kgs-kardinalrot, #b51e23);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--kgs-kardinalrot, #b51e23);
}

/* Container für die Ausrichtung – minimiert den weißen Rand drumherum */
.paed-container {
    display: flex;
    flex-direction: column;
    gap: 5px; 
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Container, der die h6-Buttons sauber untereinander stapelt */
.paed-container {
    display: flex;
    flex-direction: column;
    gap: 15px;                  /* Erzeugt den sichtbaren Abstand zwischen den Boxen */
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}
/* H6-Container */
h6.link,
h6[class*="link"] {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    font-weight: normal !important;
}

h6.link {
    margin: 0 0 12px 0;
    padding: 0;
}

h6.link > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 34px;
    padding: 0 12px;

    background: #f5f5f5;
    border: 1px solid #5aa33a;
    border-radius: 4px;

    color: #555555;
    text-decoration: none;

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;

    box-sizing: border-box;
    transition: background-color .2s ease;
}

h6.link > a:hover {
    background: #eaeaea;
    color: #000;
}

h6.link > a::after {
    content: "";
    display: inline-block;

    width: 5px;
    height: 5px;

    border-top: 1.2px solid #5aa33a;
    border-right: 1.2px solid #5aa33a;

    transform: rotate(45deg);

    margin-left: 15px;
    flex-shrink: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  font-weight: 700; /* Korrektur: Wieder kräftig (Bold) statt dünn */
  letter-spacing: 0.3px;
  margin-top: 10px;
  margin-bottom: 6px;
  line-height: 1.3;
  border: 1px solid var(--color-brand-green-dark) !important;
  border-radius: 4px;
}

.navbar,
.nav-bar,
.navigation-wrap {
    background-color: rgb(137, 201, 81) !important;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 10px;
  margin-bottom: 6px;
  line-height: 1.3;

  padding: 6px 12px !important;

  background-color: #f5f5f5 !important;
  border: 1px solid #5aa33a !important;
  border-radius: 6px important;
}

.article .header h5 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.news-linkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 4px 12px;

    background-color: #f5f5f5;
    border: 1px solid #5aa33a;
    border-radius: 4px;

    color: #333333;
    text-decoration: none;

    line-height: 1.3;
    box-sizing: border-box;
    transition: background-color .2s ease;
}

.news-linkbox:hover {
    background-color: #eeeeee;
    color: #000000;
}

.news-linkbox::after {
    content: "";
    width: 5px;
    height: 5px;

    border-top: 1.2px solid #5aa33a;
    border-right: 1.2px solid #5aa33a;

    transform: rotate(45deg);

    margin-left: 15px;
    flex-shrink: 0;
}

@media (max-width: 768px) {

    .news-linkbox {
        padding: 0 10px;
    }

    .news-img-wrap {
        float: none;
        margin: 0 0 10px 0;
    }

    .teaser-text {
        width: 100%;
    }

}
@media (max-width: 768px) {

    .news-linkbox {
        padding: 0 10px;
        font-size: 14px;
    }

}

/* Eilmeldung / wichtiger Hinweis */

h5.eilmeldung-banner-grey,
h2.eilmeldung-banner-grey {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

h5.eilmeldung-banner-grey > a,
h2.eilmeldung-banner-grey > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 8px 12px !important;

    background-color: #faf6d8 !important;
    border: 1px solid #5aa33a !important;
    border-radius: 4px !important;

    color: #A72828 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color .2s ease !important;
}

/* Pfeil */

h5.eilmeldung-banner-grey > a::after,
h2.eilmeldung-banner-grey > a::after {
    content: "";
    width: 5px;
    height: 5px;

    border-top: 1.2px solid currentColor;
    border-right: 1.2px solid currentColor;

    transform: rotate(45deg);

    margin-left: 15px;
    flex-shrink: 0;
}

/* Hover */

h5.eilmeldung-banner-grey > a:hover,
h2.eilmeldung-banner-grey > a:hover {
    background-color: f6f0c8 !important;
    color: #8f1f1f !important;
}

h5 {
    margin-bottom: 2px !important;
}

/* H6 Hinweisbox */

h6.link.hinweis > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 6px 12px !important;

    background-color: #faf6d8 !important;
    border: 1px solid #5aa33a !important;
    border-radius: 4px !important;

    color: #A72828 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color .2s ease !important;
}

h6.link.hinweis > a:hover {
    background-color: #f6f0c8 !important;
    color: #8f1f1f !important;
}

h6.link.hinweis > a::after {
    content: "";
    width: 5px;
    height: 5px;

    border-top: 1.2px solid currentColor;
    border-right: 1.2px solid currentColor;

    transform: rotate(45deg);

    margin-left: 15px;
    flex-shrink: 0;
}

/*a[href$=".pdf"]::before {
    content: "📥";
    margin-right: 10px;
    font-size: 1.1em;
}*/

/* H6-Container */
h6.link,
h6[class*="link"] {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    font-weight: normal !important;
}

h6.link {
    margin: 0 0 12px 0;
    padding: 0;
}

h6.link > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-height: 34px;
    padding: 0 30px 0 12px;

    background: #f5f5f5;
    border: 1px solid #5aa33a;
    border-radius: 4px;

    color: #555555;
    text-decoration: none;

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;

    box-sizing: border-box;
    transition: background-color .2s ease;

    position: relative;
}

h6.link > a:hover {
    background: #eaeaea;
    color: #000;
}

/* PDF-Icon direkt vor dem Text */
h6.link > a[href$=".pdf"]::before {
    content: "📥";
    margin-right: 6px;
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Pfeil rechts */
h6.link > a::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;

    width: 5x;
    height: 5px;

    border-top: 1.2px solid #5aa33a;
    border-right: 1.2px solid #5aa33a;

    transform: translateY(-50%) rotate(45deg);
}