/* ── 00-grundlagen.css ── */
/* Rechtsanwalt Fabian Conrad · Grundlagen: Schriften, Farben, Texte, Knöpfe */

@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/CormorantGaramond-Regular.woff2?v=8c86ad257b) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/CormorantGaramond-Bold.woff2?v=c6ae8cbba0) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter-Regular.woff2?v=1e6103971e) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter-Bold.woff2?v=f09ece56b9) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --rot: #5c0001;
  --schwarz: #000;
  --grau: #eee;
  --grau-mittel: #666;
  --weiss: #fff;
  --ecke: 6px;
  --schatten: 3px 3px 3px 3px rgba(0, 0, 0, .2);
  --titel: "Cormorant Garamond", Georgia, serif;
  --text: "Inter", Verdana, sans-serif;
  --rand: 5%;
  --breite: 80rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--text); font-size: 1rem; line-height: 1.5; color: var(--schwarz); background: var(--weiss);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 40px; }
figure { margin: 0; }
strong, b { font-weight: 700; }
[id] { scroll-margin-top: 110px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--titel); font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: 3.4rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; line-height: 1.3; }
.wie-h3 { font-family: var(--titel); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.springen { position: absolute; left: -999px; top: 0; background: var(--weiss); padding: .5rem 1rem; z-index: 1000; }
.springen:focus { left: 1rem; }
.symbole { display: none; }

/* Knöpfe */
.button { display: inline-block; border: 2px solid var(--rot); border-radius: var(--ecke); background: var(--rot); color: var(--weiss);
  text-align: center; padding: .75rem 1.5rem; font-family: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.5;
  text-decoration: none; cursor: pointer; }
.button--hell { border-color: var(--weiss); }
.button--voll { width: 100%; }
.button--link { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .25rem 0;
  color: var(--schwarz); font-weight: 400; line-height: 1; }
.button--link svg { width: 1rem; height: 1rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.knoepfe.mittig { justify-content: center; }

/* Abschnitte: Innenabstand und Breite wie bisher (Client-First: padding-global + container-large) */
main > section, main > header, main > div, main > article {
  padding: 5rem max(var(--rand), calc((100% - var(--breite)) / 2));
}
.grau { background: var(--grau); }
.mittig { text-align: center; }

@media (max-width: 991px) {
  h1 { font-size: 2.8rem; }
  h2 { font-size: 1.9rem; }
  main > section, main > header, main > div, main > article { padding-top: 4rem; padding-bottom: 4rem; }
}
@media (max-width: 767px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.8rem; }
  main > section, main > header, main > div, main > article { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (max-width: 479px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }
  h3, .wie-h3 { font-size: 1.4rem; }
}

/* ── 10-rahmen.css ── */
/* Navigation und Footer (bausteine/kopf.html, bausteine/fuss.html) */

.nav { position: sticky; top: 0; z-index: 100; background: var(--weiss); box-shadow: var(--schatten);
  min-height: 4.5rem; display: flex; align-items: center; padding: 0 var(--rand); }
.nav__innen { width: 100%; max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: .375fr 1fr .375fr;
  align-items: center; gap: 1rem; }
.nav__logo img { width: 10rem; height: auto; display: block; }
.nav__haupt { justify-self: center; }
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav__links a, .nav__aufklapp-knopf { display: block; padding: .5rem 1rem; font-family: var(--titel); font-size: 1.1rem;
  text-decoration: none; color: var(--schwarz); background: none; border: 0; cursor: pointer; line-height: 1.5; }
.nav__links a.active { color: var(--rot); font-weight: 700; }
.nav__aufklapp { position: relative; }
.nav__aufklapp-knopf { display: flex; align-items: center; gap: .5rem; }
.nav__aufklapp-knopf svg { width: 1rem; height: 1rem; }
.nav__unter { list-style: none; margin: 0; padding: .5rem; display: none; position: absolute; left: 0; top: 100%;
  background: var(--weiss); border-radius: var(--ecke); min-width: 12rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.nav__aufklapp.offen .nav__unter { display: block; }
@media (hover: hover) and (min-width: 992px) {
  .nav__aufklapp:hover .nav__unter { display: block; }
}
.nav__button { justify-self: end; margin-left: 1rem; white-space: nowrap; }
.nav__menue { display: none; width: 48px; height: 48px; background: none; border: 0; cursor: pointer; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: var(--ecke); }
.nav__menue span { display: block; width: 24px; height: 2px; background: var(--schwarz); transition: transform .3s, opacity .3s; }
.nav.offen .nav__menue { background: #f8f8f8; }
.nav.offen .nav__menue span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.offen .nav__menue span:nth-child(2) { opacity: 0; }
.nav.offen .nav__menue span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 991px) {
  .nav__innen { display: flex; justify-content: space-between; }
  .nav__button { margin-left: auto; }
  .nav__menue { display: flex; }
  .nav__haupt { display: none; position: absolute; left: 0; right: 0; top: 100%; justify-self: stretch; height: calc(100dvh - 4.5rem); overflow: auto;
    background: var(--weiss); padding: 1rem 5% 6.5rem; border-bottom: 1px solid #000; }
  .nav.offen .nav__haupt { display: block; }
  .nav__links { flex-direction: column; align-items: stretch; }
  .nav__links a, .nav__aufklapp-knopf { padding: .75rem 0; font-size: 1.21rem; text-align: left; width: 100%; }
  .nav__aufklapp-knopf { justify-content: space-between; font-size: 1.2rem; }
  .nav__unter { position: static; box-shadow: none; padding: 0; }
  .nav__unter a { padding: .75rem 0 .75rem .75rem; font-size: 1.2rem; }
}
@media (max-width: 767px) {
  .nav { min-height: 4rem; }
  .nav__haupt { height: calc(100dvh - 4rem); }
}
@media (max-width: 479px) {
  .nav__button { display: none; }
}

/* Footer */
.fuss { border-top: 1px solid rgba(68, 68, 68, .5); padding: 5rem max(var(--rand), calc((100% - var(--breite)) / 2)); }
.fuss__innen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; align-items: start; padding: 3rem;
  border-bottom: 1px solid rgba(68, 68, 68, .5); }
.fuss__logo img { width: 300px; max-width: 100%; height: auto; margin-bottom: 1.5rem; }
.fuss__siegel { width: 367px; max-width: 100%; height: auto; margin-top: 1rem; }
.fuss__titel { font-weight: 700; margin: 0; }
.fuss__kontakt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.fuss__kontakt li { display: flex; align-items: center; }
.fuss__kontakt li img { width: 1.5rem; height: 1.5rem; margin-right: 1rem; }
.fuss__kontakt a, .fuss__menue a { text-decoration: none; }
.fuss__menue { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.fuss__menue > div { display: flex; flex-direction: column; align-items: flex-start; }
.fuss__menue a { margin: .7em 0 .875rem; line-height: 20px; }

@media (max-width: 991px) {
  .fuss__innen { grid-template-columns: 1fr; row-gap: 4rem; }
}
@media (max-width: 767px) {
  .fuss { padding-top: 3rem; padding-bottom: 3rem; }
  .fuss__innen { padding: 2rem; row-gap: 3rem; }
  .fuss__menue { column-gap: 1.5rem; }
}
@media (max-width: 479px) {
  .fuss__menue { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .fuss__menue a { margin-bottom: 5px; }
}

/* ── 20-sektionen.css ── */
/* Sektionen der Seiten (Startseite, Rechtsgebiete, Kanzlei, Kontakt, Rechtstexte) */

/* Text mit Bild daneben (seite__component), auf vielen Seiten */
.seite__component { display: flex; gap: 3rem; }
.seite__image-wrapper, .seite__content-wrapper { width: 50%; }
.seite__content-wrapper > h2, .seite__content-wrapper > h3 { margin-bottom: 2rem; }
.seite__content-wrapper > p, .seite__content-wrapper > ul { margin-bottom: 1.5rem; }
.seite__content-wrapper > :last-child { margin-bottom: 0; }
.bild__image { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; border-radius: var(--ecke); }
.knoepfe:first-child { margin-top: 0; }

/* Startseite: Hero mit Justitia */
.s-hero { position: relative; color: var(--weiss); padding: 0 !important; }
.hero__content { position: relative; z-index: 1; max-width: var(--breite); margin: 0 auto; padding: 7rem var(--rand) 15rem;
  box-sizing: content-box; }
@media (min-width: 1490px) { .hero__content { padding-left: 0; padding-right: 0; } }
.hero__content > * { max-width: 45rem; }
.hero__content h1 { margin-bottom: 1.5rem; }
.hero__content p { font-size: 1.125rem; }
.hero__background-image-wrapper { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__background-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__background-image-wrapper::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.markenlinie { position: relative; z-index: 1; height: 2rem; background: var(--rot); }
.hero__services-items { position: absolute; z-index: 2; left: 0; right: 0; bottom: -10%; padding: 0 var(--rand); }
.hero__services-items-component { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.hero__services-item-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 2rem; border-radius: var(--ecke); background: var(--weiss); color: var(--schwarz); text-align: center;
  text-decoration: none; box-shadow: var(--schatten); }
.hero__services-item-wrapper .wie-h3 { font-family: var(--text); }
.hero__services-item-wrapper > div:last-child { max-width: 25rem; }
.hero__services-item-icon { width: 3rem; height: 3rem; color: var(--rot); }
.hero__services-item-icon svg { width: 100%; height: 100%; }
.s-about { margin-top: 8%; }

/* Startseite: Rechtsgebiete (Strafrecht/Verkehrsrecht) */
.s-home-strafrecht > .block__strafrecht > h2 { margin-bottom: 2rem; }
.s-home-strafrecht .seite__content-wrapper > p, .s-home-verkehrsrecht p { margin-bottom: 1.5rem; }
.bild__verkehrsrecht { display: flex; gap: 3rem; }

/* Startseite: Bewertungen */
.s-stimmen { background: var(--grau); }
.stimmen__component { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 5rem; align-items: start; }
.stimmen__content-left { position: sticky; top: 15%; }
.stimmen__content-left h2 { margin-bottom: 1.5rem; }
.stimmen__content-left p { font-size: 1.125rem; }
.stimmen__content-item { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 19rem;
  margin-bottom: 2rem; padding: 2rem; background: var(--weiss); border-radius: var(--ecke); box-shadow: var(--schatten);
  position: sticky; top: 15%; font-size: 1.125rem; }
.sterne { display: flex; gap: .25rem; margin-bottom: 1.5rem; color: var(--rot); }
.sterne svg { width: 1.2rem; height: 1.15rem; }
.s-background-image { height: 20rem; padding: 0 !important; background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),
  url(/bilder/19608.avif?v=25019c8928) center / cover no-repeat; }

/* Startseite: Vorteile */
.vorteile__content { display: grid; grid-template-columns: 1fr .75fr; gap: 2rem; align-items: center; }
.vorteile__content-left > h2 { margin-bottom: 1.5rem; }
.vorteile__content-left > p { margin-bottom: 2rem; }
.vorteile__item-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding: .5rem 0; }
.vorteile__item { background: var(--weiss); border-radius: var(--ecke); padding: 1.5rem; }
.vorteile__item-icon-wrapper { margin-bottom: 1rem; }
.vorteile__item h3 { margin-bottom: 1rem; }
.vorteile__item p { margin: 0; }
.vorteile__image { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 70% 50%; border-radius: var(--ecke); }

/* Startseite: Aufruf mit Säulen-Hintergrund */
.s-aufruf { background: linear-gradient(rgba(214, 214, 214, .8), rgba(214, 214, 214, .8)), url(/bilder/886.avif?v=86ae8f8563) 0 0 / cover; }
.aufruf__component { border-radius: var(--ecke); background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); padding: 3rem 6rem; }
.aufruf__heading { font-size: 3.4rem; margin-bottom: 2rem; }

/* Unterseiten: Kopf mit Bild rechts */
.kopf__content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 5rem; align-items: center; }
.kopf__content-left > h1 { margin-bottom: 1.5rem; }
.kopf__content-left > p { font-size: 1.125rem; }
.kopf__content-left ul { margin-bottom: 1.5rem; }
.kopf__image-wrapper { border-radius: var(--ecke); overflow: hidden; }
.kopf__image { width: 100%; height: 100%; aspect-ratio: 1 / 1.2; object-fit: cover; object-position: 50% 0; }
.kopf__image.flach { aspect-ratio: 3 / 2; }

/* Rechtsgebiete: Sektionsfarben wie bisher */
.s-verkehrsrecht, .s-schmerzensgeld { background: var(--grau); }

/* Strafrecht: weitere Teilgebiete */
.kacheln__heading { text-align: center; margin-bottom: 3rem; }
.kacheln__item-wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.kacheln__item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem;
  background: var(--weiss); border-radius: var(--ecke); box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, .2); }
.kacheln__item-heading { font-size: 1.2rem; margin-bottom: .5rem; text-align: center; }
.kacheln__item-text { text-align: center; margin: 0; }
.kacheln__component > .knoepfe { margin-top: 3rem; }

/* Unsere Kanzlei: Team und Partner */
.s-team { background: var(--grau); }
.team__kopf { text-align: center; max-width: 48rem; margin: 0 auto 5rem; }
.team__kopf h2 { margin-bottom: 1.5rem; }
.team__kopf p { font-size: 1.125rem; }
.team__list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4rem 3rem; }
.team__item { display: flex; flex-direction: column; text-align: center; }
.team__image-wrapper { border-radius: var(--ecke); overflow: hidden; margin-bottom: 1.5rem; }
.team__image { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; }
.team__image.conrad { object-position: 50% 20%; }
.team__title-wrapper { margin-bottom: 1rem; }
.team__title-wrapper > div:first-child { font-size: 1.25rem; font-weight: 700; }
.team__title-wrapper > div:last-child { font-size: 1.125rem; }
.partner__component h2 { margin-bottom: 2rem; }
.partner__component p { margin-bottom: 2rem; max-width: 48rem; }
.partner__image { width: 15rem; height: auto; margin-right: 2rem; margin-bottom: 1rem; }

/* Kontakt */
.s-kontakt { background: var(--grau-mittel); padding-top: 7rem !important; padding-bottom: 7rem !important; }
.kontakt__component { display: flex; flex-direction: column; align-items: center; }
.kontakt__component > h1, .kontakt__component > h2, .kontakt__component > p { text-align: center; color: var(--weiss); }
.marke { display: inline-block; background: var(--rot); color: var(--weiss); border-radius: var(--ecke); padding: .25rem .5rem;
  font-family: var(--text); font-size: .875rem; margin-bottom: 1rem; }
.kontakt__heading { font-size: 1.8rem; margin-bottom: 1.5rem; }
.kontakt__component > p { font-size: 1.125rem; max-width: 48rem; margin-bottom: 5rem; }
.kontakt__options-wrapper { display: flex; gap: 1.5rem; width: 100%; }
.kontakt__form { width: 50%; background: var(--weiss); border-radius: var(--ecke); padding: 2rem; }
.kontakt__option-wrapper { width: 50%; background: var(--weiss); border-radius: 10px; }
.kontakt__option-image { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--ecke) var(--ecke) 0 0; }
.kontakt__option-text-wrapper { padding: 2rem; }
.kontakt__option-heading { font-weight: 700; margin-bottom: 1.5rem; }
.kontakt__option-list { display: grid; gap: 1rem; }
.footer_contact-wrapper { display: flex; align-items: center; }
.kontakt__option-icon { width: 1.5rem; height: 1.5rem; margin-right: 1rem; }
.kontakt__option-link { text-decoration: none; }

.formular label { display: block; margin-bottom: .25rem; }
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular textarea {
  display: block; width: 100%; height: 3rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #ccc; border-radius: 4px;
  font: inherit; font-size: .875rem; color: var(--schwarz); background: var(--weiss); }
.formular textarea { height: auto; min-height: 9rem; border-radius: 10px; margin-bottom: 1rem; resize: vertical; }
.formular .feld-fehler { border-color: #b42318 !important; }
.formular__haken { display: flex !important; align-items: flex-start; gap: .5rem; margin: 1rem 0 1.5rem !important; font-size: .875rem; }
.formular__haken input { margin-top: .2rem; }
.formular__haken.feld-fehler, .formular__haken:has(.feld-fehler) { color: #b42318; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.meldung { display: none; padding: 1rem; margin: 0 0 1rem; border-radius: 4px; }
.meldung.zeigen { display: block; }
.meldung--fehler { background: #fef3f2; color: #b42318; }
.meldung--erfolg { background: #ecfdf3; color: #027a48; padding: 2.5rem; text-align: center; margin: 0; }

/* Impressum, Datenschutz, 404 */
.s-header { padding-bottom: 0 !important; }
.s-header h1 { margin-bottom: 4rem; }
.impressum_wrapper h2 { font-size: 1.9rem; margin: 2rem 0 1.25rem; }
.impressum_wrapper h3 { margin: 1.5rem 0 1rem; }
.impressum_wrapper p, .impressum_wrapper ul { margin-bottom: 1rem; }
.impressum_wrapper a { word-break: break-word; }
.textseite { max-width: 45rem; }
.textseite h1 { margin-bottom: 1.5rem; }

@media (max-width: 991px) {
  .seite__component, .bild__verkehrsrecht { flex-direction: column; }
  .seite__image-wrapper, .seite__content-wrapper { width: 100%; }
  .seite__image-wrapper { order: 1; }
  .hero__content { padding-top: 6rem; padding-bottom: 6rem; }
  .hero__services-items { position: relative; bottom: 0; padding-bottom: 2rem; }
  .hero__services-items-component { grid-template-columns: 1fr; }
  .s-about { margin-top: 0; }
  .stimmen__component { grid-template-columns: 1fr; row-gap: 3rem; }
  .vorteile__content { grid-template-columns: 1fr; column-gap: 3rem; }
  .vorteile__item-list { grid-template-columns: 1fr; }
  .aufruf__component { padding: 2rem; }
  .aufruf__heading { font-size: 1.8rem; }
  .kopf__content { grid-template-columns: 1fr; gap: 4rem; }
  .kacheln__item-wrapper { grid-template-columns: 1fr; }
  .team__list { grid-template-columns: 1fr; column-gap: 2rem; }
  .kontakt__options-wrapper { flex-direction: column; }
  .kontakt__form, .kontakt__option-wrapper { width: 100%; }
}
@media (max-width: 767px) {
  .hero__content { padding-top: 4rem; padding-bottom: 4rem; }
  .hero__content p, .stimmen__content-left p, .kopf__content-left > p, .stimmen__content-item, .kontakt__component > p { font-size: 1rem; }
  .stimmen__content-left { position: static; }
  .vorteile__content { row-gap: 3rem; }
  .kopf__content { gap: 3rem; }
  .team__list { row-gap: 3rem; }
  .kontakt__component > p { margin-bottom: 3rem; }
  .s-kontakt { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .team__kopf { margin-bottom: 3rem; }
}
@media (max-width: 479px) {
  .seite__component { gap: 1rem; }
  .stimmen__content-item { height: auto; position: static; }
  .s-background-image { display: none; }
  .aufruf__heading { font-size: 1.7rem; }
  .kacheln__item { padding: 1.5rem; }
  .kontakt__heading { font-size: 1.3rem; }
  .kontakt__form, .kontakt__option-text-wrapper { padding: 1.5rem; }
}

/* ── 30-ratgeber.css ── */
/* Ratgeber: Übersicht und Artikel */

.ratgeber__kopf { max-width: 45rem; margin-bottom: 5rem; }
.ratgeber__kopf h1 { margin-bottom: 1.5rem; }
.ratgeber__kopf p { font-size: 1.125rem; }
.ratgeber__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ratgeber__karte { display: flex; flex-direction: column; padding: 2rem; border: 1px solid #c5c5c5; border-radius: var(--ecke);
  box-shadow: 4px 5px 5px rgba(0, 0, 0, .2); text-decoration: none; color: var(--schwarz); }
.ratgeber__bild { width: 100%; aspect-ratio: 2.39; object-fit: cover; border-radius: var(--ecke); margin-bottom: 1.5rem; }
.ratgeber__karte h2 { margin-bottom: .5rem; }
.ratgeber__karte p { margin-bottom: 1.5rem; }
.ratgeber__karte .button { display: block; margin-top: auto; margin-bottom: 1.5rem; }
.ratgeber__autor { display: flex; align-items: center; gap: 1rem; font-size: .875rem; }
.ratgeber__autor img { width: 3rem; height: 3rem; border-radius: 100%; object-fit: cover; }
.ratgeber__autor > span { display: flex; flex-direction: column; }

.artikel__zurueck { margin-bottom: 1.5rem; }
.artikel h1 { font-size: 2.5rem; margin-bottom: 3rem; }
.artikel__bild { width: 100%; aspect-ratio: 2.39; object-fit: cover; border-radius: var(--ecke); margin-bottom: 3rem; }
.artikel__meta { display: grid; grid-template-columns: max-content max-content; gap: 0 3rem; margin-bottom: 3rem; }
.artikel__meta p { display: contents; }
.artikel__meta span:nth-child(odd) { grid-column: 1; }
.artikel__meta span:nth-child(even) { grid-column: 2; font-weight: 700; }
.inhalt-vz { background: var(--grau); padding: 1rem; margin-bottom: 3rem; }
.inhalt-vz ol { list-style: none; margin: 0; padding: 0; }
.inhalt-vz li { padding: .5rem 1rem; }
.inhalt-vz a { text-decoration: none; }
.inhalt-vz__h2 a { font-weight: 700; }
.inhalt-vz__h3 { padding-left: 2.5rem !important; font-size: .875rem; color: #444; }
.artikel__einleitung, .fliess { margin-bottom: 1rem; }
.artikel__einleitung h2, .fliess h2 { margin: 1.5rem 0 1rem; }
.artikel__einleitung h3, .fliess h3 { margin: 1.5rem 0 1rem; }
.artikel__einleitung p, .fliess p { margin-bottom: 1rem; }
.artikel__einleitung ul, .fliess ul, .fliess ol { margin-bottom: 1rem; }
.artikel__hinweis { font-size: .875rem; color: #444; margin-top: 3rem; }

/* Tabelle im Ratgeber „Schmerzensgeld nach Verkehrsunfall“ (bisher als Einbettung im Artikel) */
.sw-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 2rem 0; }
.sw-table { width: 100%; border-collapse: collapse; font-family: system-ui, -apple-system, sans-serif; font-size: .95rem;
  line-height: 1.5; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.sw-table thead { background: #1a1a2e; color: #fff; }
.sw-table th { padding: .875rem 1rem; text-align: left; font-weight: 600; white-space: nowrap; }
.sw-table td { padding: .75rem 1rem; border-bottom: 1px solid #e9ecef; vertical-align: top; }
.sw-table tbody tr { background: #fff; }
.sw-table tbody tr:nth-child(even) { background: #f8f9fa; }
.sw-table tbody tr:hover { background: #fce8ec; transition: background 200ms ease; }
.sw-table tbody td:first-child { font-weight: 600; color: #1a1a2e; }
.sw-table tbody td:last-child { font-weight: 600; color: #1a1a2e; white-space: nowrap; }

@media (max-width: 991px) {
  .ratgeber__liste { grid-template-columns: 1fr; }
  .artikel h1 { font-size: 1.9rem; }
}
@media (max-width: 767px) {
  .ratgeber__kopf { margin-bottom: 3rem; }
  .ratgeber__liste { row-gap: 3rem; }
  .ratgeber__karte { padding: 1.5rem; }
  .artikel h1 { font-size: 2.25rem; }
  .artikel__bild { margin-bottom: 2rem; }
  .artikel__meta { grid-template-columns: 1fr; }
  .artikel__meta span:nth-child(even) { grid-column: 1; margin-bottom: .5rem; }
  .sw-table { box-shadow: none; border-radius: 0; }
  .sw-table thead { display: none; }
  .sw-table, .sw-table tbody, .sw-table tr, .sw-table td { display: block; width: 100%; }
  .sw-table tr { margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); overflow: hidden; background: #fff; }
  .sw-table tbody tr:nth-child(even) { background: #fff; }
  .sw-table tr td:first-child { background: #1a1a2e; color: #fff; padding: .75rem 1rem; font-weight: 600; font-size: 1rem; text-align: left; }
  .sw-table tr td:first-child::before { display: none; }
  .sw-table td { padding: .625rem 1rem .625rem 45%; text-align: right; border-bottom: 1px solid #f0f0f0; position: relative; }
  .sw-table td::before { content: attr(data-label); position: absolute; left: 1rem; width: 40%; text-align: left; font-weight: 600; color: #1a1a2e; }
  .sw-table td:last-child { border-bottom: none; white-space: normal; }
}
@media (max-width: 479px) {
  .artikel h1 { font-size: 1.5rem; }
}