/* ==========================================================================
   Main CSS
   Datei: karriere_css_main
   ========================================================================== */

:root {
  --blue: #002C4F;
  --beige: #D8CAB8;
  --white: #fff;
  --black: #000;
  --green: #85BC22;
  --orange: #F59C0A;
  --purple: #981881;
  --red: #DD1342;
  
  /* Standard Hover-Farbe */
  --hover-color: var(--beige);
  
  /* Layout-Konstanten */
  --navbar-height: 80px;

  --header-height: 600px;
  --header-height-low: 450px;
  --header-height-high: 1024px;
  --werteleiste-height: 80px; 

  --navbar-padding-desktop: 8.75rem;
  --navbar-padding-tablet: 4.5rem;
  --navbar-padding-mobile: 1.5rem;
}

/* ==========================================================================
   Schriftarten
   ========================================================================== */

@font-face {
    font-family: 'Le Jeune Deck Web';
    src: url('https://media.essen.de/media/wwwwkarriereessende/karriere_technik/fonts_3/LeJeuneDeck-Regular-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Le Jeune Deck Italic Web';
    src: url('https://media.essen.de/media/wwwwkarriereessende/karriere_technik/fonts_3/LeJeuneDeck-RegularItalic-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('https://media.essen.de/media/wwwwkarriereessende/karriere_technik/fonts_3/Gibson_v4-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('https://media.essen.de/media/wwwwkarriereessende/karriere_technik/fonts_3/Gibson_v4-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('https://media.essen.de/media/wwwwkarriereessende/karriere_technik/fonts_3/Gibson_v4-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

/* ==========================================================================
   body
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Gibson', Arial, sans-serif;
  font-weight: 400;
  background: var(--white);
  color: var(--blue);
}

body.has-navbar {
  padding-top: 0;
}

/* ==========================================================================
   section padding
   ========================================================================== */

.sectionpadding {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* ==========================================================================
   Jobportal
   ========================================================================== */

.jobportal {
  font-family: 'Gibson', Arial, sans-serif !important;
}

/* ==========================================================================  
   generell button
   ========================================================================== */

.button,
button.button,
input[type="button"].button,
input[type="submit"].button,
.btn,
.text-button {
  display: inline-block;
  background-color: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 500;
  font-size: inherit;
  padding: 0.8em 2em;
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  text-align: center;
  transition: background 0.3s, color 0.3s, border 0.3s;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* blue button */
.button.blue,
button.button.blue,
input[type="button"].button.blue,
input[type="submit"].button.blue,
.btn.blue,
.text-button.blue {
  color: var(--blue);
  border-color: var(--blue);
}

/* hover blue */
.button.blue:hover,
button.button.blue:hover,
input[type="button"].button.blue:hover,
input[type="submit"].button.blue:hover,
.btn.blue:hover,
.text-button.blue:hover {
  background-color: var(--beige);
  border-color: var(--beige);
  color: var(--blue);
}

/* white button */
.button.white,
button.button.white,
input[type="button"].button.white,
input[type="submit"].button.white,
.btn.white,
.text-button.white {
  color: var(--white);
  border-color: var(--white);
}

/* hover white */
.button.white:hover,
button.button.white:hover,
input[type="button"].button.white:hover,
input[type="submit"].button.white:hover,
.btn.white:hover,
.text-button.white:hover {
  background-color: var(--beige);
  border-color: var(--beige);
  color: var(--blue);
}

/* designe links */
.button.blue a,
button.button.blue a,
.btn.blue a,
.text-button.blue a,
.button.white a,
button.button.white a,
.btn.white a,
.text-button.white a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit;
  font-family: inherit;
  text-transform: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  line-height: inherit;
  display: inline;
}

.button.text-button a {
  color: inherit !important;
  text-decoration: none !important;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
}

.button.blue a::before,
.button.white a::before {
  display: inline !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin-right: 0.4em !important;
}


/* ==========================================================================
   generell intro-line
   ========================================================================== */

.intro-line {
  font-weight: 400;
  font-size: 1.4em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* blue intro-line */
.intro-line.blue {
  color: var(--blue);
}

/* white intro-line */
.intro-line.white {
  color: var(--white);
}

/* responsive */
@media (max-width: 1200px) {
  .intro-line {
    font-size: 1.3em;
  }
}

@media (max-width: 1024px) {
  .intro-line {
    font-size: 1.2em;
    margin-bottom: 0.8em;
  }
}

@media (max-width: 700px) {
  .intro-line {
    font-size: 1.1em;
    margin-bottom: 0.6em;
  }
}

@media (max-width: 480px) {
  .intro-line {
    font-size: 1em;
    letter-spacing: 0.3px;
  }
}

/* ==========================================================================
   generell headline
   ========================================================================== */

.headline {
  font-size: 2.5em;
  font-weight: 700;
  margin: 0 0 1em;
  line-height: 1.2;
  display: block;
}

/* blue headline */
.headline.blue {
  color: var(--blue);
}

/* white headline */
.headline.white {
  color: var(--white);
}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
  .headline {
    font-size: 2.2em;
  }
}

@media (max-width: 1024px) {
  .headline {
    font-size: 2em;
    margin-bottom: 1.2em;
  }
}

@media (max-width: 700px) {
  .headline {
    font-size: 1.8em;
    margin-bottom: 1em;
  }
}

@media (max-width: 480px) {
  .headline {
    font-size: 1.6em;
  }
}

/* ==========================================================================  
   generell description
   ========================================================================== */

.description {
  font-size: 1.1em;
  line-height: 1.4;
  color: var(--blue);
  margin-bottom: 2em;
  opacity: 0.9;
}

.description p {
  margin: 0 0 0.2em;
}

.description p:last-child {
  margin-bottom: 0;
}

.description a {
  color: var(--black);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.description a:hover,
.description a:focus {
  color: var(--beige);
  text-decoration: none;
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
  .description {
    font-size: 1em;
  }
}

@media (max-width: 700px) {
  .description {
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 1.5em;
  }
}

/* ========================================
   Absatztrenner - Module
   ======================================== */

.section-spacer {
  width: 100%;
  background: transparent;
  pointer-events: none;
}

/* Extra Klein (0.25x) - 20px */
.section-spacer--xs {
  height: 20px;
}

/* Klein (0.5x) - 40px */
.section-spacer--small {
  height: 40px;
}

/* Mittel (1x) - 80px */
.section-spacer--medium {
  height: 80px;
}

/* Groß (2x) - 160px */
.section-spacer--large {
  height: 160px;
}

/* ========== Responsive Anpassungen ========== */

/* Tablet */
@media (max-width: 1024px) {
  .section-spacer--xs {
    height: 15px;
  }
  
  .section-spacer--small {
    height: 30px;
  }
  
  .section-spacer--medium {
    height: 60px;
  }
  
  .section-spacer--large {
    height: 120px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .section-spacer--xs {
    height: 10px;
  }
  
  .section-spacer--small {
    height: 20px;
  }
  
  .section-spacer--medium {
    height: 40px;
  }
  
  .section-spacer--large {
    height: 80px;
  }
}

/* Kleine Mobile Geräte */
@media (max-width: 480px) {
  .section-spacer--xs {
    height: 8px;
  }
  
  .section-spacer--small {
    height: 16px;
  }
  
  .section-spacer--medium {
    height: 32px;
  }
  
  .section-spacer--large {
    height: 64px;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: relative;
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--blue);
}

/* Niedrige Variante - durch Modifier-Klasse */
.header--low {
  height: var(--header-height-low);
}

/* Hohe Variante - durch Modifier-Klasse */
.header--high {
  height: var(--header-height-high);
}

/* Landingpage - volle Bildschirmhöhe */
.header--fullscreen {
  height: 100vh;
}

/* Hintergrundbild oder Video - UNIFIED */
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  background-color: var(--blue);
}

/* Bild spezifisch */
.header-bg--image {
  display: block;
}

/* Video spezifisch - KRITISCH */
.header-bg--video {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background-color: var(--blue);
}

/* Fallback-Bild inside Video */
.header-bg--fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Overlay für bessere Lesbarkeit */
.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: none;
}

/* Header Content */
.header-content {
  position: relative;
  z-index: 3;
  width: 100%;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  padding: 0 var(--navbar-padding-desktop);
  padding-top: var(--navbar-height);
  padding-bottom: calc(var(--werteleiste-height) + 2rem);
  box-sizing: border-box;
  margin: 0;
}

/* Landing Page Content */
.header-content--landingpage {
  justify-content: flex-start;
  padding-top: calc(var(--navbar-height) + 3rem);
}

/* Titel */
.header-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5em;
  line-height: 1.2;
  color: var(--white);
  word-wrap: break-word;
  max-width: 600px;
  position: relative;
  z-index: 4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Button Styling */
.header .button {
  position: relative;
  z-index: 4;
}

/* Tablet: 1200px und darunter */
@media (max-width: 1200px) {
  .header-content {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }
}

/* Tablet: 1024px und darunter */
@media (max-width: 1024px) {
  .header-content {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }
}

/* Mobil: 700px und darunter */
@media (max-width: 700px) {
  .header-content {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .header-title {
    font-size: 2rem;
  }
  
  .header::before {
    background: rgba(0, 0, 0, 0.35);
  }
}

/* Mobil: 480px und darunter */
@media (max-width: 480px) {
  .header-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-title {
    font-size: 1.5rem;
  }
  
  .header::before {
    background: rgba(0, 0, 0, 0.4);
  }
}

/* Wenn Werteleiste ausgeblendet ist */
.header--no-werteleiste .header-content {
  padding-bottom: 2rem;
}

/* ==========================================================================
   Werteleiste
   ========================================================================== */

.werteleiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: var(--werteleiste-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 44, 79, 0.9);
  backdrop-filter: blur(10px);
  z-index: 2;
  box-sizing: border-box;
  gap: 0;
  /* Padding für Desktop */
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
}

.werte-paar {
  display: grid;
  grid-template-columns: 0.75fr 2.25fr; /* Text deutlich schmaler, Zahlen deutlich breiter */
  align-items: center;
  min-width: 0;
  flex: 1 1 0;
  padding: 0 1.2em;
  gap: 0.6em;
  max-width: 400px;
  position: relative;
}

.werte-zahl {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: right;
  color: var(--white);
  display: block;
  letter-spacing: -0.5px;
  transition: color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

.werte-zahl-secondary {
  font-size: 1.4rem;
  font-weight: 500;
}

.werte-beschreibung {
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
  color: var(--white);
  margin-left: 0.4em;
  word-break: break-word;
  font-weight: 300;
  opacity: 0.95;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Animationen */
.werte-zahl.counting {
  color: var(--white);
  animation: pulse 1.5s ease-in-out;
}

.werte-zahl.counted {
  color: var(--white);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Responsive */
@media (max-width: 1600px) {
  /* Werteleiste ab 1600px ausblenden */
  .werteleiste {
    display: none;
  }
}

/* Accessibility & Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
  .header-bg,
  .werte-zahl,
  .werte-beschreibung {
    transition: none;
    animation: none;
  }
}

@media (prefers-contrast: high) {
  .werteleiste {
    background: rgba(0, 44, 79, 0.95);
    border-top: 2px solid var(--white);
  }
  
  .werte-zahl {
    color: var(--white);
  }
}

@media print {
  .header {
    height: auto;
    page-break-inside: avoid;
    background: var(--white);
  }
  
  .header-bg,
  .werteleiste {
    display: none;
  }
  
  .header-content {
    color: var(--blue);
    padding: 2rem;
  }
  
  .header-title {
    color: var(--blue);
    text-shadow: none;
    margin-bottom: 1.5rem
  }
}

/* Keyboard Navigation */
.keyboard-navigation *:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ==========================================================================
   Social Leiste
   ========================================================================== */

.sociallinks {
  width: 100%;
  margin: 0;
  margin-bottom: 2em;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  box-sizing: border-box;
}

.sociallinks-divider {
  width: calc(100% - 2 * 144px);
  max-width: none;
  border-top: 2px solid #002C4F;
  margin: 0 auto 2.5em auto;
  box-sizing: border-box;
}

.sociallinks-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: calc(100% - 2 * 144px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 144px;
  box-sizing: border-box;
}

.social-icon {
  display: flex;
  margin: 0 2.25em;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: transparent;
  border-radius: 0;
  text-decoration: none;
  transition: none;
  outline: none;
  flex-shrink: 0;
}

.social-icon img,
.social-icon svg {
  width: 40px;
  height: 40px;
  display: block;
  background: transparent;
}

/* @media (max-width: 1200px) */
@media (max-width: 1200px) {
  .sociallinks-divider {
    width: calc(100% - 2 * 72px);
    margin-bottom: 2.25em;
  }

  .sociallinks-icons {
    width: calc(100% - 2 * 72px);
    padding: 0 72px;
  }

  .social-icon {
    width: 48px;
    height: 48px;
    margin: 0 2em;
  }

  .social-icon img,
  .social-icon svg {
    width: 38px;
    height: 38px;
  }
}

/* @media (max-width: 1024px) */
@media (max-width: 1024px) {
  .sociallinks-divider {
    width: calc(100% - 2 * 72px);
    margin-bottom: 2em;
  }

  .sociallinks-icons {
    width: calc(100% - 2 * 72px);
    padding: 0 72px;
    flex-wrap: wrap;
  }

  .social-icon {
    width: 44px;
    height: 44px;
    margin: 0.75em 1.25em;
    flex: none;
  }

  .social-icon img,
  .social-icon svg {
    width: 35px;
    height: 35px;
  }
}

/* @media (max-width: 700px) */
@media (max-width: 700px) {
  .sociallinks {
    padding: 12px 0;
  }

  .sociallinks-divider {
    width: calc(100% - 2 * 24px);
    margin-bottom: 1.75em;
  }

  .sociallinks-icons {
    width: calc(100% - 2 * 24px);
    padding: 0 24px;
    flex-wrap: wrap;
  }

  .social-icon {
    width: 40px;
    height: 40px;
    margin: 0.65em 1em;
    flex: none;
  }

  .social-icon img,
  .social-icon svg {
    width: 32px;
    height: 32px;
  }
}

/* @media (max-width: 480px) */
@media (max-width: 480px) {
  .sociallinks {
    padding: 8px 16px;
  }

  .sociallinks-divider {
    width: calc(100% - 2 * 16px);
    margin: 0 auto 1.5em auto;
  }

  .sociallinks-icons {
    width: calc(100% - 2 * 16px);
    padding: 0 16px;
    flex-wrap: wrap;
  }

  .social-icon {
    width: 36px;
    height: 36px;
    margin: 0.5em 0.75em;
    flex: none;
  }

  .social-icon img,
  .social-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--blue);
  color: var(--white);
  padding: 3em var(--navbar-padding-desktop) 1em var(--navbar-padding-desktop);
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
}

/* 1. Teil: Footer Links */
.footer-links {
  display: flex;
  justify-content: space-between;
  gap: 3em;
  flex-wrap: wrap;
  margin-bottom: 2em;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.footer-col {
  flex: 1 1 0; 
  min-width: 140px;
  margin-bottom: 1em;
  max-width: 220px;
}

.footer-col-title {
  margin: 0 0 1.5em 0;
  font-size: 1.1em;
  font-weight: 800;
  color: var(--white);
}

.footer-col-title a {
  color: var(--white);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1em;
  transition: color 0.3s ease;
}

.footer-col-title a:hover,
.footer-col-title a:focus {
  color: var(--beige);
}

.footer-col a {
  color: var(--white);
  text-decoration: none;
  font-size: 1em;
  font-weight: 400;
  transition: color 0.3s ease;
  display: block;        
  margin-bottom: 0.5em;
  line-height: 1.4;
}

.footer-col a:hover,
.footer-col a:focus {
  color: var(--beige);
}

/* 2. Teil: Logo linksbündig und Up-Button rechtsbündig */
.footer-middle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2em;
  padding: 0;
}

.footer-logo-col {
  display: flex;
  align-items: center;
}

.footer-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
  padding: 0px;
}

.footer-up-col {
  display: flex;
  align-items: center;
  margin-right: 0.3em;
}

.footer-up {
  background: transparent;
  border: 2px solid var(--beige);
  border-radius: 0;
  width: 42px;
  height: 42px;
  color: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  box-sizing: border-box;
}

.footer-up:focus {
  outline: 2px solid var(--beige);
  outline-offset: 2px;
}

.footer-up svg {
  display: block;
  width: 32px;
  height: 32px;
}

.footer-up svg polyline,
.footer-up svg path,
.footer-up svg line {
  stroke: currentColor;
  fill: none;
  transition: stroke 0.3s, fill 0.3s;
}

.footer-up:hover,
.footer-up:focus {
  background: var(--beige);
  color: var(--blue);
  border-color: var(--beige);
}

/* 3. Teil: Bottom-Bereich */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  gap: 3em;
  flex-wrap: wrap;
  row-gap: 1.5em;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1;
  row-gap: 1.5em;
}

.footer-bottom-links > * {
  margin: 0.4em 0.6em 0.4em 0;
}

.footer-bottom-links > *:last-child {
  margin: 0.4em 0 0.4em 0;
}

.footer-copyright-text,
.footer-bottom-links a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 1em;
  white-space: nowrap;
  display: inline-block;
}

.footer-bottom-links a:hover,
.footer-bottom-links a:focus {
  color: var(--beige);
}

.footer-logo-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-left: 2em;
}

.footer-logo-wide {
  height: 2em;
  width: auto;
  object-fit: contain;
  padding: 4px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .footer {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }
  
  .footer-links {
    gap: 2em;
  }
  
  .footer-bottom {
    row-gap: 1.5em;
  }
  
  .footer-bottom-links {
    row-gap: 1.5em;
  }
  
  .footer-bottom-links > * {
    margin: 0.4em 0.6em 0.4em 0;
  }
  
  .footer-bottom-links > *:last-child {
    margin: 0.4em 0 0.4em 0;
  }
}

@media (max-width: 1024px) {
  .footer {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
  
  .footer-links,
  .footer-middle,
  .footer-bottom {
    padding: 0;
  }
  
  .footer-links {
    gap: 1.5em;
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 2.5em;
    row-gap: 2em;
  }
  
  .footer-bottom-links {
    justify-content: center;
    text-align: center;
    width: 100%;
    row-gap: 1.8em;
  }
  
  .footer-bottom-links > * {
    margin: 0.3em 0.5em;
  }
  
  .footer-bottom-links > *:last-child {
    margin: 0.3em 0.5em;
  }
  
  .footer-logo-bottom {
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .footer {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
    padding-top: 1.5em;
  }
  
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
    padding: 0;
    margin-bottom: 2em;
  }
  
  .footer-col {
    min-width: 0;
    max-width: none;
  }
  
  .footer-middle,
  .footer-bottom {
    padding: 0;
  }
  
  .footer-middle {
    flex-direction: column;
    gap: 1.2em;
    align-items: flex-start;
    margin-bottom: 2em;
  }
  
  .footer-logo-col {
    margin-bottom: 0.6em;
  }
  
  .footer-up-col {
    margin-right: 0;
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2em;
    row-gap: 2em;
  }
  
  .footer-bottom-links {
    flex-direction: column;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    row-gap: 1.5em;
  }
  
  .footer-bottom-links > * {
    margin: 0.4em 0;
    width: 100%;
    display: block;
  }
  
  .footer-bottom-links > *:last-child {
    margin: 0.4em 0;
  }
  
  .footer-logo-bottom {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    margin-top: 1em;
  }
  
  .footer-bottom-links a,
  .footer-copyright-text {
    font-size: 0.95em;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 1.5em 16px 1em 16px;
  }
  
  .footer-links,
  .footer-middle,
  .footer-bottom {
    padding: 0;
  }
  
  .footer-col a {
    margin-bottom: 0.4em;
    font-size: 0.95em;
  }
  
  .footer-col-title {
    font-size: 1em;
    margin-bottom: 1.2em;
  }
  
  .footer-links {
    margin-bottom: 1.8em;
  }
  
  .footer-middle {
    margin-bottom: 1.8em;
    gap: 1em;
  }
  
  .footer-logo-col {
    margin-bottom: 0.5em;
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.8em;
    row-gap: 1.8em;
  }
  
  .footer-bottom-links {
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    row-gap: 1.5em;
  }
  
  .footer-bottom-links > * {
    margin: 0.3em 0;
    width: 100%;
    display: block;
  }
  
  .footer-bottom-links > *:last-child {
    margin: 0.3em 0;
  }
  
  .footer-logo-bottom {
    justify-content: flex-start;
    width: 100%;
    margin-top: 1em;
  }
  
  .footer-bottom-links a,
  .footer-copyright-text {
    font-size: 0.9em;
    white-space: normal;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .footer-col a,
  .footer-bottom-links a,
  .footer-up {
    transition: none;
  }
  
  .footer-up:hover,
  .footer-up:focus {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .footer {
    border-top: 1px solid var(--white);
  }
  
  .footer-up {
    border-width: 3px;
  }
}

@media print {
  .footer {
    background: var(--white);
    color: var(--blue);
    border-top: 1px solid var(--blue);
  }
  
  .footer-col a,
  .footer-bottom-links a,
  .footer-col-title a {
    color: var(--blue);
  }
  
  .footer-up {
    display: none;
  }
}

/* ==========================================================================  
   Infotext-Absatzvorlage
   ========================================================================== */

.infotext {
  margin: 0;
  padding: 4em 0 2em 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--white);
}

.infotext.infotext-bg-beige {
  background: var(--beige);
}

/* Content-Wrapper */
.infotext-content {
  width: 100%;
  padding: 0 var(--navbar-padding-desktop);
  box-sizing: border-box;
}


/* Zentriertes Layout */
.infotext.infotext-center .infotext-content {
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.infotext.infotext-center .description {
  padding: 0 260px;
}

/* Linksbündiges Layout */
.infotext.infotext-left .infotext-content {
  text-align: left;
}

@media (max-width: 1500px) {
  
  .infotext.infotext-center .description {
    padding: 0 160px;
  }

}

/* Responsive */
@media (max-width: 1200px) {
  .infotext-content {
    padding: 0 var(--navbar-padding-tablet);
  }
  
  .infotext.infotext-center .description {
    padding: 0 100px;
  }

}

@media (max-width: 1024px) {
  .infotext {
    padding: 3em 0;
  }
  
  .infotext-content {
    padding: 0 var(--navbar-padding-mobile);
  }
  
  .infotext.infotext-center .description {
    padding: 0 80px;
  }

  .infotext.infotext-left {
    text-align: left;
  }

  .infotext-content {
    text-align: center;
  }
  
  .infotext.infotext-center .description {
    max-width: 80%;
  }

  .infotext.infotext-left .description {
    max-width: none;
  }

}

@media (max-width: 700px) {
  .infotext {
    padding: 2.5em 0;
  }
  
  .infotext-content {
    padding: 0 var(--navbar-padding-mobile);
  }

}

@media (max-width: 480px) {
  .infotext {
    padding: 2em 0;
  }

  .infotext.infotext-center .description {
    padding: 0 16px;
  }
  
  .infotext-content {
    padding: 0 16px;
  }

}

/* ==========================================================================  
   Karrieremöglichkeiten - Module
   ========================================================================== */

.karrieremoeglichkeiten {
  margin: 0;
  padding: 2rem 0 2rem 0;
  
  box-sizing: border-box;
}

/* Header mit Intro-Line und Headline */
.karrieremoeglichkeiten-header {
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 8.75rem;
  padding-right: 8.75rem;
  text-align: left;
  color: var(--blue);
}

.karrieremoeglichkeiten-header .intro-line,
.karrieremoeglichkeiten-header .headline {
  margin: 0;
}

/* Kacheln Container */
.karrieremoeglichkeiten-kacheln {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  padding: 1.5em 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Letzte Kachel über ganze Breite, wenn ungerade Anzahl */
.kachel:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Basis-Styling für Kachel-Container */
.kachel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 400px;
  color: var(--white);
  font-size: 2.0em;
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  
  /* Standard Hover-Farbe */
  --hover-rgb: 216, 202, 184;
}

/* Farb-spezifische Klassen basierend auf data-hover-color */
.kachel[data-hover-color="green"] {
  --hover-rgb: 133, 188, 34;
}

.kachel[data-hover-color="orange"] {
  --hover-rgb: 245, 156, 10;
}

.kachel[data-hover-color="purple"] {
  --hover-rgb: 152, 24, 129;
}

.kachel[data-hover-color="red"] {
  --hover-rgb: 221, 19, 66;
}

/* Hintergrundbild-Layer */
.kachel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-image: inherit;
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Schwarzer Gradient Overlay */
.kachel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: 1;
  transition: background 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

/* Hover */
.kachel:hover::after,
.kachel:focus::after {
  background: 
    linear-gradient(135deg, 
      rgba(var(--hover-rgb), 0) 0%, 
      rgba(var(--hover-rgb), 0.3) 50%, 
      rgba(var(--hover-rgb), 0.6) 100%),
    linear-gradient(to bottom, 
      rgba(0, 0, 0, 0) 0%, 
      rgba(0, 0, 0, 0.4) 100%);
}

/* Bild zoomt beim Hover */
.kachel:hover::before,
.kachel:focus::before {
  transform: scale(1.1);
}

/* Titel der Kachel */
.kachel-titel {
  background: transparent;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  position: relative;
  z-index: 3;
}

/* Hover- und Focus-Effekte */
.kachel:hover,
.kachel:focus {
  z-index: 10;
  outline: none;
}

/* Fallback für fehlende Bilder */
.kachel:not([style*="background-image"]) {
  background: linear-gradient(135deg, var(--blue) 0%, rgba(0, 44, 79, 0.8) 100%);
}

.kachel:not([style*="background-image"])::after {
  background: none;
}

/* Focus-Visible für bessere Keyboard Navigation */
.kachel:focus-visible {
  outline: 3px solid var(--beige);
  outline-offset: 3px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .kachel::before {
    transition: none;
  }
  
  .kachel:hover::before,
  .kachel:focus::before {
    transform: none;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .kachel-titel {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--white);
  }
  
  .kachel:focus {
    outline: 4px solid var(--white);
  }
}

/* Tablet Styles (ab 1200px abwärts) */
@media (max-width: 1200px) {
  .karrieremoeglichkeiten-header {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
  
  .karrieremoeglichkeiten-kacheln {
    gap: 1.2em;
  }
  
  .kachel {
    height: 350px;
  }
}

/* Mobile Styles (ab 1024px abwärts) */
@media (max-width: 1024px) {
  .karrieremoeglichkeiten-header {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
    padding-top: 1em;
    padding-bottom: 1em;
  }
  
  .karrieremoeglichkeiten-kacheln {
    grid-template-columns: 1fr;
    gap: 1em;
  }
  
  .kachel {
    width: 100%;
    height: 180px;
  }
  
  .kachel-titel {
    font-size: 1.2em;
    padding: 0.6em 1em;
  }
}

/* Extra Small Mobile (480px und kleiner) */
@media (max-width: 480px) {
  .karrieremoeglichkeiten-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .kachel {
    height: 160px;
  }
  
  .kachel-titel {
    font-size: 1em;
    padding: 0.5em 0.8em;
  }
}

/* ==========================================================================  
   Benefits Module
   ========================================================================== */

.benefits-section {
  padding: 4rem 0;
  background-color: rgba(216, 202, 184, 0.3);
}

.benefits-section .container {
  max-width: 100%;
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .benefits-section .container {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }
}

@media (max-width: 1024px) {
  .benefits-section .container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
}

@media (max-width: 700px) {
  .benefits-section .container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
}

/* Grid für die Benefits - Maximal 3 Spalten */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

/* Responsive für Tablet (2 Spalten) - ab 1500px */
@media (max-width: 1500px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* Responsive für Mobile (1 Spalte) */
@media (max-width: 700px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Einzelner Benefit - Icon links, Text rechts */
.benefit-item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1.5rem;
  margin: 0;
}

/* Benefit-Icons - Vergrößert */
.benefit-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
}

/* Benefit-Texte - Vergrößert mit margin-left für Abstand */
.benefit-text {
  font-size: 1.125rem;
  color: var(--blue);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  margin-left: 1.5rem;

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  overflow-wrap: break-word;
  word-break: normal;
}

/* ==========================================================================  
   Kontaktbereich Module
   ========================================================================== */

.kontaktmodul {
  margin: 0;
  padding: 4em 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--white);
}

.kontaktmodul .infotext-content {
  width: 100%;
  padding: 0 var(--navbar-padding-desktop, 144px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  text-align: left;
}

.kontaktmodul .kontakt-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Responsive Anpassungen fürs Modul */
@media (max-width: 1200px) {
  .kontaktmodul .infotext-content {
    padding: 0 var(--navbar-padding-tablet, 72px);
  }
}

@media (max-width: 1024px) {
  .kontaktmodul {
    padding: 3em 0;
  }
  .kontaktmodul .infotext-content {
    padding: 0 var(--navbar-padding-mobile, 24px);
    grid-template-columns: 1fr;
    gap: 2rem;
  }

}

@media (max-width: 700px) {
  .kontaktmodul {
    padding: 2.5em 0;
  }
  .kontaktmodul .infotext-content {
    padding: 0 var(--navbar-padding-mobile, 24px);
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

}

@media (max-width: 480px) {
  .kontaktmodul {
    padding: 2em 0;
  }
  .kontaktmodul .infotext-content {
    padding: 0 16px;
    grid-template-columns: 1fr;
    gap: 1em;
  }

}

/* ==========================================================================  
   Kapiteltrenner - Module
   ========================================================================== */

.kapiteltrenner {
  position: relative;
  width: 100vw;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

/* Niedrige Höhe Variante */
.kapiteltrenner--niedrig {
  min-height: 320px;
}

.kapiteltrenner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 400px;
  padding: 0;
}

.kapiteltrenner--niedrig .kapiteltrenner-overlay {
  min-height: 280px;
}

/* Seitenabstand für den Inhalt */
.kapiteltrenner .section-content {
  margin: 0 var(--navbar-padding-desktop) -10px var(--navbar-padding-desktop);
  padding: 0;
  color: var(--white);
  text-align: left;
  display: block;
  width: auto;
  flex-shrink: 0;
}

/* Zitattrenner spezifische Styles */
.zitattrenner .kapiteltrenner-overlay {
  justify-content: center;
  align-items: flex-start;
}

.zitattrenner .section-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 var(--navbar-padding-desktop);
  padding: 40px 0;
  text-align: left;
}

/* SVG Icon Styling */
.zitattrenner .zitat-bild {
  margin-bottom: -30px;
  margin-left: -30px;
  max-width: 100%;
  display: block;
  width: auto;
}

.zitattrenner-icon {
  width: 160px;
  height: 160px;
  display: block;
  margin: 0;
  padding: 0;
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

/* Reihenfolge für Zitattrenner: Icon -> Headline -> Intro-Line */
.zitattrenner .headline {
  order: 2;
  margin-top: 0;
  margin-bottom: 0px;
  padding-top: 0.0rem;
  color: var(--white);
  text-align: left;
}

.zitattrenner .intro-line {
  order: 3;
  margin-bottom: 20px;
  color: var(--white);
  text-align: left;
}

.zitattrenner .button {
  order: 4;
}

/* Button und Links */
.kapiteltrenner .section-content button,
.kapiteltrenner .section-content a,
.kapiteltrenner .section-content .btn {
  width: auto !important;
  flex-shrink: 0 !important;
  align-self: flex-end !important;
  margin: -10px !important;
}

.zitattrenner .section-content button,
.zitattrenner .section-content a,
.zitattrenner .section-content .btn {
  align-self: flex-start !important;
}

/* ========== Responsive Padding ========== */
@media (max-width: 1200px) {
  .kapiteltrenner .section-content {
    margin-left: var(--navbar-padding-tablet);
    margin-right: var(--navbar-padding-tablet);
    margin-bottom: -10px;
  }
  
  .zitattrenner .section-content {
    margin-left: var(--navbar-padding-tablet);
    margin-right: var(--navbar-padding-tablet);
  }
}

@media (max-width: 1024px) {
  .kapiteltrenner .section-content {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
    margin-bottom: -10px;
  }
  
  .zitattrenner .section-content {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
  }
  
  .zitattrenner-icon {
    width: 140px; /* Doppelt so groß (70px × 2) */
    height: 140px;
  }
}

@media (max-width: 700px) {
  .kapiteltrenner .section-content {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
    margin-bottom: -10px;
  }
  
  .zitattrenner .section-content {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
    padding: 30px 0;
  }
  
  .zitattrenner-icon {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .kapiteltrenner .section-content {
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: -10px;
  }
  
  .zitattrenner .section-content {
    margin-left: 16px;
    margin-right: 16px;
    padding: 24px 0;
  }
  
  .zitattrenner-icon {
    width: 100px;
    height: 100px;
  }
  
  .zitattrenner .zitat-bild {
    margin-bottom: -10px;
  }
}

/* ==========================================================================  
   1+3 Keyfacts Module
   ========================================================================== */

/* Container für das gesamte Modul */
.two-row-module {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Erste Zeile - Blauer Hintergrund (doppelte Höhe) */
.module-row-blue {
  width: 100%;
  background-color: var(--blue);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

/* Zweite Zeile - Beiger Hintergrund mit Transparenz */
.module-row-beige {
  width: 100%;
  background-color: rgba(216, 202, 184, 0.6); /* Beige mit 20% Transparenz */
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

/* Content-Wrapper für Einschübe gemäß Standard-Padding */
.module-content-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* Desktop: 144px Padding links/rechts */
@media screen and (min-width: 1024px) {
  .module-content-wrapper {
    padding-left: var(--navbar-padding-desktop);
    padding-right: var(--navbar-padding-desktop);
  }
}

/* Tablet: 72px Padding links/rechts */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .module-content-wrapper {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }
}

/* Mobile: 24px Padding links/rechts */
@media screen and (max-width: 767px) {
  .module-content-wrapper {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
}

/* Überschrift in der ersten Zeile */
.module-headline {
  color: var(--white);
  font-size: 2.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  text-align: center;
}

/* Container für die drei Spalten */
.module-columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
}

/* Einzelne Spalte */
.module-column {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}

/* Trennlinien zwischen den Spalten */
.module-column:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background-color: var(--blue);
}

/* Text in den Spalten */
.column-text {
  color: var(--blue);
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.8;
  opacity: 0.9;
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  max-width: 100%;
}

/* Responsive Anpassungen für Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .module-headline {
    font-size: 2.4em;
    line-height: 1.5em;
  }
  
  .module-row-blue {
    min-height: 180px;
  }
}

/* Responsive Anpassungen für Mobile */
@media screen and (max-width: 767px) {
  /* Spalten untereinander auf Mobile */
  .module-columns {
    flex-direction: column;
    gap: 0;
  }
  
  .module-column {
    width: 100%;
    padding: 15px;
  }
  
  /* Trennlinien horizontal auf Mobile */
  .module-column:not(:last-child)::after {
    left: 10%;
    right: 10%;
    top: auto;
    bottom: 0;
    width: auto;
    height: 1px;
  }
  
  /* Erste Zeile etwas kleiner auf Mobile */
  .module-row-blue {
    min-height: 150px;
    padding: 30px 0;
  }
  
  /* Überschrift etwas kleiner auf Mobile */
  .module-headline {
    font-size: 2.0em;
    line-height: 1.6;
  }
}

/* ========================================
   Ausschreibung Einleitung - Module
   ======================================== */

.job-offer-section {
  width: 100%;
  padding: 60px var(--navbar-padding-desktop);
  background-color: var(--white);
  box-sizing: border-box;
}

.job-offer-container {
  width: 100%;
  box-sizing: border-box;
}

/* Button Container */
.button-container {
  margin-top: 40px;
}

.buttons-wrapper,
.no-offer-message {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* No Offer Actions - zweite Zeile */
.no-offer-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  margin-left: 0;
}

.no-offer-actions .button {
  margin-left: 0 !important;
}

/* Print Button */
.print-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.print-button svg {
  width: 24px;
  height: 24px;
  stroke: var(--blue);
  transition: stroke 0.3s ease;
}

.print-button:hover svg {
  stroke: var(--beige);
}

/* No Offer Message */
.no-offer-message p {
  margin: 0;
  font-style: italic;
  color: var(--blue);
  width: 100%;
}

/* Tablets - Large (max-width: 1200px) */
@media (max-width: 1200px) {
  .job-offer-section {
    padding: 50px var(--navbar-padding-tablet);
  }
}

/* Tablets - Medium (max-width: 1024px) */
@media (max-width: 1024px) {
  .job-offer-section {
    padding: 40px var(--navbar-padding-tablet);
  }
}

/* Mobile - Small Tablets (max-width: 700px) */
@media (max-width: 700px) {
  .job-offer-section {
    padding: 32px var(--navbar-padding-mobile);
  }
  
  .button-container {
    margin-top: 32px;
  }
  
  .buttons-wrapper,
  .no-offer-message {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .no-offer-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .print-button {
    align-self: flex-start;
  }
}

/* Mobile - Extra Small (max-width: 480px) */
@media (max-width: 480px) {
  .job-offer-section {
    padding: 16px;
  }
  
  .print-button {
    width: 44px;
    height: 44px;
  }
  
  .print-button svg {
    width: 20px;
    height: 20px;
  }
}

@media print {
  .print-button {
    display: none;
  }
}

/* ========================================
   Ausschreibungskeyfacts - Module
   ======================================== */

.job-keyfacts-section {
  width: 100%;
  background-color: rgba(216, 202, 184, 0.2);
  padding: 30px 0;
  margin-bottom: 40px;
  box-sizing: border-box;
}

.job-keyfacts-container {
  width: 100%;
  padding: 0 var(--navbar-padding-desktop);
  box-sizing: border-box;
}

.job-keyfacts-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.job-keyfact-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 40px 32px;
  border-right: 2px solid var(--beige);
  text-align: left;
  box-sizing: border-box;
}

.job-keyfact-column:last-child {
  border-right: none;
}

/* Job Keyfact Label */
.job-keyfact-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0 0 12px 0;
}

/* Job Keyfact Value */
.job-keyfact-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
  word-wrap: break-word;
}

/* Tablets - Large (max-width: 1200px) */
@media (max-width: 1200px) {
  .job-keyfacts-section {
    margin-bottom: 36px;
  }
  
  .job-keyfacts-container {
    padding: 0 var(--navbar-padding-tablet);
  }
  
  .job-keyfact-column {
    padding: 36px 28px;
  }
  
  .job-keyfact-value {
    font-size: 18px;
  }
}

/* Tablets - Medium (max-width: 1024px) */
@media (max-width: 1024px) {
  .job-keyfacts-section {
    margin-bottom: 32px;
  }
  
  .job-keyfacts-container {
    padding: 0 var(--navbar-padding-tablet);
  }
  
  .job-keyfacts-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .job-keyfact-column {
    padding: 32px 24px;
  }
  
  .job-keyfact-value {
    font-size: 16px;
  }
}

/* Mobile - Small Tablets (max-width: 700px) */
@media (max-width: 700px) {
  .job-keyfacts-section {
    padding: 40px 0;
    margin-bottom: 24px;
  }
  
  .job-keyfacts-container {
    padding: 0 var(--navbar-padding-mobile);
  }
  
  .job-keyfacts-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .job-keyfact-column {
    padding: 28px 20px;
  }
  
  .job-keyfact-label {
    font-size: 12px;
  }
  
  .job-keyfact-value {
    font-size: 14px;
  }
}

/* Mobile - Extra Small (max-width: 480px) */
@media (max-width: 480px) {
  .job-keyfacts-section {
    padding: 32px 0;
    margin-bottom: 16px;
  }
  
  .job-keyfacts-container {
    padding: 0 16px;
  }
  
  .job-keyfacts-row {
    grid-template-columns: 1fr;
  }
  
  .job-keyfact-column {
    padding: 24px 16px;
    border-right: none;
    border-bottom: 2px solid var(--blue);
  }
  
  .job-keyfact-column:last-child {
    border-bottom: none;
  }
  
  .job-keyfact-label {
    font-size: 11px;
  }
  
  .job-keyfact-value {
    font-size: 12px;
  }
}

@media print {
  .job-keyfacts-section {
    background-color: transparent;
    margin-bottom: 20px;
  }
  
  .job-keyfact-column {
    border-right: 1px solid var(--blue);
    border-right-style: dashed;
  }
}


/* ========================================
   Ausschreibungsabschnitt - Module
   ======================================== */

.job-section {
  width: 100%;
  padding: 0 var(--navbar-padding-desktop);
  background-color: var(--white);
  box-sizing: border-box;
}

.job-section-container {
  width: 100%;
  box-sizing: border-box;
}

/* Job Section Intro */
.job-section-intro {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0px;
  color: var(--blue);
  margin: 0 0 16px 0;
  text-align: left;
}

/* Tablets - Large (max-width: 1200px) */
@media (max-width: 1200px) {
  .job-section {
    padding: 0 var(--navbar-padding-tablet);
  }
  
  .job-section-intro {
    font-size: 22px;
  }
}

/* Tablets - Medium (max-width: 1024px) */
@media (max-width: 1024px) {
  .job-section {
    padding: 0 var(--navbar-padding-tablet);
  }
  
  .job-section-intro {
    font-size: 20px;
  }
}

/* Mobile - Small Tablets (max-width: 700px) */
@media (max-width: 700px) {
  .job-section {
    padding: 0 var(--navbar-padding-mobile);
  }
  
  .job-section-intro {
    font-size: 18px;
  }
}

/* Mobile - Extra Small (max-width: 480px) */
@media (max-width: 480px) {
  .job-section {
    padding: 0 16px;
  }
  
  .job-section-intro {
    font-size: 16px;
    margin: 0 0 12px 0;
  }
}

@media print {
  .job-section {
    padding: 0 12px;
  }
}

/* ========================================
   Ausschreibungsbenefits - Module
   ======================================== */

.job-benefits-section {
  width: 100%;
  padding: 0 var(--navbar-padding-desktop);
  background-color: var(--white);
  box-sizing: border-box;
  margin-bottom: 40px;
}

.job-benefits-container {
  width: 100%;
  box-sizing: border-box;
}

/* Benefits Grid - 3 Spalten */
.job-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  margin-top: 32px;
  box-sizing: border-box;
}

/* Einzelner Benefit - Flexbox für Icon + Text */
.job-benefit-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Benefit Icon - Blau, rund, weiß Symbol */
.job-benefit-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
  margin-right: 1rem;
}

/* Benefit Text - Bold, zentriert zum Bild, linksbündig */
.job-benefit-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
  text-align: left;
  margin: 0;
  flex: 1;
}

/* Tablets - Large (max-width: 1200px) */
@media (max-width: 1200px) {
  .job-benefits-section {
    padding: 0 var(--navbar-padding-tablet);
    margin-bottom: 36px;
  }
  
  .job-benefits-grid {
    gap: 36px;
  }
  
  .job-benefit-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    margin: 0 16px 0 0;
  }
  
  .job-benefit-text {
    font-size: 15px;
  }
}

/* Tablets - Medium (max-width: 1024px) */
@media (max-width: 1024px) {
  .job-benefits-section {
    padding: 0 var(--navbar-padding-tablet);
    margin-bottom: 32px;
  }
  
  .job-benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  
  .job-benefit-icon {
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    margin: 0 16px 0 0;
  }
  
  .job-benefit-text {
    font-size: 15px;
  }
}

/* Mobile - Small Tablets (max-width: 700px) */
@media (max-width: 700px) {
  .job-benefits-section {
    padding: 0 var(--navbar-padding-mobile);
    margin-bottom: 24px;
  }
  
  .job-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
  }
  
  .job-benefit-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    margin: 0 16px 0 0;
  }
  
  .job-benefit-text {
    font-size: 14px;
  }
}

/* Mobile - Extra Small (max-width: 480px) */
@media (max-width: 480px) {
  .job-benefits-section {
    padding: 0 16px;
    margin-bottom: 16px;
  }
  
  .job-benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
  }
  
  .job-benefit-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    margin: 0 12px 0 0;
  }
  
  .job-benefit-text {
    font-size: 13px;
  }
}

@media print {
  .job-benefits-section {
    padding: 0 12px;
    margin-bottom: 20px;
  }
  
  .job-benefits-grid {
    gap: 20px;
  }
}

/* ========================================
   Ausschreibungskontakt - Module
   ======================================== */

.contact-section {
  width: 100%;
  background: var(--white);
  box-sizing: border-box;
  margin-bottom: 40px;
  margin-top: 50px;
}

.contact-container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--navbar-padding-desktop);
}

.contact-row {
  display: flex;
  align-items: flex-start;
}

.contact-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-col-left {
  flex: 0 0 70%;
  align-items: flex-start;
  justify-content: flex-start;
}

.contact-col-right {
  flex: 0 0 30%;
  align-items: flex-start;
  margin-left: 60px;
}

.button-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 !important;
  padding: 0 !important;
}

/* No Offer Actions - zweite Zeile */
.no-offer-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}

.no-offer-actions .button {
  margin-left: 0 !important;
}

/* Icon 1 - Abstand minimal */
.contact-col-left .contact-image-wrapper {
  margin-top: 4px !important;
}

.contact-image-wrapper {
  margin-top: 4px;
}

.contact-image {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--blue);
  box-sizing: border-box;
  display: block;
}

.contact-item-second {
  margin-top: 32px;
  padding-top: 32px;
}

/* Einleitungszeile bei Kontakt 2 ausblenden */
.contact-item-second .job-section-intro {
  display: none;
}

/* Tablets - Large (max-width: 1200px) */
@media (max-width: 1200px) {
  .contact-container {
    padding: 0 var(--navbar-padding-tablet);
  }
  
  .contact-col-right {
    margin-left: 45px !important;
  }
  
  .contact-section {
    margin-bottom: 36px;
    margin-top: 40px;
  }
  
  .contact-col-left {
    flex: 0 0 65%;
  }
  
  .contact-col-right {
    flex: 0 0 35%;
  }
}

/* Tablets - Medium (max-width: 1024px) */
@media (max-width: 1024px) {
  .contact-section {
    margin-bottom: 32px;
    margin-top: 36px;
  }
  
  .contact-col-left {
    flex: 0 0 60%;
  }
  
  .contact-col-right {
    flex: 0 0 40%;
    margin-left: 35px !important;
  }
}

/* Mobile - Stack Layout (max-width: 900px) */
@media (max-width: 900px) {
  .contact-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .contact-col-left, .contact-col-right {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 0 !important;
  }
  
  .contact-col-left {
    margin-bottom: 24px;
  }
  
  .contact-item-second {
    margin-top: 24px;
    padding-top: 24px;
  }
}

/* Mobile - Small Tablets (max-width: 700px) */
@media (max-width: 700px) {
  .contact-container {
    padding: 0 var(--navbar-padding-mobile);
  }
  
  .contact-image {
    width: 80px;
    height: 80px;
  }
  
  .contact-col-left .contact-image-wrapper {
    margin-top: 4px !important;
  }
  
  .contact-section {
    margin-bottom: 24px;
    margin-top: 32px;
  }
}

/* Mobile - Extra Small (max-width: 480px) */
@media (max-width: 480px) {
  .contact-section {
    margin-bottom: 16px;
    margin-top: 24px;
  }
  
  .contact-container {
    padding: 0 16px;
  }
  
  .contact-image {
    width: 64px;
    height: 64px;
  }
  
  .contact-col-left .contact-image-wrapper {
    margin-top: 4px !important;
  }
}

@media print {
  .contact-section {
    margin-bottom: 20px;
    margin-top: 10px;
  }
  
  .contact-container {
    padding: 0 12px;
  }
}

/* ========================================
   Eventslider - Module
   ======================================== */

.eventslider-background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Hintergrundfarben-Varianten */
.eventslider-background[data-background="white"] {
  background-color: var(--white);
}

.eventslider-background[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

.eventslider {
  padding: 3em 0;
  margin: 0 var(--navbar-padding-desktop);
}

.eventslider .section-content {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.eventslider-container {
  margin: 2.5em 0 3em 0;
  padding: 0;
  box-sizing: border-box;
}

.eventslider-wrapper {
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.eventslider-wrapper .eventslider {
  display: flex !important;
  flex-direction: row !important;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  width: 100%;
  padding: 0.5em 0;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) #f0f0f0;
  box-sizing: border-box;
  margin: 0;
}

.eventslider-wrapper .eventslider::-webkit-scrollbar {
  height: 8px;
}

.eventslider-wrapper .eventslider::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.eventslider-wrapper .eventslider::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 10px;
}

.eventslider-wrapper .eventslider::-webkit-scrollbar-thumb:hover {
  background: #002854;
}

.eventslider-loading {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  height: 350px;
}

/* Event Kacheln */
.event-slide {
  position: relative;
  width: 400px;
  height: 400px;
  flex: 0 0 400px;
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  user-select: none;
  margin-right: 0.5em;
}

.event-slide:last-child {
  margin-right: 0;
}

/* Mit Link: Cursor-Pointer und Hover-Effekt */
.event-slide[role="button"] {
  cursor: pointer;
}

.event-slide[role="button"]:hover {
  transform: translateY(-4px) scale(1.03);
}

.event-slide[role="button"]:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.event-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

.event-date {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  background: var(--blue);
  color: var(--beige);
  padding: 0.25em 0.8em;
  font-size: 1.1em;
  font-weight: 800;
  letter-spacing: 0.03em;
  z-index: 2;
}

.event-info {
  padding: 1.2em 1em 1em 1em;
  color: var(--white);
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.event-title {
  font-size: 1.5em;
  font-weight: 500;
  margin-bottom: 0.8em;
  color: var(--white);
  line-height: 1.5;
}

.event-location-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  margin-left: 0.2em;
}

.event-location-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: -5px;
  margin-left: 0;
  margin-right: 5px;
}

.event-location-content {
  display: flex;
  flex-direction: column;
  font-size: 1.25em;
  line-height: 1.4;
}

.event-location {
  color: var(--white);
  margin-bottom: 0.25em;
}

.event-time {
  color: var(--white);
}

.eventslider .eventslider-navigation {
  margin-top: 3em;
}

.eventslider-navigation a {
  text-decoration: none;
  color: inherit;
}

/* ========== Responsive Padding ========== */
@media (max-width: 1200px) {
  .eventslider {
    margin: 0 var(--navbar-padding-tablet);
  }
}

@media (max-width: 1024px) {
  .eventslider {
    margin: 0 var(--navbar-padding-mobile);
  }
  
  .event-slide {
    margin-right: 0.5em !important;
  }
  
  .event-slide:last-child {
    margin-right: 0 !important;
  }
  
  .event-slide {
    width: 300px !important;
    flex: 0 0 300px !important;
    height: 300px !important;
  }
}

@media (max-width: 700px) {
  .eventslider {
    margin: 0 var(--navbar-padding-mobile);
    padding: 2.5em 0;
  }
  
  .eventslider-container {
    margin: 2em 0 2.5em 0;
  }
  
  .event-slide {
    margin-right: 0.5em !important;
    width: 280px !important;
    flex: 0 0 280px !important;
    height: 280px !important;
  }
  
  .event-slide:last-child {
    margin-right: 0 !important;
  }
  
  .eventslider .eventslider-navigation {
    margin-top: 2.5em;
  }
}

@media (max-width: 480px) {
  .eventslider {
    margin: 0 var(--navbar-padding-mobile);
    padding: 2em 0;
  }
  
  .eventslider-container {
    margin: 1.5em 0 2em 0;
  }
  
  .event-slide {
    margin-right: 0.5em !important;
    width: 250px !important;
    flex: 0 0 250px !important;
    height: 250px !important;
  }
  
  .event-slide:last-child {
    margin-right: 0 !important;
  }
  
  .event-date {
    font-size: 1em !important;
    padding: 0.2em 0.6em !important;
  }
  
  .eventslider .eventslider-navigation {
    margin-top: 2em;
  }
}

/* ========================================
   Eventkalender - Absatzvorlage
   ======================================== */

.eventkalender-background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.eventkalender-background[data-background="white"] {
  background-color: var(--white);
}

.eventkalender-background[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

.eventkalender {
  padding: 3em 0;
  margin: 0 var(--navbar-padding-desktop);
}

.eventkalender .section-content {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.eventkalender-wrapper {
  margin: 2.5em 0 3em 0;
  padding: 0;
  box-sizing: border-box;
}

.eventkalender-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.eventkalender-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  height: 400px;
  font-size: 1.1em;
}

/* Event Kacheln */
.event-card {
  position: relative;
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  user-select: none;
  transition: background-size 0.8s ease;
}

.event-card[role="button"] {
  cursor: pointer;
}

.event-card[role="button"]:hover {
  background-size: 250%;
}

.event-card[role="button"]:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.event-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

.event-date {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  background: var(--blue);
  color: var(--beige);
  padding: 0.25em 0.8em;
  font-size: 1.1em;
  font-weight: 800;
  letter-spacing: 0.03em;
  z-index: 2;
}

.event-info {
  padding: 1.2em 1em 1em 1em;
  color: var(--white);
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  box-sizing: border-box;
}

.event-title {
  font-size: 1.25em;
  font-weight: 700;
  margin-bottom: 0.8em;
  color: var(--white);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-location-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
}

.event-location-icon {
  flex-shrink: 0;
  width: 20px;
  height: 24px;
  margin-top: -2px;
  margin-right: 5px;
}

.event-location-content {
  display: flex;
  flex-direction: column;
  font-size: 0.85em;
  line-height: 1.4;
}

.event-location {
  color: var(--white);
  margin-bottom: 0.25em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-time {
  color: var(--white);
}

.eventkalender-load-more-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.eventkalender-load-more-container {
  display: flex;
  justify-content: center;
}

.eventkalender-load-more-container .button {
  margin: 0;
}

/* ========== Desktop: 3 Spalten (1200px+) ========== */
@media (min-width: 1201px) {
  .eventkalender-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5em;
  }

  .event-card {
    height: 400px;
  }
}

/* ========== Tablet: 2 Spalten (768px - 1200px) ========== */
@media (min-width: 769px) and (max-width: 1200px) {
  .eventkalender {
    margin: 0 var(--navbar-padding-tablet);
  }

  .eventkalender-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5em;
  }

  .event-card {
    height: 400px;
  }

  .event-date {
    font-size: 1em;
  }

  .event-title {
    font-size: 1.1em;
    margin-bottom: 0.6em;
  }

  .event-location-wrapper {
    gap: 0.6em;
  }

  .event-location-icon {
    width: 18px;
    height: 22px;
  }

  .event-location-content {
    font-size: 0.8em;
  }
}

/* ========== Mobile Portrait: 1 Spalte (bis 768px) ========== */
@media (max-width: 768px) {
  .eventkalender {
    padding: 2.5em 0;
    margin: 0 var(--navbar-padding-mobile);
  }

  .eventkalender-wrapper {
    margin: 2em 0 2.5em 0;
  }

  .eventkalender-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.5em;
    padding-bottom: 1em;
    scrollbar-width: thin;
    scrollbar-color: var(--blue) #f0f0f0;
  }
  .eventkalender-grid::-webkit-scrollbar {
    height: 8px;
  }
  .eventkalender-grid::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  .eventkalender-grid::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 10px;
  }
  .eventkalender-grid::-webkit-scrollbar-thumb:hover {
    background: #002854;
  }

  .event-card {
    min-width: 80vw;
    max-width: 80vw;
    height: 400px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin-right: 0.5em;
  }
  .event-card:last-child {
    margin-right: 0;
  }

  .event-date {
    font-size: 0.95em;
    padding: 0.2em 0.6em;
    top: 0.8em;
    left: 0.8em;
  }

  .event-info {
    padding: 1em 0.9em 0.8em 0.9em;
  }

  .event-title {
    font-size: 1em;
    margin-bottom: 0.5em;
  }

  .event-location-wrapper {
    gap: 0.5em;
  }

  .event-location-icon {
    width: 16px;
    height: 20px;
    margin-top: 0;
  }

  .event-location-content {
    font-size: 0.75em;
    line-height: 1.3;
  }

}

/* ========== Small Mobile (bis 480px) ========== */
@media (max-width: 480px) {
  .eventkalender {
    padding: 2em 0;
    margin: 0 var(--navbar-padding-mobile);
  }

  .eventkalender-wrapper {
    margin: 1.5em 0 2em 0;
  }

  .eventkalender-grid {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }

  .event-card {
    height: 300px;
  }

  .event-info {
    padding: 0.8em;
  }

  .event-date {
    font-size: 0.85em;
    padding: 0.15em 0.5em;
    top: 0.6em;
    left: 0.6em;
  }

  .event-title {
    font-size: 0.95em;
    margin-bottom: 0.4em;
  }

  .event-location-wrapper {
    gap: 0.4em;
  }

  .event-location-icon {
    width: 14px;
    height: 18px;
    margin-top: 2px;
  }

  .event-location-content {
    font-size: 0.7em;
  }

}

/* ========================================
   Generalslider - Module
   ======================================== */

/* Äußerer Wrapper für Hintergrundfarbe */
.generalslider-background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Hintergrundfarben-Varianten */
.generalslider-background[data-background="white"] {
  background-color: var(--white);
}

.generalslider-background[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

/* Innerer Wrapper für Struktur */
.generalslider {
  padding: 3em 0;
  margin: 0 var(--navbar-padding-desktop);
}

.generalslider .section-content {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.generalslider-wrapper {
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.generalslider-wrapper .generalslider {
  display: flex !important;
  flex-direction: row !important;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  width: 100%;
  padding: 0.5em 0;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) #f0f0f0;
  box-sizing: border-box;
  margin: 0;
}

.generalslider-wrapper .generalslider::-webkit-scrollbar {
  height: 8px;
}

.generalslider-wrapper .generalslider::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.generalslider-wrapper .generalslider::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 10px;
}

.generalslider-wrapper .generalslider::-webkit-scrollbar-thumb:hover {
  background: #002854;
}

.generalslider-loading {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  height: 350px;
}

/* General Item Kacheln */
.general-slide {
  position: relative;
  width: 400px;
  height: 400px;
  flex: 0 0 400px;
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  user-select: none;
  margin-right: 0.5em;
  cursor: pointer;
}

.general-slide:last-child {
  margin-right: 0;
}

.general-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
  transition: background 0.3s ease;
}

/* Bei Active: Beiger Overlay */
.general-slide.active .general-overlay {
  background: rgba(216, 202, 184, 0.9);
}

.general-info {
  padding: 1.2em 1.5em 1.6em 1.5em;
  color: var(--white);
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 80px;
}

/* Bei Active: Text blau, Info sichtbar */
.general-slide.active .general-info {
  color: var(--blue);
  justify-content: flex-start;
}

.general-title {
  font-size: 1.5em;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  flex-shrink: 0;
  margin-bottom: 0;
}

.general-slide.active .general-title {
  color: var(--blue);
  text-shadow: none;
  margin-bottom: 0.8em;
}

.general-description {
  font-size: 1.0em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--blue);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  margin-bottom: 1.2em;
}

.general-slide.active .general-description {
  opacity: 1;
  max-height: 150px;
}

.general-icon-plus {
  width: 20px;
  height: 20px;
  color: var(--white);
  flex-shrink: 0;
  stroke: white;
  margin-top: auto;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.general-slide.active .general-icon-plus {
  stroke: var(--blue);
  transform: rotate(45deg);
}

.generalslider .generalslider-navigation {
  margin-top: 3em;
}

.generalslider-navigation a {
  text-decoration: none;
  color: inherit;
}

/* ========== Responsive für Generalslider ========== */
@media (max-width: 1200px) {
  .generalslider {
    margin: 0 var(--navbar-padding-tablet);
  }
}

@media (max-width: 1024px) {
  .generalslider {
    margin: 0 var(--navbar-padding-mobile);
  }
  
  .general-slide {
    margin-right: 0.5em !important;
    width: 300px !important;
    flex: 0 0 300px !important;
    height: 300px !important;
  }
  
  .general-slide:last-child {
    margin-right: 0 !important;
  }
  
  .general-title {
    margin-bottom: 0;
  }
  
  .general-slide.active .general-title {
    margin-bottom: 0.8em;
  }
}

@media (max-width: 700px) {
  .generalslider {
    margin: 0 var(--navbar-padding-mobile);
    padding: 2.5em 0;
  }
  
  .general-slide {
    margin-right: 0.5em !important;
    width: 280px !important;
    flex: 0 0 280px !important;
    height: 280px !important;
  }
  
  .general-slide:last-child {
    margin-right: 0 !important;
  }
  
  .general-title {
    font-size: 1.1em;
    margin-bottom: 0;
  }
  
  .general-slide.active .general-title {
    margin-bottom: 0.8em;
  }
  
  .generalslider .generalslider-navigation {
    margin-top: 2.5em;
  }
}

@media (max-width: 480px) {
  .generalslider {
    margin: 0 var(--navbar-padding-mobile);
    padding: 2em 0;
  }
  
  .general-slide {
    margin-right: 0.5em !important;
    width: 250px !important;
    flex: 0 0 250px !important;
    height: 250px !important;
  }
  
  .general-slide:last-child {
    margin-right: 0 !important;
  }
  
  .general-title {
    font-size: 1em;
    margin-bottom: 0;
  }
  
  .general-slide.active .general-title {
    margin-bottom: 0.8em;
  }
  
  .general-icon-plus {
    width: 16px;
    height: 16px;
  }
  
  .generalslider .generalslider-navigation {
    margin-top: 2em;
  }
}

/* ========================================
   Generalüberblick - Module
   ======================================== */

/* Äußerer Wrapper für Hintergrundfarbe */
.generaloverview-background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Hintergrundfarben-Varianten */
.generaloverview-background[data-background="white"] {
  background-color: var(--white);
}

.generaloverview-background[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

/* Innerer Wrapper für Struktur */
.generaloverview {
  padding: 1.5em 0;
  margin: 0 var(--navbar-padding-desktop);
}

.generaloverview .section-content {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Grid Container */
.generaloverview-wrapper {
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.generaloverview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  width: 100%;
}

.generaloverview-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  height: 250px;
}

/* Overview Item Kacheln - Quadratisch */
.overview-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  min-height: 400px;
}

.overview-item:hover {
  box-shadow: 0 8px 24px rgba(0, 44, 79, 0.2), 0 2px 8px rgba(129, 173, 181, 0.2);
}

.overview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
  transition: background 0.3s ease;
}

/* Bei Active: Beiger Overlay */
.overview-item.active .overview-overlay {
  background: rgba(216, 202, 184, 0.9);
}

.overview-info {
  padding: 1.2em 1.5em 1.6em 1.5em;
  color: var(--white);
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 80px;
}

/* Bei Active: Text blau, Info sichtbar */
.overview-item.active .overview-info {
  color: var(--blue);
  justify-content: flex-start;
}

.overview-title {
  font-size: 1.0em;
  font-weight: 500;
  color: var(--white);
  line-height: 1.5;
  flex-shrink: 0;
  margin-bottom: 0;
}

.overview-item.active .overview-title {
  color: var(--blue);
  text-shadow: none;
  margin-bottom: 0.8em;
}

.overview-description {
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--blue);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  margin-bottom: 1.2em;
  font-weight: 400;
}

.overview-item.active .overview-description {
  opacity: 1;
  max-height: 150px;
}

.overview-icon-plus {
  width: 20px;
  height: 20px;
  color: var(--white);
  flex-shrink: 0;
  stroke: white;
  margin-top: auto;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.overview-item.active .overview-icon-plus {
  stroke: var(--blue);
  transform: rotate(45deg);
}

/* Load More Button Container */
.generaloverview-button-container {
  display: flex;
  justify-content: center;
  margin-top: 3em;
  padding: 2em 0;
}

/* ========== Responsive für Generalüberblick ========== */
@media (max-width: 1200px) {
  .generaloverview {
    margin: 0 var(--navbar-padding-tablet);
    padding: 1.5em 0;
  }

  .generaloverview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5em;
  }

  .overview-item {
    min-height: 300px;
  }
}

@media (max-width: 1024px) {
  .generaloverview {
    margin: 0 var(--navbar-padding-mobile);
    padding: 1.5em 0;
  }

  .generaloverview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5em;
  }

  .overview-item {
    min-height: 300px;
  }

  .overview-title {
    font-size: 1em;
  }

  .overview-description {
    font-size: 0.85em;
  }
}

@media (max-width: 700px) {
  .generaloverview {
    margin: 0 var(--navbar-padding-mobile);
    padding: 1.5em 0;
  }

  .generaloverview-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 0.5em;
    padding-bottom: 0.5em;
  }
  
  .generaloverview-grid::-webkit-scrollbar {
    height: 8px;
  }
  
  .generaloverview-grid::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  
  .generaloverview-grid::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 10px;
  }
  
  .generaloverview-grid::-webkit-scrollbar-thumb:hover {
    background: #002854;
  }

  .overview-item {
    flex: 0 0 300px;
    height: 300px;
    min-height: auto;
    aspect-ratio: auto;
    margin-right: 0.5em;
  }

  .overview-item:last-child {
    margin-right: 0;
  }

  .overview-title {
    font-size: 0.95em;
    margin-bottom: 0;
  }

  .overview-item.active .overview-title {
    margin-bottom: 0.6em;
  }

  .overview-description {
    font-size: 0.8em;
  }

  .generaloverview-button-container {
    margin-top: 2.5em;
  }
}

@media (max-width: 480px) {
  .generaloverview {
    margin: 0 var(--navbar-padding-mobile);
    padding: 1.5em 0;
  }

  .generaloverview-grid {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }

  .overview-item {
    min-height: auto;
    aspect-ratio: auto;
  }

  .overview-title {
    font-size: 0.9em;
  }

  .overview-description {
    font-size: 0.8em;
  }

  .overview-icon-plus {
    width: 16px;
    height: 16px;
  }

  .generaloverview-button-container {
    margin-top: 2em;
  }
}

/* ========================================
   FAQ - Module
   ======================================== */

.faq-section {
  padding: 80px var(--navbar-padding-desktop);
  background-color: var(--white);
}

.faq-section .intro-line {
  margin-bottom: 16px;
  margin-left: 0;
}

.faq-section .headline {
  margin-bottom: 48px;
  margin-left: 0;
}

/* ========== ICON NAVIGATION ========== */

.faq-icon-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
  width: 100%;
}

.faq-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0 40px 20px 40px;
}

/* Icon Circle */
.faq-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  opacity: 0.3;
}

/* Aktive Icon */
.faq-icon-item.active .faq-icon-circle {
  background-color: var(--blue);
  border-color: var(--blue);
  opacity: 1;
}

/* SVG Icon */
.faq-icon {
  width: 64px;
  height: 64px;
  stroke: #ffffff;
  fill: #ffffff;
  color: #ffffff;
  transition: stroke 0.3s ease;
}

.faq-icon-item.active .faq-icon {
  stroke: #ffffff;
  fill: #ffffff;
}

.faq-icon-label {
  display: inline-block;
  margin: 0;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  text-align: center;
  white-space: normal;
  max-width: 150px;
}

/* ========== FAQ CONTENT ========== */

.faq-content-wrapper {
  width: 100%;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 2px solid var(--blue);
}

/* Titel-Zeile */
.faq-title-item {
  border-bottom: 2px solid var(--blue);
}

.faq-title-question {
  cursor: default;
  background-color: transparent;
  padding: 24px 0;
}

.faq-title-item .faq-question-text {
  font-weight: 700;
  font-size: 18px;
  color: var(--blue);
}

/* FAQ Question */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-question-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--blue);
  flex: 1;
  padding-right: 20px;
}

.faq-toggle-icon {
  font-size: 28px;
  font-weight: 400;
  color: var(--blue);
  line-height: 1;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
}

/* FAQ Answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-item.open .faq-answer {
  max-height: 1000px;
  padding-bottom: 24px;
}

.faq-answer .description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
}

/* ========== BUTTONS ========== */

.faq-section .button {
  margin-top: 80px;
  text-align: left;
}

.faq-load-more-wrapper {
  text-align: center;
  margin: 16px 0;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

@media (max-width: 1200px) {
  .faq-section {
    padding: 60px var(--navbar-padding-tablet);
  }
  
  .faq-icon-navigation {
    margin-bottom: 50px;
  }
  
  .faq-icon-item {
    margin: 0 35px 20px 35px;
  }
  
  .faq-icon-circle {
    width: 75px;
    height: 75px;
  }
  
  .faq-icon {
    width: 59px;
    height: 59px;
    stroke: #ffffff !important;
    fill: #ffffff !important;
  }
  
  .faq-icon-label {
    font-size: 14px;
    width: 130px;
  }
}

@media (max-width: 1024px) {
  .faq-section {
    padding: 50px var(--navbar-padding-mobile);
  }
  
  .faq-icon-navigation {
    margin-bottom: 48px;
  }
  
  .faq-icon-item {
    margin: 0 30px 20px 30px;
  }
  
  .faq-icon-circle {
    width: 70px;
    height: 70px;
  }
  
  .faq-icon {
    width: 54px;
    height: 54px;
    stroke: #ffffff !important;
    fill: #ffffff !important;
  }
  
  .faq-icon-label {
    font-size: 12px;
    width: 120px;
  }
  
  .faq-question-text {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  .faq-section {
    padding: 40px var(--navbar-padding-mobile);
  }
  
  .faq-icon-navigation {
    margin-bottom: 40px;
  }
  
  .faq-icon-item {
    margin: 0 25px 20px 25px;
    align-items: center;
  }
  
  .faq-icon-circle {
    width: 65px;
    height: 65px;
  }
  
  .faq-icon {
    width: 49px;
    height: 49px;
    stroke: #ffffff !important;
    fill: #ffffff !important;
  }
  
  .faq-icon-label {
    font-size: 13px;
    width: 100px;
  }
  
  .faq-section .button {
    margin-top: 60px;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 30px 16px;
  }
  
  .faq-icon-navigation {
    margin-bottom: 32px;
  }
  
  .faq-icon-item {
    margin: 0 10px 20px 10px;
  }
  
  .faq-icon-circle {
    width: 55px;
    height: 55px;
  }
  
  .faq-icon {
    width: 45px;
    height: 45px;
    stroke: #ffffff !important;
    fill: #ffffff !important;
  }
  
  .faq-icon-label {
    font-size: 10px;
    width: 90px;
  }
  
  .faq-question {
    padding: 18px 0;
  }
  
  .faq-question-text {
    font-size: 15px;
  }
  
  .faq-toggle-icon {
    font-size: 24px;
  }
  
  .faq-answer .description {
    font-size: 14px;
  }
  
  .faq-section .button {
    margin-top: 48px;
  }
}

/* ========================================
   Bild+Text - Module
   ======================================== */

.image-text-section {
  padding: var(--spacing-vertical, 2rem) 0;
  background-color: var(--white);
}

.image-text-container {
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
}

.image-text-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

/* Standard-Layout: Bild links, Text rechts */
.image-text-wrapper:not(.image-text-wrapper--reverse) .content-col {
  margin-left: 48px;
}

/* Alternatives Layout: Text links, Bild rechts */
.image-text-wrapper--reverse {
  direction: ltr; /* Sicherstellen der korrekten Leserichtung */
}

.image-text-wrapper--reverse .image-col {
  margin-left: 48px;
}

.image-col {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}

.content-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ========== Responsive Padding ========== */
@media (max-width: 1200px) {
  .image-text-container {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }
  
  .image-text-wrapper {
    gap: 32px;
  }
  
  .image-text-wrapper:not(.image-text-wrapper--reverse) .content-col {
    margin-left: 32px;
  }
  
  .image-text-wrapper--reverse .image-col {
    margin-left: 32px;
  }
}

@media (max-width: 1024px) {
  .image-text-container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
  
  .image-text-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  /* Mobile: Margins zurücksetzen */
  .image-text-wrapper:not(.image-text-wrapper--reverse) .content-col,
  .image-text-wrapper--reverse .image-col {
    margin-left: 0;
  }
  
  .image-col {
    min-height: 300px;
  }
}

@media (max-width: 700px) {
  .image-text-container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
  
  .image-text-wrapper {
    gap: 24px;
  }
  
  .image-col {
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  .image-text-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .image-text-wrapper {
    gap: 16px;
  }
  
  .image-col {
    min-height: 200px;
  }
  
  .content-col {
    gap: 16px;
  }
}

/* ========================================================================== 
   Berufe im Überblick Module
   ========================================================================== */

.berufe-uebersicht {
  padding: var(--navbar-padding-desktop) 0;
  margin: 0;
}

/* Intro-Line und Headline - nur Padding links/rechts */
.berufe-uebersicht .intro-line {
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
}

.berufe-uebersicht .headline {
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
}

/* Berufe Liste - untereinander, volle Breite */
.berufe-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  margin-left: var(--navbar-padding-desktop);
  margin-right: var(--navbar-padding-desktop);
}

/* Beruf Card */
.beruf-card {
  border-radius: 0;
  margin-bottom: 4px;
}

.beruf-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  text-decoration: none;
  color: var(--blue);
  background-color: rgba(216, 202, 184, 0.3);
  border-radius: 0;
  transition: all 0.3s ease;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  box-sizing: border-box;
  min-height: auto;
  height: auto;
}

.beruf-link:hover {
  background-color: var(--blue);
  color: var(--beige);
}

.beruf-link:hover {
  color: var(--beige);
}

.beruf-link:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.beruf-title {
  flex: 1;
  margin-right: 16px;
}

.beruf-arrow {
  flex-shrink: 0;
  filter: invert(13%) sepia(86%) saturate(4276%) hue-rotate(190deg) brightness(65%) contrast(92%);
}

.beruf-link:hover .beruf-arrow {
  filter: invert(82%) sepia(8%) saturate(735%) hue-rotate(19deg) brightness(99%) contrast(90%);
}

/* ========== Responsive Padding ========== */

@media (max-width: 1200px) {
  .berufe-uebersicht {
    padding: var(--navbar-padding-tablet) 0;
  }

  .berufe-uebersicht .intro-line {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }

  .berufe-uebersicht .headline {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }

  .berufe-grid {
    margin-left: var(--navbar-padding-tablet);
    margin-right: var(--navbar-padding-tablet);
  }
}

@media (max-width: 1024px) {
  .berufe-uebersicht {
    padding: var(--navbar-padding-mobile) 0;
  }

  .berufe-uebersicht .intro-line {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .berufe-uebersicht .headline {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .berufe-grid {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
  }

  .beruf-link {
    padding: 12px 20px;
    font-size: 14px;
  }

  .beruf-title {
    margin-right: 12px;
  }

  .beruf-arrow {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 700px) {
  .berufe-uebersicht .intro-line {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .berufe-uebersicht .headline {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .berufe-grid {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
  }
}

@media (max-width: 480px) {
  .berufe-uebersicht {
    padding: 24px 0;
  }

  .berufe-uebersicht .intro-line {
    padding-left: 16px;
    padding-right: 16px;
  }

  .berufe-uebersicht .headline {
    padding-left: 16px;
    padding-right: 16px;
  }

  .berufe-grid {
    margin-left: 16px;
    margin-right: 16px;
  }

  .beruf-link {
    padding: 12px 16px;
    font-size: 13px;
  }

  .beruf-arrow {
    width: 16px;
    height: 16px;
  }
}

/* ========================================================================== 
   Fragen im Überblick Module - Dynamische Höhe (weniger Platz unten)
   ========================================================================== */

.fragen-uebersicht {
  padding: var(--navbar-padding-desktop) 0;
  margin: 0;
}

.fragen-uebersicht .intro-line {
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
}

.fragen-uebersicht .headline {
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
}

.fragen-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  margin-left: var(--navbar-padding-desktop);
  margin-right: var(--navbar-padding-desktop);
}

/* Frage Card */
.frage-card {
  border-radius: 0;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
}

.frage-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  text-decoration: none;
  color: var(--blue);
  background-color: rgba(216, 202, 184, 0.3);
  border: none;
  border-radius: 0;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
}

/* Hover ONLY auf Frage-Link */
.frage-link:hover {
  background-color: var(--blue);
  color: var(--beige);
}

.frage-link:hover .frage-arrow {
  filter: invert(82%) sepia(8%) saturate(735%) hue-rotate(19deg) brightness(99%) contrast(90%);
}

.frage-link:focus {
  outline: none;
  outline-offset: 0;
}

.frage-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.frage-title {
  flex: 1;
  margin: 0;
  margin-right: 18px;
  font-weight: 700;
}

.frage-title.medium {
  font-weight: 700;
}

.frage-arrow {
  flex-shrink: 0;
  filter: invert(13%) sepia(86%) saturate(4276%) hue-rotate(190deg) brightness(65%) contrast(92%);
  width: 20px;
  height: 20px;
}

.frage-card.open .frage-arrow {
  transform: rotate(90deg);
}

/* Frage Description - Dynamische Höhe (weniger Platz unten) */
.frage-desc.description {
  padding: 0;
  margin: 0;
  font-weight: 400;
  max-height: 0;
  overflow: hidden;
  background-color: transparent;
}

.frage-card.open .frage-desc.description {
  max-height: 1000px;
  padding: 12px 24px 8px 24px;
}

.frage-desc.description p {
  margin: 0 0 12px 0;
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
}

.frage-desc.description p:last-child {
  margin-bottom: 0;
}

/* ========== Responsive Padding ========== */

@media (max-width: 1200px) {
  .fragen-uebersicht {
    padding: var(--navbar-padding-tablet) 0;
  }

  .fragen-uebersicht .intro-line {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }

  .fragen-uebersicht .headline {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }

  .fragen-grid {
    margin-left: var(--navbar-padding-tablet);
    margin-right: var(--navbar-padding-tablet);
  }
}

@media (max-width: 1024px) {
  .fragen-uebersicht {
    padding: var(--navbar-padding-mobile) 0;
  }

  .fragen-uebersicht .intro-line {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .fragen-uebersicht .headline {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .fragen-grid {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
  }

  .frage-link {
    padding: 12px 20px;
    font-size: 14px;
  }

  .frage-title {
    margin-right: 12px;
  }

  .frage-arrow {
    width: 18px;
    height: 18px;
  }

  .frage-card.open .frage-desc.description {
    padding: 12px 20px 8px 20px;
  }
}

@media (max-width: 700px) {
  .fragen-uebersicht .intro-line {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .fragen-uebersicht .headline {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .fragen-grid {
    margin-left: var(--navbar-padding-mobile);
    margin-right: var(--navbar-padding-mobile);
  }
}

@media (max-width: 480px) {
  .fragen-uebersicht {
    padding: 24px 0;
  }

  .fragen-uebersicht .intro-line {
    padding-left: 16px;
    padding-right: 16px;
  }

  .fragen-uebersicht .headline {
    padding-left: 16px;
    padding-right: 16px;
  }

  .fragen-grid {
    margin-left: 16px;
    margin-right: 16px;
  }

  .frage-link {
    padding: 12px 16px;
    font-size: 13px;
  }

  .frage-arrow {
    width: 16px;
    height: 16px;
  }

  .frage-card.open .frage-desc.description {
    padding: 12px 16px 8px 16px;
  }
}

/* ========================================
   Themenauswahl - Module
   ======================================== */

/* Hintergrundfarbe */
.themenauswahl-background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Hintergrundfarben-Varianten */
.themenauswahl-background[data-background="white"] {
  background-color: var(--white);
}

.themenauswahl-background[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

/* Innerer Wrapper für Struktur */
.themenauswahl {
  padding: 3em 0;
  margin: 0 var(--navbar-padding-desktop);
}

.themenauswahl .section-content {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.themenauswahl-grid-wrapper {
  margin: 2.5em 0 3em 0;
  padding: 0;
  box-sizing: border-box;
}

.themenauswahl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  width: 100%;
  box-sizing: border-box;
}

/* Themenauswahl Cards */
.themenauswahl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
  height: 400px;
}

.themenauswahl-card:hover .topic-image-container {
  transform: scale(1.08);
}

.topic-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
  overflow: hidden;
  transition: transform 0.3s ease;
  z-index: 0;
}

.topic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 1;
}

.topic-content {
  padding: 1.2em 1.5em 1.6em 1.5em;
  color: var(--white);
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.topic-title {
  font-size: 1.5em;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  flex-shrink: 0;
  margin: 0;
  margin-right: 0.8em;
}

.topic-icon-arrow {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
  opacity: 1;
}

.topic-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.themenauswahl .themenauswahl-navigation {
  margin-top: 3em;
}

.themenauswahl-navigation a {
  text-decoration: none;
  color: inherit;
}

/* ========== Responsive ========== */
@media (max-width: 1200px) {
  .themenauswahl {
    margin: 0 var(--navbar-padding-tablet);
  }
  
  .themenauswahl-grid {
    gap: 0.45em;
  }
  
  .themenauswahl-card {
    height: 350px;
  }
}

@media (max-width: 1024px) {
  .themenauswahl {
    margin: 0 var(--navbar-padding-mobile);
  }
  
  .themenauswahl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4em;
  }
  
  .themenauswahl-card {
    height: 300px;
  }
  
  .topic-content {
    padding: 1em 0.8em 1.3em 0.8em;
  }
  
  .topic-title {
    font-size: 1.1em;
    margin-right: 0.7em;
  }
}

@media (max-width: 700px) {
  .themenauswahl {
    margin: 0 var(--navbar-padding-mobile);
    padding: 2.5em 0;
  }
  
  .themenauswahl-grid-wrapper {
    margin: 2em 0 2.5em 0;
  }
  
  .themenauswahl-grid {
    grid-template-columns: 1fr;
    gap: 0.4em;
  }
  
  .themenauswahl-card {
    height: 280px;
  }
  
  .topic-content {
    padding: 0.9em 0.8em 1.2em 0.8em;
  }
  
  .topic-title {
    font-size: 1.1em;
    margin-right: 0.7em;
  }
  
  .themenauswahl .themenauswahl-navigation {
    margin-top: 2.5em;
  }
}

@media (max-width: 480px) {
  .themenauswahl {
    margin: 0 var(--navbar-padding-mobile);
    padding: 2em 0;
  }
  
  .themenauswahl-grid-wrapper {
    margin: 1.5em 0 2em 0;
  }
  
  .themenauswahl-grid {
    grid-template-columns: 1fr;
    gap: 0.3em;
  }
  
  .themenauswahl-card {
    height: 250px;
  }
  
  .topic-content {
    padding: 0.8em 0.6em 1em 0.6em;
  }
  
  .topic-title {
    font-size: 1em;
    margin-right: 0.6em;
  }
  
  .topic-icon-arrow {
    width: 16px;
    height: 16px;
  }
  
  .themenauswahl .themenauswahl-navigation {
    margin-top: 2em;
  }
}

/* ========================================
   Kontaktkacheln - Module
   ======================================== */

.kontaktkacheln-background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Hintergrundfarben-Varianten */
.kontaktkacheln-background[data-background="white"] {
  background-color: var(--white);
}

.kontaktkacheln-background[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

/* Innerer Wrapper für Struktur */
.kontaktkacheln {
  padding: 3em 0;
  margin: 0 var(--navbar-padding-desktop);
}

.kontaktkacheln-grid-wrapper {
  margin: 0 0 2rem 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.kontaktkacheln-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* Kontaktkachel Cards */
.kontaktkachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1em;
  background-color: var(--white);
  border: 2px solid var(--blue);
  border-radius: 0;
  text-align: center;
  width: 280px;
  flex-shrink: 0;
  margin: 0.5em;
}

/* Funktion */
.contact-function {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--blue);
  margin: 2em 0 1.5em 0;
  line-height: 1.3;
}

/* Organisation - Bold */
.contact-organisation {
  font-size: 1em;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.5em 0;
  line-height: 1.4;
}

/* Kontakt */
.contact-contact {
  font-size: 0.95em;
  font-weight: 400;
  color: var(--black);
  margin: 0 0 2.5em 0;
  line-height: 1.5;
  word-wrap: break-word;
}

/* Profilbild */
.contact-image-wrapper {
  width: 100px;
  height: 100px;
  margin-top: auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  outline: none;
}

.contact-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  box-shadow: none;
  outline: none;
}

/* ========== Responsive ========== */
@media (max-width: 1200px) {
  .kontaktkacheln {
    margin: 0 var(--navbar-padding-tablet);
  }
  
  .kontaktkachel {
    width: 260px;
    margin: 0.5em;
  }
  
  .contact-image-wrapper {
    width: 110px;
    height: 110px;
  }
  
  .contact-function {
    font-size: 1.15em;
  }
}

@media (max-width: 1024px) {
  .kontaktkacheln {
    margin: 0 var(--navbar-padding-mobile);
  }
  
  .kontaktkacheln-grid {
    flex-wrap: wrap;
  }
  
  .kontaktkachel {
    padding: 1.8em;
    width: 280px;
    margin: 0.5em;
    flex-shrink: 1;
  }
  
  .contact-image-wrapper {
    width: 100px;
    height: 100px;
  }
  
  .contact-function {
    font-size: 1.1em;
  }
  
  .contact-organisation {
    font-size: 0.95em;
  }
  
  .contact-contact {
    font-size: 0.9em;
  }
}

@media (max-width: 700px) {
  .kontaktkacheln {
    margin: 0 var(--navbar-padding-mobile);
    padding: 2.5em 0;
  }
  
  .kontaktkacheln-grid-wrapper {
    margin: 0;
  }
  
  .kontaktkacheln-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .kontaktkachel {
    padding: 0.8em;
    width: 100%;
    max-width: 100%;
    margin: 0.5em 0;
  }
  
  .contact-image-wrapper {
    width: 90px;
    height: 90px;
  }
  
  .contact-function {
    font-size: 1.05em;
  }
  
  .contact-organisation {
    font-size: 0.9em;
    margin-bottom: 0.5em;
  }
  
  .contact-contact {
    font-size: 0.85em;
  }
}

@media (max-width: 480px) {
  .kontaktkacheln {
    margin: 0 var(--navbar-padding-mobile);
    padding: 0.6em 0;
  }
  
  .kontaktkacheln-grid-wrapper {
    margin: 0;
  }
  
  .kontaktkacheln-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .kontaktkachel {
    padding: 1.3em 1em;
    width: 100%;
    max-width: 100%;
    margin: 0.5em 0;
  }
  
  .contact-image-wrapper {
    width: 80px;
    height: 80px;
  }
  
  .contact-function {
    font-size: 1em;
  }
  
  .contact-organisation {
    font-size: 0.85em;
    margin-bottom: 0.5em;
  }
  
  .contact-contact {
    font-size: 0.8em;
  }
}

/* ==========================================================================  
   Story-Channel Seitenvorlage
   ========================================================================== */

.image-storychannel {
  float: left;
  width: 594px;
  height: 648px;
  margin: 0 1em 1em 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Story-Content Wrapper für Bild + Text */
.story-content-wrapper {
  width: 100%;
  padding: 0 var(--navbar-padding-desktop);
  box-sizing: border-box;
  overflow: auto; /* Clear float */
}

.story-content-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* Story-Content für den fließenden Text */
.story-content {
  /* Kein overflow: hidden */
}

/* Responsive Anpassungen */
@media (max-width: 1500px) {

  .image-storychannel {
    width: 502px;
    height: 547px;
    margin: 0 1.5em 1.5em 0;
  }

}

@media (max-width: 1200px) {

  .story-content-wrapper {
    padding: 0 var(--navbar-padding-tablet);
  }

  .image-storychannel {
    width: 449px;
    height: 490px;
    margin: 0 1.5em 1.5em 0;
  }

}

@media (max-width: 1024px) {

  .story-content-wrapper {
    padding: 0 var(--navbar-padding-mobile);
  }

  .image-storychannel {
    width: 396px;
    height: 432px;
    margin: 0 1.5em 1.5em 0;
  }

}

@media (max-width: 700px) {

  .image-storychannel {
    float: none;
    width: 100%;
    max-width: 660px;
    height: 720px;
    margin: 0 auto 2em auto;
    display: block;
  }

}

@media (max-width: 480px) {

  .story-content-wrapper {
    padding: 0 16px;
  }

  .image-storychannel {
    height: 576px;
    margin: 0 auto 0.8em auto;
  }

}

/* ==========================================================================  
   Storytext-Absatzvorlage
   ========================================================================== */

.storytext {
  margin: 0;
  padding: 0 0 1em 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--white);
}

/* Content-Wrapper */
.storytext-content {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}

/* Introline */
.storytext-introline {
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.5;
  color: #222D46;
  margin-top: 0;
  margin-bottom: 0.8em;
}

/* Description */
.storytext-description {
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1.5;
  color: #222D46;
  margin-bottom: 2em;
}

.storytext-description p {
  margin: 0 0 1em 0;
}

.storytext-description p:last-child {
  margin-bottom: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .storytext-content {
    padding: 0;
  }
}

@media (max-width: 1024px) {
  .storytext {
    padding: 0 0 0.8em 0;
  }
  
  .storytext-content {
    padding: 0;
  }
}

@media (max-width: 700px) {
  .storytext {
    padding: 0 0 0.7em 0;
  }
  
  .storytext-content {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .storytext {
    padding: 0 0 0.5em 0;
  }
  
  .storytext-content {
    padding: 0;
  }
}

/* ========================================
   Beteiligungsunternehmen - Module
   ======================================== */

/* Partners Section */
.partners-section {
  padding: 80px 0;
  transition: background-color 0.3s ease;
}

.partners-section[data-background="white"] {
  background-color: #fff;
}

.partners-section[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

.partners-container {
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
}

/* Partners Grid - Flexbox Layout (nur Bilder) */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 48px;
  align-items: flex-start;
  justify-content: flex-start;
}

.partner-icon {
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 240px;
  display: block;
  margin: 24px;
}

/* ========== Responsive Design ========== */

/* Tablet: 1200px und kleiner */
@media (max-width: 1200px) {
  .partners-container {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }

  .partners-grid {
    gap: 24px;
  }

  .partner-icon {
    max-width: 220px;
    max-height: 220px;
    margin: 20px;
  }
}

/* Kleine Tablets: 1024px und kleiner */
@media (max-width: 1024px) {
  .partners-container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .partners-grid {
    gap: 24px;
  }

  .partner-icon {
    max-width: 200px;
    max-height: 200px;
    margin: 8px;
  }
}

/* Mobile: 700px und kleiner */
@media (max-width: 700px) {
  .partners-container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }

  .partners-grid {
    gap: 20px;
    margin-top: 32px;
  }

  .partner-icon {
    max-width: 180px;
    max-height: 180px;
    margin: 16px;
  }
}

/* Klein-Mobile: 480px und kleiner */
@media (max-width: 480px) {
  .partners-section {
    padding: 60px 0;
  }

  .partners-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .partners-grid {
    gap: 16px;
    margin-top: 24px;
  }

  .partner-icon {
    max-width: 150px;
    max-height: 150px;
    margin: 12px;
  }
}

/* ========================================
   Meilensteine (Milestones) - Modul
   ======================================== */

.milestones-section {
  padding: 2rem 0;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

/* Hintergrundvarianten */
.milestones-section[data-background="white"] {
  background-color: var(--white);
}

.milestones-section[data-background="beige"] {
  background-color: rgba(216, 202, 184, 0.3);
}

.milestones-container {
  padding-left: var(--navbar-padding-desktop);
  padding-right: var(--navbar-padding-desktop);
  max-width: 1400px;
  margin: 0 auto;
}

/* ========== Timeline Container ========== */
.milestones-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 48px;
  position: relative;
}

/* ========== Timeline Item ========== */
.milestone-item {
  display: grid;
  grid-template-columns: 80px 280px 1fr;
  gap: 32px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 40px;
  overflow: hidden;
}

.milestone-item:last-child {
  padding-bottom: 0;
  overflow: visible;
}

/* ========== Timeline Marker (Circle & Line) ========== */
.milestone-marker {
  position: relative;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.milestone-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--blue);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.milestone-line {
  width: 2px;
  background-color: var(--blue);
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  height: calc(100% + 40px);
  min-height: 200px;
}

/* Linie beim letzten Element entfernen - ALLE ANSICHTEN */
.milestone-item:last-child .milestone-line {
  display: none;
}

/* ========== Meta Column ========== */
.milestone-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 280px;
  align-self: flex-start;
}

.milestone-timeframe {
  font-size: 14px;
  font-weight: 300;
  color: var(--blue);
  opacity: 0.8;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.milestone-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--blue);
  line-height: 1.3;
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

/* ========== Description Column ========== */
.milestone-description {
  font-size: 16px;
  font-weight: 400;
  color: var(--black);
  line-height: 1.6;
  opacity: 0.85;
  align-self: flex-start;
  flex: 1;
  margin: 0;
  padding: 0;
}

.milestone-description ul,
.milestone-description ol {
  margin: 0;
  padding: 0 0 0 20px;
  list-style-position: outside;
}

.milestone-description li {
  margin: 0;
  padding: 0;
  margin-bottom: 4px;
  line-height: 1.4;
}

.milestone-description li:last-child {
  margin-bottom: 0;
}

.milestone-description p {
  margin: 0;
  padding: 0;
  display: inline;
  line-height: 1.4;
}

/* ========== Responsive Design ========== */

/* Tablet: 1200px - 3 Spalten */
@media (max-width: 1200px) {
  .milestones-container {
    padding-left: var(--navbar-padding-tablet);
    padding-right: var(--navbar-padding-tablet);
  }
  
  .milestone-item {
    grid-template-columns: 80px 240px 1fr;
    gap: 24px;
    padding-bottom: 36px;
    overflow: hidden;
  }
  
  .milestone-item:last-child {
    padding-bottom: 0;
    overflow: visible;
  }
  
  .milestone-meta {
    width: 240px;
  }
  
  .milestone-line {
    height: calc(100% + 36px);
  }

}

/* Tablet: 1024px - 3 Spalten enger */
@media (max-width: 1024px) {
  .milestones-container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
  
  .milestone-item {
    grid-template-columns: 60px 200px 1fr;
    gap: 20px;
    padding-bottom: 32px;
    overflow: hidden;
  }
  
  .milestone-item:last-child {
    padding-bottom: 0;
    overflow: visible;
  }
  
  .milestone-meta {
    width: 200px;
  }
  
  .milestone-line {
    top: 20px;
    height: calc(100% + 32px);
  }
  
  .milestone-circle {
    width: 20px;
    height: 20px;
  }
  
  .milestone-title {
    font-size: 16px;
  }
}

/* Tablet: 900px - 2 Spalten, untereinander */
@media (max-width: 900px) {
  .milestones-container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
  
  .milestone-item {
    grid-template-columns: 60px 1fr;
    gap: 20px;
    padding-bottom: 0;
    align-items: flex-start;
    overflow: hidden;
  }
  
  .milestone-item:last-child {
    padding-bottom: 0;
    overflow: visible;
  }
  
  .milestone-meta {
    width: auto;
    grid-column: 2;
    margin-bottom: 16px;
  }
  
  .milestone-description {
    grid-column: 2;
    padding-bottom: 40px;
  }
  
  .milestone-line {
    height: calc(100% + 40px);
    top: 20px;
  }
  
  .milestone-item:last-child .milestone-description {
    padding-bottom: 0;
  }
}

/* Tablet: 700px - 2 Spalten, untereinander */
@media (max-width: 700px) {
  .milestones-container {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
  }
  
  .milestone-item {
    grid-template-columns: 50px 1fr;
    gap: 16px;
    padding-bottom: 0;
    align-items: flex-start;
    overflow: hidden;
  }
  
  .milestone-item:last-child {
    padding-bottom: 0;
    overflow: visible;
  }
  
  .milestone-meta {
    width: auto;
    grid-column: 2;
    margin-bottom: 12px;
  }
  
  .milestone-description {
    grid-column: 2;
    padding-bottom: 28px;
  }
  
  .milestone-line {
    height: calc(100% + 28px);
    top: 0;
  }
  
  .milestone-item:last-child .milestone-description {
    padding-bottom: 0;
  }
  
  .milestone-timeframe {
    font-size: 13px;
  }
  
  .milestone-title {
    font-size: 15px;
  }
  
  .milestone-description {
    font-size: 14px;
  }
}

/* Mobile: 480px - 2 Spalten, untereinander */
@media (max-width: 480px) {
  .milestones-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .milestones-timeline {
    margin-bottom: 32px;
  }
  
  .milestone-item {
    grid-template-columns: 45px 1fr;
    gap: 12px;
    padding-bottom: 0;
    align-items: flex-start;
    overflow: hidden;
  }
  
  .milestone-item:last-child {
    padding-bottom: 0;
    overflow: visible;
  }
  
  .milestone-meta {
    width: auto;
    grid-column: 2;
    margin-bottom: 10px;
  }
  
  .milestone-description {
    grid-column: 2;
    padding-bottom: 24px;
  }
  
  .milestone-circle {
    width: 18px;
    height: 18px;
  }
  
  .milestone-line {
    height: calc(100% + 24px);
    top: 18px;
  }
  
  .milestone-item:last-child .milestone-description {
    padding-bottom: 0;
  }
  
  .milestone-timeframe {
    font-size: 12px;
  }
  
  .milestone-title {
    font-size: 14px;
  }
  
  .milestone-description {
    font-size: 13px;
  }
  
}

/* ========================================
   Kontaktübersicht - Modul
   ======================================== */

.contact-overview-section {
  width: 100%;
  background: var(--white);
  box-sizing: border-box;
  margin-bottom: 40px;
  margin-top: 50px;
}

.contact-overview-container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--navbar-padding-desktop);
}

/* Überschrift (Introline) als Design-Element */
.contact-overview-header {
  margin-bottom: 20px;
  width: 100%;
}

.contact-overview-intro {
  font-size: 28px;
  font-weight: 600;
  color: var(--blue);
  margin: 0;
  padding: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* DESKTOP - Grid Layout */

/* Kontakte Grid Layout */
.contact-overview-slider-wrapper {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 0;
}

.contact-overview-slider {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  width: 100%;
  align-items: flex-end;
}

/* Einzelne Kontaktkarte */
.contact-overview-card {
  background: var(--white);
  border: none;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  margin: 0;
}

.contact-overview-card:hover {
  box-shadow: none;
}

/* Kontaktinformationen */
.contact-overview-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: auto;
}

.contact-overview-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--charcoal-700);
  margin: 0 0 12px 0;
  padding: 0;
  line-height: 1.3;
}

/* Kontaktdetails */
.contact-overview-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--charcoal-700);
  line-height: 1.5;
  margin-top: 16px;
}

.contact-overview-details p {
  margin: 0;
  padding: 0;
}

.contact-overview-details a {
  color: var(--blue);
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-overview-details a:hover {
  color: var(--teal-600);
  text-decoration: underline;
}

/* Kontaktbild - RUND */
.contact-overview-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
}

.contact-overview-image {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 6px solid #D4C5B9 !important;
  box-sizing: border-box !important;
  display: block !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

/* Responsive Design */

/* Tablets - Large (max-width: 1200px) */
@media (max-width: 1200px) {
  .contact-overview-container {
    padding: 0 var(--navbar-padding-tablet);
  }

  .contact-overview-section {
    margin-bottom: 36px;
    margin-top: 40px;
  }

  .contact-overview-slider {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
  }
}

/* Tablets - Medium (max-width: 1024px) */
@media (max-width: 1024px) {
  .contact-overview-section {
    margin-bottom: 32px;
    margin-top: 36px;
  }

  .contact-overview-intro {
    font-size: 24px;
  }

  .contact-overview-slider {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
  }

  .contact-overview-card {
    padding: 20px;
  }

  .contact-overview-image {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    border-width: 5px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Mobile - Tablets (max-width: 900px) */
@media (max-width: 900px) {
  .contact-overview-intro {
    font-size: 22px;
  }

  .contact-overview-slider {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }

  .contact-overview-card {
    padding: 16px;
  }

  .contact-overview-image {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    border-width: 5px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .contact-overview-name {
    font-size: 16px;
  }
}

/* Mobile - Small Tablets (max-width: 700px) - SLIDER STARTET HIER */
@media (max-width: 700px) {
  .contact-overview-container {
    padding: 0 var(--navbar-padding-mobile);
  }

  .contact-overview-section {
    margin-bottom: 24px;
    margin-top: 32px;
  }

  .contact-overview-intro {
    font-size: 20px;
  }

  /* Slider aktivieren */
  .contact-overview-slider-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    margin-top: 0;
    padding: 0 0 12px 0;
  }

  /* Scrollbar Styling - BLAU */
  .contact-overview-slider-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .contact-overview-slider-wrapper::-webkit-scrollbar-track {
    background: rgba(94, 82, 64, 0.08);
    border-radius: 3px;
  }

  .contact-overview-slider-wrapper::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 3px;
  }

  .contact-overview-slider-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--blue);
  }

  /* Firefox Scrollbar - BLAU */
  .contact-overview-slider-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--blue) rgba(94, 82, 64, 0.08);
  }

  /* Von Grid zu Flex (Slider) */
  .contact-overview-slider {
    display: flex;
    gap: 0;
    min-width: min-content;
    align-items: flex-end;
    grid-template-columns: unset;
  }

  .contact-overview-card {
    flex-shrink: 0;
    width: 240px;
    min-width: 240px;
    padding: 24px;
    margin: 0;
    margin-right: 32px;
  }

  /* Letzter Eintrag - kein Margin */
  .contact-overview-card:last-child {
    margin-right: 0;
  }

  .contact-overview-name {
    font-size: 18px;
  }

  .contact-overview-details {
    font-size: 14px;
  }

  .contact-overview-image {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    border-width: 5px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Mobile - Extra Small (max-width: 480px) - SLIDER BLEIBT GLEICH GROß */
@media (max-width: 480px) {
  .contact-overview-section {
    margin-bottom: 16px;
    margin-top: 24px;
  }

  .contact-overview-container {
    padding: 0 16px;
  }

  .contact-overview-intro {
    font-size: 18px;
  }

  /* Slider bleibt gleich groß */
  .contact-overview-card {
    width: 240px;
    min-width: 240px;
    padding: 24px;
    margin-right: 32px;
  }

  .contact-overview-card:last-child {
    margin-right: 0;
  }

  .contact-overview-name {
    font-size: 18px;
  }

  .contact-overview-details {
    font-size: 14px;
  }

  .contact-overview-image-wrapper {
    margin-top: 16px;
  }

  .contact-overview-image {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    border-width: 5px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Print Styles */
@media print {
  .contact-overview-section {
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .contact-overview-container {
    padding: 0 12px;
  }

  .contact-overview-slider {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .contact-overview-card {
    page-break-inside: avoid;
    break-inside: avoid;
    width: auto;
    min-width: auto;
    margin: 0;
  }

}

.search-container{
	padding: 0 var(--navbar-padding-desktop);
	margin-top: 32px;
}

.SearchResults {
	list-style: none;
	padding: 0;
}

.SearchResults > li{
	border-top: 1px solid #d1d7d8;
  	margin-top: 0;
  	padding-top: 1rem;
  	padding-bottom: 1rem;
  	display: flex;
  	flex-direction: column;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  border-radius: 0.25rem;
    
  order: 3;
  padding-bottom: 12px;
  color: gray;
  font-size: 14px;
}

.breadcrumb > li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: "/";
  margin: 0 0.5rem;
  color: grey;
}

.breadcrumb a {
  text-decoration: none;
  color: inherit;

}

.breadcrumb a:hover {
  text-decoration: underline;
  color: var(--blue);
  transition: color 0.38s ease;
}

.SearchResults > li > h3{
	order: 1;
  	margin: 0;
  	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	display: block;
}

.SearchResults > li > h3:hover{
	color: var(--beige);
	transition: color 0.38s ease;
}
.search-content {
	order: 4;
}

.search-date{
	order: 0;
  	font-size: 14px;
  	
}

#searchResultFooter{
	display: flex;
	justify-content: center;
}

#searchResultFooter .search-loadMore{
	margin: 1rem;
  	font-size: 1.2rem;
  	cursor: pointer;
  	color: var(--blue);
  	border: 2px solid var(--blue);
  	text-transform: uppercase;
  	font-weight: 500;
  	padding: 0.8em 2em;
  	text-align: center;
  	transition: background 0.3s, color 0.3s, border 0.3s;
}

#searchResultFooter .search-loadMore:hover {
	background-color: var(--beige);
  	border-color: var(--beige);
	transition: color 0.38s ease;
}

.search-target-page {
	text-decoration: none;
  	color: inherit;
}




/* ==========================================================================
   Suchfeld Übersichtsseite
   ========================================================================== */

.navbar__icons {
	display: inline-block;
	position: relative;
}

.search-container .search-header {
  	background-color: #FFFFFF;
  	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  	margin-bottom: 2em;
}

#karriereessen-search {
	display: flex;
    justify-content: center;
  	width: 75%;
  	margin: auto;
  	padding-top: 2rem;
  	padding-bottom: 2rem;
}


#karriereessen-search .searchField {
    display: flex;
    align-items: stretch;
    width: 100%;
}

#karriereessen-search .autocomplete {
    flex: 1;
}

#karriereessen-search input[type="search"] {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    font-size: 18px;
    border: 2px solid #ccc;
    border-right: none;
    border-radius: 8px 0 0 8px;
    outline: none;
}

#karriereessen-search input,
#karriereessen-search button {
    transition: border-color 0.15s linear;
}

#karriereessen-search .searchField:has(input:focus) input,
#karriereessen-search .searchField:has(input:focus) button {
    border-color: var(--blue);
}

#karriereessen-search .input-group-append {
    display: flex;
}

#karriereessen-search button {
    height: 56px;
    width: 64px;
    border: 2px solid #ccc;
    border-left: none;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    margin: 0;
}

/* Hover */
#karriereessen-search button:hover {
    background: var(--beige);
}


/* ==========================================================================
   Header Suche
   ========================================================================== */


.glyphicon-search{
	font-size: 2rem; 
	padding: 0.8rem;
	display. flex;
	align-items: center;
	justify-content: center;
}

.glyphicon-search > img{
	width: 24px;
	height: 24px;
}

#suchform_mobil{
    border: 0;
    box-shadow: none;
}

#suchform_mobil #searchexpression{
	width:100%;
}

#suchform .ui-input-text {
    background-color: #a2c1df;
    margin: 10px 30px 10px auto;
    width: 250px;
    border: 0;
    box-shadow: none;
    }
    
.suchfeld-container{
	display: flex;
	padding: 0.75rem;
}
#suchfeld {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate3d(-260px, 80px, 0px);
    will-change: transform;
    z-index: 9999999;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
    background-color: #fff;
}

#searchexpression {
    background-color: #FFFFFF;
    padding-left: 1rem;
    height: 4rem;
    color: #707070;
    border: 0;
    font-size: 1.5em;
    margin-top: 0;
    text-shadow: none;
}


/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablets - Large (max-width: 1200px) */

@media (max-width: 1200px) {
  .search-container {
    padding: 0 var(--navbar-padding-tablet);
  }
}

/* Tablets - Medium (max-width: 1024px) */
@media (max-width: 1024px) {
}


/* Mobile - Tablets (max-width: 900px) */
@media (max-width: 900px) {
	#karriereessen-search{
    	width: 85%;
  }
}

/* Mobile - Small Tablets (max-width: 700px) */
@media (max-width: 700px) {
  .search-container {
    padding: 0 var(--navbar-padding-mobile);
  }
}

/* Mobile - Extra Small (max-width: 480px) */
@media (max-width: 480px) {
	#suchfeld {
		position: fixed;
		width: 100%;
		transform: translate3d(0px, 80px, 0px);
	}
	
	#searchexpression{
		width: 100%;
	}
}

/* ==========================================================================
   Bilder + Copyright
   ========================================================================== */

figure {
  position: relative;
}
figure img {
  width: 100%;
  height: auto;
  min-height: 1px;
}
figure figcaption {
  background-color: rgba(227, 231, 232, 0.8);
  position: absolute;
  padding-left: 0.25em;
  padding-right: 0.25em;
  font-size: 0.55em;
  color: #000000 !important;
}

.header--fullscreen figure img {
 	height: 100%;
  	object-fit: cover;
}

.header--low figure img {
 	height: 100%;
  	object-fit: cover;
}

figure.header-bg {
	margin:0;
}

@media (max-width: 991.98px) {
  figure figcaption {
    font-size: 0.4em;
  }
}
.copyright-bottom figure figcaption {
  bottom: 0;
}
.copyright-top figure figcaption {
  top: 0;
}
.copyright-left figure figcaption {
  left: 0;
}
.copyright-right figure figcaption {
  right: 0;
}

figcaption {
  background-color: rgba(227, 231, 232, 0.8);
  position: absolute;
  padding-left: 0.25em;
  padding-right: 0.25em;
  font-size: 0.55em;
  color: #000000 !important;
}
@media (max-width: 991.98px) {
  figcaption {
    font-size: 0.4em;
  }
}
.copyright-bottom figcaption {
  bottom: 0;
}
.copyright-top figcaption {
  top: 0;
}
.copyright-left figcaption {
  left: 0;
}
.copyright-right figcaption {
  right: 0;
}

.rotationRightTop figcaption,
.fancybox-skin .rotationRightTop {
  transform: rotate(90deg) translate(100%, 0);
  transform-origin: right top;
  width: 66%;
}

.rotationLeftTop figcaption,
.fancybox-skin .rotationLeftTop {
  transform: rotate(-90deg) translate(-100%, 0);
  transform-origin: left top;
  width: 66%;
}

.rotationRightBottom figcaption,
.fancybox-skin .rotationRightBottom {
  transform: rotate(-90deg) translate(100%, -100%);
  right: -1.5em !important;
  transform-origin: right bottom;
  width: auto;
}

.rotationLeftBottom figcaption,
.fancybox-skin .rotationLeftBottom {
  transform: rotate(-90deg);
  transform-origin: left bottom;
  left: 1.5em !important;
  width: 66%;
}