/* Reset & Basics */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ehk-blue:#005a9c;
  --ehk-grey:#f5f5f5;
  --max-width:1200px;
  --font:'Segoe UI',Arial,sans-serif;
  --footer-bg: #1a4466;        /* #1a4466 */
  --footer-text: #c8d1d3;       /* hellgrau */
  --footer-hover: #9fa9ab;

  --partner-bg: linear-gradient(
    135deg,
    #fff5eb 0%,
    #ffefe0 50%,
    #fff9f5 100%
  );
}
/*link farbe*/
a{text-decoration:none;color:inherit} 
body{
  font-family:var(--font);
  line-height:1.6;
  color:#222;
}

img{max-width:100%;display:block}


/* NAVIGATION */
header{
  background: linear-gradient(135deg,
              #FDFDFC 0%,
              #FFF8F5 40%,
              #F5FAFF 100%);

  box-shadow:0 2px 4px rgba(0,0,0,.1);
  position:sticky;
  top:0;
  z-index:1000;
}
nav{
  max-width:var(--max-width);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 1rem;
}

.nav-links {
  display: flex;
  gap: 2.5rem;               /* Standard */
  list-style: none;
  align-items: center;
}
@media (min-width: 769px) {
  .nav-links { gap: 2.5rem; } /* mehr Abstand ab Tablet/Desktop */
}

/*logo im Header*/
.logo{height:80px}
:root {
  --logo-shift: 15rem;   /* einfach anpassbar */
  --logo-w: 250px; 
}
.logo-link {
  margin-left: calc(-1 * var(--logo-shift));
  width: var(--logo-w);
  height: auto;
}


@media (max-width: 768px) {
  .logo-link { margin-left: 0; }
}


.nav-links a:hover{color:var(--ehk-blue)}

/* 1. Sprach-Button */
.lang {
  position: relative;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 1px solid var(--ehk-blue, #005a9c);
  color: var(--ehk-blue);
  padding: .45rem .9rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: .95rem;
  transition: background .25s, color .25s;
}
.lang-btn:hover {
  background: var(--ehk-blue);
  color: #fff;
}
.lang-current {
  font-weight: 600;
}
.lang-arrow {
  width: 12px;
  height: 8px;
  transition: transform .3s;
}
.lang-btn[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
}

/* 2. Dropdown */
.lang-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + .25rem);
  background: #fff;
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  min-width: 140px;
  display: none;
  z-index: 1001;
}
.lang-dropdown.show {
  display: block;
}

.lang-dropdown a {
  display: flex;
  align-items: center;
  gap: .5rem;          /* Abstand zwischen Flagge und Text */
}

.lang-dropdown a {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.flag {
  width: 20px;
  height: 14px;
  margin-left: 1rem;
}

.lang-dropdown a:active,
.lang-dropdown a.active:hover {
  color: var(--ehk-blue);
}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{
  width:28px;height:3px;background:#222;transition:.3s;
}
@media (max-width:768px){
  .nav-links{
    position:absolute;
    right:0;top:100%;
    background:#fff;
    flex-direction:column;
    width:200px;
    box-shadow:-2px 2px 6px rgba(0,0,0,.1);
    padding:1rem;
    display:none;
  }
  .nav-links.open{display:flex}
  .hamburger{display:flex}
}

/* HERO */
.hero{
  position:relative;
  height:90vh;
  min-height:400px;
  overflow:hidden;
}
.hero video{
  width:100%;height:100%;object-fit:cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* behalten */
  transform: translateY(-9%); /* ← 20 % nach oben schieben */
}

.hero-text {
  /* unsichtbare Fläche, die den Hintergrund weich zeichnet */
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);

  /* leichte dunkle Färbung, damit weißer Text bleibt */
  background: rgba(0, 0, 0, 0.35);

  padding: 2rem 2.5rem;
  border-radius: 8px;
  text-align: center;
  color: #fff;
}

.hero-text h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

.hero-text p {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  margin-bottom: 1.5rem;
}



@media (max-width: 600px) {
  .hero {
    height: 60vh;
  }
}

/* SCHWERPUNKT-GRID */

/* ===== DEKOR-HINTERGRUND ===== */
#schwerpunkte {
  position: relative;
  background: linear-gradient(135deg,
               #FFF8F5 0%,
               #F5FAFF 50%,
               #FFF8F5 100%);
  overflow: hidden;
}

/* Gemeinsame Basis für alle Dekor-Elemente */
#schwerpunkte::before,
#schwerpunkte::after {
  content: "";
  position: absolute;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}

/* Flamme – oben links */
#schwerpunkte::before {
  width: 220px;
  height: 220px;
  top: 5%;
  left: 2%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23EA6511' d='M32 0c-8 12-8 20-4 28s8 16 4 28c-8-12-8-20-4-28S24 12 32 0z'/%3E%3C/svg%3E")
              no-repeat center / contain;
}

/* Tropfen – unten rechts */
#schwerpunkte::after {
  width: 200px;
  height: 200px;
  bottom: 5%;
  right: 3%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%230571B9' d='M32 0c-8 12-8 20-4 28s8 16 4 28c-8-12-8-20-4-28S24 12 32 0z'/%3E%3C/svg%3E")
              no-repeat center / contain;
  transform: rotate(30deg);
}

/* zusätzliche Icons (falls im HTML <i class="…">) */
.decor-flame,
.decor-snow {
  position: absolute;
  width: 160px;
  height: 160px;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.decor-flame {
  top: 20%;
  right: 10%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23EA6511' d='M32 0c-8 12-8 20-4 28s8 16 4 28c-8-12-8-20-4-28S24 12 32 0z'/%3E%3C/svg%3E")
              no-repeat center / contain;
}
.decor-snow {
  bottom: 20%;
  left: 8%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23F5FAFF' d='M32 0c-8 12-8 20-4 28s8 16 4 28c-8-12-8-20-4-28S24 12 32 0z'/%3E%3C/svg%3E")
              no-repeat center / contain;
}


/* ===== SCHWERPUNKT-KACHELN ===== */
.section-title {
  text-align: center;
  margin: 7rem 0 5rem; /*oben, seitlich, unten*/
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ehk-blue, #005a9c);
  position: relative;
  z-index: 1;
}
/* ===== SCHWERPUNKT-KACHELN ===== */
.grid-2-1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 420px)); /* kleinere Kärtchen */
  gap: 8rem;                           /* Abstand IN DER MITTE */
  justify-content: center;               /* horizontal zentrieren */
  max-width: 1500px;                     /* nie breiter als 1000 px */
  margin: 0 auto;                        /* linker + rechter Rand */
  margin-bottom: 7rem;
}

/* Tablet: 2 Spalten, aber schmaler */
@media (max-width: 992px) {
  .grid-2-1 {
    grid-template-columns: repeat(2, minmax(260px, 360px));
    gap: 2.5rem;
  }
}

/* Mobile: 1 Spalte, Karte nimmt verfügbare Breite */
@media (max-width: 600px) {
  .grid-2-1 {
    grid-template-columns: 1fr;
    max-width: 420px;   /* auch auf Handy nicht zu breit */
  }
}
.card {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}
.card img {
  height: 280px;
  object-fit: cover;
}
.card-body {
  padding: 1.8rem;
}
.card-body h3 {
  margin-bottom: .8rem;
  font-size: 1.4rem;
  color: var(--ehk-blue);
}
.card-body p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.55;
}

/* ---------- Partner-Bereich ---------- */
.partner-section{padding:4rem 1rem;background: var(--partner-bg);
;   /* warmer, fast weißer Ton */}
.partner-grid {
  display: grid;
  grid-template-columns: 55% 45%;   /* statt 1fr 1fr → mehr Raum für links */
  gap: 4rem;
  max-width: var(--max-width);
  margin: 0 auto;          /* mittig, aber mehr Platz nach links */
  align-items: center;
}

/* linker Text – nicht über die Mitte */
.partner-text{
  max-width:540px;               /* Text darf nicht weiter als 540 px */
}
.partner-text h2{
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom:1.5rem;
  color:#ffa366/*var(--ehk-blue)*/
}
.partner-text p{
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height:1.5;
}

/* rechte Logos – deutlich größer */
.partner-logos{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 2×2 */
  gap:3rem;
}
.partner-logos a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background:#f7f9fb;
  border-radius:8px;
  transition:.25s;
}
.partner-logos a:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.partner-logos img{
  height:80px;              /* statt 44 px – deutlich größer */
  max-width:100%;
  object-fit:contain;
}

/* Responsive */
@media (max-width:768px){
  .partner-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .partner-logos{grid-template-columns:repeat(2,1fr);gap:2rem;}
}

@media (max-width:480px){
  .partner-logos{grid-template-columns:1fr} /* 1 Logo pro Reihe */
  .partner-logos img{height:60px} /* etwas kleiner auf Handy */
}


/* Danke-Popup */
.danke-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;z-index:10000}
.danke-overlay.show{display:flex}
.danke-box{background:#fff;color:#222;padding:2.2rem;border-radius:8px;text-align:center;max-width:420px;width:90%}
.danke-box h2{margin-bottom:.8rem;color:#005a9c}
.danke-box button{margin-top:1.2rem;padding:.6rem 1.4rem;border:none;border-radius:4px;background:#005a9c;color:#fff;cursor:pointer}
.danke-box button:hover{background:#0078d4}


/* ---------- Kontakt-Seite ---------- */
.contact-section{padding:4rem 1rem 6rem 1rem;background:var(--ehk-grey)}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:3.5rem;
  max-width:var(--max-width);
  margin:auto;
}

.form-col h1{
  max-width:640px;
  color: #005a9c;
}
.kontakt-form{display:grid;gap:1.2rem}
.kontakt-form label{font-weight:600;font-size:.9rem}
.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea{
  width:auto; max-width:100%; padding:.65rem .9rem;border:1px solid #ccc;border-radius:4px;font-family:inherit}
.kontakt-form textarea{resize:vertical;min-height:160px}

/* Checkbox-Zeile = normales Grid-Kind, links bündig */
.kontakt-form .checkbox-wrapper {
  display: grid;          /* nimmt dieselbe Spaltenbreite wie Inputs */
  grid-column: 1 / -1;    /* volle Breite des Grids */
  margin: 0;              /* keine Extra-Außenabstände */
}

/* nur noch die VISUALEN Styles für das innere Label */
.checkbox-label {
  display: flex;          /* innerhalb der Wrapper-Box */
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  margin: .2rem 0 0 0;
  flex-shrink: 0;
}

.honeypot{display:none !important}

@media (max-width: 360px) {
  .checkbox-label { flex-wrap: wrap; }
}



/* rechte Icons */
.icons-col{display:flex;flex-direction:column;gap:4rem;margin-top:6rem}
.info-card{background:#fff;padding:1.8rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.06);text-align:center}
.info-card .icon{width:48px;height:48px;fill:var(--ehk-blue);margin:0 auto .8rem}
.info-card h3{margin-bottom:.4rem;color:var(--ehk-blue)}
.info-card a{font-weight:600;color:#222}
.info-card address{font-style:normal}

/* Button */
.btn{background:var(--ehk-blue);color:#fff;padding:.8rem 1.6rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:.25s}
.btn:hover{background:#0078d4}

/* Responsive */
@media (max-width:768px){
  .contact-grid{grid-template-columns:1fr}
  .icons-col {
     margin-top: 2.5rem;       /* auch auf Handy etwas Luft */
     gap: 2rem;
  }
  .info-card{flex:1 1 160px}
}


/* Cookie-Banner */
#cookieBanner{
  position:fixed;
  inset:auto 0 0 0;
  background:#111;
  color:#eee;
  padding:1.2rem 1rem;
  z-index:9999;
  transform:translateY(100%);
  transition:transform .4s ease;
}
#cookieBanner.show{transform:translateY(0)}
.cookie-wrapper{
  max-width:1200px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
}
.cookie-text{flex:1 1 500px;font-size:.9rem;line-height:1.4}
.cookie-buttons{display:flex;gap:.8rem;flex-wrap:wrap}
.cookie-btn{
  border:none;
  padding:.55rem 1.2rem;
  border-radius:4px;
  cursor:pointer;
  font-size:.9rem;
  transition:background .25s;
}
.btn-accept{background:#005a9c;color:#fff}
.btn-accept:hover{background:#0078d4}
.btn-deny{background:transparent;color:#ccc;border:1px solid #666}
.btn-deny:hover{background:#333}
.btn-settings{background:transparent;color:#ccc;border:1px solid #666}
.btn-settings:hover{background:#333}

/* Settings-Modal */
#cookieSettings{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:10000;
  align-items:center;
  justify-content:center;
}
#cookieSettings.show{display:flex}
.cookie-modal{
  background:#fff;
  color:#222;
  width:90%;max-width:520px;
  border-radius:8px;
  padding:1.8rem;
  position:relative;
}
.cookie-modal h3{margin-bottom:1rem}
.cookie-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}
.cookie-modal input[type="checkbox"]{width:20px;height:20px;accent-color:#005a9c}
.cookie-modal label{font-weight:600}
.cookie-modal small{display:block;margin-top:.2rem;color:#555}
.close-modal{
  position:absolute;
  top:1rem;right:1rem;
  background:none;border:none;font-size:1.4rem;cursor:pointer;
}

/* Danke-Popup */
.danke-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.danke-overlay.show{display:flex}
.danke-box{
  background:#fff;
  color:#222;
  padding:2rem 2.5rem;
  border-radius:8px;
  text-align:center;
  max-width:420px;
  width:90%;
}
.danke-box h2{margin-bottom:.8rem;color:#005a9c}
.danke-box button{margin-top:1.2rem;padding:.6rem 1.4rem;border:none;border-radius:4px;background:#005a9c;color:#fff;cursor:pointer}
.danke-box button:hover{background:#0078d4}






/* ---------- Über uns ---------- */
:root{
  --ehk-blue:#005a9c;
  --ehk-grey:#f5f5f5;
  --max-width:1200px;
  --font:'Segoe UI',Arial,sans-serif;
  --partner-bg: linear-gradient(135deg,#fff5eb 0%,#ffefe0 50%,#fff9f5 100%);
  --partner-heading:#ff7e35;
}

.ueber-uns{
  background:var(--partner-bg);
  padding:4rem 1rem 3rem;
  font-family:var(--font);
}

.ueber-uns .container{
  max-width:var(--max-width);
  margin:auto;
}

.section-header{
  text-align:center;
  margin-bottom:3rem;
}
.section-header h2{
  font-size:2.2rem;
  color:var(--partner-heading);
  margin-bottom:.5rem;
}
.section-header .subline{
  font-size:1.1rem;
  color:#555;
}

/* Grid */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:center;
}

/* Linke Spalte */
.col-text h3{
  font-size:1.5rem;
  margin-bottom:1rem;
  color:#222;
}
.col-text p{
  line-height:1.6;
  margin-bottom:1.5rem;
  color:#333;
}

.facts{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  padding:0;
  margin-bottom:2rem;
}
.facts li{
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  padding:.6rem 1rem;
  text-align:center;
  flex:1 1 100px;
}
.facts li span{
  display:block;
  font-size:1.4rem;
  font-weight:600;
  color:var(--partner-heading);
}

.team-pic img{
  width:100%;
  border-radius:6px;
  margin-top:1rem;
}
.team-pic figcaption{
  font-size:.8rem;
  color:#777;
  text-align:center;
  margin-top:.4rem;
}

/* Rechte Spalte */
.col-visual .img-box img{
  width:100%;
  border-radius:6px;
}
blockquote{
  font-style:italic;
  color:#444;
  border-left:4px solid var(--partner-heading);
  padding-left:1rem;
  margin-top:1.5rem;
}

/* Responsive */
@media(max-width:768px){
  .two-col{grid-template-columns:1fr;text-align:center}
  .facts{justify-content:center}
}



/* Schwerpunkte */
.focus {
  padding: 100px 20px;
  background-color: #f5f7f8;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-container {
  max-width: 1200px;
  margin: 0 auto;
}

.focus-header {
  max-width: 720px;
  margin-bottom: 80px;
}

.focus-header h2 {
  font-size: 2.2rem;
  color: #005a9c;
  margin-bottom: 16px;
}

.focus-header p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

.focus-block {
  margin-bottom: 80px;
}

.focus-block.highlight {
  background-color: #ffffff;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.focus-text h3 {
  font-size: 1.6rem;
  margin-bottom: 16px;
  color: #005a9c;
}

.focus-intro {
  max-width: 700px;
  margin-bottom: 24px;
  font-size: 1.05rem;
  color: #444;
}

.focus-list {
  list-style: none;
  padding-left: 0;
}

.focus-list li {
  padding-left: 24px;
  margin-bottom: 12px;
  position: relative;
  color: #333;
}

.focus-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ff8c42;
  font-weight: bold;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.tile {
  background-color: #f9fbfc;
  padding: 28px;
  border-radius: 12px;
  border-left: 4px solid #005a9c;
}

.tile h4 {
  margin-bottom: 12px;
  font-size: 1.1rem;
  color: #005a9c;
}

.tile p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}




/* ---------- Footer ---------- */
.footer-grid{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  gap:7rem;     /*macht das was?*/
  max-width:var(--max-width);
  margin:auto;
  align-items:start
}
.footer-col li{
  margin:.4rem 0
}
.footer-col a{
  color:var(--footer-text);
  text-decoration:none
}
.footer-col a:hover{
  color:var(--footer-hover)
}

/* Responsive */
@media (max-width:768px){
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-logo{margin:0 auto 1rem}
}


/* ---------- neues Footer-Layout ---------- */
.site-footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  padding:3rem 1rem 2rem;
  font-family:var(--font);
}

.footer-logo-box img{
  height:48px;
  transform: translateX(-10rem)   /* weiter links */
             translateY(2rem);   /* tiefer */
}

.footer-menu-box{
  display:flex;
  gap:6rem;          /* Abstand zwischen Unternehmen / Rechtliches */
  margin-right:4rem ;
}

.footer-col ul{
  list-style:none;
  padding:0;
  margin:0; /*oben recht unten links*/
}

/* ---------- Footer – Logo weit links ---------- */
.footer-bar{
  max-width:var(--max-width);
  margin:auto;
  display:flex;
  align-items:flex-start;   /* Logo oben binden */
  justify-content:space-between;
  gap:2rem;
}

/* Copyright unterhalb zentrieren */
.footer-copy{
  text-align:center;
  margin-top:2rem;
  font-size:.8rem;
  color:var(--footer-text);
}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .footer-menu-box{flex-direction:column;gap:1.5rem}
    .footer-bar{flex-direction:column;align-items:center;text-align:center}
  .footer-logo-box{margin-right:0;margin-bottom:1rem}
}