/* Gemeinsames CSS der Wissensseiten (Artikel-Layout des Infos-Bereichs).
   Lag vorher als 9,5-KB-Block inline in jeder der 29 Seiten, obwohl der Inhalt
   identisch ist. Als eigene Datei laedt der Browser es einmal und behaelt es
   ueber alle Artikel hinweg im Cache; die URL traegt ueber homepage_asset den
   Content-Digest, ein Update erreicht die Leser also sofort.
   Seitenspezifische Bloecke bleiben bewusst inline: sie werden nur einmal
   gebraucht und kosten dort keinen zusaetzlichen Request. */
.infos-article-page {
  padding-bottom: 96px;
}
.infos-article-hero {
  max-width: 900px;
  margin: 0 auto 36px;
  text-align: center;
}
.infos-article-hero p {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 18px;
  margin: 0 auto;
}
.infos-article-summary {
  max-width: 920px;
  margin: 0 auto 28px;
  padding: 24px 28px;
}
.infos-article-summary strong {
  display: inline-block;
  margin-bottom: 10px;
  color: #06b6d4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.infos-article-summary p {
  margin: 0;
  color: var(--text);
  line-height: 1.75;
  font-size: 17px;
}
.infos-article-grid {
  max-width: 920px;
  margin: 0 auto 28px;
  display: grid;
  gap: 24px;
  /* minmax(0, 1fr) statt implizitem auto-Track: eine breite Vergleichstabelle
     hat sonst die Spalte auf ihre min-content-Breite aufgezogen (463px bei
     390px Viewport) und damit die ganze Seite horizontal scrollen lassen —
     das overflow-x der Tabellen-Wrapper kam nie zum Tragen. */
  grid-template-columns: minmax(0, 1fr);
}
.infos-article-section {
  padding: 28px 30px;
  min-width: 0;
}
.infos-article-section h2 {
  font-size: 28px;
  margin-bottom: 14px;
  color: var(--text);
}
.infos-article-section h3 {
  font-size: 20px;
  margin: 20px 0 10px;
  color: var(--text);
}
.infos-article-section p {
  color: var(--text-muted);
  line-height: 1.78;
  margin-bottom: 14px;
  font-size: 16px;
}
.infos-article-section ul,
.infos-article-section ol {
  margin: 0 0 16px 22px;
  color: var(--text-muted);
  line-height: 1.75;
}
.infos-article-section li {
  margin-bottom: 8px;
}
.infos-article-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.infos-article-compare-card {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
}
.infos-article-compare-card h3 {
  margin-top: 0;
}
.infos-article-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.infos-article-step {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
}
.infos-article-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  color: #fff;
  background: #06b6d4;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.infos-article-step h3 {
  margin: 0 0 8px;
}
.infos-article-step p {
  margin: 0;
  font-size: 15px;
}
.infos-article-scale {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.infos-article-scale li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
}
.infos-scale-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: #06b6d4;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}
.infos-scale-body {
  flex: 1;
  min-width: 0;
}
.infos-scale-body h3 {
  margin: 2px 0 6px;
  font-size: 18px;
}
.infos-scale-body p {
  margin: 0 0 10px;
  font-size: 15px;
}
.infos-scale-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #06b6d4, #22c55e);
}
.infos-article-scale li:nth-child(1) .infos-scale-bar { width: 20%; }
.infos-article-scale li:nth-child(2) .infos-scale-bar { width: 40%; }
.infos-article-scale li:nth-child(3) .infos-scale-bar { width: 60%; }
.infos-article-scale li:nth-child(4) .infos-scale-bar { width: 80%; }
.infos-article-scale li:nth-child(5) .infos-scale-bar { width: 100%; }
.infos-article-table-wrap {
  margin-top: 18px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.infos-article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
.infos-article-table th,
.infos-article-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}
.infos-article-table thead th {
  color: #06b6d4;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.infos-article-table tbody th {
  color: var(--text);
  font-weight: 600;
}
.infos-table-yes,
.infos-table-no {
  display: inline-block;
  margin-right: 4px;
  font-size: 1.1em;
}
.infos-table-yes { color: #10b981; }
.infos-table-no { color: #ef4444; }
.infos-table-maybe { color: #f59e0b; font-weight: 600; }
.infos-article-callout {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-left: 4px solid #06b6d4;
  background: rgba(6, 182, 212, 0.08);
  color: var(--text);
}
.infos-article-figure {
  margin: 18px 0 0;
}
.infos-article-figure img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}
.infos-article-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.infos-article-faq {
  display: grid;
  gap: 16px;
  /* Wie bei .infos-article-grid: ohne minmax(0, …) zieht die laengste Frage die
     Spalte auf ihre min-content-Breite und schiebt die Karten aus dem Viewport. */
  grid-template-columns: minmax(0, 1fr);
}
/* Aufklappbar, eingeklappt als Ausgangszustand: dasselbe Verhalten wie die FAQ auf
   /homepage/faq und der Startseite. Traeger ist <details>, das Umschalten braucht
   deshalb kein Skript. */
.infos-article-faq-item {
  padding: 0;
}
.infos-article-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}
/* Das Standard-Dreieck von Safari und Chrome entfaellt, den Zustand zeigt der
   Chevron rechts. */
.infos-article-faq-question::-webkit-details-marker {
  display: none;
}
.infos-article-faq-question:hover {
  background: var(--glass-bg);
}
.infos-article-faq-item h3 {
  margin: 0;
}
.infos-article-faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.infos-article-faq-item[open] .infos-article-faq-chevron {
  transform: rotate(180deg);
}
.infos-article-faq-answer {
  margin: 0;
  padding: 0 24px 20px;
}
@media (prefers-reduced-motion: reduce) {
  .infos-article-faq-chevron {
    transition: none;
  }
}
.infos-article-meta p strong {
  color: var(--text);
}
.infos-article-summary-cta {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.infos-article-summary-cta a {
  color: #06b6d4;
  text-decoration: underline;
}
.infos-article-cta {
  max-width: 920px;
  margin: 0 auto 28px;
  padding: 28px 30px;
}
.infos-article-cta h2 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--text);
}
.infos-article-cta > p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 16px;
}
.infos-article-cta .store-buttons {
  margin-top: 22px;
}
.infos-article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.infos-article-cta-actions:empty {
  margin-top: 0;
}
.infos-article-links {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.infos-article-link {
  display: block;
  text-decoration: none;
  padding: 22px 24px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.infos-article-link:hover {
  transform: translateY(-3px);
  border-color: var(--glass-hover-border);
}
.infos-article-link span {
  display: inline-block;
  margin-bottom: 8px;
  color: #06b6d4;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.infos-article-link strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 18px;
}
.infos-article-link p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 14px;
}
.infos-inline-link {
  color: #06b6d4;
  text-decoration: underline;
}
.infos-breadcrumb {
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 12px 16px;
  font-size: 14px;
}
.infos-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.infos-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.infos-breadcrumb a {
  color: #06b6d4;
  text-decoration: none;
}
.infos-breadcrumb a:hover {
  text-decoration: underline;
}
.infos-breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.6;
}
.infos-sibling-nav {
  max-width: 1100px;
  margin: 36px auto 0;
  padding: 28px 30px;
}
.infos-sibling-nav h2 {
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--text);
}
.infos-sibling-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}
.infos-sibling-nav li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 15px;
  line-height: 1.5;
}
.infos-sibling-nav li a {
  color: #06b6d4;
  text-decoration: none;
}
.infos-sibling-nav li a:hover {
  text-decoration: underline;
}
.infos-sibling-nav li.is-current span {
  color: var(--text);
  font-weight: 600;
}
.infos-sibling-nav-back {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  color: var(--text-muted);
}
.infos-sibling-nav-back a {
  color: #06b6d4;
  text-decoration: none;
}
.infos-sibling-nav-back a:hover {
  text-decoration: underline;
}
@media (max-width: 700px) {
  /* Kompakteres Raster plus Silbentrennung: damit passen die dreispaltigen
     Vergleichstabellen auf ein 390px-Display, ohne dass der Wrapper scrollen
     muss. Breitere Tabellen scrollen weiterhin in ihrem eigenen Kasten.
     Das schmalere Kartenpolster gibt der Tabelle 24px mehr Breite und haelt
     damit die Zahl der Trennstriche in Grenzen. */
  .infos-article-section {
    padding: 24px 18px;
  }
  .infos-article-table {
    font-size: 14px;
    hyphens: auto;
    hyphenate-limit-chars: 12 6 4;
  }
  .infos-article-table th,
  .infos-article-table td {
    padding: 10px 8px;
  }
  /* „Weiterbildungsgespraech", „Weiterbildungszeugnis": solche Komposita sind
     auf schmalen Displays breiter als ihre Spalte und haben die Seite scrollen
     lassen. Silbentrennung zuerst, break-word als Notausgang.
     hyphenate-limit-chars greift erst ab 12 Zeichen: ohne die Grenze trennt
     Chrome auch „mei-ne" und „Be-grenzt", was schlechter liest als der
     Zeilenumbruch, den es ersetzt. */
  .infos-article-hero h1,
  .infos-article-section h2,
  .infos-article-section h3,
  .infos-article-faq-item h3 {
    hyphens: auto;
    hyphenate-limit-chars: 12 6 4;
    overflow-wrap: break-word;
  }
}
@media (max-width: 860px) {
  /* minmax(0, 1fr), nicht 1fr: das kurze 1fr bedeutet minmax(auto, 1fr) und
     laesst die Spalte auf min-content wachsen — bei langen Komposita reicht das,
     um die Seite horizontal scrollen zu lassen. */
  .infos-article-compare,
  .infos-article-steps,
  .infos-article-links {
    grid-template-columns: minmax(0, 1fr);
  }
  .infos-sibling-nav ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .infos-article-cta {
    padding: 22px 20px;
  }
  .infos-article-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}