/* Magazin — eigenes, schlankes Stylesheet in der Markensprache von klarstern.com.
   ⚠️ Bewusst NICHT das grosse Stylesheet der Startseite: eine Artikelseite soll schnell
   laden, das zaehlt fuer Google (Core Web Vitals) und fuer die Leserin. */
:root{
  --grund:#FBFAF8; --ink:#3B3B3F; --ink-soft:#6E6E73; --line:#E7E2DD;
  --rose:#B98C88; --rose-tief:#8F6663; --rose-hell:#F4E9E7; --mint:#E7F2EE;
}
*{box-sizing:border-box}
body.mag{margin:0;background:var(--grund);color:var(--ink);
  font-family:'Lora',Georgia,serif;font-size:1.05rem;line-height:1.7;}
body.mag main{max-width:44rem;margin:0 auto;padding:0 20px 64px}
.mag-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;
  max-width:44rem;margin:0 auto;padding:18px 20px;}
.mag-marke,.mag-kopf nav a{font-family:'Poppins',system-ui,sans-serif;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.mag-kopf nav a{margin-left:14px;color:var(--ink-soft)}
.mag-kopf nav a:hover,.mag-marke:hover{color:var(--rose-tief)}
.mag-krumen{font-family:'Poppins',system-ui,sans-serif;font-size:.78rem;color:var(--ink-soft);margin:8px 0 18px}
.mag-krumen a{color:var(--ink-soft)}
h1{font-size:2rem;line-height:1.25;margin:.2em 0 .3em}
h2{font-family:'Poppins',system-ui,sans-serif;font-size:1.25rem;line-height:1.35;margin:1.8em 0 .5em}
h3{font-family:'Poppins',system-ui,sans-serif;font-size:1.05rem;margin:1.4em 0 .4em}
.mag-zeile{font-family:'Poppins',system-ui,sans-serif;font-size:.82rem;color:var(--ink-soft);margin:0 0 1.4em}
.mag-bild img{width:100%;height:auto;border-radius:14px;display:block}
.mag-bild{margin:0 0 1.6em}
.mag-kurz{background:var(--mint);border-radius:14px;padding:18px 20px;margin:0 0 1.8em}
.mag-kurz h2{margin:0 0 .4em;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.mag-kurz p,.mag-kurz li{margin:.4em 0}
.mag-text img{max-width:100%;height:auto;border-radius:12px}
.mag-text blockquote{margin:1.4em 0;padding:.2em 0 .2em 18px;border-left:3px solid var(--rose);
  color:var(--ink-soft);font-style:italic}
.mag-text a{color:var(--rose-tief)}
.mag-faq{margin:2.4em 0 0;border-top:1px solid var(--line);padding-top:1em}
.mag-faq details{border-bottom:1px solid var(--line);padding:10px 0}
.mag-faq summary{cursor:pointer;font-family:'Poppins',system-ui,sans-serif;font-size:.98rem}
.mag-worte{font-family:'Poppins',system-ui,sans-serif;font-size:.8rem;color:var(--ink-soft);margin-top:2em}
.mag-cta{background:var(--rose-hell);border-radius:14px;padding:20px;margin:2.4em 0 0}
.mag-knopf{display:inline-block;background:var(--rose-tief);color:#fff;text-decoration:none;
  font-family:'Poppins',system-ui,sans-serif;font-size:.92rem;padding:12px 22px;border-radius:999px}
.mag-liste{list-style:none;padding:0;margin:2em 0 0}
.mag-liste li{border-top:1px solid var(--line);padding:20px 0}
.mag-liste h2{margin:0 0 .2em}
.mag-liste h2 a{color:var(--ink);text-decoration:none}
.mag-liste h2 a:hover{color:var(--rose-tief)}
.mag-vorwort{color:var(--ink-soft)}
.mag-vorschau{max-width:44rem;margin:0 auto 12px;padding:10px 20px;background:var(--rose-hell);
  font-family:'Poppins',system-ui,sans-serif;font-size:.85rem;border-radius:10px}
.mag-fuss{max-width:44rem;margin:0 auto;padding:24px 20px 48px;border-top:1px solid var(--line);
  font-family:'Poppins',system-ui,sans-serif;font-size:.82rem;color:var(--ink-soft)}
.mag-fuss a{color:var(--ink-soft)}
.mag-klein{font-size:.78rem}
@media (max-width:600px){h1{font-size:1.6rem}body.mag{font-size:1rem}}

/* --- Ergaenzungen 2026-09-22 (SEO-Ausbau) ---------------------------------- */
/* ⚠️ Der Name der Autorin in der Vertrauenszeile ist ein Link auf /ueber-christina —
   ohne diese Zeile waere er blau und unterstrichen wie ein Fremdkoerper. */
.mag-zeile a{color:var(--rose-tief);text-decoration:none;border-bottom:1px solid var(--line)}
.mag-zeile a:hover{border-bottom-color:var(--rose)}
.mag-text ul,.mag-text ol{padding-left:1.3em;margin:1em 0}
.mag-text li{margin:.35em 0}
.mag-text hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.mag-text p:first-of-type{font-size:1.08em}
.mag-faq details[open] summary{color:var(--rose-tief)}
.mag-faq details div p{margin:.6em 0 .2em}

/* --- Bilder (2026-09-22) ---------------------------------------------------- */
/* ⚠️ Jedes Bild traegt width/height im Markup; `height:auto` hier laesst es trotzdem
   mitskalieren. Beides zusammen haelt das Seitenverhaeltnis fest, bevor das Bild da ist —
   ohne das springt der Text beim Laden (Google misst es als CLS). */
.mag-titelbild{margin:0 0 1.8em}
.mag-titelbild img,.mag-text figure img,.mag-portraet img{width:100%;height:auto;display:block}
.mag-titelbild img{border-radius:14px}
/* Abbildungen im Text: die PNGs sind transparent, also KEINE Flaeche dahinter.
   ⚠️ Kein Klassen-Selektor moeglich — die Bereinigung schreibt Tags ohne Attribute neu. */
.mag-text figure{margin:2.2em 0;max-width:100%}

/* Autorinnenzeile mit rundem Bild */
/* ⚠️ Eckig mit runden Ecken, KEIN Kreis (Christina, 2026-09-22) — ein Kreis schneidet das
   Gesicht zu eng an. Dafuer liegt hier das quadratische Foto, nicht das runde PNG. */
.mag-zeile-autorin{display:flex;align-items:center;gap:12px}
.mag-avatar{border-radius:9px;flex:none;width:46px;height:46px;object-fit:cover}
/* Der Autorinnenkasten am Artikelende — das Bild steht im Zitatblock. */
.mag-text blockquote img{float:left;width:88px;height:88px;border-radius:12px;object-fit:cover;
  margin:.15em 18px .5em 0}
.mag-text blockquote{overflow:hidden}

/* Uebersicht: Karten mit Titelbild */
.mag-karten{list-style:none;padding:0;margin:2em 0 0;display:grid;gap:28px}
@media (min-width:620px){.mag-karten{grid-template-columns:1fr 1fr}}
.mag-karten li{border:0;padding:0}
.mag-karte-bild{display:block;margin:0 0 .8em}
.mag-karte-bild img{width:100%;height:auto;border-radius:12px;display:block}
.mag-karten h2{font-size:1.12rem;margin:0 0 .2em}
.mag-karten h2 a{color:var(--ink);text-decoration:none}
.mag-karten h2 a:hover{color:var(--rose-tief)}
.mag-karten p{margin:.3em 0 0}

/* Autorinnenseite: Foto neben dem Text, auf dem Handy darueber */
.mag-portraet{margin:0 0 1.4em}
.mag-portraet img{border-radius:14px}
@media (min-width:700px){
  .mag-autorin{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start}
  .mag-portraet{margin:0;position:sticky;top:24px}
}

/* --- Abschluss: App und Buch zum Ansehen (2026-09-22) ----------------------- */
.mag-weiter{margin:3em 0 0;padding-top:1.6em;border-top:1px solid var(--line)}
.mag-weiter h2{font-size:1.1rem;margin:0 0 1.2em;letter-spacing:.04em;text-transform:uppercase}
.mag-weiter-karten{display:grid;gap:22px}
@media (min-width:560px){.mag-weiter-karten{grid-template-columns:1fr 1fr}}
.mag-weiter-karte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:26px 20px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;
  text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.mag-weiter-karte:hover{border-color:var(--rose);transform:translateY(-2px)}
/* Handy-Rahmen wie auf der Startseite — dasselbe Rezept, damit die App gleich aussieht. */
.mag-phone{position:relative;width:150px;border-radius:28px;background:#26262A;padding:7px;
  box-shadow:0 26px 50px -26px rgba(58,58,60,.55)}
.mag-phone::after{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28)}
.mag-phone img{display:block;width:100%;height:auto;border-radius:22px}
.mag-cover img{display:block;width:150px;height:auto;border-radius:4px;
  box-shadow:0 22px 44px -22px rgba(58,58,60,.55)}
.mag-weiter-kick{font-family:'Poppins',system-ui,sans-serif;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose-tief);margin-top:4px}
.mag-weiter-text{font-size:.95rem;color:var(--ink-soft);max-width:26em}
/* Die Knoepfe stehen in beiden Karten auf einer Linie, auch wenn der Text verschieden lang ist. */
.mag-weiter .mag-knopf{margin-top:auto}
.mag-weiter-text{margin-bottom:14px}
.mag-knopf-leise{background:transparent;color:var(--rose-tief);border:1px solid var(--rose)}

/* --- Ein Absatz, der NUR aus einem Link besteht, ist ein Aufruf (2026-09-22) ---
   In jedem Artikel steht „Die ersten zwei Werkzeuge kostenlos starten" allein auf einer Zeile.
   Als nackter unterstrichener Link sah das aus wie ein Versehen.
   ⚠️ Erkannt wird der Fall beim IMPORT (Klasse `mag-aufruf`), nicht hier: `a:only-child`
   zaehlt nur Elemente und machte auch einen Link mitten im Satz zum Knopf. */
.mag-text p.mag-aufruf{margin:2em 0}
.mag-text p.mag-aufruf > a{
  display:inline-block;background:var(--rose-tief);color:#fff;text-decoration:none;
  font-family:'Poppins',system-ui,sans-serif;font-size:.92rem;line-height:1.3;
  padding:13px 24px;border-radius:999px;transition:background .15s}
.mag-text p.mag-aufruf > a:hover{background:var(--ink)}
/* Links im Fliesstext bleiben Fliesstext, nur ruhiger unterstrichen. */
.mag-text a{text-decoration-thickness:1px;text-underline-offset:3px}