/* ============================================================
   Der Ratgeber — Übersicht, Archiv, Beitrag.

   Baut auf `allgemein.css` auf und erfindet nichts Neues: dieselben
   Haarlinien, dieselbe Rundung, derselbe Teal-Akzent. Der Kontrast
   gehört den Produkten (Kapitel 03), deshalb keine Schatten und keine
   farbigen Flächen außer dem hellen Grau der Karten.

   Was hier steht, teilt sich in zwei Gruppen:

     Erstens die drei Kästen, die IM TEXT stehen dürfen — „Auf einen
     Blick", „Hinweis", „Achtung". Sie sind die einzigen Klassen, die
     jemand beim Schreiben eines Beitrags kennen muss, und auch das nur,
     wenn er sie nicht über das Einfügen-Menü holt.

     Zweitens alles, was das Theme um den Text herum baut: Kacheln,
     Verzeichnis, Abschluss, Weiterlesen. Damit hat der Schreibende
     nichts zu tun.
   ============================================================ */


/* ---------------------------------------------------------- Die drei Kästen
   Der Rahmen der Kästen steht in `allgemein.css` — sie stehen nicht nur
   im Ratgeber, sondern auch auf den Serviceseiten. Hier bleibt nur, was
   den Ratgeber betrifft: die Kante, die den Kasten benennt.

   Unterschieden wird über die linke Kante, nicht über eine farbige
   Fläche — ein hellgrüner und ein hellgelber Kasten übereinander sähen
   aus wie eine Ampel und nähmen den Produkten den Kontrast weg. */

/* „Auf einen Blick" ist die Zusammenfassung ganz oben: kräftigere Kante,
   und die Aufzählung darin steht enger als im Fließtext. */
.is-text .ueberblick{border-left-color:var(--teal)}
.is-text .ueberblick ul{margin-top:12px}
.is-text .ueberblick li + li{margin-top:6px}
.is-text .ueberblick > p:first-child strong{font:600 13px/1 'IBM Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--n50)}

/* Der Tipp aus der Werkstatt. */
.is-text .hinweis{border-left-color:var(--teal-d)}

/* Die Warnung. Amber ist die einzige Stelle, an der sie Farbe bekommt —
   ein Hinweis, den man überliest, ist keiner. */
.is-text .achtung{border-left-color:var(--amber)}


/* ---------------------------------------------------------- Fragen am Ende
   Die Fragen stehen als schlichte h3/p-Folge im Text. Sie brauchen
   keine Hülle — das Schema baut das Theme aus der Reihenfolge. Nur der
   Abstand macht sie als Paar erkennbar. */

.is-text h3 + p{margin-top:8px}


/* ---------------------------------------------------------- Die Kopfzeile
   Kategorie · Datum · Lesezeit. Die Kategorie ist ein Link, bekommt aber
   keinen Unterstrich: in der Monospace der Meta-Zeile liegt er auf den
   Unterlängen und macht aus einer ruhigen Zeile ein Gestrüpp. Erkennbar
   bleibt sie über die Farbe und den Unterstrich beim Überfahren. */

.is-kopf .meta a{color:var(--teal-d);text-decoration:none}
.is-kopf .meta a:hover,
.is-kopf .meta a:focus-visible{text-decoration:underline;text-underline-offset:3px}


/* ---------------------------------------------------------- Die Kacheln
   Sechs Themenbereiche. Ohne Bild: sechs Fotos, die alle „irgendwas mit
   Carbon" zeigen, erleichtern keine Entscheidung. Die trifft man am
   Namen und an der Zahl dahinter. */

.rg-kacheln{margin:44px 0 0;max-width:1180px;
  display:grid;gap:1px;background:var(--n10);
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--n10);border-radius:var(--rundung);overflow:hidden}

.rg-kachel{position:relative;display:flex;flex-direction:column;
  padding:24px 24px 26px;background:var(--n00);text-decoration:none;
  transition:background .18s ease}
.rg-kachel:hover,.rg-kachel:focus-visible{background:var(--n05);outline:none}
.rg-kachel:focus-visible{box-shadow:inset 0 0 0 2px var(--teal)}

.rg-kachel .zahl{font:500 12px/1 'IBM Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d)}
.rg-kachel .name{margin:12px 0 0;
  font:600 19px/1.28 Archivo,sans-serif;letter-spacing:-.01em;color:var(--n90)}
.rg-kachel .satz{margin:8px 0 0;font:400 15px/1.55 Archivo,sans-serif;color:var(--n60)}

/* Der Pfeil sitzt am unteren Rand und rückt beim Überfahren nach. */
.rg-kachel::after{content:"→";margin-top:16px;
  font:400 16px/1 Archivo,sans-serif;color:var(--n40);
  transition:transform .18s ease,color .18s ease}
.rg-kachel:hover::after,.rg-kachel:focus-visible::after{
  transform:translateX(4px);color:var(--teal-d)}


/* ---------------------------------------------------------- Das Verzeichnis
   Alle Beiträge, nach Kategorie gebündelt. Der eigentliche Zweck der
   Übersichtsseite: von hier ist jeder Beitrag einen Klick entfernt. */

.rg-index{margin-top:64px;max-width:1180px}

.rg-block + .rg-block{margin-top:52px;padding-top:44px;border-top:1px solid var(--n10)}

.rg-block-titel{margin:0;font:600 clamp(21px,2.2vw,26px)/1.2 Archivo,sans-serif;
  letter-spacing:-.02em;color:var(--n90)}
.rg-block-titel a{color:inherit;text-decoration:none}
.rg-block-titel a:hover{color:var(--teal-d)}
.rg-block-satz{margin:10px 0 0;max-width:74ch;color:var(--n60)}

/* Zwei Spalten, weil eine Titelliste keine 74 Zeichen braucht und
   23 Fahrzeugbeiträge untereinander eine halbe Bildschirmhöhe fressen.

   `columns` und nicht `grid`: die Liste steht alphabetisch, und ein
   Raster füllt zeilenweise — „Audi A6, Audi R8" stünden dann
   nebeneinander statt untereinander. Wer ein Verzeichnis liest, geht
   eine Spalte hinunter, nicht eine Zeile entlang. */
.rg-verzeichnis{list-style:none;margin:22px 0 0;padding:0;
  columns:2;column-gap:44px}
.rg-verzeichnis li{padding:11px 0;border-top:1px solid var(--n10);
  break-inside:avoid}
.rg-verzeichnis a{color:var(--n70);text-decoration:none;
  font:400 16px/1.45 Archivo,sans-serif}
.rg-verzeichnis a:hover{color:var(--teal-d)}


/* ---------------------------------------------------------- Unter dem Beitrag
   Der Weg ins Angebot. Kommt aus der Kategorie, nicht aus dem Text —
   siehe inc/ratgeber.php. Er steht in der Lesespalte, damit er nicht
   breiter wirkt als der Beitrag, den er abschließt. */

.rg-abschluss{margin:52px 0 0;max-width:74ch;
  padding:26px 28px 28px;background:var(--n05);border-radius:var(--rundung)}
.rg-abschluss > b{display:block;margin:0 0 8px;
  font:600 18px/1.32 Archivo,sans-serif;color:var(--n90)}
.rg-abschluss p{margin:0;color:var(--n60)}
/* Der Knopf ist ein <a>; ohne diese Zeile fängt er sich die Linkfarbe
   des Fließtextes ein — Teal auf Teal. */
.rg-abschluss .handlung{margin-top:20px;color:#000;text-decoration:none}
.rg-abschluss .handlung:hover,
.rg-abschluss .handlung:focus-visible{color:var(--teal-l);text-decoration:none}


/* ---------------------------------------------------------- Weiterlesen
   Drei Beiträge derselben Kategorie. Die alten Beiträge verwiesen
   einander an keiner Stelle — für den Leser eine Sackgasse. */

.rg-weiter{margin:56px 0 0;max-width:1180px;
  padding-top:34px;border-top:1px solid var(--n10)}
.rg-weiter h2{margin:0;font:600 20px/1.3 Archivo,sans-serif;color:var(--n90)}
.rg-weiter ul{list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:0 34px;grid-template-columns:repeat(3,minmax(0,1fr))}
.rg-weiter li{padding:14px 0;border-top:1px solid var(--n10)}
.rg-weiter a{color:var(--n90);text-decoration:none;
  font:500 16px/1.4 Archivo,sans-serif}
.rg-weiter a:hover{color:var(--teal-d)}

/* Der Klassenname allein reicht nicht: `.rg-weiter a` darueber ist
   spezifischer und faerbte den Weiterweg schwarz wie die drei Titel
   ueber ihm. Er ist aber kein Titel, sondern ein Weg — und Wege sind
   in dieser Marke teal (Kapitel 04). */
.rg-alle,
.rg-weiter .rg-alle,
.rg-nachbarn .rg-alle{display:inline-block;margin-top:22px;
  font:500 15px/1 Archivo,sans-serif;color:var(--teal-d);text-decoration:none}
.rg-alle:hover,
.rg-weiter .rg-alle:hover,
.rg-nachbarn .rg-alle:hover{text-decoration:underline;text-underline-offset:3px}


/* ---------------------------------------------------------- Nachbarn
   Am Fuß eines Archivs: die anderen fünf Bereiche. Am Fuß und nicht am
   Kopf, weil hier zuerst sucht, wer schon weiß, was er will. */

.rg-nachbarn{margin:64px 0 0;padding-top:34px;border-top:1px solid var(--n10)}
.rg-nachbarn h2{margin:0;font:600 20px/1.3 Archivo,sans-serif;color:var(--n90)}
.rg-nachbarn ul{list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.rg-nachbarn a{display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 14px;border:1px solid var(--n20);border-radius:var(--rundung);
  color:var(--n70);text-decoration:none;font:400 15px/1 Archivo,sans-serif}
.rg-nachbarn a:hover{border-color:var(--teal);color:var(--teal-d)}
.rg-nachbarn a span{font:500 12px/1 'IBM Plex Mono',monospace;color:var(--n40)}
.rg-nachbarn a:hover span{color:var(--teal-d)}


/* ---------------------------------------------------------- Schmaler
   Drei Kacheln nebeneinander gehen bis 1100 px; darunter zwei, am Handy
   eine. Das Verzeichnis fällt früher auf eine Spalte zurück, weil zwei
   Titelspalten unter 780 px zu Wortsalat werden. */

@media(max-width:1100px){
  .rg-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rg-weiter ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:780px){
  .rg-verzeichnis{columns:1}
}

@media(max-width:640px){
  .rg-kacheln{grid-template-columns:1fr}
  .rg-kachel{padding:20px 18px 22px}
  .rg-weiter ul{grid-template-columns:1fr}
  .rg-abschluss{padding:22px 18px 24px}
  .rg-index{margin-top:48px}
  .rg-block + .rg-block{margin-top:40px;padding-top:34px}
}