/* Gemeinsame Gestaltung der Wissens-Seiten. Vorher lag dieselbe CSS als
   <style>-Block in jeder Seite, was jede Aenderung fuenfmal noetig machte. */

:root {
  --primary: #4F46E5;
  --primary-dark: #3f2e90;
  --text: #241d46;
  --muted: #5b5675;
  --bg-soft: #f6f5ff;
  --line: #e6e2f7;
  --hinweis-bg: #fff7ea;
  --hinweis-line: #f1d9ad;
  --hinweis-text: #5f4a2e;
  --breite: 760px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  line-height: 1.65;
  background: #fff;
}

/* Kopf und Fuss */
header { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.head-inner {
  max-width: var(--breite); margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.head-inner img { width: 30px; height: 30px; }
.head-inner a.brand { font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.05rem; }
.head-inner nav { margin-left: auto; display: flex; gap: 1rem; }
.head-inner nav a { color: var(--primary); text-decoration: none; font-size: 0.95rem; }

footer { border-top: 1px solid var(--line); margin-top: 2rem; }
.foot-inner {
  max-width: var(--breite); margin: 0 auto; padding: 1.2rem 1.25rem;
  font-size: 0.9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 1rem;
}
.foot-inner a { color: var(--primary); text-decoration: none; }

/* Textkoerper */
main { max-width: var(--breite); margin: 0 auto; padding: 2.2rem 1.25rem 3rem; }
.breadcrumb { font-size: 0.88rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--primary); text-decoration: none; }
h1 { font-size: 1.8rem; line-height: 1.25; color: var(--primary-dark); margin-bottom: 0.7rem; }
.lead { font-size: 1.08rem; color: var(--muted); margin-bottom: 1.8rem; }
h2 { font-size: 1.3rem; color: var(--primary-dark); margin: 2rem 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 0.3rem; }
p, li { margin-bottom: 0.7rem; }
ul, ol { padding-left: 1.3rem; margin-bottom: 1rem; }
main a { color: var(--primary); }

/* Bilder. width/height stehen im HTML, damit beim Laden nichts springt. */
figure { margin: 1.5rem 0; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
}
figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.5; }
figure.hero { margin: 0 0 1.8rem; }

/* Selbst gezeichnete Ablaufgrafiken (Inline-SVG) */
figure.schema img, figure.schema svg {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
}

/* Handlungsaufforderung */
.cta {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.3rem 1.5rem; margin: 2.2rem 0;
}
.cta strong { color: var(--primary-dark); }
.cta a.btn {
  display: inline-block; margin-top: 0.7rem; background: var(--primary); color: #fff;
  text-decoration: none; padding: 0.55rem 1.2rem; border-radius: 8px; font-weight: 600;
}

/* Hervorgehobener Kasten, etwa fuer die Fortbildung */
.hinweis {
  background: var(--hinweis-bg); border: 1px solid var(--hinweis-line); border-radius: 12px;
  padding: 1.2rem 1.4rem; margin: 2rem 0; color: var(--hinweis-text);
}
.hinweis h2, .hinweis h3 { color: var(--hinweis-text); margin-top: 0; }
.hinweis img.logo { height: 34px; width: auto; margin-bottom: 0.6rem; border: 0; }
.hinweis a { color: #9a5b0c; }

/* Videovorschau: Standbild mit Link, kein eingebetteter Player, damit beim
   Seitenaufruf keine Daten an YouTube gehen. */
.video-karte { display: block; text-decoration: none; color: inherit; margin: 1.5rem 0; }
.video-bild { display: block; }
.video-bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px;
}
.video-karte .video-text { font-size: 0.92rem; color: var(--muted); margin-top: 0.5rem; }
.video-karte:hover .video-bild img { border-color: var(--primary); }

/* Kartenliste auf der Uebersicht */
.card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem;
  margin-bottom: 1rem; text-decoration: none; color: var(--text);
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--primary); }
.card img {
  width: 132px; height: 92px; object-fit: cover; flex: none;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft);
}
.card h2 { font-size: 1.12rem; color: var(--primary); margin: 0 0 0.3rem; }
.card p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* Faktenzeile */
.fakten {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  list-style: none; padding: 0; margin: 1.4rem 0 0;
}
.fakten li {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.85rem; font-size: 0.88rem; color: var(--muted); margin: 0;
}

.faq h3 { color: var(--primary-dark); }
.related { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.2rem; font-size: 0.95rem; }
.related a { color: var(--primary); text-decoration: none; display: block; margin-bottom: 0.4rem; }

.stand { font-size: 0.85rem; color: var(--muted); margin-top: 2rem; }

@media (max-width: 560px) {
  h1 { font-size: 1.5rem; }
  .card { flex-direction: column; gap: 0.8rem; }
  .card img { width: 100%; height: 150px; }
}