/* ===============================
   Farb- & Typo-Variablen
   =============================== */
:root{
  --brand:#0b2a3a;           /* Markenblau */
  --accent:#0077b6;          /* Primär-CTA */
  --accent-dark:#005a85;     /* Hover-CTA */
  --bg:#f7f8fa;              /* Seitenhintergrund */
  --text:#222;               /* Standardtext */
}

/* ===============================
   Basis / Reset
   =============================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Links global NICHT unterstreichen — außer wir wollen es explizit */
a{color:inherit;text-decoration:none}
a.link{color:var(--accent)}             /* „Textlink“-Optik */
a.link:hover{text-decoration:underline} /* Unterstreichung nur bei Hover */

/* ===============================
   Layout-Helfer
   =============================== */
.container{max-width:960px;margin:0 auto;padding:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:880px){.grid-2{grid-template-columns:1fr}}

/* ===============================
   Markenbalken
   =============================== */
.brandbar{background:var(--brand);color:#fff;font-size:.95rem}
.brandbar .container{display:flex;align-items:center;gap:12px;padding:8px 24px}
.brandbar img{border-radius:50%}
.brandbar a{color:#fff}
.brandbar a:hover{text-decoration:underline}

/* ===============================
   Hero (technischer Hintergrund)
   =============================== */
header.hero{
  position:relative;
  color:#fff;
  text-align:center;
  padding:80px 24px;
  background:var(--brand) url("/src/img/python-schulung.jpg") center/cover no-repeat; /* <-- technisches Bild */
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(0,0,0,.45); /* abdunkeln für bessere Lesbarkeit */
}
.hero-text{position:relative;z-index:1;max-width:820px;margin:0 auto}
.hero h1{font-size:2.4rem;margin:0 0 12px}
.hero p{font-size:1.1rem;margin:0 0 14px}
.hero .meta{opacity:.9;font-size:.95rem}

/* ===============================
   CTA-Buttons
   =============================== */
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-block;padding:12px 20px;border-radius:6px;
  font-weight:700;line-height:1;transition:background .2s ease
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}

/* ===============================
   Sektionen / Karten
   =============================== */
section{
  background:#fff;margin:28px auto;padding:28px;border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  opacity:0;transform:translateY(28px);transition:all .6s ease-out; /* Scroll-Reveal Startzustand */
}
section.visible{opacity:1;transform:translateY(0)}
h2{margin:0 0 10px;color:var(--brand)}
h3{margin:14px 0 8px}

/* Checkliste */
ul.check{list-style:none;padding:0;margin:0}
ul.check li{position:relative;margin:0 0 10px;padding-left:24px}
ul.check li::before {
  content: "\f00c";               /* Häkchen in Font Awesome */
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900;               /* wichtig für Solid-Stil */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
}

/* Info-Boxen */
.card{
  background:#fff;border:1px solid #e8edf2;border-radius:10px;padding:16px;
  transition:transform .15s ease, box-shadow .15s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.06)}

/* ===============================
   Footer
   =============================== */
footer{
  background:#2c3e50;color:#fff;padding:20px;text-align:center;margin-top:32px;font-size:.95rem
}
footer a{color:#fff}
footer a:hover{text-decoration:underline}

/* Elemente mit data-reveal bekommen Reveal-Startzustand */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* Wird per JS gesetzt, wenn Element im Viewport ist */
.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* Wird per JS gesetzt, wenn Element im Viewport ist */
.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* Fallback, falls JS aus ist */
html.no-js [data-reveal]{
  opacity:1;
  transform:none;
}
/* Fallback, falls JS aus ist */
html.no-js [data-reveal]{
  opacity:1;
  transform:none;
}

/* --- Wird per JS gesetzt, wenn Element im Viewport --- */
.is-visible{
  opacity:1;
  transform: translateY(0);
}