/* ─── Anleitung ───────────────────────────────────────────────────────────────
   Produktdokumentation: „Wie funktioniert das?" — im Unterschied zum Ratgeber,
   der pädagogische Inhalte hat.

   Die Bildsprache kommt von der Startseite: dunkler Kopfbereich mit
   Radialverlauf, Schritte als Showcase (Text links, Telefon rechts, im Wechsel),
   runde Nummernscheiben in --primary, Karten mit Hebung beim Überfahren.
   Alles hier nutzt die Marken-Variablen aus styles.css — 🚨 keine eigenen
   Farbwerte erfinden, sonst driftet der Bereich optisch weg.
   ───────────────────────────────────────────────────────────────────────────── */

/* ══ Dunkler Kopfbereich ═══════════════════════════════════════════════════ */
.anl-kopf {
  position: relative;
  background: var(--bg-dark);
  padding: 148px 0 72px;
  overflow: hidden;
}
/* Derselbe Verlauf wie .section-dark auf der Startseite. */
.anl-kopf::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 22% 28%, rgba(37, 99, 235, .18) 0%, transparent 62%),
    radial-gradient(ellipse 45% 45% at 85% 78%, rgba(14, 165, 233, .10) 0%, transparent 55%);
}
/* Weicher Übergang in die helle Seite, statt harter Kante. */
.anl-kopf::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
}
.anl-kopf-inner {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
}
.anl-kopf .t-hero { color: #fff; margin: 0; max-width: 16ch; }
.anl-kopf .section-label { margin-bottom: 18px; }

.anl-brot {
  font-size: .85rem; color: rgba(255, 255, 255, .45);
  margin-bottom: 26px;
}
.anl-brot a { color: rgba(255, 255, 255, .72); }
.anl-brot a:hover { color: #fff; }
.anl-brot span { margin: 0 7px; }

.anl-lede {
  font-size: 1.15rem; line-height: 1.7;
  color: rgba(255, 255, 255, .68);
  max-width: 62ch; margin: 18px 0 0;
}

/* Kennzahlen unter der Überschrift der Übersichtsseite. */
.anl-kopf-zahlen {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}
.anl-kopf-zahl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .78);
  font-size: .85rem; font-weight: 600;
}
.anl-kopf-zahl b { color: #fff; font-weight: 800; }
/* Dieselbe Pille dient als Sprungmarke zu den Gruppen — dann aber anklickbar. */
a.anl-kopf-zahl { transition: background .2s ease, color .2s ease, border-color .2s ease; }
a.anl-kopf-zahl:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ══ Rumpf ═════════════════════════════════════════════════════════════════ */
.anl-artikel { padding: 64px 0 80px; }
.anl-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* 🚨 Fließtext bekommt ein Lesemaß. Über die volle Spaltenbreite von 1072 px
   wären das rund 140 Zeichen je Zeile — beim Zeilenwechsel verliert man die
   Zeile. Die Schrittblöcke dürfen dagegen die ganze Breite nutzen. */
.article-body > p,
.article-body > h2,
.article-body > h3,
.article-body > ul,
.article-body > ol,
.article-body > blockquote,
.article-body > .anl-hinweis { max-width: 74ch; }

.article-body > h2 {
  scroll-margin-top: 96px;
  padding-top: 8px;
}

/* ══ Schritt: Text und Telefonaufnahme nebeneinander ═══════════════════════ */
/* 🚨 Die Aufnahmen sind rund 700 px hoch, der zugehörige Text oft nur 200.
   Ohne Rahmen schwämme der Text in einem halbleeren Block. Die getönte Karte
   macht aus dem Freiraum einen Rand — dasselbe Mittel wie bei den
   Showcase-Abschnitten der Startseite. */
.anl-schritt {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: 1fr minmax(240px, 320px);
  margin: 40px 0;
  padding: 44px 48px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
}
.anl-schritt-text { order: 1; min-width: 0; }
.anl-schritt-bild { order: 2; }

/* Im Wechsel spiegeln — das gibt der Seite Rhythmus, statt einer Kolonne
   von immer gleich gebauten Blöcken.
   🚨 Dabei müssen die SPALTEN mitgetauscht werden, nicht nur die Reihenfolge.
   `order` bestimmt nur, welches Kind zuerst platziert wird — die Breiten
   bleiben, wo sie sind. Ohne die zweite Zeile bekäme die Aufnahme im geraden
   Schritt die 1fr-Spalte und würde doppelt so groß wie im ungeraden. */
.anl-schritt:nth-of-type(even) { grid-template-columns: minmax(240px, 320px) 1fr; }
.anl-schritt:nth-of-type(even) .anl-schritt-bild { order: 1; }
.anl-schritt:nth-of-type(even) .anl-schritt-text { order: 2; }

/* Nummernscheibe neben der Überschrift, nicht darüber schwebend. */
.anl-schritt-kopf {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.anl-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 1.1rem; font-weight: 800;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}
.anl-schritt-kopf h2 {
  font-size: 1.45rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--text);
  margin: 0; scroll-margin-top: 96px;
}
.anl-schritt-text p {
  font-size: 1.02rem; line-height: 1.8;
  color: var(--text-sec); margin: 0 0 14px;
}
.anl-schritt-text p:last-child { margin-bottom: 0; }
.anl-schritt-text strong { color: var(--text); font-weight: 700; }

/* ══ Telefonaufnahmen ══════════════════════════════════════════════════════ */
.anl-phone { margin: 0; }
.anl-phone img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  transition: transform .3s ease;
}
.anl-phone img:hover { transform: scale(1.02); }
.anl-phone figcaption {
  font-size: .82rem; line-height: 1.5;
  color: var(--text-muted); text-align: center;
  margin-top: 14px;
}

/* ══ Hinweiskasten ═════════════════════════════════════════════════════════ */
.anl-hinweis {
  position: relative;
  background: var(--primary-light);
  border: 1px solid var(--primary-50);
  border-radius: var(--r-lg);
  padding: 20px 24px 20px 56px;
  margin: 32px 0;
}
.anl-hinweis::before {
  content: 'i';
  position: absolute; left: 20px; top: 21px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: .78rem; font-weight: 800; font-style: italic;
  display: flex; align-items: center; justify-content: center;
}
.anl-hinweis p {
  margin: 0; color: var(--text-sec);
  font-size: .97rem; line-height: 1.7;
}
.anl-hinweis strong { color: var(--text); }
.anl-hinweis a { color: var(--primary-dark); }

.anl-hinweis-warn {
  background: #FFFBEB;
  border-color: #FDE68A;
}
.anl-hinweis-warn::before { content: '!'; background: var(--amber); font-style: normal; }

/* ══ Themen-Übersicht ══════════════════════════════════════════════════════ */
.anl-gruppe { margin-bottom: 64px; scroll-margin-top: 88px; }
.anl-gruppe:last-of-type { margin-bottom: 24px; }
.anl-gruppe-kopf {
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.anl-gruppe-titel {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); margin: 0;
}
/* Senkrechter Strich in Markenfarbe — dieselbe Geste wie die Nummernscheiben
   bei den Schritten, nur ruhiger. */
.anl-gruppe-titel::before {
  content: ''; width: 4px; height: 1.15em; flex-shrink: 0;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.anl-gruppe-zahl {
  margin-left: auto; flex-shrink: 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-alt);
  padding: 4px 11px; border-radius: var(--r-full);
}
.anl-gruppe-sub {
  color: var(--text-sec); font-size: .98rem; line-height: 1.6;
  margin: 10px 0 0 16px; max-width: 62ch;
}

.anl-raster {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* Aufbau wie `.usp-card` auf der Startseite: Symbolfeld, Verlaufskante beim
   Überfahren, Hebung mit blauem Schatten. Ohne das Symbol wirken 39 gleich
   große weiße Kästen wie eine Tabelle. */
.anl-karte {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  align-items: start;
  padding: 20px 40px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 8px 24px -14px rgba(15, 23, 42, .16), 0 1px 3px rgba(15, 23, 42, .04);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease, border-color .35s ease;
}
.anl-karte::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.anl-karte:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 22px 44px -20px rgba(37, 99, 235, .32);
}
.anl-karte:hover::before { transform: scaleX(1); }

.anl-karte-symbol {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r-lg);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1;
  transition: background .3s ease, transform .3s ease;
}
.anl-karte:hover .anl-karte-symbol {
  background: var(--primary-50);
  transform: scale(1.06);
}

.anl-karte-inhalt { display: block; min-width: 0; }

/* Pfeil statt Unterstreichung: zeigt „hier geht es weiter", ohne die Karte
   wie eine Linkliste aussehen zu lassen. */
.anl-karte::after {
  content: '›';
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--border);
  transition: color .3s ease, right .3s ease;
}
.anl-karte:hover::after { color: var(--primary); right: 13px; }

.anl-karte-titel {
  display: block;
  font-weight: 700; color: var(--text); font-size: 1rem;
  line-height: 1.35; margin: 3px 0 5px;
}
.anl-karte-text {
  display: block;
  color: var(--text-sec); font-size: .89rem; line-height: 1.55;
}

/* Noch nicht geschriebene Themen: sichtbar, aber nicht anklickbar. Ehrlicher
   als sie zu verstecken — so sieht man, was noch kommt. */
.anl-karte-bald {
  opacity: .6; cursor: default; pointer-events: none;
  background: transparent; border-style: dashed; box-shadow: none;
}
.anl-karte-bald::after,
.anl-karte-bald::before { content: none; }
.anl-karte-bald .anl-karte-symbol { background: var(--surface-alt); filter: grayscale(1); }
.anl-bald-marke {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--surface-alt);
  padding: 2px 8px; border-radius: var(--r-full);
}

/* Dasselbe Symbolfeld in den „Weiterlesen"-Karten. */
.anl-zeichen {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--primary-light);
  font-size: 1.1rem; line-height: 1;
  margin: 0 0 10px;
}

/* 🚨 Die Karten stehen im .article-body, und der unterstreicht jeden Link.
   Ohne diese Ausnahme sieht das Raster aus wie eine Linkliste in Kästen. */
.article-body .anl-karte,
.article-body .anl-karte:hover { text-decoration: none; }

/* ══ Weiterlesen und Abschluss ═════════════════════════════════════════════ */
.anl-artikel .article-related { margin-top: 64px; }
.anl-artikel .article-related > .t-h3 { margin-bottom: 18px; }
/* Karten gleich hoch, sonst franst die Reihe unten aus. */
.anl-artikel .related-grid { align-items: stretch; }
.anl-artikel .related-card { display: flex; flex-direction: column; }
.anl-artikel .related-tag { align-self: flex-start; }

/* Dunkler Abschluss als Gegenstück zum Kopf — die Seite bekommt damit zwei
   klare Enden statt unten auszulaufen. */
.anl-artikel .article-cta {
  position: relative; overflow: hidden;
  margin-top: 64px;
  background: var(--bg-dark);
  border: none;
}
.anl-artikel .article-cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 30% 20%, rgba(37, 99, 235, .22) 0%, transparent 62%),
    radial-gradient(ellipse 45% 50% at 78% 85%, rgba(14, 165, 233, .12) 0%, transparent 58%);
}
.anl-artikel .article-cta > * { position: relative; z-index: 1; }
.anl-artikel .article-cta h2 { color: #fff; }
.anl-artikel .article-cta p { color: rgba(255, 255, 255, .66); }

/* ══ Schmale Geräte ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 🚨 Die gespiegelte Regel muss hier mit zurückgesetzt werden — sie ist
     spezifischer als `.anl-schritt` und überlebt die Einspaltigkeit sonst. */
  .anl-schritt,
  .anl-schritt:nth-of-type(even) { grid-template-columns: 1fr; }
  .anl-schritt { gap: 26px; padding: 32px 28px; }
  /* 🚨 Einspaltig steht der Text IMMER oben — auch bei den gespiegelten
     Schritten. Die Aufnahme ist gut 600 px hoch; käme sie zuerst, sähe man
     ein großes Bild, bevor man weiß, worum es geht. Und das Spiegeln würde
     hier nur dazu führen, dass mal das eine und mal das andere oben steht. */
  .anl-schritt-text,
  .anl-schritt:nth-of-type(even) .anl-schritt-text { order: 1; }
  .anl-schritt-bild,
  .anl-schritt:nth-of-type(even) .anl-schritt-bild { order: 2; max-width: 320px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .anl-kopf { padding: 118px 0 52px; }
  .anl-kopf .t-hero { max-width: none; }
  .anl-lede { font-size: 1.05rem; }
  .anl-artikel { padding: 44px 0 60px; }
  .anl-schritt { margin: 32px 0; padding: 26px 20px; border-radius: var(--r-xl); }
  .anl-schritt-kopf { gap: 12px; }
  .anl-nummer { width: 38px; height: 38px; font-size: 1rem; }
  .anl-schritt-kopf h2 { font-size: 1.25rem; }
  .anl-hinweis { padding: 18px 18px 18px 50px; }
  .anl-raster { grid-template-columns: 1fr; }
}