/* Ratgeber-Website: ergänzt ehbs-web.css, nur Tokens der Marke */

body { font-family: var(--ehbs-font); color: var(--ehbs-text); background: var(--ehbs-white); }
img { max-width: 100%; height: auto; }

/* Vorschau-Hinweis */
.vorschau-band { background: var(--ehbs-yellow); color: var(--ehbs-text); text-align: center; font-size: var(--fs-small); font-weight: 700; padding: 6px var(--space-4); }

/* Kopf mit Wortmarke */
.rg-kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.rg-marke { display: flex; flex-direction: column; text-decoration: none; color: var(--ehbs-primary); padding: var(--space-2) 0; }
.rg-marke__name { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.rg-marke__unter { font-size: var(--fs-small); color: var(--ehbs-text-sek); }

/* Notruf: das eine rote Element je Ansicht */
.notruf-leiste { display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--ehbs-red); color: var(--ehbs-text-on-dark); font-weight: 700; text-decoration: none; min-height: 44px; padding: 0 var(--space-4); --ehbs-focus: var(--ehbs-yellow); }
.notruf-leiste:hover { background: var(--ehbs-red-dark); }
.notruf-leiste__zahl { font-size: 1.25rem; }
@media (max-width: 859px) {
  .notruf-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; min-height: 52px; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 8px rgb(0 0 0 / 0.15); }
  body { padding-bottom: 60px; }
}

.rg-kopf .ehbs-nav ul { gap: var(--space-4); }
.rg-kopf .ehbs-nav a { white-space: nowrap; }

/* Brotkrumen */
.krumen ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; padding: var(--space-4) 0 0; margin: 0; font-size: var(--fs-small); }
.krumen li + li::before { content: "›"; margin-right: var(--space-2); color: var(--ehbs-text-sek); }
.krumen a { color: var(--ehbs-primary); }
.krumen [aria-current] { color: var(--ehbs-text-sek); }

/* Seite */
.rg-seite { max-width: 52rem; padding-top: var(--space-6); padding-bottom: var(--space-16); }
.rg-seite__kopf { margin-bottom: var(--space-6); }
.rg-seite h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.15; margin: 0 0 var(--space-6); text-wrap: balance; }
.rg-seite h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.2; margin-top: 0; text-wrap: balance; }
.rg-seite p, .rg-seite li { line-height: 1.6; max-width: 68ch; }
.rg-einleitung { font-size: 1.0625rem; }
.rg-einleitung--gross { font-size: 1.1875rem; }
.rg-abschnitt { margin-top: var(--space-12); }
.rg-seite--breit { max-width: 68rem; }

/* Antwort zuerst */
.rg-kurz { border: 2px solid var(--ehbs-primary); background: var(--ehbs-primary-tint); padding: var(--space-4) var(--space-6); border-radius: var(--radius); }
.rg-kurz p { margin: 0 0 var(--space-2); font-size: 1.125rem; }
.rg-kurz p:last-child { margin-bottom: 0; }
.rg-kurz__titel { font-weight: 700; font-size: var(--fs-small) !important; text-transform: uppercase; letter-spacing: 0.06em; }
.rg-kurz__notruf { font-weight: 700; }
.rg-kurz__notruf a { color: var(--ehbs-red-dark); }
.rg-entwurf { display: inline-block; background: var(--ehbs-tint-hinweis); border: 1px solid var(--ehbs-yellow); padding: var(--space-1) var(--space-3); border-radius: var(--radius); font-size: var(--fs-small); font-weight: 700; margin: 0 0 var(--space-4); }

/* Schritte */
.rg-schritte { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-4); counter-reset: none; }
.rg-schritt { display: grid; grid-template-columns: auto 128px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4); border: 1px solid var(--ehbs-line); border-radius: var(--radius); background: var(--ehbs-white); scroll-margin-top: 90px; }
.rg-schritt__nr { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.rg-schritt__medien { position: relative; width: 128px; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--ehbs-bg-light); }
.rg-schritt__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg-schritt__medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rg-schritt__haupt { font-weight: 700; font-size: 1.0625rem; margin: 0 0 var(--space-2); }
.rg-schritt__mehr { margin: 0; }
@media (min-width: 700px) {
  .rg-schritt { grid-template-columns: auto 180px 1fr; }
  .rg-schritt__medien { width: 180px; }
}
@media (max-width: 479px) {
  .rg-schritt { grid-template-columns: 96px 1fr; padding: var(--space-3); gap: var(--space-3); }
  .rg-schritt__nr { position: absolute; margin: 4px; width: 28px; height: 28px; font-size: var(--fs-small); z-index: 1; }
  .rg-schritt { position: relative; }
  .rg-schritt__medien { width: 96px; }
}

/* Drücktakt */
.rg-takt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.rg-takt p { margin: 0; }
.rg-takt__knopf { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 52px; font-size: 1.0625rem; }
.rg-takt__punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--ehbs-white); opacity: 0.5; }
.rg-takt__punkt.an { animation: rg-puls var(--takt, 545ms) cubic-bezier(0.2, 0, 0, 1) infinite; opacity: 1; }
@keyframes rg-puls { 0% { transform: scale(1.5); } 40%, 100% { transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .rg-takt__punkt.an { animation: none; } .rg-karte, .rg-auswahl a, .ehbs-btn { transition: none; } .rg-karte:active, .rg-auswahl a:active, .rg-wer a:active, .ehbs-btn:active { transform: none; } }

/* Kästen */
.rg-box__titel { font-weight: 700; margin: 0 0 var(--space-2); }
.rg-achtung ul, .rg-tipps ul { margin: 0; padding-left: 1.2em; }

/* Auswahl */
.rg-auswahl { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.rg-auswahl a { display: flex; align-items: center; min-height: 56px; padding: var(--space-3) var(--space-4); border: 2px solid var(--ehbs-primary); border-radius: var(--radius); color: var(--ehbs-primary); font-weight: 700; text-decoration: none; }
.rg-auswahl a::after { content: "→"; margin-left: auto; padding-left: var(--space-3); }
@media (hover: hover) and (pointer: fine) { .rg-auswahl a:hover { background: var(--ehbs-primary-tint); } }
.rg-auswahl a { transition: background-color 160ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.rg-auswahl a:active, .rg-wer a:active { transform: scale(0.98); }
.ehbs-btn { transition-property: background-color, border-color, color, transform; transition-duration: 160ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.ehbs-btn:active { transform: scale(0.97); }

/* Fehler, Listen */
.rg-fehler { padding-left: 1.2em; }
.rg-fehler li { margin-bottom: var(--space-2); }
.rg-liste li { margin-bottom: var(--space-2); }

/* Fragen */
.rg-faq details { border-bottom: 1px solid var(--ehbs-line); }
.rg-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 52px; padding: var(--space-2) 0; }
.rg-faq summary::-webkit-details-marker { display: none; }
.rg-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--ehbs-primary); transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.rg-faq details[open] summary::after { transform: rotate(45deg); }
.rg-faq h3 { font-size: 1.0625rem; margin: 0; }
.rg-faq p { margin: 0 0 var(--space-4); }

/* App-Hinweis */
.rg-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-top: var(--space-12); padding: var(--space-6); background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); border-radius: var(--radius); --ehbs-focus: var(--ehbs-yellow); }
.rg-app h2 { color: var(--ehbs-text-on-dark); font-size: 1.25rem; margin: 0 0 var(--space-2); }
.rg-app p { margin: 0; max-width: 52ch; }
.rg-app > div { flex: 1 1 22rem; }

/* Verwandt */
.rg-verwandt { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rg-verwandt a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--ehbs-line); border-radius: 999px; color: var(--ehbs-primary); text-decoration: none; font-weight: 700; }
.rg-verwandt a:hover { border-color: var(--ehbs-primary); }

/* Autor und Quellen */
.rg-autor { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--ehbs-line); }
.rg-autor p { margin: 0 0 var(--space-2); }
.rg-autor__wer a { color: var(--ehbs-primary); font-weight: 700; }
.rg-quellen { margin: var(--space-2) 0 var(--space-4); }
.rg-quellen summary { cursor: pointer; color: var(--ehbs-primary); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.rg-quellen ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-small); }
.rg-person { margin-bottom: var(--space-8); scroll-margin-top: 90px; }
.rg-person h3 { margin: 0; }
.rg-person .ehbs-meta { margin: 0 0 var(--space-2); }

/* Karten der Themenseiten */
.rg-karten { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.rg-karte { display: flex; gap: var(--space-4); align-items: flex-start; height: 100%; padding: var(--space-4); border: 1px solid var(--ehbs-line); border-top: 4px solid var(--ehbs-primary); border-radius: var(--radius); color: var(--ehbs-text); text-decoration: none; background: var(--ehbs-white); transition: border-color 160ms ease-out, transform 160ms cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) and (pointer: fine) { .rg-karte:hover { border-color: var(--ehbs-primary); } }
.rg-karte:active { transform: scale(0.99); }
.rg-karte img { flex: none; }
.rg-karte__titel { display: block; font-weight: 700; color: var(--ehbs-primary); font-size: 1.0625rem; margin-bottom: var(--space-1); }
.rg-karte__kurz { display: block; font-size: var(--fs-small); line-height: 1.5; }
.rg-seite > .rg-abschnitt .rg-karten { margin-top: 0; }

/* Startseite */
.rg-held { padding: var(--space-12) 0; }
.rg-held h1 { color: var(--ehbs-text-on-dark); font-size: clamp(2rem, 1.4rem + 3vw, 3rem); margin: 0 0 var(--space-4); }
.rg-held__text { font-size: 1.1875rem; max-width: 46ch; line-height: 1.5; }
.rg-held__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.rg-held__knoepfe .ehbs-btn { min-height: 52px; font-size: 1.0625rem; }
.rg-wer { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rg-wer a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); border: 2px solid var(--ehbs-line); border-radius: var(--radius); text-decoration: none; color: var(--ehbs-primary); font-weight: 700; text-align: center; transition: border-color 160ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.rg-wer img { background: var(--ehbs-primary); border-radius: 50%; padding: 12px; }
@media (hover: hover) and (pointer: fine) { .rg-wer a:hover { border-color: var(--ehbs-primary); } }
.rg-vertrauen { background: var(--ehbs-bg-soft); padding: var(--space-6); border-radius: var(--radius); }
.rg-vertrauen a { color: var(--ehbs-primary); font-weight: 700; }

/* Checklisten */
.rg-check { list-style: none; padding: 0; }
.rg-check li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; border-bottom: 1px solid var(--ehbs-line); }
.rg-check__kasten { flex: none; width: 22px; height: 22px; border: 2px solid var(--ehbs-anthracite); border-radius: 3px; margin-top: 2px; }
.rg-eintragen div { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--ehbs-line); }
.rg-eintragen dt { font-weight: 700; }
.rg-eintragen dd { margin: 0; display: flex; gap: var(--space-3); align-items: baseline; }
.rg-linie { flex: 1; border-bottom: 1px dotted var(--ehbs-anthracite); min-height: 1.4em; }
.rg-drucken { min-height: 44px; }

/* Fuß */
.rg-fuss { display: grid; gap: var(--space-8); grid-template-columns: 2fr 1fr 1fr; }
.rg-fuss a { color: var(--ehbs-text-on-dark); }
.rg-fuss__marke { font-weight: 700; font-size: 1.125rem; }
.rg-fuss__liste { list-style: none; padding: 0; margin: 0; }
.rg-fuss__liste li { margin-bottom: 0; }
.rg-fuss__liste a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 859px) { .rg-fuss { grid-template-columns: 1fr; } }

/* Druck */
@media print {
  .ehbs-header, .notruf-leiste, .vorschau-band, .krumen, .rg-app, .rg-takt, .rg-drucken, .ehbs-footer, .rg-verwandt, .ehbs-skip { display: none !important; }
  body { padding: 0; font-size: 11pt; }
  .rg-seite { max-width: none; padding: 0; }
  .rg-schritt { break-inside: avoid; grid-template-columns: auto 90px 1fr; }
  .rg-schritt__medien { width: 90px; }
  .rg-schritt__medien video { display: none; }
  .rg-faq details { display: block; }
  .rg-faq details > p { display: block; }
  .rg-abschnitt { margin-top: 16pt; }
  a { color: inherit; text-decoration: none; }
}