/* Video-Anleitungen (/anleitungen/): Hub und Detailseiten.
   Stil wie die übrigen Inhaltsseiten (css/layout.css, gaestebuch_features.php):
   Verdana 12 px, Überschriften 14 px schwarz und nicht fett, Links schwarz und
   unterstrichen, Zwischentitel fett. Grautöne mit Kontrast ≥ 4,5:1 auf Weiß:
   #4a4a4a (8,9:1). Orange #f26b1d nur für den Abspielknopf. Fokusrahmen schwarz und nur bei
   Tastaturbedienung (:focus-visible), nie beim Mausklick. */

.anl-seite,
.anl-hub {
  font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  max-width: 100%;
  overflow-wrap: break-word;
}

.anl-seite p,
.anl-hub p,
.anl-seite li,
.anl-hub li,
.anl-seite td,
.anl-seite th {
  font: inherit;
  color: inherit;
}

.anl-seite a,
.anl-hub a,
.anl-brotkrumen a {
  color: #000;
  font: inherit;
  text-decoration: underline;
}

.anl-seite a:focus-visible,
.anl-hub a:focus-visible,
.anl-brotkrumen a:focus-visible,
.anl-seite summary:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: 2px;
}

.anl-titel {
  font: 14px/1.35 Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  margin: 10px 0 10px;
}

.anl-seite h2,
.anl-hub h2 {
  font: 14px/1.35 Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  margin: 22px 0 10px;
}

/* Umriss-Symbol vor der Überschrift wie auf gaestebuch_features.php */
.anl-hub h2 svg,
.anl-seite h2 svg {
  display: inline-block;
  vertical-align: middle;
  margin: -2px 4px 0 0;
}

.anl-seite h3,
.anl-hub h3 {
  font: bold 12px/1.4 Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  margin: 16px 0 6px;
}

.anl-teaser { color: #000; }

.anl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Brotkrumen ---------- */

.anl-brotkrumen ol {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
  color: #4a4a4a;
}

.anl-brotkrumen li { display: inline; }

.anl-brotkrumen li + li::before {
  content: "›";
  margin: 0 6px;
  color: #4a4a4a;
}

/* ---------- Video ---------- */

.anl-video { margin: 0 0 8px; }

.anl-video-info {
  margin: 8px 0 0;
  font-size: 0.92em;
  color: #4a4a4a;
}

.anl-video-platzhalter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px dashed #999;
  border-radius: 4px;
  background: #f5f5f5;
  color: #000;
}

.anl-video-platzhalter svg { flex: 0 0 auto; color: #4a4a4a; }

.anl-video-platzhalter p { margin: 0; }

/* ---------- Kapitel ---------- */

.anl-kapitel h2 { margin-top: 18px; }

.anl-kapitel-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
}

.anl-kapitel-link {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  min-height: 24px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  text-decoration: none;
}

.anl-seite .anl-kapitel-link { text-decoration: none; }

.anl-kapitel-link:hover { background: #f5f5f5; border-color: #999; }

.anl-kapitel-zeit {
  flex: 0 0 auto;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: #000;
}

.anl-kapitel-titel { text-decoration: underline; }

/* ---------- Artikel ---------- */

.anl-artikel img { max-width: 100%; height: auto; }

.anl-artikel table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}

.anl-artikel th,
.anl-artikel td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.anl-artikel th { background: #f0f0f0; }

/* ---------- Auf einen Blick ---------- */

.anl-blick {
  margin: 26px 0;
  padding: 4px 18px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #f8f8f8;
}

.anl-blick h2 { margin-top: 14px; }

.anl-blick ul,
.anl-blick ol { padding-left: 20px; }

/* ---------- FAQ ---------- */

.anl-faq-eintrag {
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 0 0 8px;
  background: #fff;
}

.anl-faq-eintrag summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: bold;
  color: #000;
}

.anl-faq-antwort { padding: 0 12px 4px; }

/* ---------- Transkript ---------- */

.anl-transkript-details summary {
  cursor: pointer;
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #999;
  border-radius: 3px;
  color: #000;
  font-weight: bold;
}

.anl-transkript-text {
  margin-top: 10px;
  padding: 4px 14px;
  border-left: 3px solid #ccc;
}

/* ---------- Direkt ausprobieren ---------- */

.anl-ausprobieren {
  margin: 30px 0 20px;
  padding: 6px 18px 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #f8f8f8;
  color: #000;
}

.anl-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

.anl-seite a.anl-knopf,
.anl-hub a.anl-knopf {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #e8e8e8;
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

.anl-seite a.anl-knopf:hover,
.anl-hub a.anl-knopf:hover { background: #d8d8d8; }

.anl-seite a.anl-knopf--hell,
.anl-hub a.anl-knopf--hell {
  background: #fff;
  border-color: #999;
  font-weight: normal;
  text-decoration: underline;
}

/* ---------- Vor / Zurück ---------- */

.anl-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.anl-blaettern-link {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.anl-seite .anl-blaettern-link { text-decoration: none; }

.anl-blaettern-weiter { text-align: right; }

.anl-blaettern-richtung { font-size: 0.9em; color: #4a4a4a; }

.anl-blaettern-titel { font-weight: bold; text-decoration: underline; }

.anl-dauer { color: #4a4a4a; }

/* ---------- Hub ---------- */

.anl-sprung ul {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anl-hub .anl-sprung a {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: #f8f8f8;
}

.anl-karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.anl-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}

.anl-karte:hover { border-color: #999; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }

.anl-karte-bild {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #4a4a4a;
}

.anl-karte-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anl-karte-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f26b1d;
  border: 3px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anl-karte-play svg { width: 40%; height: 40%; margin-left: 8%; fill: #fff; }

.anl-karte-ohne {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f2f2f2;
  color: #4a4a4a;
  font-size: 11px;
}

.anl-karte-ohne svg { color: #4a4a4a; }

.anl-karte-text { padding: 2px 12px 10px; }

.anl-hub .anl-karte h3 { margin: 10px 0 4px; }

/* Die ganze Karte ist klickbar, im Fokus und für Screenreader bleibt es ein Link. */
.anl-hub .anl-karte-link { text-decoration: none; }

.anl-karte-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.anl-karte:has(.anl-karte-link:focus-visible) { outline: 2px solid #000; outline-offset: 2px; }

.anl-hub .anl-karte-link:focus-visible { outline: none; }

.anl-karte-meta { margin: 0 0 4px; color: #4a4a4a; font-size: 11px; }

.anl-hub .anl-karte-meta,
.anl-hub .anl-karte-text p { margin-top: 0; }

/* ---------- schmale Bildschirme ---------- */

@media (max-width: 530px) {
  .anl-seite,
  .anl-hub { font-size: 13px; }

  .anl-kapitel-liste,
  .anl-karten { grid-template-columns: 1fr; }

  .anl-blaettern-weiter { text-align: left; }

  .anl-video-platzhalter { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .anl-karte { transition: none; }
}