/* acessio · Artikel: Einzelseiten und Übersicht (helles v6-System) */

.article-hero {
  max-width: 860px;
  margin: 0 auto;
  /* Wie .page-hero auf der Referenzenseite. Vorher waren es höchstens 100 px
     bei einer 86 px hohen, überlagernden Kopfzeile — die Überschrift klebte
     daran. */
  padding: clamp(120px, 13vw, 168px) 0 clamp(20px, 3vw, 36px);
}
.article-hero--index { padding-bottom: clamp(32px, 5vw, 64px); }

.article-back {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.article-back:hover { color: var(--ink); }

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.article-hero__meta b { color: var(--ink); font-weight: 600; }

.article-hero__title {
  font-family: var(--serif);
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.article-hero__title em { font-style: italic; color: var(--ink-2); }

.article-hero__dek {
  max-width: 58ch;
  margin-top: 24px;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 24px);
  font-style: normal;
  line-height: 1.4;
  color: var(--ink-2);
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 7vw, 96px);
}
.article-body p {
  margin: 0 0 1.5em;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.75;
}
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body h2 {
  margin: 2.6em 0 0.7em;
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.article-body h3 {
  margin: 2em 0 0.6em;
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  line-height: 1.15;
}
.article-body h2 em,
.article-body h3 em { font-style: italic; color: var(--ink-2); }
.article-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(25,25,28,0.3);
  text-underline-offset: 4px;
}
.article-body a:hover { text-decoration-color: var(--ink); }
.article-body .pull {
  margin: 2.2em 0;
  padding: 1.6em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.article-body .pull::before { content: "\201C"; margin-right: 0.05em; color: var(--cta-text); }
.article-body .pull::after { content: "\201D"; color: var(--cta-text); }
.article-body ul,
.article-body ol { margin: 0 0 1.5em; padding-left: 1.3em; color: var(--ink-2); font-size: 18px; line-height: 1.75; }
.article-body li { margin-bottom: 0.5em; }

/* Übersicht: Kachel-Grid */
.article-grid {
  display: grid;
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: clamp(40px, 6vw, 80px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.article-card[hidden] { display: none; }
.article-card {
  display: flex;
  flex-direction: column;
  min-height: 216px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(250, 248, 245, 0.85);
  color: inherit;
  text-decoration: none;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.article-card:hover {
  transform: translateY(-5px);
  border-color: rgba(9, 112, 120, 0.55);
  box-shadow: 0 24px 48px rgba(57, 44, 31, 0.1);
}
.article-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.article-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(9, 112, 120, 0.42);
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.9);
  color: var(--ink);
  transition: border-color 260ms var(--ease), color 260ms var(--ease), transform 260ms var(--ease);
}
.article-card__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.article-card:hover .article-card__icon {
  border-color: rgba(9, 112, 120, 0.9);
  color: var(--cta-text);
  transform: translateY(-2px);
}
.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.article-card__meta b { color: var(--cta-text); font-weight: 700; }
.article-card__title {
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  transition: color 200ms var(--ease);
}
.article-card__go {
  display: inline-block;
  margin-top: auto;
  padding-top: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 200ms var(--ease), transform 200ms var(--ease);
}
.article-card:hover .article-card__title { color: var(--cta-text); }
.article-card:hover .article-card__go { color: var(--ink); transform: translateX(4px); }

@media (max-width: 1100px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .article-card { min-height: 0; }
  .article-body p, .article-body ul, .article-body ol { font-size: 16.5px; }
}

/* Kategorien-Reiter */
.wissen-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.wissen-tab {
  padding: 12px 26px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.wissen-tab:hover { border-color: var(--ink); }
.wissen-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.wissen-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Flow-Grafik im Artikel */
.article-figure {
  margin: 0 0 clamp(24px, 3vw, 40px);
  padding: clamp(10px, 1.4vw, 20px);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(250, 248, 245, 0.8);
}
.article-figure__svg { display: block; width: 100%; height: auto; min-width: 520px; }

/* FAQ-Block am Artikelende */
.article-faq { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.article-faq > h2 { margin-bottom: 8px; }
.article-faq h3 { margin: 28px 0 10px; font-family: var(--serif); font-style: normal; font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.article-faq p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; }

/* „Passt dazu" — verwandte System-Artikel */
.article-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.article-related p { margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.article-related ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.article-related a {
  display: inline-block; padding: 9px 16px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink); font-size: 14px; text-decoration: none;
  transition: border-color 250ms var(--ease), color 250ms var(--ease);
}
.article-related a:hover { border-color: var(--accent); color: var(--cta-text); }

/* ── Kategorien in Farbe ──────────────────────────────────────────────────
   Jede Kategorie traegt ihren Ton in --kat. Die Farben sind aus der Palette
   der Seite abgeleitet: gedeckt, gleiche Helligkeit, kein Buntstiftkasten. */
.wissen-tabs { flex-wrap: wrap; }
.wissen-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: color-mix(in oklab, var(--kat, var(--muted)) 34%, transparent);
  color: var(--ink-2);
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.wissen-tab::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kat, var(--muted));
  flex: 0 0 auto;
}
.wissen-tab:hover { border-color: color-mix(in oklab, var(--kat, var(--muted)) 62%, transparent); }
.wissen-tab.is-active {
  background: color-mix(in oklab, var(--kat, var(--muted)) 13%, transparent);
  border-color: color-mix(in oklab, var(--kat, var(--muted)) 68%, transparent);
  color: var(--ink);
}
.wissen-tab__n {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.8;
}

/* Am Telefon: eine wischbare Zeile statt des zentrierten Umbruchs.
   Zehn verschieden breite, mittig gesetzte Reiter brachen bei 390 px in
   zehn einzelne Zeilen — ein Zickzack-Turm von gut 1200 px, bevor der
   erste Artikel kam. Eine Zeile mit Wischlauf ist ruhig, hält jede
   Kategorie in voller Breite antippbar (49 px hoch) und zeigt am rechten
   Rand einen angeschnittenen Reiter als Hinweis, dass es weitergeht. */
@media (max-width: 760px) {
  .wissen-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Bewusst ohne scroll-snap: der Rücksprung auf den Snap-Punkt hob den
       Scroll wieder auf, mit dem der Tastaturfokus einen angeschnittenen
       Reiter ins Bild holt. */
    /* Bis an die Fensterkanten laufen lassen, der Inhalt beginnt trotzdem
       an der Textkante — so wird am Rand nichts hart abgeschnitten. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Luft für den sichtbaren Fokusring der Reiter: outline 2px + offset 3px
       ragen 5px über den Reiter hinaus, und overflow-x beschneidet auch
       senkrecht. */
    padding-block: 6px;
    scrollbar-width: none;
  }
  .wissen-tabs::-webkit-scrollbar { display: none; }
  .wissen-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    scroll-margin-inline-start: var(--gutter);
  }
}

/* Karte: farbige Kante links und farbiges Label */
.article-card { position: relative; }
.article-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: var(--kat, transparent);
  opacity: 0.55;
  transition: opacity 180ms var(--ease);
}
.article-card:hover::before { opacity: 1; }
.article-card__meta b { color: var(--kat, var(--muted)); }
.article-card__icon { color: var(--kat, var(--ink)); }

/* Artikelseite: die Kopfzeile traegt dieselbe Farbe */
.article-hero__meta b { color: var(--kat, var(--muted)); }

@media (prefers-reduced-motion: reduce) {
  .wissen-tab,
  .article-card::before { transition: none; }
}

/* Artikelkarten wie die Kacheln auf den Projektseiten: Icon und Text mittig.
   Die farbige Kante bleibt links, sie ordnet der Kategorie zu. */
.article-card { text-align: center; justify-items: center; }
.article-card__icon { margin-inline: auto; }
.article-card__meta { justify-content: center; }
.article-card__title { margin-inline: auto; }

/* ── Verweis auf den ausfuehrlichen Artikel ───────────────────────────────
   Steht am Ende eines Nebenartikels und zeigt auf den Hauptartikel desselben
   Themas. Zweck ist nicht Navigation, sondern Ordnung: Drei Seiten zu einer
   Frage konkurrieren sonst gegeneinander, und Google waehlt am Ende die
   schwaechste. Der Verweis sagt, welche die Hauptseite ist. */
.artikel-hinweis {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  border-inline-start: 3px solid var(--cta-text, #097078);
  border-radius: 0 12px 12px 0;
  background: var(--flaeche, #FBFAF8);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ink-2, #45454B);
}
.artikel-hinweis a { color: var(--cta-text, #097078); font-weight: 600; }