/* Ratgeber-Artikel (template/template-aeo-ratgeber.html)
 * Redaktionelles Layout: eine Textspalte, Inhaltsverzeichnis links mitlaufend (Desktop)
 * bzw. aufklappbar (Mobil). Farben/Schriften aus site.css (--sa-*). */

.rg-page {
  --rg-text: 680px;
  --rg-toc: 220px;
  --rg-gap: 56px;
  --rg-gutter: 20px;
  --rg-header: 120px;
  background: var(--sa-cream);
  color: var(--sa-ink);
  font-family: var(--sa-font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: clip;
}
.rg-page *, .rg-page *::before, .rg-page *::after { box-sizing: border-box; }
.rg-page img { max-width: 100%; height: auto; }
html:has(.rg-page) { scroll-padding-top: var(--rg-header, 96px); }

.rg { padding: 32px var(--rg-gutter) 0; }

/* ── Raster: Kopf + Artikel in derselben Textspalte, Inhalt links daneben ── */
.rg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--rg-text);
  margin: 0 auto;
}
@media (min-width: 1080px) {
  .rg-grid {
    grid-template-columns: var(--rg-toc) minmax(0, 1fr);
    column-gap: var(--rg-gap);
    grid-template-areas: ". head" "toc body" ". lead" ". mehr";
    /* optisch zentriert: rechts dieselbe Lücke wie das Inhaltsverzeichnis links */
    max-width: calc(2 * (var(--rg-toc) + var(--rg-gap)) + var(--rg-text));
    padding-right: calc(var(--rg-toc) + var(--rg-gap));
  }
  .rg-head { grid-area: head; }
  .rg-toc { grid-area: toc; }
  .rg-artikel { grid-area: body; }
  .rg-lead { grid-area: lead; }
  .rg-mehr { grid-area: mehr; }
}
@media (min-width: 1080px) and (max-width: 1260px) {
  .rg-grid { padding-right: 0; max-width: calc(var(--rg-toc) + var(--rg-gap) + var(--rg-text)); }
}

/* ── 1. Video ── */
.rg-video { margin: 0 0 28px; }
.rg-video .sa-video { align-items: center; gap: 8px; }
.rg-video .sa-video__frame {
  /* Hochkant-Video: auf dem Handy so groß, dass die Überschrift noch anschaut */
  width: min(100%, 340px, calc(64svh * 9 / 16));
  max-width: none;
  border-radius: 14px;
  box-shadow: none;
}
.rg-video .sa-video__hint { max-width: 340px; text-align: center; font-size: 12px; color: var(--sa-ink-mute); }

/* ── 2. Überschrift ── */
.rg-page .rg-head h1 {
  font-family: var(--sa-font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sa-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.rg-page .rg-byline { margin: 0 0 28px; font-size: 0.875rem; color: var(--sa-ink-mute); }
.rg-page .rg-byline a { color: var(--sa-ink-soft); font-weight: 600; text-decoration: none; }
.rg-page .rg-byline a:hover { text-decoration: underline; }
.rg-byline span { margin: 0 6px; }
.rg-byline time { white-space: nowrap; }

/* ── 3. Kurz gesagt ── */
.rg-kurz {
  background: var(--sa-paper);
  border: 1px solid var(--sa-hair);
  border-radius: var(--sa-radius-sm);
  padding: 20px 22px;
  margin: 0 0 40px;
}
.rg-kurz__titel {
  font-family: var(--sa-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sa-ink);
  margin: 0 0 6px;
}
.rg-kurz__text { hyphens: manual; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sa-ink); }

/* ── Inhalt ── */
.rg-toc { margin: 0 0 32px; }
.rg-toc__details { border-top: 1px solid var(--sa-hair); border-bottom: 1px solid var(--sa-hair); }
.rg-toc__summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rg-toc__summary::-webkit-details-marker { display: none; }
.rg-toc__summary::after { content: "+"; font-weight: 400; font-size: 1.25rem; line-height: 1; color: var(--sa-ink-mute); }
.rg-toc__details[open] > .rg-toc__summary::after { content: "–"; }
.rg-toc__list { list-style: none; margin: 0; padding: 0 0 14px; counter-reset: rg-toc; }
.rg-toc__list li { counter-increment: rg-toc; }
.rg-page .rg-toc-link {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--sa-ink-soft);
  text-decoration: none;
}
.rg-toc-link::before {
  content: counter(rg-toc);
  flex: 0 0 1.4em;
  color: var(--sa-ink-mute);
  font-variant-numeric: tabular-nums;
}
.rg-page .rg-toc-link:hover { color: var(--sa-ink); }
.rg-page .rg-toc-link.is-active { color: var(--sa-purple); font-weight: 600; }
.rg-page .rg-toc-link.is-active::before { color: var(--sa-purple); }

@media (min-width: 1080px) {
  .rg-toc { margin: 0; align-self: start; position: sticky; top: var(--rg-header); }
  .rg-toc__details { border: 0; }
  .rg-toc__summary {
    cursor: default;
    pointer-events: none;
    padding: 0 0 10px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--sa-ink-mute);
  }
  .rg-toc__summary::after { content: none; }
  .rg-toc__list { max-height: calc(100vh - var(--rg-header) - 60px); overflow-y: auto; padding: 0; border-left: 1px solid var(--sa-hair); }
  .rg-page .rg-toc-link { padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.875rem; }
  .rg-toc-link::before { content: none; }
  .rg-page .rg-toc-link.is-active { border-left-color: var(--sa-purple); }
  .rg-toc__details[open] > .rg-toc__summary::after { content: none; }
}

/* ── 4. Artikel ── */
.rg-artikel { min-width: 0; }
.rg-artikel > :first-child { margin-top: 0; }
.rg-artikel h2 {
  font-family: var(--sa-font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--sa-ink);
  margin: 56px 0 14px;
  text-wrap: balance;
}
.rg-artikel h3 {
  font-family: var(--sa-font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--sa-ink);
  margin: 32px 0 8px;
}
.rg-artikel p, .rg-artikel li { color: var(--sa-ink-soft); }
.rg-artikel p { margin: 0 0 18px; hyphens: auto; -webkit-hyphens: auto; }
.rg-artikel strong { color: var(--sa-ink); }
.rg-artikel ul, .rg-artikel ol { margin: 0 0 20px; padding-left: 1.3em; }
.rg-artikel li { margin: 0 0 8px; padding-left: 0.2em; }
.rg-artikel li::marker { color: var(--sa-ink-mute); }
.rg-page .rg-artikel a { color: var(--sa-purple); text-underline-offset: 2px; }

/* Tabellen: auf dem Handy seitlich scrollbar, sonst volle Breite */
.rg-artikel .artikel-table-wrap {
  margin: 24px 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sa-hair);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-paper);
}
.rg-artikel table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.rg-artikel th, .rg-artikel td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sa-hair); }
.rg-artikel th { font-weight: 700; color: var(--sa-ink); background: var(--sa-cream-warm); font-size: 0.875rem; }
.rg-artikel td { color: var(--sa-ink-soft); }
.rg-artikel tr:last-child td { border-bottom: 0; }
.rg-artikel td:first-child { color: var(--sa-ink); font-weight: 600; }
@media (max-width: 640px) {
  .rg-artikel table { min-width: 520px; font-size: 0.875rem; }
}

/* ── WhatsApp mitten im Artikel ── */
.rg-wa {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 0;
  padding: 18px 20px;
  background: var(--sa-paper);
  border: 1px solid var(--sa-hair);
  border-radius: var(--sa-radius-sm);
}
.rg-wa__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; }
.rg-wa__text { flex: 1 1 auto; min-width: 0; }
.rg-artikel .rg-wa__text p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--sa-ink-soft); }
.rg-artikel .rg-wa__text p strong { display: block; color: var(--sa-ink); font-size: 1rem; }
.rg-artikel .rg-wa .rg-btn { color: #fff; }
@media (max-width: 560px) {
  .rg-wa { flex-wrap: wrap; }
  .rg-wa__text { flex-basis: calc(100% - 72px); }
  .rg-wa .rg-btn { width: 100%; justify-content: center; }
}

/* ── Buttons ── */
.rg-page .rg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-ink);
  color: #fff;
  font: 600 0.9375rem/1.2 var(--sa-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.rg-page .rg-btn:hover { background: #2c2635; }
.rg-btn:focus-visible { outline: 3px solid var(--sa-purple-edge); outline-offset: 2px; }
.rg-page .rg-btn--wa { background: #1f8f4e; }
.rg-page .rg-btn--wa:hover { background: #197a42; }
.rg-page .rg-btn--voll { width: 100%; justify-content: center; padding: 15px 20px; font-size: 1rem; background: var(--sa-purple); }
.rg-page .rg-btn--voll:hover { background: var(--sa-purple-deep); }
.rg-btn[disabled] { opacity: .6; cursor: wait; }

/* ── FAQ ── */
.rg-faq { margin-top: 56px; }
.rg-faq__item { border-bottom: 1px solid var(--sa-hair); }
.rg-faq__item:first-of-type { border-top: 1px solid var(--sa-hair); }
.rg-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--sa-ink);
}
.rg-faq__q::-webkit-details-marker { display: none; }
.rg-faq__q::after { content: "+"; flex: 0 0 auto; font-weight: 400; font-size: 1.25rem; line-height: 1.1; color: var(--sa-ink-mute); }
.rg-faq__item[open] > .rg-faq__q::after { content: "–"; }
.rg-artikel .rg-faq__a { margin: 0; padding: 0 0 18px; }

/* ── Autor ── */
.rg-autor {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--sa-hair);
}
.rg-autor__foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.rg-artikel .rg-autor p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.rg-artikel .rg-autor__name { color: var(--sa-ink); font-weight: 700; }
.rg-artikel .rg-autor__rolle { color: var(--sa-ink-mute); font-size: 0.875rem; margin-bottom: 6px; }

/* ── Daten hinterlassen ── */
.rg-lead { margin: 72px 0 0; }
.rg-lead__inner {
  background: var(--sa-paper);
  border: 1px solid var(--sa-hair);
  border-radius: var(--sa-radius-md);
  padding: 32px;
}
.rg-lead h2 {
  font-family: var(--sa-font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.rg-lead__sub { margin: 0 0 24px; color: var(--sa-ink-soft); font-size: 1rem; }
.rg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rg-field { display: block; margin: 0 0 14px; }
.rg-field span { display: block; margin: 0 0 5px; font-size: 0.875rem; font-weight: 600; color: var(--sa-ink); }
.rg-field input, .rg-field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d5cfc3;
  border-radius: 10px;
  background: #fff;
  color: var(--sa-ink);
  font: 16px/1.2 var(--sa-font-body);
}
.rg-field input:focus, .rg-field select:focus { outline: none; border-color: var(--sa-purple); box-shadow: 0 0 0 3px var(--sa-purple-soft); }
.rg-field input[aria-invalid="true"] { border-color: #b3261e; }
.rg-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--sa-ink-soft); cursor: pointer; }
.rg-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; accent-color: var(--sa-purple); }
.rg-page .rg-check a { color: var(--sa-ink); }
.rg-check em { font-style: normal; color: var(--sa-ink-mute); }
.rg-form__fehler { margin: 4px 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #8a1c14; font-size: 0.875rem; }
.rg-form .rg-btn--voll { margin-top: 8px; }
@media (max-width: 560px) {
  .rg-lead__inner { padding: 22px 18px; }
  .rg-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Weitere Videos ── */
.rg-mehr { margin: 64px 0 0; padding: 0 0 80px; }
.rg-mehr h2 {
  font-family: var(--sa-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 16px;
}
.rg-mehr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rg-page .rg-mehr__karte { display: block; text-decoration: none; color: var(--sa-ink); }
.rg-mehr__bild {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  max-height: 460px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sa-cream-warm);
}
.rg-mehr__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.rg-mehr__bild::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(21, 18, 28, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 18px no-repeat;
}
.rg-mehr__karte:hover .rg-mehr__bild img { transform: scale(1.03); }
.rg-mehr__titel { display: block; margin: 10px 0 0; font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.rg-mehr__karte:hover .rg-mehr__titel { text-decoration: underline; text-underline-offset: 2px; }
.rg-page .rg-mehr__alle { display: inline-block; margin-top: 20px; font-weight: 600; font-size: 0.9375rem; color: var(--sa-ink); }
@media (prefers-reduced-motion: reduce) { .rg-mehr__bild img { transition: none; } }

/* ── Footer (vorher inline im Template) ── */
.rg-page footer#site-footer.footer { background: #2a2a2a !important; color: #fff; padding: 3rem 0 1rem; }
.rg-page .footer .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--rg-gutter); }
.rg-page .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.rg-page .footer-section h4 { margin: 0 0 1rem; color: #fff; font-size: 1rem; font-weight: 600; }
.rg-page .footer-brand { display: inline-block; margin-bottom: .75rem; }
.rg-page .footer-logo { display: block; width: 56px; height: auto; }
.rg-page .footer-section p { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.5; }
.rg-page .footer-section ul { list-style: none; padding: 0; margin: 0; }
.rg-page .footer-section ul li { margin-bottom: .5rem; }
.rg-page .footer-section a { color: rgba(255,255,255,.8); text-decoration: none; }
.rg-page .footer-section a:hover { color: #fff; }
.rg-page .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-size: .9rem; }