/* fortschrittdigital · Ratgeber (Übersicht + Artikel)
   Lädt nach ../styles.css und nutzt nur dessen Variablen. Keine eigenen Farben. */

/* ---------- Brotkrumen ---------- */
.brotkrumen{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:0 0 1.25rem;padding:0;list-style:none;
  font:500 var(--fs-klein)/1.4 var(--head);color:var(--text-3)}
.brotkrumen li+li::before{content:"›";margin-right:.5rem;color:var(--text-3)}
.brotkrumen a{color:var(--text-2);text-decoration:none}
.brotkrumen a:hover{color:var(--akzent-dunkel);text-decoration:underline;text-underline-offset:3px}
.sek-kopf--mitte .brotkrumen{justify-content:center}

/* ---------- KI-Kennzeichnung auf Bildern ---------- */
.ki-hinweis{position:absolute;left:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .65rem .32rem .55rem;
  border-radius:999px;background:var(--anthrazit-dunkel);color:var(--weiss);font:600 .6875rem/1.2 var(--head);letter-spacing:.04em}
.ki-hinweis svg{width:12px;height:12px;fill:var(--akzent);flex:none}
.bild-platzhalter{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem;
  font:500 var(--fs-klein)/1.4 var(--head);color:var(--text-3);background:var(--flaeche)}

/* ---------- Abstände: kein toter Raum ----------
   Die Nav scrollt mit (position:relative), braucht also keinen Hero-Abstand.
   Abstand zum ersten Inhalt wie auf der Startseite (40 px mobil, ~80 px Desktop),
   Sektionen enger als auf der Startseite, weil hier Lesestoff statt Bühne steht. */
.rg-seite{--sek:clamp(2.5rem,1.9rem + 2.4vw,4rem)}
.rg-seite .sek.rg-kopf,.rg-seite .sek.art{padding-top:clamp(2.5rem,1rem + 4.2vw,5rem)}

/* ---------- Übersicht: Filter + Sortierung ---------- */
.sek.rg-kopf{padding-bottom:clamp(1.5rem,3vw,2.25rem)}
.rg-kopf .sek-kopf{margin-bottom:0}
.sek.rg-liste{padding-top:0}
.sek.rg-kopf + .sek.rg-liste:not(#_){border-top:0}
.rg-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);padding-bottom:1.25rem;border-bottom:1px solid var(--linie)}
.rg-filter{display:flex;flex-wrap:wrap;gap:.5rem}
.rg-filter button{min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--linie);background:var(--weiss);
  color:var(--tinte);font:500 .9375rem/1 var(--head);cursor:pointer;transition:background-color .25s ease,color .25s ease}
.rg-filter button:hover{background:var(--flaeche)}
.rg-filter button[aria-pressed="true"]{background:var(--anthrazit);border-color:var(--anthrazit);color:var(--weiss)}
.rg-sort{display:flex;align-items:center;gap:.6rem;font:500 var(--fs-klein)/1 var(--head);color:var(--text-3)}
.rg-sort select{min-height:44px;padding:.5rem 2.4rem .5rem 1.1rem;border-radius:999px;border:1px solid var(--linie);appearance:none;cursor:pointer;
  background:var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%232A2C30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center/12px;
  font:500 .9375rem/1 var(--head);color:var(--tinte)}
.rg-sort select:hover{background-color:var(--flaeche)}

/* ---------- Artikelkarten (Übersicht + „Weitere Artikel“) ---------- */
.rg-raster{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.25rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.rg-karte{display:flex}
/* Raster geht immer auf (kein toter Raum): ratgeber.js setzt je nach Kartenzahl
   .is-gross (zwei Karten über je eine halbe Reihe) oder .is-breit (Querkarte über die volle Breite). */
@media (min-width:1100px){
  .rg-raster{grid-template-columns:repeat(6,minmax(0,1fr))}
  .rg-karte{grid-column:span 2}
  .rg-karte.is-gross{grid-column:span 3}
  .rg-karte.is-breit{grid-column:1 / -1}
}
@media (min-width:700px) and (max-width:1099px){
  .rg-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rg-karte.is-breit{grid-column:1 / -1}
}
@media (min-width:700px){
  .rg-karte.is-breit>a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .rg-karte.is-breit .rg-karte__bild{aspect-ratio:auto;min-height:280px}
  .rg-karte.is-breit .rg-karte__bild img{position:absolute;inset:0}
  .rg-karte.is-breit .rg-karte__text{padding:clamp(1.5rem,3vw,2.25rem)}
}
.rg-karte[hidden]{display:none}
.rg-karte>a{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--r-box);overflow:hidden}
.rg-karte__bild{position:relative;aspect-ratio:16/9;background:var(--flaeche)}
.rg-karte__bild img{width:100%;height:100%;object-fit:cover}
.rg-karte__text{flex:1;display:flex;flex-direction:column;gap:.65rem;padding:1.25rem 1.4rem 1.4rem}
.rg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .55rem;font:500 var(--fs-klein)/1.4 var(--head);color:var(--text-3)}
.rg-meta__kat{flex-basis:100%;color:var(--akzent-dunkel);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.rg-meta__trenner{width:3px;height:3px;border-radius:50%;background:var(--text-3)}
.rg-karte h2,.rg-karte h3{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem);line-height:1.25;letter-spacing:-.01em;font-weight:700;
  text-wrap:balance;transition:color .25s ease}
.rg-karte p{font-size:.9688rem;line-height:1.55}
.rg-mehr{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--linie);display:inline-flex;align-items:center;gap:.45rem;
  font:700 .875rem/1 var(--head);color:var(--akzent-dunkel)}
.rg-mehr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rg-karte>a:hover h2,.rg-karte>a:hover h3{color:var(--akzent-dunkel)}
.rg-karte>a:hover .rg-mehr{text-decoration:underline;text-underline-offset:3px}
.rg-karte>a:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.rg-leer{padding:2rem 0;color:var(--text-3)}

/* ---------- Artikel ----------
   Kopf über die volle Rasterbreite (keine leere Spalte daneben), darunter
   Inhaltsverzeichnis links (nur Desktop) und Lesespalte rechts.
   Kein Titelbild: das KI-Bild steht nur auf der Vorschaukarte und im og:image. */
.sek.art{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.art-raster{display:grid;gap:0 clamp(2.5rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr);max-width:720px;margin-inline:auto}
@media (min-width:1024px){
  .art-raster{grid-template-columns:220px minmax(0,720px);max-width:none;justify-content:center}
  .art-kopf{grid-column:1 / -1;grid-row:1}
  .art-inhalt{grid-column:1;grid-row:2}
  .art-text{grid-column:2;grid-row:2}
}
.art-kopf{display:grid;gap:.9rem;justify-items:start;padding-bottom:clamp(1.5rem,3vw,2.25rem);margin-bottom:clamp(1.75rem,3.5vw,2.75rem);border-bottom:1px solid var(--linie)}
.art-kopf .brotkrumen{margin-bottom:.15rem}
.art-kopf h1{font-size:clamp(2rem,1.35rem + 2.5vw,3.25rem);line-height:1.1;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.art-lead{max-width:62ch;font-size:var(--fs-lead);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.art-autor{display:flex;align-items:center;gap:.75rem;margin-top:.35rem;font:500 var(--fs-klein)/1.45 var(--head);color:var(--text-3)}
.art-autor img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.art-autor strong{display:block;color:var(--tinte);font-weight:600}
/* Mobil: Kopflinie ist zugleich die Oberkante des Inhaltsverzeichnisses, aktuelle Seite in den Brotkrumen weglassen */
@media (max-width:1023px){
  .art-kopf{margin-bottom:0}
  .art-kopf + .art-inhalt{border-top:0}
}
@media (max-width:599px){.art-kopf .brotkrumen li[aria-current]{display:none}}

/* Inhaltsverzeichnis: Desktop sticky links, mobil aufklappbar über dem Text */
.art-inhalt{margin-bottom:2rem;border-block:1px solid var(--linie);font:500 .9063rem/1.4 var(--head)}
.art-inhalt summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;
  font:600 .9375rem/1 var(--head);color:var(--tinte)}
.art-inhalt summary::-webkit-details-marker{display:none}
.art-inhalt summary::after{content:"+";font:600 1.15rem/1 var(--head);color:var(--akzent-dunkel)}
.art-inhalt[open] summary::after{content:"−"}
.art-inhalt ol{list-style:none;margin:0 0 1rem;padding:0;border-left:1px solid var(--linie)}
.art-inhalt a{display:block;margin-left:-1px;padding:.45rem 0 .45rem 1rem;border-left:2px solid transparent;color:var(--text-2);text-decoration:none}
.art-inhalt a:hover{color:var(--akzent-dunkel)}
.art-inhalt a.is-aktiv{border-left-color:var(--akzent);color:var(--tinte);font-weight:600}
@media (min-width:1024px){
  .art-inhalt{position:sticky;top:2rem;align-self:start;margin:0;border:0}
  .art-inhalt summary{min-height:0;margin-bottom:.9rem;cursor:default;pointer-events:none;
    font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
  .art-inhalt summary::after{display:none}
}

/* Lesespalte */
.art-text{min-width:0;font-size:clamp(1.0625rem,1rem + .2vw,1.125rem);line-height:1.75;color:var(--text-2)}
.art-text>*+*{margin-top:1.25rem}
.art-text h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;letter-spacing:-.02em;margin-top:3rem;scroll-margin-top:2rem;text-wrap:balance}
.art-text h3{font-size:1.25rem;line-height:1.3;margin-top:2rem}
.art-text h2+*,.art-text h3+*{margin-top:.85rem}
.art-text a:not(.btn){color:var(--akzent-dunkel);text-decoration:underline;text-underline-offset:3px}
.art-text a:not(.btn):hover{color:var(--tinte)}
.art-text ul,.art-text ol{padding-left:1.25rem}
.art-text li+li{margin-top:.5rem}
.art-text ul li::marker{color:var(--akzent)}
.art-text ol li::marker{color:var(--akzent-dunkel);font-weight:700;font-family:var(--head)}
.art-text strong{color:var(--tinte);font-weight:700}
.q{font-size:.72em;line-height:0;vertical-align:super}
.art-text .q a{text-decoration:none;font-weight:700}

/* „Das Wichtigste in Kürze“: gruppiert die Kernaussagen, daher als Fläche */
.art-kurz{padding:1.5rem 1.75rem;border-radius:var(--r-box);background:var(--flaeche)}
.art-text .art-kurz h2{margin:0 0 .75rem;font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte)}
.art-kurz ul{margin:0}

/* Hervorgehobene Aussage: nur Linie, keine Box */
.art-zitat{margin-inline:0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--akzent);
  font:600 clamp(1.15rem,1.05rem + .4vw,1.35rem)/1.45 var(--head);color:var(--tinte)}

/* Vergleichstabelle mit Spaltenlinien */
.art-tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.art-tabelle table{width:100%;min-width:520px;border-collapse:collapse;font-size:.9688rem;line-height:1.5}
.art-tabelle th,.art-tabelle td{padding:.75rem .9rem;border:1px solid var(--linie);text-align:left;vertical-align:top}
.art-tabelle th{font:600 .875rem/1.3 var(--head);color:var(--tinte);background:var(--flaeche)}
.art-tabelle caption{caption-side:bottom;padding-top:.6rem;text-align:left;font-size:var(--fs-klein);color:var(--text-3)}

/* FAQ im Artikel: Kit-FAQ der Startseite, nur ohne Zentrierung */
.art-text .faq{max-width:none;margin-inline:0}
.art-text .faq details p{max-width:none}

/* Quellen */
.art-quellen{font-size:var(--fs-klein);line-height:1.55;color:var(--text-3)}
.art-quellen li{word-break:break-word}

/* Autorenbox: Linien statt Kasten */
.art-autorbox{display:grid;grid-template-columns:72px 1fr;gap:1.25rem;align-items:start;margin-top:3rem;padding-block:1.75rem;border-block:1px solid var(--linie)}
.art-autorbox img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.art-autorbox p{font-size:.9688rem;line-height:1.6}
.art-autorbox strong{display:block;font:600 1.0625rem/1.3 var(--head);color:var(--tinte);margin-bottom:.35rem}
.art-text .art-autorbox a{font-weight:600}

/* Weitere Artikel */
.sek.rg-weitere{padding-top:clamp(3rem,5vw,4.5rem)}
.rg-weitere h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.25rem);margin-bottom:clamp(1.25rem,2.5vw,2rem)}

/* CTA mitten im Artikel: Linien statt Kasten, Text links, Button rechts */
.art-cta{display:grid;gap:1rem 2rem;align-items:center;margin-block:2.5rem;padding-block:1.5rem;border-block:1px solid var(--linie)}
.art-text .art-cta p{margin:0}
.art-cta__titel{font:700 clamp(1.125rem,1.05rem + .3vw,1.3rem)/1.3 var(--head);color:var(--tinte);margin-bottom:.35rem!important}
.art-cta div p:not(.art-cta__titel){font-size:1rem;line-height:1.55}
.art-cta .btn{justify-self:start;white-space:nowrap}
@media (min-width:700px){.art-cta{grid-template-columns:minmax(0,1fr) auto}}

/* Startseite: Block „Aus dem Ratgeber“ (Kopfzeile: Überschrift links, Button rechts) */
.rg-start-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.rg-start-kopf p{margin-top:.6rem;max-width:56ch;font-size:var(--fs-lead);line-height:1.5}

/* Offenlegung KI-Einsatz in der Autorenbox (Google-Leitfaden zu KI-Inhalten: „Wie wurde das erstellt?“) */
.art-autorbox .art-ki-hinweis{margin-top:.6rem;font-size:var(--fs-klein);color:var(--text-3)}