/* ============================================
   kurzwaffenausbildung.de – Ergaenzungen zu style.css
   Nur Komponenten, die der Hub nicht hat.
   ============================================ */

/* Vertrauensleiste unter dem Hero */
.trust { background: var(--bg-alt); border-top: 1px solid var(--line);
         border-bottom: 1px solid var(--line); padding: 28px 0; }
.trust ul { list-style: none; display: grid; gap: 22px;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trust li { display: flex; align-items: center; gap: 12px;
            font-size: 0.98rem; color: var(--text-muted); }
.trust img { width: 44px; height: auto; flex: 0 0 auto; }

/* Zwei Spalten: passt / passt nicht */
.passung { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.passung > div { background: var(--bg-alt); border: 1px solid var(--line); padding: 28px; }
.passung h3 { color: var(--accent); }
.passung.nein h3 { color: var(--grey); }
.passung ul { list-style: none; }
.passung li { padding-left: 26px; position: relative; margin-bottom: 12px; }
.passung li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.passung .nein li::before { content: "\2717"; color: var(--text-muted); }

/* Kurs-Kacheln mit Bild */
.kacheln { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kachel { background: var(--bg-alt); border: 1px solid var(--line);
          text-decoration: none; color: var(--text); display: block; transition: border-color .18s; }
.kachel:hover { border-color: var(--accent); }
.kachel img { width: 100%; height: 190px; object-fit: cover; display: block; }
.kachel .txt { padding: 18px 20px 22px; }
.kachel .txt strong { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase;
                      display: block; font-size: 1.15rem; letter-spacing: .04em; }
.kachel .txt span { color: var(--accent); font-size: .92rem; }

/* Videoblock */
.videoblock { background: #000; border: 1px solid var(--line); aspect-ratio: 16/9;
              display: flex; align-items: center; justify-content: center; text-align: center; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase;
               letter-spacing: .03em; font-size: 1.02rem; list-style: none; position: relative;
               padding-right: 34px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px;
                      color: var(--accent); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--accent); }
.faq .antwort { padding-top: 12px; color: var(--text-muted); }
.faq .antwort ul { margin: 10px 0 0 22px; }

/* Platzhalter, die vor dem Livegang verschwinden muessen */
.todo { background: var(--accent); color: #fff; padding: 2px 8px; font-weight: 700; }
.platzhalter-form { border: 2px dashed var(--accent); padding: 24px; background: var(--bg-alt); }

/* Seitenkopf der Unterseiten */
.seitenkopf { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 68px 0 56px; }
.seitenkopf h1 em { color: var(--accent); font-style: normal; }
.seitenkopf .sub { max-width: 680px; margin-top: 16px; color: var(--text-muted); }

/* Termintabelle */
.termine-tabelle { width: 100%; border-collapse: collapse; font-size: .96rem; }
.termine-tabelle th { text-align: left; font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--text-muted);
  border-bottom: 1px solid var(--line); padding: 0 14px 12px 0; }
.termine-tabelle td { border-bottom: 1px solid var(--line); padding: 16px 14px 16px 0;
  vertical-align: top; }
.termine-tabelle tr:hover td { background: var(--bg-alt); }
.termin strong { display: block; font-family: 'Oswald', Arial, sans-serif; font-size: 1.02rem;
  letter-spacing: .02em; }
.termin .tage, .ort .region { display: block; color: var(--text-muted); font-size: .84rem; margin-top: 3px; }
.kurs strong { display: block; }
.kurs .variante { display: block; color: var(--accent); font-family: 'Oswald', Arial, sans-serif;
  letter-spacing: .06em; font-size: .82rem; margin-top: 2px; }
.kurs-zusatz { color: var(--text-muted); font-size: .82rem; margin-top: 6px; max-width: 320px; }
.plaetze-frei { color: var(--text); }
.plaetze-knapp { color: var(--accent); font-weight: 700; }
.plaetze-warteliste, .plaetze-ausgebucht, .plaetze-offen { color: var(--text-muted); }
.btn.klein { padding: 9px 15px; font-size: .82rem; white-space: nowrap; }
.stand { margin-top: 18px; font-size: .84rem; }

/* Tabelle auf kleinen Schirmen: Karten statt Spalten */
@media (max-width: 760px) {
  .termine-tabelle thead { display: none; }
  .termine-tabelle, .termine-tabelle tbody, .termine-tabelle tr, .termine-tabelle td { display: block; width: 100%; }
  .termine-tabelle tr { border: 1px solid var(--line); margin-bottom: 16px; padding: 16px; background: var(--bg-alt); }
  .termine-tabelle td { border: 0; padding: 4px 0; }
  .kurs-zusatz { max-width: none; }
}

/* Hero mit Hintergrundvideo (auch auf Kursseiten) */
.hero-video { position: relative; overflow: hidden; padding: 0; min-height: 70vh;
              display: flex; align-items: center; }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; z-index: 0; }
.hero-video::after { content: ""; position: absolute; inset: 0; z-index: 1;
                     background: linear-gradient(rgba(10,10,10,.70), rgba(10,10,10,.88)); }
.hero-inhalt { position: relative; z-index: 2; width: 100%; padding: 90px 0; }
.hero-inhalt h1 em { color: var(--accent); font-style: normal; }
.hero-inhalt .sub { max-width: 640px; margin: 18px 0 30px; font-size: 1.08rem; }
@media (max-width: 640px) { .hero-video { min-height: 60vh; } .hero-inhalt { padding: 68px 0; } }

.breitbild { width: 100%; height: auto; margin-top: 30px; border: 1px solid var(--line); }
.achtung { border-left: 3px solid var(--accent); padding: 14px 18px; background: var(--bg-alt);
           color: var(--text-muted); margin: 20px 0; }

/* Personen- und Guide-Blöcke */
.person, .guide { display: grid; gap: 30px; grid-template-columns: 300px 1fr;
                  border-top: 1px solid var(--line); padding: 40px 0; align-items: start; }
.person:first-child, .guide:first-child { border-top: 0; padding-top: 0; }
.person img, .guide img { width: 100%; height: auto; border: 1px solid var(--line); }
.person h2, .guide h2 { color: var(--accent); margin-bottom: 4px; }
.rolle { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase;
         letter-spacing: .05em; font-size: .88rem; color: var(--text-muted); margin-bottom: 16px; }
.person p, .guide p { margin-bottom: 13px; }
.wofuer { margin-top: 18px; }
@media (max-width: 760px) { .person, .guide { grid-template-columns: 1fr; }
  .person img, .guide img { max-width: 320px; } }

/* Kontaktseite */
.kontakt-raster { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: start; }
.kalender { border: 1px solid var(--line); background: #fff; height: 760px; }
.kalender iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; }
  .kalender { height: 640px; } }

/* Sechs Inhaltsfelder der Masterclass */
.inhaltsfelder { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                 margin-top: 28px; }
.inhaltsfelder article { background: var(--bg-alt); border: 1px solid var(--line); padding: 26px; }
.inhaltsfelder img { width: 78px; height: auto; margin-bottom: 14px; }
.inhaltsfelder h3 { color: var(--accent); }
.inhaltsfelder ul { list-style: none; margin-top: 12px; }
.inhaltsfelder li { padding-left: 20px; position: relative; margin-bottom: 12px; font-size: .95rem; }
.inhaltsfelder li::before { content: "\203A"; position: absolute; left: 0; color: var(--accent); }

/* Rechtstexte */
.rechtstext { max-width: 780px; }
.rechtstext h2 { font-size: 1.12rem; margin-top: 34px; margin-bottom: 10px; color: var(--accent); }
.rechtstext p { margin-bottom: 12px; font-size: .95rem; color: var(--text-muted); }
.rechtstext p:first-of-type { color: var(--text); }

/* Blog */
.blogliste { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.blogkarte { display: block; background: var(--bg-alt); border: 1px solid var(--line); padding: 24px;
             text-decoration: none; color: var(--text); transition: border-color .18s; }
.blogkarte:hover { border-color: var(--accent); }
.blogkarte .datum { display: block; color: var(--accent); font-family: 'Oswald', Arial, sans-serif;
                    letter-spacing: .08em; font-size: .76rem; text-transform: uppercase; }
.blogkarte strong { display: block; font-family: 'Oswald', Arial, sans-serif; font-size: 1.12rem;
                    line-height: 1.25; margin: 10px 0 10px; }
.blogkarte .anriss { display: block; color: var(--text-muted); font-size: .9rem; }
.artikel { max-width: 780px; }
.artikel h2 { font-size: 1.24rem; margin-top: 32px; margin-bottom: 10px; }
.artikel p { margin-bottom: 15px; }
.zurueck { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Blogartikel */
.artikelbild { width: 100%; height: auto; border: 1px solid var(--line); margin-bottom: 30px; }
.artikel img { max-width: 100%; height: auto; }
.artikel ul, .artikel ol { margin: 0 0 16px 22px; }
.artikel li { margin-bottom: 8px; }
.artikel h3 { font-size: 1.1rem; margin-top: 26px; }
.autorbox { background: var(--bg-alt); border-left: 3px solid var(--accent); padding: 26px 28px;
            margin-top: 46px; }
.autorbox h2 { font-size: 1.05rem; margin-top: 0; color: var(--accent); }
.autorbox p { font-size: .92rem; color: var(--text-muted); }
.blogkarte img { width: 100%; height: 165px; object-fit: cover; margin: -24px -24px 16px;
                 width: calc(100% + 48px); display: block; }

/* Navigation mit Untermenü */
.menu { position: relative; display: inline-block; }
.untermenu { position: absolute; left: 0; top: 100%; min-width: 290px; background: var(--bg-alt);
             border: 1px solid var(--line); padding: 8px 0; display: none; z-index: 40; }
.menu:hover .untermenu, .menu:focus-within .untermenu { display: block; }
.untermenu a { display: block; padding: 9px 18px; font-size: .84rem; letter-spacing: .03em; }
.untermenu a:hover { background: var(--bg); color: var(--accent); }
@media (max-width: 860px) {
  .menu { display: block; }
  .untermenu { position: static; display: block; border: 0; padding: 0 0 0 14px;
               min-width: 0; background: none; }
  .untermenu a { padding: 6px 0; }
}

/* Videoserie, Zwei-Klick-Lösung */
.videoserie { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
              margin-top: 26px; }
.yt { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--line);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; text-align: center; padding: 16px; }
.yt iframe { width: 100%; height: 100%; border: 0; }

/* Vorschaubild von YouTube, aber LOKAL ausgeliefert aus /img/yt/.
   Dadurch sieht man das Standbild, ohne dass eine Verbindung zu Google
   aufgebaut wird. Die Zwei-Klick-Loesung bleibt damit unangetastet. */
.yt[data-bild] { background-size: cover; background-position: center; }
.yt[data-bild]::before { content: ""; position: absolute; inset: 0;
                         background: rgba(10,10,10,.55); }
.yt[data-bild] > * { position: relative; z-index: 1; }
.yt button { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase;
             letter-spacing: .05em; font-size: .9rem; cursor: pointer; background: var(--accent);
             color: #fff; border: 0; padding: 12px 20px; }
.yt button:hover { filter: brightness(1.1); }
.yt .dauer { color: var(--text-muted); font-size: .8rem; }
.yt-hinweis { color: var(--text-muted); font-size: .78rem; margin: 0; }