/* ============================================================================
   svk.css  ·  das gemeinsame Stylesheet von selbstverstaendlich.de
   ============================================================================

   Benutzt von elf Seiten:
     /kurse/                        Kursuebersicht
     /kurse/<drei Lehrgaenge>/      Kursseiten
     /seminare/                     Seminaruebersicht
     /seminare/<sechs Seminare>/    Seminarseiten

   Vorher stand dieses CSS in jeder Seite eingebettet, also elfmal. Das waren
   rund 55 Prozent jeder Datei. Jetzt liegt es einmal hier und wird vom Browser
   einmal geladen und behalten.

   ACHTUNG BEIM UPLOAD: Diese Datei gehoert zwingend mit nach httpdocs. Fehlt
   sie, stehen alle elf Seiten unformatiert da. Das Abnahmeskript prueft es.

   Aufbau:
     1. Seitenrahmen      Koerper, Huelle, Kopf, Fuss
     2. Designsystem      alles unter .svk-root, Praefix "svk-"
     3. Uebersichtsseiten Karten und Merkmalslisten
     4. Seminarseiten     Lernlisten und Hinweiskasten
     5. Nachtraege        was fuer alle gilt

   Wer hier etwas aendert, aendert es fuer alle elf Seiten. Das ist der Sinn.
   ============================================================================ */


/* ==========================================================================
   1. Seitenrahmen
   ========================================================================== */

  /* Nur der Seitenrahmen. Alles Inhaltliche bringt der svk-Block selbst mit.
     Farben und Radien wie auf der Startseite, damit beide wie ein Stueck wirken. */
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;background:#FAF9F7;color:#5F5F5F;
    font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:16px;line-height:1.7
  }
  .huelle{max-width:46rem;margin:0 auto;padding:0 1.25rem}
  .kopf{padding:2.25rem 0 1.5rem}
  .kopf .marke{margin:0}
  .kopf .marke img{width:15rem;max-width:100%;height:auto;display:block}
  .kopf .marke a{display:inline-block}
  .kopf .marke a:focus-visible{outline:2px solid #A32D38;outline-offset:4px}
  .zurueck{font-size:.9rem;margin:.55rem 0 0}
  .zurueck a{color:#2B2B2B;text-decoration:underline;text-decoration-color:#A32D38;
    text-decoration-thickness:2px;text-underline-offset:.18em}
  .zurueck a:hover,.zurueck a:focus{color:#A32D38}
  a:focus-visible{outline:2px solid #A32D38;outline-offset:3px}

  footer.seitenfuss{
    border-top:1px solid #E3E1DD;margin-top:2.5rem;padding:1.5rem 0 3rem;
    font-size:.88rem;color:#8A8A8A
  }
  footer.seitenfuss ul{list-style:none;margin:0 0 .7rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
  footer.seitenfuss li{margin:0}
  footer.seitenfuss a{color:#8A8A8A;text-decoration:underline;text-decoration-color:#CFCCC6;
    text-decoration-thickness:2px;text-underline-offset:.18em}
  footer.seitenfuss a:hover,footer.seitenfuss a:focus{color:#2B2B2B;text-decoration-color:#A32D38}
  .anschrift{margin:0;font-style:normal}


/* ==========================================================================
   2. Designsystem
   ========================================================================== */
/* ============================================================
   Kursseite – Designsystem
   Fortsetzung von svm-materialien.css, gleiche Farben und Schriften.
   Präfix "svk-", alles unter .svk-root gekapselt – kollidiert weder
   mit Bootstrap 3 noch mit dem Theme.
   ============================================================ */

.svk-root {
  --svk-accent:        #A32D38;
  --svk-accent-dark:   #7A1F28;
  --svk-accent-soft:   rgba(163, 45, 56, .09);
  --svk-ink:           #2B2B2B;
  --svk-text:          #5F5F5F;
  --svk-muted:         #6B6B6B;   /* 5,3:1 auf Weiss. #8A8A8A waere 3,5:1 – zu hell */
  --svk-border:        #E3E1DD;   /* nur Dekor, keine Kontrastanforderung */
  --svk-border-strong: #CFCCC6;
  --svk-line-ui:       #8A8A8A;   /* Rand bedienbarer Flaechen: 3,5:1, WCAG 1.4.11 */
  --svk-soft:          #FAF9F7;
  --svk-green:         #2F6B4F;
  --svk-radius:        10px;

  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--svk-text);
}

.svk-root *,
.svk-root *::before,
.svk-root *::after { box-sizing: border-box; }

.svk-root h1, .svk-root h2, .svk-root h3, .svk-root h4 {
  font-family: "Roboto Slab", Georgia, serif;
  color: var(--svk-ink);
  font-weight: 400;
}

.svk-root a {
  color: var(--svk-ink);
  text-decoration: underline;
  text-decoration-color: var(--svk-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  transition: color .15s;
}
.svk-root a:hover, .svk-root a:focus { color: var(--svk-accent); }

.svk-root a.svk-btn,
.svk-root a.svk-btn--ghost,
.svk-root a.svk-quiet { text-decoration: none; }

/* ---------- Abschnitte ---------- */

.svk-sec { margin: 0 0 42px; scroll-margin-top: 20px; }
.svk-sec > h2 {
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.svk-sec__lead {
  margin: 0 0 20px;
  color: var(--svk-muted);
  font-size: 14.5px;
  max-width: 60ch;
}

/* ---------- Kopf ---------- */

.svk-hero { margin: 0 0 34px; }

.svk-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--svk-accent);
  margin: 0 0 8px;
}

.svk-root .svk-hero h1 {
  font-size: 33px;
  line-height: 1.18;
  margin: 0 0 14px;
}

.svk-hero__lead {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 60ch;
}

.svk-trainer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--svk-soft);
  border: 1px solid var(--svk-border);
  border-left: 4px solid var(--svk-accent);
  margin: 0 0 22px;
}

.svk-trainer img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 1px var(--svk-border);
}

.svk-trainer__name {
  font-weight: 700;
  color: var(--svk-ink);
  font-size: 15.5px;
  display: block;
}

.svk-trainer__txt { font-size: 14px; margin: 2px 0 0; }

.svk-trainer__proof {
  font-size: 13px;
  color: var(--svk-muted);
  margin: 6px 0 0;
}
.svk-trainer__proof strong { color: var(--svk-ink); }

/* ---------- Knöpfe ---------- */

.svk-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}

/* Die doppelte Klasse ist Absicht und wichtig: ".svk-root a" hat die
   Spezifitaet 0-1-1 und wuerde ein einfaches ".svk-btn" (0-1-0) schlagen –
   der Knopftext wuerde anthrazit auf Rot stehen, also 2,0:1. */

.svk-root .svk-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--svk-accent);
  color: #fff;                    /* Weiss auf #A32D38 = 7,0:1 */
  border: 1px solid var(--svk-accent);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  transition: background .15s, border-color .15s;
}

.svk-root .svk-btn:hover,
.svk-root .svk-btn:focus {
  background: var(--svk-accent-dark);   /* Weiss auf #7A1F28 = 10,3:1 */
  border-color: var(--svk-accent-dark);
  color: #fff;
}

.svk-root .svk-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  color: var(--svk-ink);          /* #2B2B2B auf Weiss = 14,2:1 */
  border: 1px solid var(--svk-line-ui);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  transition: border-color .15s, color .15s, background .15s;
}

.svk-root .svk-btn--ghost:hover,
.svk-root .svk-btn--ghost:focus {
  border-color: var(--svk-accent);
  color: var(--svk-accent);       /* #A32D38 auf Weiss = 7,0:1 */
  background: var(--svk-accent-soft);
}

/* Tastaturbedienung muss sichtbar sein – das Theme entfernt den
   Standard-Fokusrahmen an manchen Stellen. */
.svk-root a:focus-visible,
.svk-root button:focus-visible,
.svk-root summary:focus-visible {
  outline: 3px solid var(--svk-ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.svk-cta__note {
  font-size: 12.5px;
  color: var(--svk-muted);
  margin: 4px 0 0;
}

/* ---------- Eckdaten ---------- */

/* Drei feste Spalten. Die Zahl der Kacheln bitte durch drei teilbar
   halten (6 oder 9) – sonst bleiben unten graue Lücken stehen. */
.svk-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--svk-border);
  border: 1px solid var(--svk-border);
  margin: 0 0 42px;
}

.svk-fact { background: #fff; padding: 15px 17px; }

.svk-fact__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--svk-muted);
  margin: 0 0 3px;
}

.svk-fact__v {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--svk-ink);
  line-height: 1.35;
}

.svk-fact__s { font-size: 12.5px; color: var(--svk-muted); font-weight: 400; }

/* ---------- Für Sie / nicht für Sie ---------- */

.svk-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.svk-fit__col {
  border: 1px solid var(--svk-border);
  border-radius: var(--svk-radius);
  padding: 20px 22px;
  background: #fff;
}

.svk-fit__col--yes { border-top: 4px solid var(--svk-green); }
.svk-fit__col--no  { border-top: 4px solid var(--svk-border-strong); background: var(--svk-soft); }

.svk-root .svk-fit__col h3 {
  margin: 0 0 12px;
  font-size: 17.5px;
  line-height: 1.3;
}

.svk-fit__list { list-style: none; margin: 0; padding: 0; }
.svk-fit__list li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 11px;
  font-size: 14.5px;
  line-height: 1.6;
}
.svk-fit__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.svk-fit__col--yes .svk-fit__list li::before { content: "✓"; color: var(--svk-green); }
.svk-fit__col--no  .svk-fit__list li::before { content: "–"; color: var(--svk-muted); }

.svk-fit__out {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--svk-border);
  font-size: 13.5px;
  color: var(--svk-muted);
}

/* ---------- Ergebnis-Liste ---------- */

.svk-can { list-style: none; margin: 0; padding: 0; }
.svk-can li {
  position: relative;
  padding-left: 30px;
  margin: 0 0 13px;
  font-size: 15px;
}
.svk-can li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--svk-accent);
  font-weight: 700;
}
.svk-can strong { color: var(--svk-ink); }

/* ---------- Ablauf ---------- */

.svk-flow { list-style: none; margin: 0; padding: 0; counter-reset: svkflow; }
.svk-flow li {
  position: relative;
  padding-left: 46px;
  margin: 0 0 18px;
  min-height: 32px;
}
.svk-flow li::before {
  counter-increment: svkflow;
  content: counter(svkflow);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--svk-accent-soft);
  color: var(--svk-accent);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svk-flow b { color: var(--svk-ink); display: block; font-size: 15.5px; }
.svk-flow span { font-size: 14.5px; }

/* ---------- Stimmen ---------- */

.svk-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--svk-border);
  border-radius: var(--svk-radius);
  background: var(--svk-soft);
  padding: 16px 20px;
  margin: 0 0 22px;
}

.svk-rating__score {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--svk-ink);
  font-weight: 700;
}
.svk-rating__of { font-size: 14px; color: var(--svk-muted); font-weight: 400; }
.svk-rating__stars { color: var(--svk-accent); font-size: 15px; letter-spacing: 2px; }
.svk-rating__txt { font-size: 13.5px; margin: 3px 0 0; }
.svk-rating__src { flex: 1 1 260px; font-size: 13px; color: var(--svk-muted); }

.svk-quotes { display: grid; gap: 16px; }

.svk-quote {
  border: 1px solid var(--svk-border);
  border-left: 4px solid var(--svk-accent);
  background: #fff;
  padding: 18px 22px 15px;
  margin: 0;
}

.svk-quote p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--svk-ink);
}

.svk-quote footer {
  font-size: 12.5px;
  color: var(--svk-muted);
}
.svk-quote__num { color: var(--svk-accent); font-weight: 700; }

/* ---------- Termine ---------- */

.svk-dates { list-style: none; margin: 0; padding: 0; }

.svk-date {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  border: 1px solid var(--svk-border);
  border-left: 4px solid var(--svk-accent);
  padding: 16px 20px;
  margin: 0 0 12px;
  background: #fff;
}

/* Kein opacity fuer ausgebuchte Termine: bei .75 faellt die kleine graue
   Zeile auf 3,1:1. Grauer Rand, heller Grund und die Marke reichen. */
.svk-date--full { border-left-color: var(--svk-line-ui); background: var(--svk-soft); }

.svk-date__when { flex: 1 1 230px; }
.svk-date__start { font-size: 16.5px; font-weight: 700; color: var(--svk-ink); display: block; }
.svk-date__meta { font-size: 13.5px; color: var(--svk-muted); }
.svk-date__hint { font-size: 12.5px; color: var(--svk-muted); font-style: italic; display: block; margin-top: 3px; }

.svk-date__act { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.svk-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.svk-tag--few  { background: var(--svk-accent-soft); color: var(--svk-accent); }  /* 6,0:1 */
.svk-tag--full { background: #ECEAE6; color: #5F5F5F; }                          /* 5,3:1, vorher #6F6F6F = 4,2:1 */

.svk-btn--sm { padding: 8px 18px; font-size: 13.5px; }

.svk-empty {
  border: 1px dashed var(--svk-border-strong);
  border-radius: var(--svk-radius);
  padding: 24px;
  text-align: center;
  color: var(--svk-muted);
  font-size: 14.5px;
}

/* ---------- Fragen ---------- */

.svk-faq {
  border-bottom: 1px solid var(--svk-border);
}
.svk-faq:first-of-type { border-top: 1px solid var(--svk-border); }

.svk-faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 34px 14px 0;
  position: relative;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--svk-ink);
}
.svk-faq > summary::-webkit-details-marker { display: none; }
.svk-faq > summary::marker { content: ""; }
.svk-faq > summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 12px;
  font-size: 20px;
  color: var(--svk-accent);
  line-height: 1;
}
.svk-faq[open] > summary::after { content: "–"; }
.svk-faq > summary:focus-visible { outline: 2px solid var(--svk-accent); outline-offset: 2px; }

.svk-faq__a { padding: 0 0 16px; font-size: 14.5px; }
.svk-faq__a > *:last-child { margin-bottom: 0; }
.svk-faq__a p { margin: 0 0 10px; }

/* ---------- Abschluss ---------- */

.svk-close {
  border: 1px solid var(--svk-border);
  border-top: 4px solid var(--svk-accent);
  border-radius: var(--svk-radius);
  background: var(--svk-soft);
  padding: 26px 28px;
  text-align: center;
}
.svk-root .svk-close h2 { margin: 0 0 8px; font-size: 23px; }
.svk-close p { margin: 0 0 18px; font-size: 15px; }
.svk-close .svk-cta { justify-content: center; }
.svk-close .svk-cta__note { text-align: center; margin: 10px 0 0; }

.svk-foot {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--svk-border);
  font-size: 12.5px;
  color: var(--svk-muted);
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 640px) {
  .svk-root .svk-hero h1 { font-size: 27px; }
  .svk-hero__lead { font-size: 16px; }
  .svk-facts { grid-template-columns: repeat(2, 1fr); }
  .svk-fit { grid-template-columns: 1fr; }
  .svk-trainer { flex-direction: column; align-items: flex-start; text-align: left; }
  .svk-date__act { margin-left: 0; width: 100%; }
  .svk-sec > h2 { font-size: 22px; }
}

@media (max-width: 430px) {
  .svk-facts { grid-template-columns: 1fr; }
}

/* ---------- Wer Bewegung abgestellt hat, bekommt keine ---------- */

@media (prefers-reduced-motion: reduce) {
  .svk-root *,
  .svk-root *::before,
  .svk-root *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Druck ---------- */

@media print {
  .svk-root { font-size: 11pt; color: #000; }
  .svk-btn, .svk-btn--ghost { display: none !important; }
  .svk-faq[open] > summary::after, .svk-faq > summary::after { content: ""; }
  .svk-faq__a { display: block !important; }
  .svk-quote, .svk-date, .svk-fit__col { page-break-inside: avoid; }
}

/* ==========================================================================
   3. Uebersichtsseiten
   Karten und Merkmalslisten. Stand bisher nur in /kurse/index.html.
   ========================================================================== */

.svk-fakten {
  list-style: none;
  margin: 0 0 34px;
  padding: 16px 18px;
  background: var(--svk-soft);
  border: 1px solid var(--svk-border);
  border-left: 4px solid var(--svk-accent);
  display: grid;
  gap: 6px;
  font-size: 14.5px;
}
.svk-fakten li { margin: 0; padding-left: 1.15em; position: relative; }
.svk-fakten li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--svk-accent);
}

/* .svk-kurse auf /kurse/, .svk-liste auf /seminare/. Gleiche Sache,
   zwei gewachsene Namen. Beide bleiben, damit keine Seite anzufassen ist. */
.svk-kurse,
.svk-liste { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 18px; }

.svk-karte {
  background: #fff;
  border: 1px solid var(--svk-border);
  border-radius: var(--svk-radius);
  padding: 20px 22px;
}
.svk-root .svk-karte h2 { font-size: 21px; line-height: 1.3; margin: 0 0 8px; }
.svk-karte p { margin: 0 0 16px; color: var(--svk-muted); font-size: 14.5px; max-width: 58ch; }
.svk-karte p:last-child { margin-bottom: 0; }

.svk-karte__hinweis {
  display: block;
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--svk-muted);
}

/* Nur auf den Seminarkarten: Datumszeile ueber der Ueberschrift, Untertitel darunter. */
.svk-karte__wann {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--svk-accent);
  margin: 0 0 8px;
}
.svk-karte__sub { margin: 0 0 10px; color: var(--svk-ink); font-size: 15px; }

.svk-schluss {
  border-top: 1px solid var(--svk-border);
  padding-top: 22px;
  margin: 0 0 8px;
  font-size: 14.5px;
  color: var(--svk-muted);
  max-width: 60ch;
}


/* ==========================================================================
   4. Seminarseiten
   ========================================================================== */

.svk-lern { list-style: none; margin: 0; padding: 0; }
.svk-lern li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 11px;
  font-size: 14.5px;
  line-height: 1.6;
}
.svk-lern li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
  color: var(--svk-green);
}

.svk-hinweis {
  border: 1px solid var(--svk-border);
  border-left: 4px solid var(--svk-accent);
  background: var(--svk-soft);
  border-radius: var(--svk-radius);
  padding: 16px 18px;
  font-size: 14.5px;
  margin: 0;
}


/* ==========================================================================
   5. Nachtraege
   ========================================================================== */

/* Ohne diese Zeile wirkt das Attribut hidden auf Elementen mit eigener
   display-Regel nicht: .svk-liste{display:grid} schlaegt die Browservorgabe
   [hidden]{display:none}. Am 25.08.2026 im Browser nachgewiesen: Die
   Terminliste blieb stehen, obwohl das Skript sie ausgeblendet hatte. */
.svk-root [hidden] { display: none !important; }

/* Volle Knopfbreite auf schmalen Geraeten. Gilt bewusst NUR fuer die beiden
   Uebersichtsseiten, die es bisher schon so hatten. Ohne diese Bindung
   bekaemen die Kurs- und Seminarseiten hier ein neues Aussehen, und ein
   Umbau soll nichts am Aussehen aendern. */
@media (max-width: 30rem) {
  .svk-karte { padding: 18px; }
  .svk-root--liste .svk-btn,
  .svk-root--liste .svk-btn--ghost { width: 100%; justify-content: center; }
}