/* =========================================================================
   clevagents — Stil der Ratgeber-Seiten
   Ergänzt css/stil.css, ersetzt sie NICHT. Die Farb- und Massvariablen
   (--grund, --text-leise, --breite-eng …) stammen von dort; hier stehen nur
   die Regeln, die eine reine Lese-Seite braucht.

   WARUM EINE ZWEITE DATEI, obwohl stil.css im Kopf «eine einzige Stildatei»
   sagt — zwei unabhängige Gründe, beide gemessen:

   (1) DER ZWISCHENSPEICHER. Auf dem echten Server liefert css/stil.css
       weiterhin «max-age=604800» aus, also SIEBEN TAGE (gemessen am
       10.08.2026 mit `curl -sI`; die Vorlage im Repo sagt längst 1 Stunde,
       aber die .htaccess auf dem Server ist noch die alte — siehe
       HANDOFF.md, ⏳-Liste #1). Wer die Startseite schon einmal besucht hat,
       bekäme eine Woche lang die ALTE stil.css und damit eine Ratgeber-Seite
       ohne ihre Gestaltung. Diese Datei hier ist eine neue Adresse und lag
       darum bei niemandem im Zwischenspeicher.

   (2) DIE SICHERHEITSREGEL. Die .htaccess setzt «style-src 'self'» ohne
       'unsafe-inline' (Z. 44). Ein <style>-Block direkt in der HTML-Datei
       würde vom Browser verworfen — die Seite käme roh heraus. Stil MUSS
       also in einer eigenen Datei stehen.

   Wer beides später auflöst (neue .htaccess oben, Zwischenspeicher kurz),
   kann diese Datei in stil.css schieben. Vorher nicht.

   GESTALTUNG — woher sie kommt (CLAUDE.md §11, echte Vorlage statt Kopf):
   Matter, Lese-Ansicht eines Artikels auf Dunkel
   https://mobbin.com/screens/fd4a93c8-2752-4d96-8d59-bf683e0ad2c5
   Übernommen wurden vier Dinge, jedes aus einem Grund:
     · schmale Textspalte (ca. 66 Zeichen) — längere Zeilen verliert das Auge
       beim Rücksprung, und dieser Text ist zum Lesen da, nicht zum Überfliegen
     · kleine Grossbuchstaben-Zeile ÜBER dem Titel statt einer Navigation —
       sie sagt in einem Wort, was für ein Text das ist
     · eine einzige Zeile Angaben unter dem Titel, danach nichts mehr
     · viel Zeilenabstand, ruhiger Fliesstext-Ton statt Weiss
   NICHT übernommen: die Werkzeugleiste am Rand (Vorlesen, Merken) — dafür
   gibt es hier nichts zu bedienen.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. DIE SPALTE
   ------------------------------------------------------------------------- */
.artikel {
  max-width: var(--breite-eng);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--rand) clamp(3rem, 8vw, 5rem);
}


/* -------------------------------------------------------------------------
   2. KOPF DES ARTIKELS
   ------------------------------------------------------------------------- */

/* Die Zeile über dem Titel. Sie ersetzt eine Navigation: In dem Moment, in
   dem jemand aus einer Suchmaschine hier landet, ist «wo bin ich» die erste
   Frage — «Ratgeber» beantwortet sie schneller als ein Menü. */
.artikel__art {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blau-hell);
}

.artikel__titel {
  margin: 0 0 1.25rem;
  font-size: clamp(1.95rem, 5.2vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;          /* verhindert eine einsame letzte Zeile */
}

/* Eine Zeile Angaben, danach nichts mehr. Die Trennzeichen sind CSS und
   nicht getippt — sonst liest ein Vorleseprogramm «Punkt» mit. */
.artikel__angaben {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0 0 2.5rem;
  padding: 0 0 1.75rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.875rem;
  color: var(--text-still);
  list-style: none;
}

/* Das Trennzeichen hängt am ENDE des vorherigen Eintrags, nicht am Anfang des
   nächsten. Der Unterschied zählt nur beim Umbruch — und genau dort war die
   erste Fassung falsch: Auf einem schmalen Fenster begann die zweite Zeile mit
   einem einsamen «·», was wie ein Darstellungsfehler aussieht. So bleibt das
   Zeichen am Ende der oberen Zeile stehen, wo es hingehört. */
.artikel__angaben li:not(:last-child)::after {
  content: "·";
  margin-left: 0.75rem;
  color: var(--linie-stark);
}

/* Unterhalb dieser Breite passen die drei Angaben nicht mehr in eine Zeile.
   Statt sie umbrechen zu lassen — wobei am Zeilenende ein Trennzeichen ins
   Leere zeigt — stehen sie dort untereinander, ganz ohne Trennzeichen. Ein
   Trennzeichen trennt nur dann etwas, wenn rechts davon noch etwas kommt.

   ⚠️ DIE 780 px SIND GEMESSEN, NICHT GERATEN. Die Textspalte ist bis 660 px
   breit, dazu kommt links und rechts ein mitwachsender Rand — die Zeile passt
   erst ab rund 780 px Fensterbreite in eine Zeile. Eine erste Fassung stand
   auf 560 px; bei 620 px brach die Zeile dann doch um und das Trennzeichen
   hing am Ende (nachgemessen am 10.08.2026). Wer die Angaben-Zeile je
   verlängert, muss diese Zahl neu messen — sie hängt am TEXT, nicht am Gerät. */
@media (max-width: 780px) {
  .artikel__angaben { display: block; }
  .artikel__angaben li { margin-bottom: 0.2rem; }
  .artikel__angaben li:not(:last-child)::after { content: none; }
}


/* -------------------------------------------------------------------------
   3. FLIESSTEXT
   ------------------------------------------------------------------------- */
.artikel p,
.artikel li {
  color: var(--text-leise);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.artikel p { margin: 0 0 1.4rem; }

/* Der erste Absatz beantwortet die Titelfrage. Er ist grösser und heller,
   damit jemand, der nur ihn liest, die Antwort trotzdem hat.

   ⚠️ Der Selektor MUSS «p.artikel__einstieg» heissen, nicht nur
   «.artikel__einstieg»: Die Regel «.artikel p» darüber ist spezifischer als
   eine einzelne Klasse und hat die Schriftgrösse sonst still überschrieben —
   die Seite sah dann richtig aus, nur war der Einstieg gleich gross wie der
   Rest. Gemessen am 10.08.2026: 17 px statt der gewollten 19 px. */
.artikel p.artikel__einstieg {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--text);
}

.artikel h2 {
  margin: 3.25rem 0 1.25rem;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Die fett beginnenden Absätze im Abschnitt «Was wirklich hilft»: Das erste
   Stück ist die Massnahme, der Rest die Begründung. Der Farbwechsel macht
   die zwei Rollen sichtbar, ohne eine Aufzählung daraus zu machen. */
.artikel p > strong:first-child { color: var(--text); }

.artikel a {
  color: var(--blau-hell);
  text-underline-offset: 0.2em;
}

.artikel a:hover { color: var(--text); }


/* -------------------------------------------------------------------------
   4. DIE FÜNF FRAGEN
   Bewusst gross nummeriert: Das ist der Teil, den jemand mitnimmt — auch
   dann, wenn er den Rest überfliegt.
   ------------------------------------------------------------------------- */
.artikel__fragen {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  counter-reset: frage;
}

.artikel__fragen > li {
  counter-increment: frage;
  position: relative;
  margin: 0 0 1.5rem;
  padding-left: 2.75rem;
}

.artikel__fragen > li::before {
  content: counter(frage);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blau-hell);
}

.artikel__fragen strong { color: var(--text); }


/* -------------------------------------------------------------------------
   5. DER ABSATZ ÜBER UNS
   Er ist abgesetzt, damit die Grenze zwischen Ratgeber und Eigenwerbung
   sichtbar ist statt behauptet. Wer nur den Ratgeber wollte, sieht auf einen
   Blick, wo er aufhören kann.
   ------------------------------------------------------------------------- */
.artikel__wir {
  margin: 3.25rem 0 0;
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--grund-hoch);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}

.artikel__wir h2 { margin-top: 0; }
.artikel__wir p:last-child { margin-bottom: 0; }


/* -------------------------------------------------------------------------
   6. FUSS DES ARTIKELS
   ------------------------------------------------------------------------- */
.artikel__weiter {
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--linie);
}

.artikel__weiter p { margin-bottom: 1.25rem; }


/* -------------------------------------------------------------------------
   7. GEDRUCKT
   Ein Ratgeber wird ausgedruckt und weitergereicht — dann gehört die Adresse
   der Seite aufs Papier, sonst weiss niemand, woher der Text stammt.
   ------------------------------------------------------------------------- */
@media print {
  .kopf, .artikel__weiter { display: none; }

  .artikel { max-width: none; padding: 0; }

  .artikel p,
  .artikel li,
  .artikel__einstieg,
  .artikel__titel,
  .artikel h2 { color: #000; }

  .artikel__wir { border: 1px solid #999; background: none; }

  .artikel__titel::after {
    content: "clevagents.ch/ratgeber/halluzinationen/";
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #555;
  }
}