:root {
  /* Farbpalette */
  --color-blue: #0c5c9d;
  --color-blue-dark: #004983;
  --color-gray: #8F8F8F;
  --color-green: #009059;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-anthracite: #293133;
  --color-lightgray: #F8F9FA;
  --color-midgray: #dee2e6;
  --color-darkgray: #343a40;
  --color-red: #ff0000;

  /* Farbverläufe */
  --gradient-blue: linear-gradient(90deg, #0C5C9D 0%, #004983 100%);

  /* Typografie */
  --font-base: 'Poppins', sans-serif;
  --font-headline: 'Poppins', sans-serif;
  --font-size-base: 19px;
  --font-size-h1: 1.97rem;
  --font-size-h2: 1.97rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.4rem;
  --font-size-h5: 1.3rem;
  --font-size-small: 0.8em;

  /* Schriftfarben */
  --text-main: #4D4D4D;
  --text-light: #fff;
  --text-dark: #000;
  --text-link: var(--color-blue);

  /* Layout & Abstände */
  --container-max: 1200px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4.5rem;

  /* Boxen */
  --box-radius: 8px;
  --box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

  /* Buttons & States */
  --btn-bg-primary: var(--color-blue);
  --btn-bg-primary-hover: var(--color-blue-dark);
  --btn-text-primary: var(--color-white);

  --btn-bg-secondary: var(--color-blue-dark);
  --btn-bg-secondary-hover: var(--color-blue);
  --btn-text-secondary: var(--color-white);

  /* Navigation */
  --nav-bg: var(--color-white);
  --nav-bg-sticky: var(--color-white);
  --nav-link-color1: var(--color-blue);
  --nav-link-bgcolor1: none;
  --nav-link-color2: var(--color-white);
  --nav-link-bgcolor2: var(--color-blue);
  --nav-link-color3: var(--color-white);
  --nav-link-bgcolor3: var(--color-blue-dark);  

  --subnav-link-color1: var(--color-blue);
  --subnav-link-bgcolor1: var(--color-white);
  --subnav-link-color2: var(--color-blue);
  --subnav-link-bgcolor2: var(--color-midgray);
  --subnav-link-border: var(--lightgray);
  --subnav-bg: var(--color-white);

  --nav-icon-color: var(--color-blue);
  
  /* Footer */
  --footer-bg: var(--color-lightgray);

  /* Accordion */
  --accordion-accent:#0b76d1;
  --accordion-bg: var(--color-white);
  --accordion-muted:#666;
  --accordion-radius:8px;
  --accordion-gap:12px;
  --accordion-transition:300ms cubic-bezier(.2,.8,.2,1);
}

/* ------------------------------------------------------------ */
/* Reset & Base */
*, *:after, *::before {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-main);
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

hr {
  height: 1px;
  border: none;
  border-top: 1px solid var(--color-blue);
  margin: var(--spacing-md) 0;
}

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

/* ------------------------------------------------------------ */
/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 500;
  margin: 0;
}

h1, h2 {
  color: var(--color-blue);
  font-size: var(--font-size-h1);
  margin: var(--spacing-md) 0;
  text-transform: uppercase;
  line-height: 1;
}

h3 {
  color: var(--color-blue);
  font-size: var(--font-size-h3);
  margin: 1.7rem 0 0.6rem;
}

h4 {
  color: var(--text-dark);
  font-size: var(--font-size-h4);
  margin: 1.25rem 0 0.5rem;
}

h5 {
  color: var(--text-main);
  font-size: var(--font-size-h5);
  margin: 1.25rem 0 0;
}

/* ------------------------------------------------------------ */
/* Überschriften-Abstand für rechte Spalte */
.spacerH1 {
  font-family: var(--font-headline);
  font-weight: 500;
  margin: 0;
  color: var(--color-blue);
  font-size: var(--font-size-h1);
  margin: var(--spacing-md) 0;
  text-transform: uppercase;
  line-height: 1;
}

@media screen and (max-width: 650px) {
  .spacerH1 { display: none; visibility: hidden;}
}

/* ------------------------------------------------------------ */
/* Text Utilities */
p { margin: 0; padding: 0; hyphens: auto; }
em, .em { font-style: italic; }
strong, .strong { font-weight: 500; }
small, .small { font-size: var(--font-size-small); }
sub, sup { font-size: 0.8rem; line-height: 1; }
sub { vertical-align: sub; }
sup { vertical-align: super; }

/* ------------------------------------------------------------ */
/* Images */
img.imagebild { display: block; width: 100%; }
img.imagebild_r { float: right; width: 40%; margin: 0 0 1rem 2rem; }
img.imagebild_l { float: left; width: 40%; margin: 0 2rem 1rem 0; }

@media screen and (max-width: 730px) {
  img.imagebild_r, img.imagebild_l {
    float: none; width: 100%; margin: 1rem 0;
  }
}

/* ------------------------------------------------------------ */
/* Lists */
ol, ul {
  margin: 15px 0 20px 20px;
  padding: 0;
  list-style-position: outside;
}

ol { list-style-type: decimal; }
ul { list-style-type: square; }
li { padding: 0 0 8px 0; }

ul.check, ul.li-arrow {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
}

ul.check li::before,
ul.li-arrow li::before {
  color: var(--color-blue);
  position: absolute;
  left: 0;
  font-weight:  bold;	
	font-size: 100%;
  line-height: 1;
}

ul.check li::before {
  content: "✓"; 
  top: 5px;
}

ul.li-arrow li::before {
  content: "➔";
  top: 5px;
}

ul.check li, ul.li-arrow li { position: relative; padding-left: 25px; }

/* ------------------------------------------------------------ */
/* Backgrounds */
.bg-darkgray { background: var(--color-darkgray); }
.bg-light { background: var(--color-lightgray); }
.bg-sm-blue { background: var(--gradient-blue); }
.bg-werder-gruen { background: var(--color-green); }

.bg-image {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  aspect-ratio: 6 / 2.3;
  border-bottom: 2px solid var(--color-white);
}
@media screen and (max-width: 650px) {
  .bg-image { aspect-ratio: 3 / 2; }
}

.bg-sm-logo {
  background-image: url(/images/logo-sm-transparent.png), var(--gradient-blue);
  background-position: calc((100% - 1200px) / 2 + 1200px) center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto calc(100% - 8rem), cover;
}

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

/* ------------------------------------------------------------ */
/* Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-sm) !important; }
.mb-2 { margin-bottom: var(--spacing-md) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-sm) !important; }
.mt-2 { margin-top: var(--spacing-md) !important; }
.center { text-align: center !important; }
.clear { clear: both; }
.fail { color: var(--color-red); }

/* ------------------------------------------------------------ */
/* Gemeinsame Styles für alle responsiven Inhalte */
.responsive {
  width: 100%;
  border: 5px solid var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 8px; /* optional */
  overflow: hidden;
  display: block;
}

/* Spezifisches Verhältnis für Videos (YouTube, Vimeo) */
.responsive-video {
  aspect-ratio: 16 / 9;
}

/* Spezifisches Verhältnis für Maps */
.responsive-map {
  aspect-ratio: 4 / 3;
}

/* iframe / video innerhalb der Box */
.responsive iframe,
.responsive video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* ------------------------------------------------------------ */
/* Header & Navigation */

#navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--nav-bg);
  padding: 0 var(--spacing-md);

  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--box-shadow);
  border-bottom: 2px solid var(--color-blue);
}

#navigation-in {
  max-width: var(--container-max);
  width: 100%;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  #navigation-in {
  justify-content: flex-end;
}
}

#logo-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 60vh; /* Höhe des Sliders */
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo img {
  width: 100%;
  max-width: 700px;
  filter: drop-shadow(0 0px 40px rgba(255,255,255,1));
  padding: 0 1rem;
}

/* ------------------------------------------------------------ */
/* Content */
.content {
  padding: var(--spacing-xl) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-in {
  max-width: var(--container-max);
  width: 100%;
}
.content-in + .content-in { margin-top: var(--spacing-lg); }

/* ------------------------------------------------------------ */
/* Box-Groups */
.box-group { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); }
.box-group5050 > div { width: calc(50% - (3rem / 2)); }
.box-group6040 > div:nth-of-type(odd) { width: calc(60% - (3rem / 2)); }
.box-group6040 > div:nth-of-type(even) { width: calc(40% - (3rem / 2)); }
.box-group7030 > div:nth-of-type(odd) { width: calc(70% - (3rem / 2)); }
.box-group7030 > div:nth-of-type(even) { width: calc(30% - (3rem / 2)); }
.box-group3070 > div:nth-of-type(odd) { width: calc(30% - (3rem / 2)); }
.box-group3070 > div:nth-of-type(even) { width: calc(70% - (3rem / 2)); }
.box-group4060 > div:nth-of-type(odd) { width: calc(40% - (3rem / 2)); }
.box-group4060 > div:nth-of-type(even) { width: calc(60% - (3rem / 2)); }
.box-group4555 > div:nth-of-type(odd) { width: calc(45% - (3rem / 2)); }
.box-group4555 > div:nth-of-type(even) { width: calc(55% - (3rem / 2)); }

@media screen and (max-width: 650px) {
  .box-group5050 > div,
  .box-group6040 > div,
  .box-group4060 > div,
  .box-group4555 > div,
  .box-group7030 > div,
  .box-group3070 > div { width: 100%; }
}

/* ------------------------------------------------------------ */
/* Footer */
#footer {
  padding: var(--spacing-lg) var(--spacing-sm);
  background: var(--footer-bg);
}
#footer-in {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}
#footer-in * { color: var(--text-main); }

#footer-logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#footer-logo img { max-width: 350px; }

#footer-in ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0; padding: 0;
}
#footer-in li {
  padding: 0 var(--spacing-xs);
  border-right: 1px solid var(--color-blue);
}
#footer-in li:last-child { border: none; }
#footer-in li button:hover { text-decoration: underline;}

/* ------------------------------------------------------------ */
/* Buttons */
.button {
  background: var(--btn-bg-primary);
  color: var(--btn-text-primary);
  border: none;
  padding: 15px 32px;
  cursor: pointer;
  transition: all 0.2s ease-in;
  margin: var(--spacing-sm) 0;
}
.button:hover {
  background: var(--btn-bg-primary-hover);
  color: var(--btn-text-primary);
  text-decoration: none;
}

/* ------------------------------------------------------------ */
table.kontakt {
  border-collapse: collapse;
}

table.kontakt td:first-child {
  padding-right: var(--spacing-sm);
}

/* ------------------------------------------------------------ */

.geschaeftsbereiche {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  
}

.geschaeftsbereiche > a {
  width: calc((100% - 3 * 3rem) / 4);  /* 4spaltig */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .geschaeftsbereiche > a {
  font-size: 1rem;
}
}

@media screen and (max-width: 650px) {
  .geschaeftsbereiche > a {
  width: calc((100% - 1 * 3rem) / 2);  /* 2spaltig */
  font-size: 1.3rem;
}
}

.geschaeftsbereiche > a:hover {
 text-decoration: none;
}


.geschaeftsbereiche > a .icon span {
 font-size: clamp(40px, 20vw, 200px);
 border: 2px solid var(--color-white);
}

.geschaeftsbereiche > a:hover .icon span{
 background-color: var(--color-white);
 color: var(--color-blue);

}

/* ------------------------------------------------------------ */

.accordion{
  margin:0;
  display:block;
  gap:var(--accordion-gap);
}

.accordion input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.accordion .accordion-item{
  background:var(--accordion-bg);
  overflow:hidden;
  margin-bottom: var(--accordion-gap);
  border: 1px solid #ddd;
}

.accordion .accordion-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  letter-spacing:0.2px;
}

.accordion .accordion-label:hover{
  background-color: var(--color-blue);
  color: var(--color-white);
}

.accordion .accordion-label .accordion-chev{
  transition: transform var(--accordion-transition);
  transform-origin:center;
  display:inline-block;
}

.accordion .accordion-content{
  max-height:0;
  overflow:hidden;
  padding:0 20px;
  transition: max-height var(--accordion-transition), padding var(--accordion-transition);
  color:var(--accordion-muted);
  font-weight:400;
  line-height:1.5;
}

.accordion input[type="radio"]:checked + .accordion-label{
  background-color: var(--color-blue);
  color: var(--color-white);
}

.accordion input[type="radio"]:checked + .accordion-label + .accordion-content{
  max-height:3000px;
  padding:16px 20px 20px 20px;
}

.accordion input[type="radio"]:checked + .accordion-label .accordion-chev{
  transform: rotate(180deg);
}

.accordion .accordion-meta{ 
  font-size:0.9rem; 
  color:var(--accordion-muted); 
  font-weight:500; 
}

.accordion input[type="radio"]:focus + .accordion-label{
  outline: 3px solid #fff;
  outline-offset:2px;
}

@media (max-width:520px){
  .accordion .accordion-label{ padding:14px 16px }
  .accordion .accordion-content{ padding-left:16px; padding-right:16px }
}

/* ------------------------------------------------------------ */

.benefit {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-lg);
  
}

.benefit > div {
  width: calc((100% - 4 * var(--spacing-lg)) / 5);  /* 5spaltig */
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
}


@media screen and (max-width: 1200px) {
  .benefit > div {
  width: calc((100% - 3 * var(--spacing-lg)) / 4);  /* 4spaltig */
}
}

@media screen and (max-width: 870px) {
  .benefit > div {
  width: calc((100% - 2 * var(--spacing-lg)) / 3);  /* 3spaltig */
}
}

@media screen and (max-width: 690px) {
  .benefit > div {
  width: calc((100% - 1 * var(--spacing-lg)) / 2);  /* 2spaltig */
}
}

.benefit > div span {
 font-size: clamp(40px, 20vw, 90px);
 margin: 0;
}