
:root{
  --blue:#004aad;
  --blue-dark:#003580;
  --bg:#f7fbff;
  --card:#f0f8ff;
  --text:#2b2b2b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:80px 20px;}

/* Header / Single Nav */
.header{position:sticky;top:0;z-index:1000;background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:30px;padding:12px 20px;}
.nav .links{display:flex;gap:22px;align-items:center}
.nav a{color:#fff;font-weight:600;opacity:.95;font-size:1.15em}
.nav a:hover{opacity:1;text-decoration:underline}

/* Hero */
.hero{min-height:70vh;display:grid;place-items:center;text-align:center;padding:60px 20px;background:
linear-gradient(rgba(0,20,60,.55),rgba(0,20,60,.55)),
url('https://images.unsplash.com/photo-1507874457470-272b3c8d8ee2?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;color:#fff}
.hero h1{font-size:clamp(28px,5vw,44px);margin:0 0 8px}
.since{
  display:inline-block;
  margin:6px 0 12px;
  padding:6px 14px;
  border-radius:10px;
  background:#004aad;
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-shadow:1px 1px 3px rgba(0,0,0,.4);
}
.hero p{font-size:clamp(16px,2.5vw,20px);opacity:.95}
.hero .cta{margin-top:24px;display:inline-block;background:#fff;color:var(--blue);padding:12px 18px;border-radius:10px;font-weight:700}

/* Grid / Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:22px;border:1px solid #e8f1ff}
.card h3{color:var(--blue);margin-top:0}

/* Footer */
.footer{background:var(--blue);color:#fff;text-align:center;padding:24px 18px;margin-top:40px}

/* Forms */
input,textarea,button{font:inherit}
.form{max-width:560px;margin:0 auto;display:grid;gap:12px}
.input,textarea{padding:12px;border:1px solid #cfe2ff;border-radius:10px;background:#fff}
button.btn{background:var(--blue);color:#fff;border:none;padding:12px 16px;border-radius:10px;font-weight:700;cursor:pointer}
button.btn:hover{background:var(--blue-dark)}

/* Page banner */
.banner{padding:64px 20px;background:linear-gradient(120deg,var(--blue),#1f64d6);color:#fff}
.banner h1{margin:0;font-size:clamp(26px,4vw,40px)}
.breadcrumbs{opacity:.9;margin-top:8px}
.section{padding:30px 0}

.nav-logo{
  height:50px;
  width:auto;
  display:inline-block;
  margin-right:20px;
}

/* Jubiläumslogo im Header (links, freigestellt) */
.jubilogo{
  height:50px;
  width:auto;
  margin-right:14px;
  display:inline-block;
  vertical-align:middle;
}
.nav{display:flex;align-items:center;}
.nav .links{display:flex;gap:22px;align-items:center}


/* Jubiläumslogo Header */
.jubilogo{
  height:50px;
  width:auto;
  margin-right:14px;
  display:inline-block;
  vertical-align:middle;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(-10px);}
  to{opacity:1; transform:translateY(0);}
}


.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.partner-logos img {
  max-height: 60px;
  width: auto;
  background: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}


.tipos-logo {
  max-width: 60% !important;
  display: block;
  margin: 20px auto;
}


/* --- Animated Lightshow Background --- */
.lightshow-bg{
  background: linear-gradient(-45deg, #004aad, #6a00f4, #ff0066, #00e5ff);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


/* === Referenzen Grid (modern, non-cropping) === */
.ref-wrapper{max-width:1200px;margin:0 auto;padding:24px 16px;}
.ref-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
.ref-header h1{font-size:clamp(1.6rem,2vw,2rem);margin:0;}
.ref-sub{color:#666;font-size:.95rem;margin-bottom:16px;}
.ref-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.ref-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.ref-grid{grid-template-columns:1fr;}}
.ref-card{background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:14px;transition:transform .15s ease,box-shadow .15s ease;border:1px solid rgba(0,0,0,.06);}
.ref-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10);}
.ref-media{width:100%;aspect-ratio:4/3;background:#f6f7f9;border-radius:10px;display:grid;place-items:center;overflow:hidden;}
.ref-media img{width:100%;height:100%;object-fit:contain;}
.ref-caption{font-size:.9rem;color:#444;margin-top:10px;text-align:center;word-break:break-word;}







nav ul li a.highlight-news {
  background-color: #fff;
  color: #007BFF !important; /* blue text */
  padding: 6px 12px;
  border-radius: 6px;
  border: 2px solid #007BFF;
}
nav ul li a.highlight-news:hover {
  background-color: #007BFF;
  color: #fff !important;
}


/* === Responsive base tweaks (added) === */
img, video, canvas, svg {max-width:100%;height:auto;}
iframe{max-width:100%;}
.container{max-width:1200px;margin:0 auto;padding:80px 20px;}
@media (max-width:1024px){ .container{padding:60px 18px;} }
@media (max-width:768px){ .container{padding:48px 16px;} }
@media (max-width:560px){ .container{padding:36px 14px;} }
.nav{display:flex;align-items:center;justify-content:flex-end;gap:30px;padding:12px 20px;}
.nav-toggle{display:none;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:10px;padding:10px 12px;font-weight:600;cursor:pointer}
.nav .links{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
@media (max-width:980px){
  .nav{justify-content:space-between;}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;}
  .nav .links{display:none;position:absolute;top:56px;left:0;right:0;background:var(--blue);padding:12px 20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.2)}
  .nav .links.open{display:flex;}
  .nav .links a{padding:10px 4px;width:100%;}
}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr;}}
.table-wrap{width:100%;overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
