/* Versicherungsmakler Geisbauer – Bausteine der Unterseiten und der Startseite v5
   (ergänzt styles.css; Farben und Abstände kommen aus den Tokens dort) */

[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.schmal { max-width: 52rem; }
.klein-hinweis { font-size: .875rem; color: var(--grau); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; }
.hauptnav a[aria-current] { opacity: 1; color: #fff; font-weight: 600; background: rgba(255,255,255,.14); }

/* ---------- Brotkrumen ---------- */
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.5rem; padding: 0; font-size: .875rem; color: var(--grau); }
.brotkrumen li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .5rem 0 .25rem; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.brotkrumen a { color: var(--grau); }
.brotkrumen a:hover { color: var(--link); }
.brotkrumen [aria-current] { color: var(--text); }

/* ---------- Seitenkopf der Fach- und Themenseiten ---------- */
.seite-kopf { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); background: linear-gradient(180deg, var(--stein), var(--papier)); }
.seite-kopf-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: end; }
.eyebrow { margin: 0 0 .6rem; font-weight: 600; font-size: .95rem; }
.seite-kopf h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); letter-spacing: -0.035em; max-width: 18ch; }
.thema-kopf h1 { max-width: 22ch; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--grau); margin: 1.25rem 0 1.75rem; max-width: 42rem; letter-spacing: -0.012em; }
.seite-kopf .knopf-reihe { margin-top: .5rem; }
@media (max-width: 900px) { .seite-kopf-raster { grid-template-columns: 1fr; gap: 2rem; } }

/* „Auf einen Blick" */
.blick { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.5rem 1.6rem; box-shadow: 0 20px 50px -30px rgba(76, 18, 44, .35); }
.blick-titel { margin: 0 0 .9rem; font-size: .85rem; font-weight: 600; color: var(--link); }
.blick dl { margin: 0; display: grid; gap: .85rem; }
.blick dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; padding-top: .85rem; border-top: 1px solid var(--linie); }
.blick dl > div:first-child { border-top: 0; padding-top: 0; }
.blick dt { color: var(--grau); font-size: .9rem; }
.blick dd { margin: 0; font-weight: 600; font-size: .95rem; }
.blick, .wege a, .fakten > div, .szenarien li, .kontakt-karte {
  background-image: radial-gradient(420px circle at var(--mx, -600px) var(--my, -600px), color-mix(in srgb, var(--wein) 8%, transparent), transparent 70%);
}

/* ---------- Inhalt mit mitlaufender Angebotskarte ---------- */
.seite-raster { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 4rem; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); align-items: start; }
.seite-raster.einspaltig { grid-template-columns: minmax(0, 46rem); }
.seite-inhalt { min-width: 0; }
.block { margin-bottom: 3rem; }
.block h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; margin-bottom: 1rem; }
.block h3 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.block p, .block li { color: color-mix(in srgb, var(--text) 85%, var(--grau)); }
.block p { max-width: 42rem; }
.punkte { padding-left: 1.2rem; margin: 0 0 1rem; max-width: 42rem; }
.punkte li { margin-bottom: .45rem; }
.haken-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; max-width: 42rem; }
.haken-liste li { position: relative; padding-left: 2.1rem; line-height: 1.45; }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: .05rem; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--link) 12%, transparent);
}
.haken-liste li::after {
  content: ""; position: absolute; left: 7px; top: .38rem; width: 8px; height: 4.5px;
  border-left: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(-45deg);
}
.dateien { list-style: none; padding: 0; margin: 0; }
.dateien a { display: inline-flex; min-height: 40px; align-items: center; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
@media (max-width: 600px) { .zwei-spalten { grid-template-columns: 1fr; } }
.steckbrief { margin: 0; max-width: 42rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: .35rem 1.5rem; }
.steckbrief div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--linie); }
.steckbrief div:first-child { border-top: 0; }
.steckbrief dt { color: var(--grau); font-size: .95rem; }
.steckbrief dd { margin: 0; line-height: 1.45; }
@media (max-width: 600px) { .steckbrief { padding: .35rem 1.1rem; } .steckbrief div { grid-template-columns: 1fr; gap: .15rem; } }

.seite-aside { position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
.aside-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.5rem; }
.aside-titel { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 0 0 .5rem; letter-spacing: -0.02em; }
.aside-karte p { color: var(--grau); font-size: .95rem; }
.aside-karte .knopf { width: 100%; }
.aside-tel { display: block; text-align: center; margin: .9rem 0 1rem; font-weight: 600; font-size: 1.05rem; }
.aside-vorteile { list-style: none; padding: 1rem 0 0; margin: 0; border-top: 1px solid var(--linie); display: grid; gap: .4rem; font-size: .9rem; color: var(--grau); }
.aside-vorteile li::before { content: "✓"; color: var(--link); font-weight: 700; margin-right: .5rem; }
@media (max-width: 1000px) {
  .seite-raster { grid-template-columns: 1fr; gap: 0; }
  .seite-aside { position: static; }
}

/* ---------- FAQ ---------- */
.faq-liste { border-top: 1px solid var(--linie); }
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-eintrag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; min-height: 44px; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }
.faq-eintrag summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background-color: color-mix(in srgb, var(--text) 7%, transparent);
  background-image: linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));
  background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat;
  transition: transform .4s var(--weich);
}
.faq-eintrag[open] summary::after { transform: rotate(45deg); }
.faq-eintrag::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--weich), content-visibility .45s allow-discrete; }
.faq-eintrag[open]::details-content { block-size: auto; }
.faq-antwort { padding: 0 3rem 1.25rem 0; }
.faq-antwort p { margin: 0; color: var(--grau); }

/* ---------- Kachelraster (Themen, Verwandtes, Finder) ---------- */
.kachel-raster { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-top: 0; }
.kachel-raster a { min-height: 12.5rem; }
.themen-gruppe + .themen-gruppe { margin-top: 3rem; }
.themen-gruppe h2 { font-size: 1.35rem; margin-bottom: 1rem; color: var(--grau); font-weight: 600; letter-spacing: -0.015em; }
.themen { padding-top: clamp(2rem, 4vw, 3rem); }
.verwandt { background: var(--stein); }
.verwandt h2 { margin-bottom: 1.5rem; }
.verwandt .wege a { background-color: var(--karte); }

/* ---------- CTA-Band ---------- */
.cta-band { background: var(--dunkel); color: #ece4e4; padding: clamp(3rem, 7vw, 5rem) 0; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.cta-band p { color: #cfc4c5; margin-top: .75rem; }
.cta-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: center; }
.cta-wege .gross {
  display: block; width: fit-content; font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em;
  color: #fff; line-height: 1.25; overflow-wrap: anywhere;
  background: linear-gradient(var(--sand), var(--sand)) left bottom / 0 2px no-repeat; transition: background-size .5s var(--weich), color .2s;
}
.cta-wege .gross:hover { color: var(--sand); text-decoration: none; background-size: 100% 2px; }
.cta-band :focus-visible { outline-color: var(--sand); }
@media (max-width: 800px) { .cta-raster { grid-template-columns: 1fr; } }

/* ---------- Fußzeile v5 ---------- */
.fuss { padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.fuss .huelle { display: block; }
.fuss-oben { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.fuss-marke { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: #fff; margin: 0 0 .75rem; letter-spacing: -0.02em; }
.fuss address { font-style: normal; line-height: 1.7; color: #d8cdce; }
.fuss-register { font-size: .8rem; margin-top: 1rem; color: #a99d9e; }
.fuss-spalten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.fuss-titel { font-weight: 600; color: #fff; margin: 0 0 .6rem; font-size: .9rem; }
.fuss-titel a { color: #fff; }
.fuss-spalten ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.fuss-spalten a { color: #cdbfc0; font-size: .875rem; }
.fuss-spalten a:hover { color: #fff; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; padding-top: 1.25rem; font-size: .85rem; }
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
@media (max-width: 1100px) { .fuss-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .fuss-oben { grid-template-columns: 1fr; } .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Flyout: Wechsel zwischen Rubriken ---------- */
.flyout-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flyout-panel .spalte-extra a { font-size: 1rem; font-weight: 500; }
.wechsel-rein .spalte li { animation: flyoutWechsel .35s var(--weich) both; animation-delay: calc(var(--i) * 20ms); }
@keyframes flyoutWechsel { from { opacity: 0; transform: translateY(-6px); } }
.mobil-gruppe ul li:first-child a { font-weight: 600; }

/* ---------- Startseite: Vertrauensleiste ---------- */
.vertrauen { list-style: none; padding: 0; margin: clamp(2.5rem, 6vw, 4rem) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 56rem; border-top: 1px solid var(--linie); }
.vertrauen li { padding: 1.25rem .75rem 0; display: grid; gap: .2rem; }
.vertrauen li + li { border-left: 1px solid var(--linie); }
.vertrauen strong { font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.02em; }
.vertrauen span { font-size: .85rem; color: var(--grau); }
@media (max-width: 700px) {
  .vertrauen { grid-template-columns: 1fr 1fr; }
  .vertrauen li:nth-child(3) { border-left: 0; }
  .vertrauen li:nth-child(n+3) { border-top: 1px solid var(--linie); margin-top: 1.25rem; }
}

/* ---------- Startseite: Versicherungsfinder ---------- */
.finder { padding-top: clamp(2rem, 5vw, 3.5rem); }
.finder-tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 0; padding: 4px; background: var(--stein); border-radius: 999px; margin-bottom: 2rem; max-width: 100%; }
.finder-tab {
  position: relative; z-index: 1; border: 0; background: none; font: inherit; font-weight: 600; font-size: .95rem; color: var(--grau);
  padding: .7rem 1.3rem; border-radius: 999px; cursor: pointer; min-height: 44px; transition: color .3s;
}
.finder-tab[aria-selected="true"] { color: #fff; }
.finder-tab:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.finder-marker { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 999px; background: var(--wein); box-shadow: 0 6px 16px -6px rgba(140,35,80,.5); transition: transform .45s var(--weich), width .45s var(--weich), height .45s var(--weich); }
.finder-satz { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1.25rem; }
.finder-mehr { margin: 1.25rem 0 0; font-weight: 600; }
.panel-rein { animation: panelRein .5s var(--weich); }
@keyframes panelRein { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 700px) {
  .finder-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; width: 100%; }
  .finder-tab { border-radius: 14px; padding: .7rem .5rem; }
  .finder-marker { border-radius: 14px; }
}

/* ---------- Startseite: Bühne Tierschutz ---------- */
.tierschutz-buehne { background: var(--stein); }
.szenarien { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.szenarien li { background-color: var(--karte); border-radius: var(--r-gross); padding: 1.6rem 1.6rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; min-height: 11rem; }
.szenarien p { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; color: var(--titel); }
.szenarien a { font-weight: 600; font-size: .95rem; }
.buehne-mehr { margin: 2rem 0 0; }
@media (max-width: 900px) { .szenarien { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .szenarien { grid-template-columns: 1fr; } }

/* ---------- Startseite: Rassen-Laufband ---------- */
.rassen-band { overflow: hidden; }
.rassen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 2rem; align-items: end; margin-bottom: 2.5rem; }
.rassen-kopf p { margin: 0; color: var(--grau); font-size: 1.125rem; grid-column: 1; }
.rassen-kopf .knopf { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 700px) { .rassen-kopf { grid-template-columns: 1fr; } .rassen-kopf .knopf { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 1rem; } }
.laufband { display: flex; width: max-content; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband ul { list-style: none; display: flex; gap: .75rem; margin: 0; padding: 0 .75rem 0 0; animation: laufen 60s linear infinite; }
.laufband:hover ul { animation-play-state: paused; }
.laufband li {
  white-space: nowrap; padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte);
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em;
}
.laufband li:nth-child(3n+1) { background: var(--wein); color: #fff; border-color: var(--wein); }
@keyframes laufen { to { transform: translateX(-100%); } }

/* ---------- Startseite: Ablauf ---------- */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; counter-reset: none; position: relative; }
.ablauf::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, var(--wein), var(--sand)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--weich) .2s; }
.js .ablauf.sichtbar::before, html:not(.js) .ablauf::before { transform: scaleX(1); }
.ablauf li { position: relative; }
.schritt { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--karte); border: 2px solid var(--wein); color: var(--wein); font-weight: 700; font-family: var(--display); margin-bottom: 1.1rem; position: relative; z-index: 1; }
.ablauf h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.ablauf p { color: var(--grau); margin: 0; }
@media (max-width: 760px) { .ablauf { grid-template-columns: 1fr; gap: 1.75rem; } .ablauf::before { display: none; } }

/* ---------- Startseite: Regional ---------- */
.regional-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.regional h2 { margin-bottom: 1rem; }
.regional p { color: var(--grau); margin-bottom: 1.5rem; }
.regional address { font-style: normal; font-family: var(--display); font-size: 1.35rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; }
@media (max-width: 760px) { .regional-raster { grid-template-columns: 1fr; } }

/* ---------- Kontaktkarten ---------- */
/* Kontaktkarte (/kontakt/) nach Vorbild der Kontakte-App: Monogramm, Schnellaktionen, gruppierte Liste */
.kontakt-oben { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: start; }
.kontaktkarte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.75rem 1.75rem .5rem;
  box-shadow: 0 1px 2px rgba(29,27,28,.04), 0 12px 32px -18px rgba(76,18,44,.22); }
.kk-kopf { display: flex; align-items: center; gap: 1rem; }
.kk-monogramm { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: linear-gradient(160deg, #94283a, var(--wein) 55%, var(--wein-tief)); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; }
.kk-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--titel); }
.kk-zusatz { margin: .15rem 0 0; font-size: .95rem; color: var(--grau); }
.kk-aktionen { list-style: none; margin: 1.5rem 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.kk-aktionen a { display: grid; justify-items: center; gap: .35rem; padding: .8rem .25rem .7rem; border-radius: 14px;
  background: var(--stein); color: var(--wein); font-size: .85rem; font-weight: 600; transition: background-color .2s, transform .15s; }
.kk-aktionen a:hover { background: color-mix(in srgb, var(--wein) 9%, var(--stein)); }
.kk-aktionen a:active { transform: scale(.96); }
.kontaktkarte svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kk-liste { margin: 0; }
.kk-liste > div { padding: .8rem 0; border-top: 1px solid var(--linie); }
.kk-liste dt { font-size: .82rem; color: var(--grau); }
.kk-liste dd { margin: .1rem 0 0; font-size: 1.0625rem; line-height: 1.45; color: var(--text); }
.kk-liste dd a { color: var(--link); }
.kk-speichern { display: flex; align-items: center; gap: .5rem; min-height: 48px; border-top: 1px solid var(--linie); color: var(--link); font-weight: 600; }
.kk-speichern svg { width: 1.25rem; height: 1.25rem; }
.kontakt-hinweise h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.kontakt-hinweise p + h2 { margin-top: 2rem; }
.kontakt-hinweise { padding-top: .5rem; }
.kk-aktionen a:focus-visible, .kk-speichern:focus-visible { outline: 2px solid var(--wein); outline-offset: 2px; }
@media (max-width: 800px) { .kontakt-oben { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .kontaktkarte { padding: 1.25rem 1.1rem .4rem; } .kk-aktionen { gap: .35rem; } .kk-aktionen a { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .kk-aktionen a:active { transform: none; } }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 46rem; padding-top: 2rem; padding-bottom: 4rem; }
.rechtstext h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 2.5rem 0 .75rem; }
.rechtstext address { font-style: normal; margin-bottom: 1em; }
.rechtstext .stand { margin-top: 2.5rem; color: var(--grau); }

/* ---------- Eingebettete Rechner der Versicherer ---------- */
.rechner-huelle { border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--karte); overflow: hidden; }
.rechner-start { padding: 1.75rem; }
.rechner-start p:first-child { margin-top: 0; }
.rechner-rahmen { display: block; width: 100%; height: min(1100px, 85vh); border: 0; background: #fff; }
.rechner-laedt { margin: 0; padding: 1rem 1.5rem; color: var(--grau); font-size: .9rem; border-bottom: 1px solid var(--linie); }
.rechner-fuss { margin: 0; padding: .75rem 1.5rem; font-size: .85rem; color: var(--grau); border-top: 1px solid var(--linie); background: var(--stein); }

/* Scroll-gebundene Animation für alle Kachelraster (nicht nur die ersten drei) */
@supports (animation-timeline: view()) {
  .wege > li { animation-range: entry 0% entry 75%; }
  .finder .js .wege > li, .finder-panel .wege > li { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband ul { animation: none; }
  .laufband { width: auto; flex-wrap: wrap; }
  .ablauf::before { transform: scaleX(1); transition: none; }
}

/* Nach Sichtprüfung v5 */
.wege .was, .seite-kopf h1, .szenarien p, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.kachel-raster .was { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.einstieg { padding-bottom: clamp(1rem, 3vw, 2rem); }
.fuss-spalten { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.75rem 1.5rem; }
.fuss-spalten a, .fuss-titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ============ v6: weitere moderne Animationen ============ */

/* 1. Seitenwechsel mit Verwandlung: Kachel-Titel wird zur Überschrift der Fachseite (gleicher view-transition-name) */
.wege .was, .seite-kopf h1 { view-transition-class: titel; }
::view-transition-group(*.titel) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
::view-transition-old(*.titel), ::view-transition-new(*.titel) { height: 100%; object-fit: contain; object-position: left top; }
::view-transition-old(*.titel) { animation: .25s ease-out both titelRaus; }
::view-transition-new(*.titel) { animation: .45s ease-in .1s both titelRein; }
@keyframes titelRaus { to { opacity: 0; } }
@keyframes titelRein { from { opacity: 0; } }

/* 2. Überschriften füllen sich beim Scrollen von Grau zu Schwarz */
@supports (animation-timeline: view()) {
  .fuellen {
    background: linear-gradient(90deg, var(--titel) 50%, color-mix(in srgb, var(--titel) 20%, transparent) 50%) 100% 0 / 200% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: fuellen linear both; animation-timeline: view(); animation-range: entry 15% cover 40%;
  }
  @keyframes fuellen { to { background-position: 0 0; } }
}
@media (forced-colors: active) { .fuellen { color: CanvasText; background: none; } }

/* 3. Kacheln neigen sich zur Maus (Werte setzt script.js) */
@media (hover: hover) and (pointer: fine) {
  .wege a, .szenarien li { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--weich), background-color .3s; }
  .wege a:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.015); transition-duration: .15s; }
  .szenarien li:hover { transition-duration: .15s; }
}

/* 5. Magnet-Knöpfe */
[data-magnet] { transition: transform .35s var(--weich), background-color .2s, color .2s; }
[data-magnet].magnet-aktiv { transition-duration: .12s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .fuellen { animation: none !important; background: none; color: var(--titel); }
  .wege a, .szenarien li, [data-magnet] { transform: none !important; }
}

/* ============ Dokumentseite: Erstinformation und AGB ============ */
.dokument { max-width: 52rem; }
.inhaltsverzeichnis { background: var(--stein); border-radius: var(--r-gross); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; }
.iv-titel { margin: 0 0 .5rem; font-size: .85rem; font-weight: 600; color: var(--grau); }
.inhaltsverzeichnis ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.dokument-teil { scroll-margin-top: calc(var(--kopf-h) + 1.5rem); margin-bottom: 3.5rem; }
.dokument-teil > h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 .75rem; }
.angaben { margin: 1.5rem 0 2rem; border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; background: var(--karte); }
.angaben > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; padding: 1rem 1.25rem; }
.angaben > div + div { border-top: 1px solid var(--linie); }
.angaben dt { color: var(--grau); font-size: .95rem; }
.angaben dd { margin: 0; line-height: 1.55; }
@media (max-width: 600px) { .angaben > div { grid-template-columns: 1fr; gap: .2rem; } }
.stellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.stellen address { background: var(--stein); border-radius: 16px; padding: 1rem 1.15rem; font-size: .95rem; line-height: 1.55; margin: 0; }
.stand-hinweis { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: var(--stein); font-size: .85rem; color: var(--grau); }
.paragraphen { list-style: none; counter-reset: para; padding: 0; margin: 1.5rem 0 0; }
.paragraphen > li { counter-increment: para; position: relative; padding: 1.25rem 0 .5rem 3.25rem; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + 1.5rem); }
.paragraphen > li::before { content: "§ " counter(para); position: absolute; left: 0; top: 1.3rem; font-family: var(--display); font-weight: 700; color: var(--link); font-size: .95rem; }
.paragraphen h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.paragraphen p { color: color-mix(in srgb, var(--text) 85%, var(--grau)); }

/* ============ Bugcheck 30.10.: Barrierefreiheit und kleine Bildschirme ============ */
/* Links im Fließtext unterstreichen (axe link-in-text-block: nur Farbe reicht nicht) */
.block p a, .block li a:not(.knopf), .rechtstext p a, .rechtstext dd a, .rechtstext address a, .klein-hinweis a,
.zustimmung a, .faq-antwort a, .senden-info a, .lead a, .regional p a, .rechner-fuss a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.block p a:hover, .rechtstext a:hover { text-decoration-thickness: 2px; }
/* Lange Wörter (z. B. „Wohngebäudeversicherung") dürfen umbrechen, nichts ragt seitlich heraus */
body { overflow-wrap: break-word; }
h1, h2, h3, .blick dd, .angaben dd, .feld > label, .feld > legend { hyphens: auto; -webkit-hyphens: auto; }
html { overflow-x: clip; }
@media (max-width: 900px) { .seite-kopf-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .einstieg h1 { font-size: 2.05rem; }
  .seite-kopf h1 { font-size: 2rem; }
  .blick dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

/* Bugcheck 30.10.: Druck, reduzierte Bewegung, schmale Knöpfe */
@media print {
  .js .zeigen > *, .js .produkte.zeigen, .wege > li, .produkte, .fakten > div { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fuellen { color: #000 !important; background: none !important; }
  .kopf, .mobilmenue, .abdunkler, .flyout, .seite-aside, .anfrage-seite, .cta-band, .laufband, .rechner, .skip { display: none !important; }
  body { background: #fff; }
  .seite-kopf { background: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband ul + ul { display: none; }
  .laufband { mask-image: none; -webkit-mask-image: none; }
  .laufband ul { flex-wrap: wrap; padding: 0 var(--rand); }
}
@media (max-width: 400px) {
  .knopf { white-space: normal; text-align: center; line-height: 1.25; padding-top: .55rem; padding-bottom: .55rem; }
}

/* Hinweiskasten (z. B. Widerspruchsrecht in der Datenschutzerklärung) */
.hinweis-kasten { background: var(--stein); border-left: 4px solid var(--link); border-radius: 12px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.hinweis-kasten h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.hinweis-kasten p { margin: 0; }

/* ============ Anfahrt (Kontakt, Kerpen-Seite) ============ */
.anfahrt { scroll-margin-top: calc(var(--kopf-h) + 1.5rem); }
.anfahrt-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem 2.5rem; align-items: start; }
.anfahrt-karte { margin: 0; }
.anfahrt-karte > a { display: block; border-radius: var(--r-gross); overflow: hidden; border: 1px solid var(--linie); }
.anfahrt-karte img { display: block; width: 100%; height: auto; transition: transform .6s var(--weich); }
.anfahrt-karte > a:hover img { transform: scale(1.03); }
.anfahrt-karte figcaption { margin-top: .5rem; font-size: .8rem; color: var(--grau); }
.anfahrt-text address { font-style: normal; font-size: 1.1rem; line-height: 1.55; margin-bottom: 1.25rem; }
.anfahrt-wege-titel { margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; color: var(--grau); }
.anfahrt-wege { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.anfahrt-wege .knopf { min-height: 40px; font-size: .9rem; padding: 0 1rem; }
.anfahrt-text h3 { margin: 1.25rem 0 .35rem; font-size: 1.05rem; }
.anfahrt-text p { margin: 0; color: color-mix(in srgb, var(--text) 85%, var(--grau)); }
.seite-raster.einspaltig:has(.anfahrt) { grid-template-columns: minmax(0, 60rem); }
@media (max-width: 800px) { .anfahrt-raster { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .anfahrt-karte a:hover img { transform: none; } }

/* ============ Interaktive Vektorkarte (karte.js) ============ */
.karte-buehne { position: relative; aspect-ratio: 15 / 8; border-radius: var(--r-gross); overflow: hidden; border: 1px solid var(--linie); background: #f4f1ee; }
.karte-buehne .karte-bild { display: block; height: 100%; border: 0; border-radius: 0; transition: opacity .8s var(--weich); }
.karte-buehne .karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-flaeche { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--weich); }
.karte-bereit .karte-flaeche { opacity: 1; }
.karte-bereit .karte-bild { opacity: 0; pointer-events: none; }
.karte-zurueck { display: none; position: absolute; left: .75rem; bottom: .75rem; z-index: 2; border: 0; border-radius: 999px; padding: .5rem .95rem; min-height: 36px;
  background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.12); font: inherit; font-size: .85rem; font-weight: 600; color: var(--wein); cursor: pointer; }
.karte-bereit .karte-zurueck { display: block; }
.karte-zurueck:hover { background: #fff; }
@media (max-width: 800px) { .karte-buehne { aspect-ratio: 4 / 3; } }

/* Markierung */
.karten-nadel { position: relative; width: 40px; height: 52px; cursor: default; }
.karten-nadel svg { position: relative; z-index: 1; width: 40px; height: 52px; filter: drop-shadow(0 6px 8px rgba(76,18,44,.35)); }
.karten-nadel path { fill: var(--wein); }
.karten-nadel circle { fill: #fff; }
.nadel-puls { position: absolute; left: 50%; bottom: -10px; width: 26px; height: 12px; margin-left: -13px; border-radius: 50%; background: rgba(140,35,80,.35); animation: nadelPuls 2.2s ease-out infinite; }
@keyframes nadelPuls { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.nadel-schild { position: absolute; left: 46px; top: 4px; white-space: nowrap; background: #fff; border-radius: 10px; padding: .35rem .6rem; box-shadow: 0 4px 14px rgba(0,0,0,.14);
  font-size: .78rem; line-height: 1.25; color: var(--grau); }
.nadel-schild strong { display: block; color: var(--titel); font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .nadel-puls { animation: none; opacity: .5; } }

/* MapLibre-Bedienelemente an das Seitendesign angleichen */
.karte-buehne .maplibregl-ctrl-group { border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12); overflow: hidden; }
.karte-buehne .maplibregl-ctrl-attrib { font-size: 11px; }
.karte-buehne .maplibregl-cooperative-gesture-screen { font-family: var(--sans); font-size: 1rem; background: rgba(29,26,27,.55); }
/* MapLibre setzt .maplibregl-map { position: relative } und wird später geladen → hier spezifischer überschreiben */
.karte-buehne > .karte-flaeche.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Anfahrt v2: Karte über die volle Breite, Infos darunter in drei Spalten */
.anfahrt-raster { grid-template-columns: 1fr; gap: 1.75rem; }
.karte-buehne { aspect-ratio: 21 / 9; }
/* Jede Spalte ist ein eigener Block → Überschrift und Text stehen direkt untereinander, egal wie hoch die Nachbarspalte ist */
.anfahrt-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; align-items: start; }
.anfahrt-text address { margin: 0 0 1rem; }
.anfahrt-text .anfahrt-wege { margin: 0; }
.anfahrt-text h3 { margin: 0 0 .4rem; }
.anfahrt-text.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .karte-buehne { aspect-ratio: 4 / 3; }
  .anfahrt-text, .anfahrt-text.zwei { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Umschalter Karte | Luftbild (Segment-Schalter wie bei Apple/Google Maps) */
.karte-umschalter { display: none; position: absolute; left: .75rem; top: .75rem; z-index: 2; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.karte-bereit .karte-umschalter { display: flex; }
.karte-umschalter button { border: 0; background: none; border-radius: 999px; padding: .45rem .95rem; min-height: 36px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--grau); cursor: pointer; transition: background-color .25s var(--weich), color .2s; }
.karte-umschalter button[aria-pressed="true"] { background: var(--wein); color: #fff; }
.karte-umschalter button:focus-visible { outline: 3px solid var(--link); outline-offset: 1px; }
.ist-luftbild .nadel-schild { box-shadow: 0 4px 18px rgba(0,0,0,.4); }

/* Einfache Seiten (Kontakt, Über uns …): Kopf und Inhalt nicht mit doppeltem Abstand trennen */
.seite-kopf:has(+ .seite-raster.einspaltig) { padding-bottom: 1rem; }
.seite-kopf:has(+ .seite-raster.einspaltig) .lead:last-child { margin-bottom: 0; }
.seite-kopf + .seite-raster.einspaltig { padding-top: clamp(1.5rem, 3vw, 2rem); }
.seite-inhalt > .block:last-child { margin-bottom: 0; }
/* Schnellaktionen sind Knöpfe, keine Fließtext-Links → gleiche Spezifität wie die Unterstreichungsregel oben, steht danach */
.block .kk-aktionen li a { text-decoration: none; }

/* ============ Startseite nach Apple-Design-Prüfung (30.10.) ============ */
/* Füll-Überschriften: Ausgangsgrau mit 55 % statt 20 % (≈ 3,8:1 statt 1,5:1 auf --papier), früher fertig;
   Unterlängen (g, p) lagen außerhalb des Hintergrunds und wurden abgeschnitten → kleiner Innenabstand unten */
@supports (animation-timeline: view()) {
  .fuellen {
    background-image: linear-gradient(90deg, var(--titel) 50%, color-mix(in srgb, var(--titel) 55%, transparent) 50%);
    padding-bottom: .12em; animation-range: entry 10% cover 30%;
  }
}
/* Laufband: Rassen sind Information, keine Knöpfe → alle Chips neutral (Hausfarbe bleibt Aktionen vorbehalten) */
.laufband li:nth-child(3n+1) { background: var(--karte); color: var(--text); border-color: var(--linie); }
.laufband.angehalten ul { animation-play-state: paused; }
.rassen-band { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.laufband-steuerung { display: flex; justify-content: flex-end; margin-top: .75rem; }
.laufband-pause { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--grau); font: 600 .875rem/1 var(--sans); cursor: pointer; }
.laufband-pause::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.laufband-pause[aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-block: 6px solid transparent; border-left: 10px solid currentColor; }
.laufband-pause:hover { background: var(--stein); color: var(--text); }
.laufband-pause:focus-visible { outline: 2px solid var(--wein); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .laufband-steuerung { display: none; } }
/* Plus in den Finder-Kacheln: Hausfarbe statt Schwarz, weil die Kachel eine Aktion ist */
.plus { background: var(--wein); }
.wege a:hover .plus { background: var(--wein-tief); }
/* Mobil: Kacheln kompakt, Plus rechts mittig statt leerer Fläche unten */
@media (max-width: 760px) {
  .wege a, .kachel-raster a { min-height: 0; padding: 1.25rem 4.25rem 1.25rem 1.25rem; }
  .wege .plus { top: 50%; bottom: auto; margin-top: -18px; }
}
/* Einstieg: Unterzeile auf drei statt vier zentrierte Zeilen */
.einstieg .unterzeile { max-width: 46ch; }
/* Regional: Kartenvorschau statt allein stehender Adresse */
.regional-karte { display: block; border-radius: var(--r-gross); overflow: hidden; background: var(--karte); border: 1px solid var(--linie); color: var(--text);
  box-shadow: 0 12px 32px -18px rgba(76,18,44,.25); transition: transform .4s var(--weich); }
.regional-karte:hover { text-decoration: none; transform: translateY(-2px); }
.regional-karte img { display: block; width: 100%; height: auto; aspect-ratio: 15 / 8; object-fit: cover; }
.regional-adresse { display: grid; gap: .15rem; padding: 1rem 1.25rem 1.1rem; }
.regional-adresse strong { font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.015em; }
.regional-adresse span { color: var(--link); font-size: .95rem; font-weight: 600; }
.regional-karte:focus-visible { outline: 2px solid var(--wein); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .regional-karte:hover { transform: none; } }
.rassen-band + .abschnitt { padding-top: clamp(2.5rem, 5vw, 4rem); }   /* gleiche Hintergrundfarbe → sonst doppelter Abstand */

/* ============ Fuß kompakter (30.10.2026, Mike: „extrem groß“; Apple-Design-Review) ============ */
.cta-band { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
.fuss { padding: clamp(2.25rem, 4vw, 3rem) 0 1.25rem; }
/* Desktop: fünf Linkspalten in einer Reihe, Firmenangaben als eine Zeile darunter (Marke steht schon in der Kopfleiste) */
.fuss-spalten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.fuss-spalten ul { gap: 0; }
.fuss-spalten li a, .fuss-unten nav a { display: inline-block; padding: .2rem 0; }   /* Tippfläche ≥ 24 px (Lighthouse target-size) */
.fuss-gruppe > summary { display: none; list-style: none; }   /* Desktop: nur die Überschrift .fuss-titel-desktop */
.fuss-gruppe > summary::-webkit-details-marker { display: none; }
.fuss-gruppe .nur-handy { display: none; }
/* Firmenangaben: zentrierter Abschluss unter den Spalten; Trenner = Schrägstrich aus dem Logo (GEI/SBAUER) */
.fuss-firma { margin-top: 2.25rem; padding: 1.75rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.1); text-align: center; }
.fuss-firma address { display: grid; justify-items: center; gap: .35rem; line-height: 1.6; }
.fuss-firma address strong { color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.fuss-angaben { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; color: #d8cdce; }
.fuss-angaben > * + *::before { content: "/" / ""; display: inline-block; margin: 0 .9rem; color: #c4588a; font-weight: 300;
  transform: skewX(-8deg); }
.fuss-angaben a { color: #ece4e4; }
.fuss-angaben a:hover { color: #fff; }
.fuss-firma .fuss-register { margin: .6rem auto 0; max-width: 46rem; }
.fuss-unten { justify-content: center; gap: .5rem 1.75rem; padding-top: 0; }
.fuss-unten nav { gap: 1.75rem; }
.fuss-unten { border-top: 0; }
@media (max-width: 1100px) and (min-width: 961px) { .fuss-spalten { gap: 1rem; } }
/* Handy/Tablet (wie Kopfmenü bis 960 px): Linkgruppen als Akkordeon wie bei Apple – nur Überschriften sichtbar */
@media (max-width: 960px) {
  .fuss { padding-top: 1.25rem; }
  .fuss-spalten { display: block; }
  .fuss-gruppe { border-bottom: 1px solid rgba(255,255,255,.1); }
  .fuss-titel-desktop { display: none; }
  .fuss-gruppe > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: 0; min-height: 44px; padding: .5rem 0; }
  .fuss-gruppe .nur-handy { display: revert; }
  .fuss-gruppe > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid #cdbfc0; border-bottom: 1.5px solid #cdbfc0;
    transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--weich); }
  .fuss-gruppe[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .fuss-gruppe ul { padding: 0 0 .75rem; gap: 0; }
  .fuss-gruppe li a { display: block; padding: .55rem 0; }          /* Tippfläche ≥ 40 px */
  .fuss-firma { margin-top: 0; border-top: 0; padding: 1.5rem 0 1.25rem; text-align: left; }
  .fuss-firma address { justify-items: start; gap: .15rem; }
  .fuss-angaben { display: grid; justify-content: start; gap: .15rem; }
  .fuss-angaben > * + *::before { content: none; }
  .fuss-unten { justify-content: flex-start; }
  .fuss-firma .fuss-register { margin-top: .75rem; }
  .fuss-unten nav a { display: inline-block; padding: .65rem 0; }  /* Impressum & Co. ≥ 44 px hoch */
  .fuss-unten { padding-top: .5rem; }
}

/* ============ Ratgeber (30.10.2026) ============ */
.rg-meta { margin: -.75rem 0 0; color: var(--grau); font-size: .9rem; }
/* „Kurz gesagt“: die Antwort vorweg, ruhiger Kasten mit leichtem Hausfarben-Ton (schräger Strich: Mike gefiel er nicht) */
.rg-kurz { background: color-mix(in srgb, var(--wein) 5%, var(--karte)); border: 1px solid color-mix(in srgb, var(--wein) 14%, var(--linie));
  border-radius: var(--r-gross); padding: 1.4rem 1.6rem; margin-bottom: 3rem; max-width: 46rem; }
.rg-kurz-titel { font-weight: 700; margin: 0 0 .4rem; letter-spacing: -0.01em; color: var(--wein); }
.rg-kurz p { margin: 0; font-size: 1.075rem; line-height: 1.6; }
.rg-kurz p + p { margin-top: .6rem; }
.rg-raster .block { scroll-margin-top: calc(var(--kopf-h) + 1.5rem); }
.rg-inhalt { margin-bottom: 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--linie); }
.rg-inhalt ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .1rem; }
.rg-inhalt a { display: block; padding: .3rem 0 .3rem .75rem; border-left: 2px solid var(--linie); color: var(--grau); font-size: .9rem; line-height: 1.35; }
.rg-inhalt a:hover { color: var(--text); border-left-color: var(--wein); text-decoration: none; }
.rg-quellen ul { padding-left: 1.1rem; }
.rg-quellen li { margin-bottom: .35rem; }
/* Übersicht und „Im Ratgeber“: ruhige Listenzeilen statt Karten */
.rg-uebersicht { padding-top: 1rem; padding-bottom: clamp(3rem, 6vw, 5rem); }   /* linksbündig an der Seitenkante wie der Kopf */
.rg-uebersicht > .rg-gruppe { max-width: 52rem; }
.rg-gruppe { margin-bottom: 2.75rem; scroll-margin-top: calc(var(--kopf-h) + 1rem); }
.rg-gruppe h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; margin-bottom: .5rem; }
.rg-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.rg-liste li { border-bottom: 1px solid var(--linie); }
.rg-liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.5rem; padding: 1.1rem .25rem; color: var(--text); }
.rg-liste a:hover { text-decoration: none; }
.rg-liste a:hover .rg-titel { color: var(--wein); }
.rg-titel { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; transition: color .2s; }
.rg-teaser { grid-column: 1; color: var(--grau); font-size: .95rem; line-height: 1.5; }
.rg-zeit { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--grau); font-size: .85rem; white-space: nowrap; }
@media (max-width: 600px) {
  .rg-liste a { grid-template-columns: 1fr; }
  .rg-zeit { grid-column: 1; grid-row: auto; }
  .rg-kurz { padding: 1.2rem 1.25rem; }
}
@media (max-width: 1000px) { .rg-inhalt { display: none; } }
.rg-kopf h1 { hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; max-width: 22ch; }   /* keine Silbentrennung in Fragen-Überschriften */
.rg-raster { padding-top: 1.5rem; }
.seite-kopf.rg-kopf { padding-bottom: 1.25rem; }
.abschnitt.rg-abschnitt { padding-bottom: 0; }   /* folgt direkt der FAQ-Abschnitt (eigener Abstand oben) */
.rg-alle { margin: 1rem 0 0; font-weight: 600; }