:root{
  --bg:#0b1220;
  --card:#101a33;
  --text:#eaf0ff;
  --muted:#b9c4e3;
  --line:rgba(234,240,255,.12);
  --accent:#8be9fd;
  --accent2:#7ee787;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
  background: radial-gradient(1200px 600px at 15% 0%, rgba(139,233,253,.20), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(126,231,135,.16), transparent 55%),
              linear-gradient(180deg, #070b14, var(--bg));
  color:var(--text);
  line-height:1.6;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:24px}
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,11,20,.65);
  border-bottom: 1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.dot{width:12px; height:12px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 0 0 6px rgba(139,233,253,.12)}
.menu{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.menu a{color:var(--muted); font-weight:700; font-size:14px; padding:8px 10px; border-radius:12px}
.menu a:hover{color:var(--text); background: rgba(7,11,20,.35); border: 1px solid var(--line)}
.hero{padding:54px 0 18px}
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} .hero{padding-top:28px} }
.card{
  background: rgba(16,26,51,.72);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.kicker{color:var(--accent); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:12px}
h1{margin:10px 0 8px; font-size:40px; line-height:1.12}
@media (max-width: 900px){ h1{font-size:32px} }
h2{font-size:22px; margin:0 0 10px}
h3{margin:0 0 6px; font-size:16px}
.sub{color:var(--muted); font-size:16px; margin:0 0 18px}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0}
.badge{
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:999px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  background: rgba(7,11,20,.35);
}
.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius:12px;
  font-weight:900;
  border:1px solid var(--line);
  background: rgba(7,11,20,.35);
  color:var(--text);
  transition: transform .08s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(139,233,253,.55)}
.btn.primary{
  background: linear-gradient(135deg, rgba(139,233,253,.22), rgba(126,231,135,.18));
  border-color: rgba(139,233,253,.45);
}
.item {
  display: flex;
  flex-direction: column;
}

.item p {
  margin-top: auto;
}
.item img {
  object-fit: contain;
  max-height: 300px;
}
.mini{color:var(--muted); font-size:13px; margin-top:10px}
section{padding:18px 0}
.cols3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
/* Zertifikate: Cards gleich hoch */
.cols3 {
  align-items: stretch;
}

.cols3 .item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Bildblock zwingend nach unten + einheitliche Bild-Zone */
.cols3 .item p {
  margin-top: auto !important;   /* überschreibt das inline margin:10px 0 */
  margin-bottom: 0 !important;
  display: flex;
  align-items: flex-end;          /* Inhalt im p unten */
  height: 300px;                  /* gleiche Höhe für beide Zertifikate */
}

/* Link & Bild sauber skalieren */
.cols3 .item p a {
  display: block;
  width: 100%;
}

.cols3 .item p img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* nichts wird abgeschnitten */
}


@media (max-width: 900px){ .cols3{grid-template-columns:1fr} 
.split{grid-template-columns:1fr}
}


.item{padding:16px; border-radius:16px; border:1px solid var(--line); background: rgba(7,11,20,.35)}
.item p{margin:0; color:var(--muted); font-size:14px}
.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:6px 0}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.faq details{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  background: rgba(7,11,20,.35);
  margin:10px 0;
}
.faq summary{cursor:pointer; font-weight:900}
.faq p{color:var(--muted); margin:8px 0 0}
.breadcrumb{color:var(--muted); font-size:13px; margin:10px 0 0}
.footer{
  margin-top:22px;
  border-top:1px solid var(--line);
  padding:18px 0 30px;
  color:var(--muted);
  font-size:13px;
}
.smallLinks{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px}
.smallLinks a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.notice{border-left:3px solid rgba(139,233,253,.6); padding-left:12px}

/* --- Responsive Nav (Burger) --- */
.nav .wrap{position:relative}
.navToggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(7,11,20,.35);
  color:var(--text);
  cursor:pointer;
}
.navToggle:focus{outline:2px solid rgba(139,233,253,.55); outline-offset:2px}
.navIcon{display:inline-block; width:20px; height:14px; position:relative}
.navIcon span{
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background: rgba(234,240,255,.9);
  transition: transform .15s ease, top .15s ease, opacity .15s ease;
}
.navIcon span:nth-child(1){top:0}
.navIcon span:nth-child(2){top:6px}
.navIcon span:nth-child(3){top:12px}

@media (max-width: 900px){
  .menu{display:none; width:100%}
  .navToggle{display:inline-flex}
  .menu.open{
    display:flex;
    flex-direction:column;
    gap:6px;
    position:absolute;
    left:24px;
    right:24px;
    top:70px;
    padding:12px;
    border-radius:16px;
    border:1px solid var(--line);
    background: rgba(7,11,20,.92);
    box-shadow: var(--shadow);
  }
  .menu.open a{justify-content:flex-start}
}
/* --- End Responsive Nav --- */