:root{--bg:#f5f7fb;--ink:#0b1220;--muted:#4b5565;--pri:#003366;--pri-2:#00509e;--card:#ffffff;--ring:#e5e7eb}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}.mt-40{margin-top:40px}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--ring);z-index:1000}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.brand__logo{height:42px;width:auto}
.brand__name{font-weight:700;color:var(--pri)}
.nav{display:flex;gap:18px}
.nav__link{color:var(--ink);text-decoration:none;padding:10px 8px;border-radius:8px}
.nav__link:hover{background:var(--ring)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}
.nav-toggle__bar{ transition:transform .2s ease, opacity .2s ease; }

/* ---------- Hamburger-Button ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 42px;
  width: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle__bar {
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animation bei offenem Menü */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pri), var(--pri-2));
  color: #fff;
  padding: 80px 0 70px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(15,23,42,.4), transparent 55%);
  opacity: 0.8;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  z-index: 1;
}

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

.hero__content {
  max-width: 580px;
}

.hero__eyebrow {
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
  margin: 0 0 10px;
}

.hero__content h1 {
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 14px;
}

@media (max-width: 640px) {
  .hero__content h1 {
    font-size: 32px;
  }
}

.hero__lead {
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.95;
  margin: 0 0 20px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.hero__btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}

.hero__btn-secondary:hover {
  background: rgba(255,255,255,.12);
}

.hero__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  opacity: .95;
}

.hero__meta li + li {
  margin-top: 4px;
}

/* ================================
   HERO: Hintergrundbild rechts, verwaschen
   ================================ */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #003366 0%, #003366 40%, rgba(0,51,102,0.4) 100%);
}

/* Bild rechts als Hintergrund */
.hero__bg {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 70%;
    height: 120%;
    background-image: url("hero-tas-solingen.png"); /* <- NEUER NAME */
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;

    filter: blur(12px) brightness(0.9);
    opacity: 0.45;
    mask-image: linear-gradient(
        to left,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0) 100%
    );
    animation: heroFloat 18s ease-in-out infinite alternate;
}


/* sanfte Floating-Animation */
@keyframes heroFloat {
    0% {
        transform: translate(0, 0) scale(1.02);
    }
    50% {
        transform: translate(-3%, 2%) scale(1.03);
    }
    100% {
        transform: translate(0, -1%) scale(1.02);
    }
}

/* ---------- Sections / Features ---------- */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 26px;
}

.section-header h2 {
  margin: 0 0 6px;
  font-size: 26px;
}

.section-header p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.feature-grid .card.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feature-grid .card.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15,23,42,.12);
  border-color: rgba(0,80,158,.35);
}

.feature__icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,80,158,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.feature__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--pri-2);
  stroke-width: 1.6;
}

.feature__icon svg path {
  fill: var(--pri-2);
}



/* Grid & cards */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid--3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:18px}
.card h3{margin:0 0 8px}

/* ---------- About ---------- */
.about-section {
  padding: 0;
}

.about-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--pri);
  text-align: center;
  margin: 0 0 26px;
}

.about-subtitle {
  font-size: 20px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--pri);
}

.about-text {
  font-size: 17px;
  line-height: 1.75;
  color: #111827;
  max-width: auto;
  margin: 0 20px;
}

.about-text p {
  margin-bottom: 16px;
}

.about-list {
  margin: 10px 0 26px 1.2em;
  padding-left: 0;
  list-style: disc;
}

.about-list li {
  margin-bottom: 6px;
}

/* Dekorative Trennlinie */
.section-divider {
  max-width: 1100px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--ring), transparent);
}

/* ---------- Kurstyp-Übersicht auf der Kursseite ---------- */

.kurstyp-section {
  margin-top: 30px;
  margin-bottom: 20px;
}

.kurstyp-grid {
  margin-top: 16px;
}

.kurstyp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kurstyp-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kurstyp-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0,80,158,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kurstyp-card__icon i {
  font-size: 22px;
  color: var(--pri-2);
}

.kurstyp-card__title {
  margin: 0;
  font-size: 17px;
}

.kurstyp-card__badges {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.kurstyp-card__text {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}

/* Hover- & Active-State */
.kurstyp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
  border-color: rgba(0,80,158,0.35);
}

.kurstyp-card--active {
  border-color: rgba(0,80,158,0.7);
  box-shadow: 0 10px 24px rgba(0,80,158,0.25);
}

/* ---------- Top Courses ---------- */
.topcourse-grid .topcourse {
    text-align: left;
    padding: 22px;
    border-radius: 18px;
    transition: all .2s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.topcourse-grid .topcourse:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

.topcourse__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(0,80,158,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.topcourse__icon i {
  font-size: 30px;       /* Icon-Größe */
  color: var(--pri-2);   /* dein TAS-Blau */
  line-height: 1;
}

.btn-small {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 14px;
    font-size: 14px;
    border-radius: 6px;
    background: var(--pri);
    color: #fff;
    text-decoration: none;
    transition: background .2s ease;
}

.btn-small:hover {
    background: var(--pri-2);
}

.feature__icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,80,158,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature__icon i {
  font-size: 30px;       /* Icon-Größe */
  color: var(--pri-2);   /* dein TAS-Blau */
  line-height: 1;
}

/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.input{height:40px;padding:0 12px;border:1px solid var(--ring);border-radius:10px;min-width:160px;background:#fff}

/* Course list */
.course{display:flex;flex-direction:column;gap:8px}
.course__title{font-size:18px;margin:0}
.course__meta{color:var(--muted);font-size:14px}
.course__actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}

/* kleines Icon in der Kursliste */
.course__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(0,80,158,0.08);
  margin-right: 8px;
}

.course__icon i {
  padding-left: 7px;
  width: 32px;
  font-size: 18px;
  color: var(--pri-2);
}

/* großer Icon-Block im Kursdetail-Header */
.detail__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.detail__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(0,80,158,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail__icon i {
  font-size: 36px;
  color: var(--pri-2);
}

.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ring);background:#f8fafc;border-radius:999px;padding:4px 10px;font-size:12px}

/* Detail */
.detail{display:grid;gap:20px;grid-template-columns:2fr 1fr}
@media (max-width:900px){.detail{grid-template-columns:1fr}}
.detail__box{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:18px}
.detail h1{margin:0 0 6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--ring);text-align:left;padding:8px}

/* Forms */
.form{display:grid;gap:12px}
.form__row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (max-width:700px){.form__row{grid-template-columns:1fr}}
.label{font-size:14px;color:var(--muted)}
.input-full{width:100%;height:44px;padding:0 12px;border:1px solid var(--ring);border-radius:10px}
.textarea{min-height:100px;padding:10px}
.form__actions{display:flex;gap:10px}

/* Footer */
.site-footer{margin-top:60px;padding:30px 0;background:#0f172a;color:#cbd5e1}
.site-footer a{color:#cbd5e1}
.footer__bar{border-top:1px solid #1f2937;margin-top:20px;padding-top:10px;text-align:center;font-size:14px}

/* Hamburger Button (standardmäßig versteckt) */
.nav-toggle{
  display:none;
  border:1px solid var(--ring);
  background:#fff;
  border-radius:10px;
  height:40px;
  width:44px;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
}
.nav-toggle__bar{
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
}

/* Mobile Navigation (hidden by default, absolute dropdown) */
.nav{
  display:flex;
  gap:18px;
}
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:absolute;
    top:64px; /* Höhe Header */
    right:20px;
    left:20px;
    display:none;            /* zu */
    flex-direction:column;   /* vertikal */
    gap:0;
    background:#fff;
    border:1px solid var(--ring);
    border-radius:12px;
    padding:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    z-index:60;
  }
  .nav.is-open{ display:flex; z-index: 1100;} /* auf */

  .nav__link{
    padding:12px 10px;
    border-radius:8px;
    display:block;
  }
}

/* ========== Registration / Multi-Step Styles ========== */

.registration-wrapper {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Abschnitt (Step) aus- bzw einblenden */
.step {
  display: block;
  animation: fadeIn 0.3s ease;
}
.step.hidden {
  display: none;
}

/* Teilnehmer-Block */
.teilnehmer-block {
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--card);
}

.teilnehmer-block h3 {
  margin-top: 0;
}

/* Buttons horizontal gruppieren */
.form__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* Buttons */
.multi-step-form .btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--pri);
  color: white;
  cursor: pointer;
  font-weight: 600;
}

.multi-step-form .btn:hover {
  background: var(--pri-2);
}

.multi-step-form .btn.prev {
  background: #e5e7eb;
  color: var(--ink);
}

.multi-step-form .btn.prev:hover {
  background: #d1d5db;
}

/* Add-Teilnehmer-Button */
#addTeilnehmer {
  margin: 10px 0 20px;
  background: #fff;
  border: 1px solid var(--ring);
  color: var(--pri);
}

#addTeilnehmer:hover {
  background: var(--pri-2);
  color: #fff;
}

/* Zusammenfassung */
#summary {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 18px;
}

/* Bedingungen / Terms-Box */
.terms-box {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 16px;
  background: #f9fafb;
  margin-bottom: 20px;
}

/* Checkbox-Labels */
.step[data-step="4"] label {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
}

/* Simple fadeIn animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsives Verhalten */
@media (max-width: 640px) {
  .form__row {
    display: block;
  }
  .form__row > div {
    width: 100%;
    margin-bottom: 12px;
  }
  .form__actions {
    flex-direction: column;
    gap: 12px;
  }
}

/* Erfolgsmeldung */
#successMsg {
  text-align: center;
  padding: 40px;
}

/* Formular-Styles */
.registration-wrapper {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.multi-step-form input,
.multi-step-form select,
.multi-step-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ring);
  border-radius: 8px;
  font-size: 15px;
  transition: border-color .2s;
  background: #fff;
}

.multi-step-form input:focus,
.multi-step-form select:focus,
.multi-step-form textarea:focus {
  border-color: var(--pri-2);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,80,158,0.2);
}

.multi-step-form label {
  display: block;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
}

.multi-step-form h2 {
  font-size: 22px;
  border-bottom: 2px solid var(--pri);
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.teilnehmer-block {
  background: #f9fafb;
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background .2s;
}

.btn.btn--primary {
  background: var(--pri-2);
  color: #fff;
}
.btn.btn--primary:hover {
  background: var(--pri);
}

.btn.prev {
  background: #e5e7eb;
  color: var(--ink);
}
.btn.prev:hover {
  background: #d1d5db;
}

.progress {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin-bottom: 20px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--pri);
  transition: width .3s ease;
}

.toggle-header {
  cursor: pointer;
  color: var(--pri-2);
  margin-top: 16px;
  margin-bottom: 6px;
}
.toggle-header:hover {
  color: var(--pri);
}
.toggle-content {
  padding: 10px;
  border: 1px solid var(--ring);
  border-radius: 6px;
  background: #f8fafc;
  margin-bottom: 16px;
}

.hidden {
  display: none !important;
}