body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* Styles contao-ticker */
.mod_ticker .tickertext, .ce_ticker .tickertext { background-color:#eee; }
.mod_ticker .tickertext a, .ce_ticker .tickertext a { text-decoration:none; }
.mod_ticker .telex-msg, .ce_ticker .telex-msg { padding-top:0.3em; }

/* Farben Modules */
.mod_ticker .msg-red, .mod_ticker .msg-red a {               background-color:#d32f2f; color:#ffcdd2; }
.mod_ticker .msg-pink, .mod_ticker .msg-pink a {             background-color:#F8BBD0; color:#333; }
.mod_ticker .msg-purple, .mod_ticker .msg-purple a {         background-color:#ce93d8; color:#333; }
.mod_ticker .msg-deeppurple, .mod_ticker .msg-deeppurple a { background-color:#4527a0; color:#ede7f6; }
.mod_ticker .msg-indigo, .mod_ticker .msg-indigo a {         background-color:#9fa8da; color:#333; }               
.mod_ticker .msg-blue, .mod_ticker .msg-blue a {             background-color:#0d47a1; color:#e3f2fd; }
.mod_ticker .msg-lightblue, .mod_ticker .msg-lightblue a {   background-color:#90caf9; color:#333; }               
.mod_ticker .msg-cyan, .mod_ticker .msg-cyan a {             background-color:#006064; color:#e0f7fa; }
.mod_ticker .msg-teal, .mod_ticker .msg-teal a {             background-color:#B2DFDB; color:#333; }               
.mod_ticker .msg-green, .mod_ticker .msg-green a {           background-color:#1b5e20; color:#e8f5e9; }
.mod_ticker .msg-lightgreen, .mod_ticker .msg-lightgreen a { background-color:#aed581; color:#333; }               
.mod_ticker .msg-lime, .mod_ticker .msg-lime a {             background-color:#cddc39; color:#333; }               
.mod_ticker .msg-yellow, .mod_ticker .msg-yellow a {         background-color:#ffee58; color:#333; }               
.mod_ticker .msg-amber, .mod_ticker .msg-amber a {           background-color:#FFECB3; color:#333; }               
.mod_ticker .msg-orange, .mod_ticker .msg-orange a {         background-color:#ffb74d; color:#333; }               
.mod_ticker .msg-deeporange, .mod_ticker .msg-deeporange a { background-color:#e64a19; color:#fbe9e7; }
.mod_ticker .msg-brown, .mod_ticker .msg-brown a {           background-color:#5d4037; color:#efebe9; }
.mod_ticker .msg-grey, .mod_ticker .msg-grey a {             background-color:#bdbdbd; color:#333; }               
.mod_ticker .msg-bluegrey, .mod_ticker .msg-bluegrey a {     background-color:#37474f; color:#eceff1; }
.mod_ticker .msg-white, .mod_ticker .msg-white a {           background-color:#ffffff; color:#333; }               
.mod_ticker .msg-black, .mod_ticker .msg-black a {           background-color:#202020; color:#E0E0E0; }

/* Farben ContentElements */
.ce_ticker .msg-red, .ce_ticker .msg-red a {               background-color:#d32f2f; color:#ffcdd2; }
.ce_ticker .msg-pink, .ce_ticker .msg-pink a {             background-color:#F8BBD0; color:#333; }
.ce_ticker .msg-purple, .ce_ticker .msg-purple a {         background-color:#ce93d8; color:#333; }
.ce_ticker .msg-deeppurple, .ce_ticker .msg-deeppurple a { background-color:#4527a0; color:#ede7f6; }
.ce_ticker .msg-indigo, .ce_ticker .msg-indigo a {         background-color:#9fa8da; color:#333; }               
.ce_ticker .msg-blue, .ce_ticker .msg-blue a {             background-color:#0d47a1; color:#e3f2fd; }
.ce_ticker .msg-lightblue, .ce_ticker .msg-lightblue a {   background-color:#90caf9; color:#333; }               
.ce_ticker .msg-cyan, .ce_ticker .msg-cyan a {             background-color:#006064; color:#e0f7fa; }
.ce_ticker .msg-teal, .ce_ticker .msg-teal a {             background-color:#B2DFDB; color:#333; }               
.ce_ticker .msg-green, .ce_ticker .msg-green a {           background-color:#1b5e20; color:#e8f5e9; }
.ce_ticker .msg-lightgreen, .ce_ticker .msg-lightgreen a { background-color:#aed581; color:#333; }               
.ce_ticker .msg-lime, .ce_ticker .msg-lime a {             background-color:#cddc39; color:#333; }               
.ce_ticker .msg-yellow, .ce_ticker .msg-yellow a {         background-color:#ffee58; color:#333; }               
.ce_ticker .msg-amber, .ce_ticker .msg-amber a {           background-color:#FFECB3; color:#333; }               
.ce_ticker .msg-orange, .ce_ticker .msg-orange a {         background-color:#ffb74d; color:#333; }               
.ce_ticker .msg-deeporange, .ce_ticker .msg-deeporange a { background-color:#e64a19; color:#fbe9e7; }
.ce_ticker .msg-brown, .ce_ticker .msg-brown a {           background-color:#5d4037; color:#efebe9; }
.ce_ticker .msg-grey, .ce_ticker .msg-grey a {             background-color:#bdbdbd; color:#333; }               
.ce_ticker .msg-bluegrey, .ce_ticker .msg-bluegrey a {     background-color:#37474f; color:#eceff1; }
.ce_ticker .msg-white, .ce_ticker .msg-white a {           background-color:#ffffff; color:#333; }               
.ce_ticker .msg-black, .ce_ticker .msg-black a {           background-color:#202020; color:#E0E0E0; }

/* ==========================================================================
   1. Globale Basics & CSS Variablen (Cyan-Blau & Tech-Clean Look)
   ========================================================================== */
:root {
  --primary: #00a8e8;        /* Das leuchtende Cyan-Blau aus dem Punkt */
  --primary-hover: #0077ff;  /* Kräftigeres Navigations-Blau */
  --secondary: #e6f7ff;      /* Sehr helles Cyan für softe Hover-Hintergründe */
  --text-dark: #2d3748;      /* Hochwertiges Anthrazit für optimale Lesbarkeit */
  --text-light: #718096;     /* Für sekundäre Texte */
  --bg-light: #f4f7f9;       /* Das saubere Tech-Hellgrau */
  --bg-white: #ffffff;
  --accent-alert: #00a8e8;   /* Einheitliches Cyan auch für Ticker */
  --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --max-width: 1200px;
  --radius: 12px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --glow: 0 0 20px 2px rgba(179, 229, 252, 0.8); /* Der hellblaue Schein */
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  
}

body {
  background-color: var(--bg-light);
  font-family: var(--font-main);
  color: var(--text-dark);
}

/* Unsichtbare Navigation (Screendesign-Reset) */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Container-Layout */
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================================
   2. Header & Hauptnavigation (Sticky & Alignment Fixes + Logo-Integration)
   ========================================================================== */
#header {
  background-color: var(--bg-white);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: auto !important; /* Überschreibt starre Contao-Kopfzeilen */
}

/* Logos links und rechts im Header einbauen */
#header::before,
#header::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px; /* Größe der Logos im Header */
  height: 45px;
  background-image: url('../../files/images/Logo_header.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none; /* Verhindert, dass das Logo Klicks blockiert */
}

#header::before {
  left: 20px;
}

#header::after {
  right: 20px;
}

#header .inside {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 5rem; /* Mehr Padding links/rechts, damit Text nicht in die Logos läuft */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Logo-Bereich */
.content-hyperlink figure {
  display: flex;
  align-items: center;
}

.content-hyperlink img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Hauptmenü & Zustände */
.mod_customnav[class*="block"] ul.level_1 {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mod_customnav ul.level_1 a,
.mod_customnav ul.level_1 span.active,
.mod_customnav ul.level_1 strong {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: var(--transition);
}

.mod_customnav ul.level_1 a {
  color: var(--text-dark);
  font-weight: 500;
}

.mod_customnav ul.level_1 a:hover {
  background-color: var(--secondary);
  color: var(--primary-hover);
}

/* Verhindert das Verspringen des aktiven Elements */
.mod_customnav ul.level_1 span.active,
.mod_customnav ul.level_1 strong {
  color: var(--primary-hover);
  font-weight: 700;
  background-color: var(--secondary);
}

/* ==========================================================================
   3. Hauptbereich (Inhalt, Ticker & Allg. Bild-Strukturen)
   ========================================================================== */
#container {
  flex: 1;
  /* Schafft Platz am Ende der Seite, damit der fixierte Footer nichts verdeckt */
  padding-bottom: 120px; 
}

#main .inside {
  max-width: var(--max-width);
  margin: 2rem auto;
  padding: 0 2rem;
}

/* Struktureller Bild- und Galerie-Container */
.content-image,
.content-gallery,
.ce_image,
.ce_gallery {
  display: block;
  padding: 15px 0;
}

/* Moderner Newsticker (Stellenangebote) */
.ce_ticker {
  margin-top: 2rem;
  background: var(--bg-white);
  border-left: 4px solid var(--primary);
  border-radius: 4px var(--radius) var(--radius) 4px;
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow);
}

.tickertext a {
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: var(--transition);
}

.tickertext a:hover {
  color: var(--primary-hover);
}

.msg-amber {
  color: var(--primary);
}

/* ==========================================================================
   4. Der futuristische Bild- & Galerie-Rahmen (Glow-Effekt Fix)
   ========================================================================= */
.content-image figure,
.ce_image figure,
.content-gallery ul li,
.ce_gallery ul li {
  position: relative;
  display: block;
  background: var(--bg-white) !important;
  padding: 10px !important;
  border-radius: 20px 4px 20px 4px !important; /* Asymmetrischer Tech-Schnitt */
  border: 3px solid var(--primary) !important;  /* Cyan-Rahmen */
  box-shadow: var(--glow) !important;          /* Hellblauer Lichtkranz */
  transition: var(--transition);
  
  /* FIX: Verhindert das Abschneiden der oberen Linie beim Hovern */
  overflow: visible !important; 
  margin: 10px 0 0 0 !important; /* Schafft Platz nach oben für den Sprung-Effekt */
}

/* Bild-Formatierungen im Inneren der Rahmen */
.content-image img, 
.ce_image img,
.content-gallery img,
.ce_gallery img {
  display: block;
  width: 100% !important;
  max-height: 700px;
  object-fit: cover;
  border-radius: 14px 2px 14px 2px !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover-Effekte für alle Rahmenelemente */
.content-image figure:hover,
.ce_image figure:hover,
.content-gallery ul li:hover,
.ce_gallery ul li:hover {
  border-color: var(--primary-hover) !important;
  box-shadow: 0 0 30px 6px rgba(179, 229, 252, 1), 0 10px 30px rgba(0, 168, 232, 0.25) !important;
  transform: translateY(-5px); /* Springt sauber nach oben, ohne abzuschneiden */
}

.content-image figure:hover img,
.ce_image figure:hover img,
.content-gallery ul li:hover img,
.ce_gallery ul li:hover img {
  transform: scale(1.01);
}

/* ==========================================================================
   5. Galerie-Systeme (Spalten-Anordnungen & Figcaptions)
   ========================================================================== */
.content-gallery--cols-1 ul,
.content-gallery--cols-2 ul,
.content-gallery--cols-3 ul {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 10px 0; /* Schafft vertikalen Puffer für den Glow */
}
.content-gallery--cols-1 ul { grid-template-columns: repeat(1, 1fr); }
.content-gallery--cols-2 ul { grid-template-columns: repeat(2, 1fr); }
.content-gallery--cols-3 ul { grid-template-columns: repeat(3, 1fr); }

.content-gallery--cols-1 figure,
.content-gallery--cols-2 figure,
.content-gallery--cols-3 figure {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

.content-gallery--cols-1 figure a,
.content-gallery--cols-2 figure a,
.content-gallery--cols-3 figure a {
  display: block;
  aspect-ratio: 4 / 3; /* Einheitliches Kachel-Verhältnis */
  overflow: hidden; 
  border-radius: 14px 2px 14px 2px;
}

.content-gallery--cols-1 figure img,
.content-gallery--cols-2 figure img,
.content-gallery--cols-3 figure img {
  height: 100% !important;
}

.content-gallery figcaption,
.ce_gallery figcaption {
  text-align: center;
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--text-dark); /* Bessere Lesbarkeit für "Bambus", "Steine" etc. */
  font-weight: 600;
}

/* ==========================================================================
   6. Footer (Immer sichtbar / Fixed Footer mit Logos links & rechts)
   ========================================================================== */
#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #2d3748; /* Dunkles Anthrazit passend zu --text-dark */
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* Logos links und rechts im Footer einbauen */
#footer::before,
#footer::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px; /* Größe der Logos im Footer */
  height: 45px;
  background-image: url('../../files/images/Logo_footer.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

#footer::before {
  left: 20px;
}

#footer::after {
  right: 20px;
}

#footer .inside {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 5rem; /* Genug Abstand zu den Logos an den Seiten */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Link-Stylings für den Footer */
#footer a {
  color: #a0aec0;
  text-decoration: none;
  font-size: 0.85rem;
  transition: var(--transition);
}

#footer a:hover {
  color: var(--primary);
}

h1,h2,h3{
    color: #333366;
}
.ce_ticker .msg-amber, .ce_ticker .msg-amber a{
  background-color: #ffffff;
} 
/* --- COMPONENT: PARTNER CARD (DESKTOP) --- */
.partner-card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  width: 31%;
  height: 160px;
  margin: 15px 1%; /* Leicht erhöhter Abstand für den Schattenraum */
  float: left;
  
  /* Styling & Design */
  background: linear-gradient(135deg, #2d3748 0%, #ffffff 100%);
  color: #ffffff;
  border: 1px solid rgba(45, 55, 72, 1);
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
  
  /* Link-Standardwerte zurücksetzen */
  text-decoration: none; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  /* Kleinerer, kompakterer Basisschatten */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* OPTIMIERTER HOVER: Bewegt sich nach OBEN (-4px), um unten nicht abzubrechen */
.partner-card:hover {
  transform: translateY(-4px); 
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25); /* Kontrollierter, kleinerer Schatten */
}


/* Grauton für die Überschrift h3 innerhalb der Karte */
.partner-card h3 {
  color: #e2e8f0; /* Heller Grauton für exzellenten Kontrast */
  margin: 0 0 10px 0;
  font-size: 1.15rem;
}

/* Styling für den "Mehr erfahren"-Text unten */
.partner-card span {
  color: #ffffff;
  font-weight: 500;
}


/* --- RESPONSIVE ANPASSUNGEN (HANDYS & TABLETS) --- */
@media screen and (max-width: 768px) {
  .partner-card {
    width: 100%;        /* Volle Breite auf dem Smartphone */
    float: none;        /* Hebt das Nebeneinanderstehen auf */
    margin: 0 0 20px 0; /* Sauberer Abstand nach unten */
    height: auto;       /* Flexible Höhe für umbrechenden Text */
    min-height: 160px;  
  }
}