/* ====================  css/ratgeber.css  ====================
   Der Ratgeber auf renekress.de (01.10.2026): Übersicht, Themen und Beiträge
   unter /ratgeber/ sowie die Verwaltung /ratgeber/admin/.

   Die öffentlichen Seiten baut die Function „ratgeber“ (functions/ratgeber-seiten.js)
   in den Rahmen /_vorlagen/ratgeber.html, den bau.py schreibt - nur dieser Rahmen
   und die Verwaltung laden diese Datei.

   Keine eigene Formensprache: Haarlinien, Versalien nur in h1 und Beschriftungen,
   Tafeln fast deckend mit einer Haarlinie und 10 px Rundung, Knöpfe als Rahmen.
   Gelesen wird wie bei den Rechtstexten in einer ruhigen Spalte über einem
   weichen Abdunkler. Farbe trägt nur das Thema (--rg-farbe aus der Kategorie);
   Grün heißt auch hier: Shopify. */

/* ---------- Gerüst ---------- */
.ratgeber{ gap: clamp(30px, 4.5vh, 52px) }

/* Weicher Grund hinter Text über der Punktwolke - derselbe wie bei .rechtstext */
.rg-kopf, .rg-artikel, .rg-kat-text, .rg-seiten, .rg-leer, .rg-verwandt, .rg-themen, .rg-begriffe{ position: relative }
.rg-kopf::before, .rg-artikel::before, .rg-kat-text::before, .rg-leer::before, .rg-themen::before, .rg-begriffe::before{
  content: ""; position: absolute; inset: -5vh -7vw; z-index: -1; pointer-events: none;
  background: rgba(5,6,12,.9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
                      linear-gradient(transparent, #000 5vh, #000 calc(100% - 5vh), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
              linear-gradient(transparent, #000 5vh, #000 calc(100% - 5vh), transparent);
  mask-composite: intersect;
}

/* Unsichtbar, aber vorgelesen: „Ratgeber“ vor Themen-Links (macht sie für Suchmaschinen eindeutig) */
.rg-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* ---------- Kopf der Übersicht ---------- */
.rg-kopf{ max-width: 82ch }
.rg-kopf h1{ font-size: clamp(2.2rem, 5.4vw, 4.4rem); margin: 12px 0 clamp(16px, 2.6vh, 24px) }
.rg-kopf .vorspann{ max-width: 64ch }
.rg-kopf .knopf{ margin-top: 22px }

/* Themen: Rahmen wie die Filter der Verwaltung, der Punkt trägt die Themenfarbe */
.rg-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px, 3.4vh, 32px) }
.rg-chips a{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--linie); border-radius: 2px;
  background: rgba(9,11,20,.72);
  color: var(--text-leise); font-size: .84rem; text-decoration: none; white-space: nowrap;
  transition: color .14s linear, border-color .14s linear;
}
.rg-chips a[style]::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--rg-farbe, var(--text-fern));
}
.rg-chips a:hover{ color: var(--text); border-color: rgba(140,170,240,.36) }
.rg-chips a[aria-current="page"]{ color: var(--text); border-color: var(--papier) }
.rg-chips a:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
/* Auf dem Telefon eine Zeile zum Wischen statt sechs Zeilen Knöpfe - die Ränder blenden aus */
@media (max-width: 640px){
  .rg-chips{
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--rand) * -1); padding: 3px var(--rand) 6px; scroll-padding-inline: var(--rand);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--rand), #000 calc(100% - var(--rand)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--rand), #000 calc(100% - var(--rand)), transparent);
  }
  .rg-chips::-webkit-scrollbar{ display: none }
}

/* ---------- Karten ---------- */
.rg-karten{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px) }
@media (max-width: 1040px){ .rg-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .rg-karten{ grid-template-columns: minmax(0, 1fr) } }

.rg-karte{
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: rgba(9,11,20,.88); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
  transition: border-color .2s ease-out, transform .2s ease-out;
}
.rg-karte:hover{ border-color: rgba(140,170,240,.36); transform: translateY(-2px) }
.rg-karte:active{ transform: translateY(0) }
.rg-karte:focus-within{ border-color: var(--papier) }
.rg-karte-bild{ display: block; aspect-ratio: 3 / 2; background: var(--raum-hoch); overflow: hidden }
.rg-karte-bild img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease-out }
.rg-karte:hover .rg-karte-bild img{ transform: scale(1.025) }
.rg-karte-text{ display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px }
.rg-kat{
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rg-farbe, var(--text-fern)); max-width: none;
}
.rg-karte-titel{
  font-size: clamp(1.04rem, 1.3vw, 1.16rem); line-height: 1.32; font-weight: 600;
  text-transform: none; letter-spacing: -.008em; text-wrap: pretty;
}
.rg-karte-titel a{ color: var(--text); text-decoration: none }
.rg-karte-titel a::after{ content: ""; position: absolute; inset: 0 }      /* die ganze Karte ist der Link */
.rg-karte-titel a:focus-visible{ outline: none }
.rg-karte-auszug{
  font-size: .9rem; line-height: 1.55; color: var(--text-leise); max-width: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-karte-meta{ margin-top: auto; padding-top: 6px; font-size: .78rem; color: var(--text-fern); font-variant-numeric: tabular-nums; max-width: none }

.rg-karten--klein .rg-karte-auszug{ -webkit-line-clamp: 2 }

/* ---------- Seiten, leer, Thementext ---------- */
.rg-seiten{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding-top: 18px; border-top: 1px solid var(--linie); font-size: .9rem; color: var(--text-fern);
}
.rg-seiten a{ color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 2px }
.rg-seiten a:hover{ border-bottom-color: var(--papier) }
.rg-seiten span{ font-variant-numeric: tabular-nums }

.rg-leer{
  max-width: 60ch; padding: 22px 0; border-block: 1px solid var(--linie);
  color: var(--text-leise); font-size: 1.02rem;
}

.rg-kat-text{ max-width: 70ch }
.rg-kat-text p{ color: var(--text-leise); line-height: 1.7; max-width: none }
.rg-kat-text p + p{ margin-top: .9em }

/* ---------- Themen im Ratgeber (erste Übersichtsseite) ---------- */
.rg-themen{ max-width: 96ch }
.rg-themen h2{
  font-size: clamp(1.28rem, 2vw, 1.66rem); line-height: 1.24; text-transform: none; letter-spacing: -.012em;
  margin-bottom: 14px;
}
.rg-themen ul{ list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--linie) }
@media (max-width: 760px){ .rg-themen ul{ grid-template-columns: minmax(0, 1fr) } }
.rg-themen li{ padding: 14px 0 16px; border-bottom: 1px solid var(--linie) }
.rg-themen a{
  display: inline-flex; align-items: baseline; gap: 10px;
  color: var(--text); font-weight: 500; text-decoration: none; text-wrap: pretty;
}
.rg-themen a::before{ content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rg-farbe, var(--text-fern)); transform: translateY(-1px) }
.rg-themen a:hover{ text-decoration: underline; text-underline-offset: 3px }
.rg-themen a:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
.rg-themen p{ margin: 4px 0 0 17px; font-size: .9rem; line-height: 1.55; color: var(--text-leise); max-width: none }

/* ---------- Begriffe kurz erklärt (Themenseiten), Entstehung (Übersicht) ---------- */
.rg-begriffe{ max-width: 96ch }
.rg-begriffe h2, .rg-entstehung h2{
  font-size: clamp(1.28rem, 2vw, 1.66rem); line-height: 1.24; text-transform: none; letter-spacing: -.012em;
  margin-bottom: 14px;
}
.rg-begriffe dl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--linie) }
@media (max-width: 760px){ .rg-begriffe dl{ grid-template-columns: minmax(0, 1fr) } }
.rg-begriffe dl > div{ padding: 14px 0 16px; border-bottom: 1px solid var(--linie) }
.rg-begriffe dt{ color: var(--text); font-weight: 500 }
.rg-begriffe dd{ margin-top: 4px; font-size: .92rem; line-height: 1.6; color: var(--text-leise) }
.rg-entstehung .textlink{ font-size: inherit }

/* ---------- Beitrag ---------- */
.rg-artikel{ max-width: 76ch }
.rg-krumen{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 20px;
  font-size: .8rem; color: var(--text-fern);
}
.rg-krumen a{ color: var(--text-leise); text-decoration: none }
.rg-krumen a:hover{ color: var(--text) }
.rg-artikel h1{
  font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.08; text-wrap: balance;
  margin: 12px 0 clamp(16px, 2.6vh, 24px);
}
.rg-artikel > .vorspann{ max-width: 64ch }

.rg-titelbild{ margin: clamp(26px, 4vh, 40px) 0 0 }
.rg-bild{ position: relative }
.rg-titelbild img, .rg-text figure img{
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--raum-hoch);
}
.rg-titelbild figcaption, .rg-text figcaption{ margin-top: 10px; font-size: .84rem; line-height: 1.5; color: var(--text-fern) }
/* Kennzeichnung der KI-Bilder: klein, lesbar, nie über dem Motiv in der Mitte */
.rg-ki{
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 3px 9px; border-radius: 2px; background: rgba(5,6,12,.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,232,244,.84);
  pointer-events: none;
}

/* Der Fließtext: heller als --text-leise, weil hier minutenlang gelesen wird */
.rg-text{ margin-top: clamp(28px, 4.4vh, 44px) }
.rg-text > * + *{ margin-top: 1.05em }
.rg-text p, .rg-text li{ color: rgba(226,232,244,.78); line-height: 1.74; max-width: 68ch; font-size: 1.02rem }
.rg-text h2{
  font-size: clamp(1.28rem, 2vw, 1.66rem); line-height: 1.24; text-transform: none; letter-spacing: -.012em;
  text-wrap: balance; color: var(--text); margin-top: 2.1em; scroll-margin-top: calc(var(--kopf-h) + 32px);
}
.rg-text h3{ font-size: clamp(1.08rem, 1.5vw, 1.24rem); margin-top: 1.8em; scroll-margin-top: calc(var(--kopf-h) + 32px) }
.rg-text h4{ font-size: 1rem; font-weight: 600; color: var(--text); margin-top: 1.5em }
.rg-text h2 + *, .rg-text h3 + *, .rg-text h4 + *{ margin-top: .55em }
.rg-text ul, .rg-text ol{ padding-left: 1.35em }
.rg-text li + li{ margin-top: .45em }
.rg-text li::marker{ color: var(--blau) }
.rg-text strong, .rg-text b{ color: var(--text); font-weight: 600 }
.rg-text em, .rg-text i{ font-style: italic; color: inherit }
.rg-text a{
  color: var(--text); text-decoration: underline; text-decoration-color: rgba(0,144,252,.6);
  text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere;
  transition: text-decoration-color .14s linear;
}
.rg-text a:hover{ text-decoration-color: var(--papier) }
.rg-text blockquote{ border-left: 2px solid var(--violett); padding: 2px 0 2px 18px }
.rg-text blockquote p{ color: var(--text) }
.rg-text figure{ margin-block: 2em }
/* Tabellen scrollen in sich, nie die Seite */
.rg-text table{
  display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse;
  font-size: .92rem; font-variant-numeric: tabular-nums;
}
.rg-text th, .rg-text td{ padding: 10px 14px 10px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; min-width: 9em }
.rg-text th{ color: var(--text); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase }
.rg-text td{ color: rgba(226,232,244,.74) }

.rg-faq{ margin-top: clamp(40px, 6vh, 64px) }
.rg-faq h2, .rg-verwandt h2{
  font-size: clamp(1.28rem, 2vw, 1.66rem); line-height: 1.24; text-transform: none; letter-spacing: -.012em;
  margin-bottom: 14px;
}
.rg-faq .faq::before{ content: none }       /* der Grund liegt schon hinter dem ganzen Beitrag */

.rg-leistung{
  margin-top: clamp(36px, 5vh, 56px); padding: 22px 24px 24px;
  background: rgba(9,11,20,.92); border: 1px solid var(--linie); border-radius: 10px;
}
.rg-leistung .kapitel-nr{ margin-bottom: 10px }
.rg-leistung .rg-leistung-name{ margin-bottom: 4px }
.rg-leistung p{ color: var(--text-leise); max-width: 60ch }
.rg-leistung .textlink{ color: var(--text); font-size: inherit }
.rg-leistung .knopf{ margin-top: 18px }

.rg-autor{
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linie);
  font-size: .84rem; line-height: 1.55; color: var(--text-fern); max-width: none;
}

.rg-verwandt{ margin-top: clamp(20px, 3vh, 32px) }

@media (max-width: 640px){
  .rg-artikel h1{ font-size: clamp(1.7rem, 7.6vw, 2.2rem) }
  .rg-text p, .rg-text li{ font-size: 1rem }
  .rg-leistung{ padding: 18px 18px 20px }
  .rg-ki{ top: 8px; left: 8px }
}

@media (prefers-reduced-motion: reduce){
  .rg-karte, .rg-karte-bild img{ transition: none }
  .rg-karte:hover{ transform: none }
  .rg-karte:hover .rg-karte-bild img{ transform: none }
}


/* ====================  Verwaltung (/ratgeber/admin/)  ====================
   Baut auf masterclass.css auf (mk-*, amc-*): dieselben Zeilen, Marken und Knöpfe
   wie die Verwaltung der Masterclass. Hier nur, was der Ratgeber zusätzlich braucht. */

.rga .amc-zahlen{ grid-template-columns: repeat(5, minmax(0, 1fr)) }
@media (max-width: 900px){ .rga .amc-zahlen{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* Liste */
.rga-zeile{
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid rgba(140,170,240,.09);
}
.rga-zeile-bild{
  display: block; width: 112px; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden;
  background: var(--raum-hoch); border: 1px solid var(--linie);
}
.rga-zeile-bild img{ display: block; width: 100%; height: 100%; object-fit: cover }
.rga-zeile-titel{
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: .98rem; line-height: 1.4; color: var(--text);
}
.rga-zeile-titel:hover{ text-decoration: underline; text-underline-offset: 3px }
.rga-zeile-titel:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
.rga-zeile .amc-meta{ margin-top: 6px }
.rga-marken{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end }
@media (max-width: 760px){
  .rga-zeile{ grid-template-columns: 84px minmax(0, 1fr) }
  .rga-zeile-bild{ width: 84px }
  .rga-marken{ grid-column: 1 / -1; justify-content: flex-start }
}

/* Editor */
.rga-zurueck{ margin-bottom: 18px }
.rga-editor{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(22px, 3vw, 40px); align-items: start }
@media (max-width: 980px){ .rga-editor{ grid-template-columns: minmax(0, 1fr) } }
.rga-felder{ display: flex; flex-direction: column; gap: 18px }
.rga-seite{ display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--kopf-h) + 16px) }
@media (max-width: 980px){ .rga-seite{ position: static } }
.rga-tafel{ padding: 16px 18px; border: 1px solid var(--linie); border-radius: 10px; background: rgba(9,11,20,.6) }
.rga-tafel-titel{ margin-bottom: 10px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise) }
.rga-tafel .amc-aktionen + .amc-aktionen{ margin-top: 10px }

.rga-feld{ display: flex; flex-direction: column; gap: 7px }
.rga-feld > span{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-fern);
}
.rga-feld > span small{ letter-spacing: .04em; text-transform: none; font-size: .78rem; font-variant-numeric: tabular-nums }
.rga-feld > span small.rga-zuviel{ color: #ff9a8d }
.rga-feld input, .rga-feld textarea, .rga-feld select{
  width: 100%; padding: 10px 12px; background: rgba(9,11,20,.7);
  border: 1px solid var(--linie); border-radius: 2px;
  color: var(--text); font: inherit; font-size: .94rem; line-height: 1.5;
}
.rga-feld textarea{ resize: vertical }
.rga-feld .rga-html{ min-height: 420px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; line-height: 1.55 }
.rga-feld input:focus, .rga-feld textarea:focus, .rga-feld select:focus{ outline: none; border-color: var(--papier) }
.rga-feld-zwei{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px }
@media (max-width: 640px){ .rga-feld-zwei{ grid-template-columns: minmax(0, 1fr) } }

.rga-faq{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid rgba(140,170,240,.09) }
.rga-faq .rga-feld{ grid-column: 1 }
.rga-faq .knopf{ grid-column: 2; grid-row: 1; align-self: start }

.rga-befunde{ list-style: none }
.rga-befunde li{ padding: 7px 0 7px 18px; position: relative; font-size: .86rem; line-height: 1.45; color: var(--text-leise); border-bottom: 1px solid rgba(140,170,240,.08) }
.rga-befunde li::before{ content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50% }
.rga-befunde .rga-fehler::before{ background: var(--rot) }
.rga-befunde .rga-warnung::before{ background: var(--violett-h) }
.rga-befunde .rga-sperre{ color: #ffb4a8 }
.rga-messwerte{ display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-top: 12px; font-size: .82rem; color: var(--text-fern); font-variant-numeric: tabular-nums }
.rga-messwerte dt{ color: var(--text-fern) }
.rga-messwerte dd{ color: var(--text-leise); text-align: right }

.rga-titelbild{ display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); background: var(--raum-hoch) }
.rga-titelbild + .rga-feld{ margin-top: 12px }

.rga-vorschau{ margin-top: 26px }
.rga-vorschau iframe{
  display: block; width: 100%; height: min(86vh, 1100px); border: 1px solid var(--linie); border-radius: 10px;
  background: var(--raum);
}

/* Neuer Beitrag, Zeitplan */
.rga-wahl{ display: flex; flex-wrap: wrap; gap: 8px }
.rga-wahl label{ cursor: pointer }
.rga-wahl input{ position: absolute; opacity: 0; pointer-events: none }
.rga-wahl span{
  display: inline-block; padding: 7px 13px; border: 1px solid var(--linie); border-radius: 2px;
  font-size: .84rem; color: var(--text-leise); transition: color .14s linear, border-color .14s linear;
}
.rga-wahl input:checked + span{ color: var(--text); border-color: var(--papier) }
.rga-wahl input:focus-visible + span{ outline: 2px solid var(--papier); outline-offset: 3px }
.rga-haken{ display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text-leise); cursor: pointer }
.rga-haken input{ accent-color: var(--blau); width: 16px; height: 16px; margin-top: 3px; flex: none }
.rga-keywords{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.rga-keyword{
  background: none; border: 1px solid var(--linie); border-radius: 2px; padding: 4px 10px; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--text-leise);
}
.rga-keyword small{ margin-left: 6px; color: var(--text-fern); font-variant-numeric: tabular-nums }
.rga-keyword:hover{ color: var(--text); border-color: rgba(140,170,240,.36) }
.rga-keyword--an{ color: var(--text); border-color: var(--papier) }
.rga-laeuft{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 10px; background: rgba(9,11,20,.6) }
.rga-laeuft .mk-lade-ring{ flex: none; width: 26px; height: 26px }
.rga-laeuft p{ color: var(--text-leise); font-size: .92rem; line-height: 1.5 }
.rga-laeuft strong{ color: var(--text); font-weight: 500 }
.rga-zeiten{ display: flex; flex-wrap: wrap; gap: 10px }
.rga-zeiten input{ width: 120px }