/* ==========================================================================================
   Rollrasen Kahl – Etappe 3, Sitzung F „Finder und Recht“ (17.10.2026)
   Seiten: Rasenfinder (rasenfinder.html), Rechtstexte (recht.html?t=…), Widerruf online (widerrufen.html), 404 (404.html).
   Am Ende, klar abgegrenzt: BAUTEIL COOKIE-HINWEIS (cookies.js) – die Koordination zieht diesen Abschnitt nach
   morgentau.css. Mobile first; baut auf morgentau.css auf (Farben, Schrift, Knöpfe, Formulare, Brotkrumen, Beratung).
   Neue Bauteile, die auch andere Seiten brauchen könnten, sind als Wunsch gemeldet (briefing/etappe3-wuensche.md).
   ========================================================================================== */

/* ---------- Heller Seitenkopf (Rechtstexte, Widerruf) ---------- */
.hellkopf { padding: 6px 0 18px; background: var(--leinen); border-bottom: 1px solid var(--linie); }
@media (min-width: 900px) { .hellkopf { padding: 12px 0 34px; } }
.hellkopf .brotkrumen ol { margin: 0; }
.hellkopf .kicker { display: none; margin: 4px 0 10px; }
@media (min-width: 700px) { .hellkopf .kicker { display: inline-flex; } }
.hellkopf h1 { max-width: 24ch; font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.1rem); hyphens: auto; overflow-wrap: break-word; }
.hellkopf h1:focus { outline: none; }
.hellkopf__lead { max-width: 60ch; margin: 12px 0 0; color: var(--tinte-2); }
.hellkopf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--tinte-2); }
.hellkopf__meta li { display: inline-flex; align-items: center; gap: 6px; }
.hellkopf__meta .icon { width: 16px; height: 16px; color: var(--tannengruen); }
.hellkopf__meta a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; color: inherit; }
.hellkopf__meta .ist-neu { color: var(--tinte); font-weight: 600; }
@media (max-width: 699px) { .hellkopf .nur-gross { display: none; } }

/* ==========================================================================================
   1 Rasenfinder (rasenfinder.html)
   ========================================================================================== */
.rasenfinder { padding: 10px 0 28px; min-height: calc(100svh - var(--kopf-h)); background: var(--elfenbein); }
@media (min-width: 1000px) {
  .rasenfinder { display: grid; align-items: center; padding: 28px 0 44px; min-height: calc(100svh - var(--kopf-h) - var(--leiste-h)); background: var(--leinen); }
}
.rasenfinder__karte { display: grid; }
@media (min-width: 1000px) {
  .rasenfinder__karte { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); min-height: 620px; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--r-xl); background: var(--karte); box-shadow: var(--schatten-2); }
}
.rasenfinder__karte > * { min-width: 0; }
.rasenfinder__foto { display: none; }
@media (min-width: 1000px) {
  .rasenfinder__foto { position: relative; display: block; margin: 0; overflow: hidden; background: var(--wald-800); isolation: isolate; }
  .rasenfinder__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease); }
  .rasenfinder__foto img.ist-neu { animation: weich .6s var(--ease) both; }
  .rasenfinder__foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 21 16 / 0) 45%, rgb(10 21 16 / .78) 100%); pointer-events: none; }
}
.rasenfinder__foto-text { position: absolute; left: 28px; right: 28px; bottom: 30px; z-index: 2; display: grid; gap: 6px; color: var(--auf-dunkel); }
.rasenfinder__foto-text b { font: 700 1.45rem/1.2 var(--kopf); letter-spacing: -.01em; text-wrap: balance; }
.rasenfinder__foto-text span { color: var(--auf-dunkel-2); font-size: .9375rem; }
.rasenfinder__foto-text .chip { justify-self: start; }
@media (min-width: 1000px) { .rasenfinder__panel { padding: 40px 48px 36px; } }
@media (min-width: 1280px) { .rasenfinder__panel { padding: 46px 64px 40px; } }

.rasenfinder__kopf { display: grid; gap: 6px; margin-bottom: 12px; }
.rasenfinder__kopf .kicker { margin: 0; }
.rasenfinder__titel { font-size: clamp(1.5rem, 1.12rem + 1.7vw, 2.35rem); line-height: 1.14; }
.rasenfinder__titel:focus { outline: none; }
.rasenfinder__unterzeile { margin: 0; color: var(--tinte-2); font-size: .9375rem; }

/* Fortschritt mit vier Schritten (die gemeinsame .schrittanzeige ist für drei Schritte gebaut, Wunsch F 2) */
.rasenfinder__schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 18px; }
.rasenfinder__schritte::before, .rasenfinder__schritte::after { left: 12.5%; top: 18px; }
.rasenfinder__schritte::before { right: 12.5%; }
.rasenfinder__schritte::after { width: calc(75% * var(--fortschritt)); }
.rasenfinder__schritte button { font-size: .75rem; }
.rasenfinder__schritte button span { width: 36px; height: 36px; font-size: .875rem; }
.rasenfinder__schritte button.ist-fertig span { font-size: 0; }
.rasenfinder__schritte button.ist-fertig span::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--haken) center / contain no-repeat; mask: var(--haken) center / contain no-repeat; }
@media (min-width: 700px) { .rasenfinder__schritte button { font-size: .8125rem; } }
.rasenfinder__schritte[hidden] { display: none; }
.rasenfinder { --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.rasenfinder fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rasenfinder fieldset[hidden] { display: none; }
.rasenfinder__frage { display: block; margin: 0 0 14px; padding: 0; font: 700 clamp(1.2rem, 1.02rem + .85vw, 1.6rem)/1.25 var(--kopf); letter-spacing: -.01em; color: var(--tinte); text-wrap: balance; }
.rasenfinder .wahlkacheln { gap: 10px; }
.rasenfinder .wahlkachel > span { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 74px; padding: 12px 14px 12px 50px; border-radius: var(--r-m); }
.rasenfinder .wahlkachel > span::before { left: 16px; }
.rasenfinder .wahlkachel > span b { font-size: 1.0625rem; }
.rasenfinder .wahlkachel > span small { font-size: .875rem; }
.wahlkachel__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wahlkachel__symbol { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); transition: background-color .2s, color .2s; }
.wahlkachel__symbol .icon { width: 22px; height: 22px; }
.wahlkachel input:checked + span .wahlkachel__symbol { background: var(--rasengruen); color: #fff; }
.rasenfinder__hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; color: var(--tinte-2); font-size: .875rem; }
.rasenfinder__hinweis .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--tannengruen); }
.rasenfinder .fehlertext { margin-top: 12px; font-size: .875rem; }
.rasenfinder__aktionen { display: flex; gap: 10px; margin-top: 20px; }
.rasenfinder__aktionen .btn--akzent { flex: 1 1 auto; }
.rasenfinder__aktionen .btn[hidden] { display: none; }
.rasenfinder__dauer { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--tinte-2); font-size: .875rem; }
.rasenfinder__dauer .icon { width: 18px; height: 18px; color: var(--tannengruen); }
.rasenfinder__dauer[hidden] { display: none; }

/* Ergebnis */
.rasenfinder__ansicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; }
.rasenfinder__ansicht[hidden] { display: none; }
.rasenfinder__ansicht > * { margin: 0; max-width: 100%; }
.rasenfinder__marke { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font-weight: 600; font-size: .875rem; }
.rasenfinder__marke .icon { width: 18px; height: 18px; }
.rasenfinder__sorte { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.7rem); line-height: 1.08; hyphens: auto; overflow-wrap: break-word; }
.rasenfinder__sorte:focus { outline: none; }
.rasenfinder__sorte--klein { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); line-height: 1.15; }
.rasenfinder__begruendung { font-size: 1.0625rem; line-height: 1.5; color: var(--tinte); }
.rasenfinder__bild { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-l); background: var(--wald-800); }
.rasenfinder__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) { .rasenfinder__bild { display: none; } }
.rasenfinder__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rasenfinder__preis .preis { font-size: 1.9rem; }
.rasenfinder__preis small { color: var(--tinte-2); font-size: .8125rem; }
.rasenfinder__gruende { width: 100%; }
.rasenfinder__gruende h3 { font-size: 1.1rem; margin-bottom: 10px; }
.rasenfinder__gruende .haken { font-size: .9375rem; }
.rasenfinder__logik { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 12px 14px; border-radius: var(--r-s); background: var(--leinen); color: var(--tinte); font-size: .9375rem; line-height: 1.45; }
.rasenfinder__logik .icon { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--tannengruen); }
.rasenfinder__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; }
.rasenfinder__knoepfe .btn { white-space: normal; text-align: center; }
@media (max-width: 559px) { .rasenfinder__knoepfe .btn--akzent { width: 100%; } }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--tannengruen); font: 600 .9375rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.text-link:hover { color: var(--tannengruen-dunkel); }
.text-link .icon { width: 18px; height: 18px; }
.rasenfinder__grenze { display: flex; gap: 10px; align-items: flex-start; color: var(--tinte-2); font-size: .875rem; line-height: 1.5; }
.rasenfinder__grenze .icon { width: 18px; height: 18px; margin-top: 1px; flex: none; color: var(--tannengruen); }
.rasenfinder__merken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; width: 100%; padding: 16px; border: 1px solid var(--linie); border-radius: var(--r-m); background: #fff; }
.rasenfinder__merken > .icon { grid-row: span 2; width: 26px; height: 26px; color: var(--tannengruen); }
.rasenfinder__merken h3 { font-size: 1.05rem; }
.rasenfinder__merken p { margin: 0; color: var(--tinte-2); font-size: .875rem; }
.rasenfinder__merken .btn { grid-column: 1 / -1; margin-top: 10px; white-space: normal; }
@media (min-width: 560px) { .rasenfinder__merken .btn { grid-column: 2; justify-self: start; } }

/* Newsletter und „Fast geschafft“ */
.rasenfinder__formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; }
.rasenfinder__formular .btn { white-space: normal; text-align: center; }
.rasenfinder__formular .fehlerliste { margin: 0; }
/* Einwilligung lesbar: .feld label setzt sonst 600 / 13 px (für kurze Beschriftungen gedacht) */
.rasenfinder__formular .feld .haekchen { font: 400 .875rem/1.55 var(--sans); color: var(--tinte); }
.rasenfinder__klein { color: var(--tinte-2); font-size: .8125rem; }
.rasenfinder__entwurf { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--nacht); color: var(--auf-dunkel); font-weight: 600; font-size: .875rem; }
.rasenfinder__entwurf .icon { color: var(--hellgruen); }
.rasenfinder__fertig-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--rasengruen); color: #fff; }
.rasenfinder__fertig-icon .icon { width: 28px; height: 28px; stroke-width: 2.4; }
.rasenfinder__mail { font-weight: 600; overflow-wrap: anywhere; }
.rasenfinder__zurueck { margin-left: -4px; }

/* Unter dem Finder: andere Wege */
.rasenfinder-wege { padding: 26px 0 clamp(48px, 7vw, 80px); }
.rasenfinder-wege__raster { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .rasenfinder-wege__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.rasenfinder-weg { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); color: var(--tinte); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.rasenfinder-weg:hover { border-color: var(--tannengruen); box-shadow: var(--schatten-1); color: var(--tinte); }
.rasenfinder-weg__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); }
.rasenfinder-weg__text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.rasenfinder-weg__text b { font: 600 1rem/1.25 var(--kopf); }
.rasenfinder-weg__text span { color: var(--tinte-2); font-size: .8125rem; }
.rasenfinder-weg > .icon:last-child { width: 18px; height: 18px; color: var(--tannengruen); }
.rasenfinder-wege__titel { margin: 0 0 12px; font: 600 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tannengruen); }

/* ==========================================================================================
   2 Rechtstexte (recht.html?t=…): lesbare Spalte, Inhaltsverzeichnis, Prüfhinweise, Druck
   ========================================================================================== */
.recht { padding: 18px 0 clamp(56px, 8vw, 104px); }
@media (min-width: 1100px) { .recht { padding-top: 44px; } }
.recht__raster { display: grid; gap: 20px; }
.recht__raster > * { min-width: 0; }
@media (min-width: 1100px) { .recht__raster { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; align-items: start; } }
.recht__seite { display: none; }
@media (min-width: 1100px) {
  .recht__seite { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 28px; max-height: calc(100vh - var(--kopf-h) - 48px); overflow: auto; overscroll-behavior: contain; padding: 4px 4px 4px 0; scrollbar-width: thin; }
}
.recht__artikel { max-width: 74ch; }

/* Werkzeuge im Kopf: Prüfhinweise zählen/ausblenden, Drucken */
.recht-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.recht-werkzeuge[hidden] { display: none; }
.werkzeug-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--tinte); font: 600 .875rem/1.1 var(--sans); text-decoration: none; cursor: pointer; transition: border-color .2s, background-color .2s; }
.werkzeug-knopf:hover { border-color: var(--tannengruen); color: var(--tinte); }
.werkzeug-knopf .icon { width: 17px; height: 17px; color: var(--tannengruen); }
.werkzeug-knopf--hinweis { border-color: #E2BE3A; background: #FFF6CC; }
.werkzeug-knopf[aria-pressed="true"] { background: var(--nacht); border-color: var(--nacht); color: var(--auf-dunkel); }
.werkzeug-knopf[aria-pressed="true"] .icon { color: var(--hellgruen); }
@media (max-width: 699px) { .werkzeug-knopf--drucken { display: none; } }

/* Inhaltsverzeichnis: Desktop mitlaufend links, Handy aufklappbar */
.recht-inhalt__titel { margin: 0 0 10px; font: 600 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tannengruen); }
.recht-inhalt ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--linie); }
.recht-inhalt a { display: flex; align-items: center; min-height: 40px; margin-left: -1px; padding: 6px 10px 6px 14px; border-left: 2px solid transparent; color: var(--tinte-2); font-size: .9063rem; line-height: 1.3; text-decoration: none; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.recht-inhalt a:hover { color: var(--tannengruen); }
.recht-inhalt a[aria-current="true"] { border-left-color: var(--rasengruen); color: var(--tinte); font-weight: 600; }
.recht-inhalt .ist-unter a { min-height: 36px; padding-left: 28px; font-size: .8438rem; }
.recht-inhalt-auf { margin: 0 0 6px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); }
.recht-inhalt-auf[hidden] { display: none; }
@media (min-width: 1100px) { .recht-inhalt-auf { display: none; } }
.recht-inhalt-auf > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none; }
.recht-inhalt-auf > summary::-webkit-details-marker { display: none; }
.recht-inhalt-auf > summary .icon { width: 18px; height: 18px; color: var(--tannengruen); }
.recht-inhalt-auf > summary .recht-inhalt-auf__pfeil { margin-left: auto; transition: transform .25s var(--ease); }
.recht-inhalt-auf[open] > summary .recht-inhalt-auf__pfeil { transform: rotate(180deg); }
.recht-inhalt-auf > summary small { color: var(--tinte-2); font-weight: 500; }
.recht-inhalt-auf .recht-inhalt { padding: 0 12px 12px; }
.recht-inhalt-auf .recht-inhalt a { min-height: 44px; }
.recht-inhalt-auf .recht-inhalt .ist-unter a { min-height: 40px; }

/* Andere Rechtstexte */
.recht-weitere__titel { margin: 0 0 10px; font: 600 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tannengruen); }
.recht-weitere ul { display: grid; margin: 0; padding: 0; list-style: none; }
.recht-weitere a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--linie); color: var(--tinte); font-size: .9375rem; text-decoration: none; }
.recht-weitere a:hover { color: var(--tannengruen); }
.recht-weitere a[aria-current="page"] { color: var(--tannengruen); font-weight: 600; }
.recht-weitere a .icon { width: 16px; height: 16px; color: var(--tannengruen); flex: none; }
.recht-weitere--unten { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linie); }
@media (min-width: 700px) { .recht-weitere--unten ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
@media (min-width: 1100px) { .recht-weitere--unten { display: none; } }

/* Lesbarer Text: Zeilenlänge, Abstände */
/* Silbentrennung nur auf dem Handy (schmale Spalte); auf dem Desktop trennen lange Zeilen sonst ständig */
.recht-text { font-size: 1rem; line-height: 1.7; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
@media (min-width: 700px) { .recht-text { hyphens: manual; } }
@media (min-width: 768px) { .recht-text { font-size: 1.0625rem; } }
.recht-text > :first-child { margin-top: 0; }
.recht-text h2 { margin: 2.1em 0 .65em; font-size: clamp(1.3rem, 1.08rem + .9vw, 1.7rem); line-height: 1.22; }
.recht-text h3 { margin: 1.7em 0 .45em; font-size: 1.125rem; line-height: 1.3; }
.recht-text h4 { margin: 1.4em 0 .35em; font: 600 .8125rem/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tannengruen); }
/* Sprungziele: Abstand zum klebenden Kopf kommt aus html { scroll-padding-top } in morgentau.css (nicht doppelt setzen) */
.recht-text p { margin: 0 0 1em; }
/* Prüfhinweis (Bauteil in morgentau.css): Absätze darin enger als im Rechtstext */
.recht-text .pruefhinweis p { margin: 0 0 .45em; }
.recht-text .pruefhinweis p:last-child { margin-bottom: 0; }
.recht-text ul, .recht-text ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.recht-text li { margin: .35em 0; padding-left: .2em; }
.recht-text li::marker { color: var(--tannengruen); }
.recht-text a { overflow-wrap: anywhere; }
.recht-text strong { font-weight: 600; }
.recht-stand { color: var(--tinte-2); font-size: .875rem; font-weight: 600; letter-spacing: .01em; }
.recht-ende { margin-top: 1.6em !important; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; }
.recht-formular { padding: 14px 16px; border: 1px dashed var(--tinte-2); border-radius: var(--r-s); background: #fff; font-size: .9375rem; line-height: 1.75; overflow-wrap: anywhere; }
.recht-neu { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-s); background: var(--nacht); color: var(--auf-dunkel); font-size: .9375rem; line-height: 1.5; }
.recht-neu .icon { width: 20px; height: 20px; margin-top: 1px; flex: none; color: var(--hellgruen); }
.recht-aktion { margin: 1.2em 0 1.6em !important; }

/* Gelber Prüfhinweis (Davids Entscheidung 4 A): gehört nicht zum Rechtstext */
html.ohne-hinweise .pruefhinweis { display: none; }

/* Cookie-Richtlinie: Dienste aufklappbar, Cookie-Tabellen, Kategorien */
.recht-dienst { margin: 0 0 8px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); }
.recht-dienst > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none; }
.recht-dienst > summary::-webkit-details-marker { display: none; }
.recht-dienst > summary::after { content: "+"; margin-left: auto; font: 600 1.25rem/1 var(--sans); color: var(--tannengruen); }
.recht-dienst[open] > summary::after { content: "–"; }
.recht-dienst__name { font: 600 1.0625rem/1.3 var(--kopf); }
.recht-dienst__kat { color: var(--tinte-2); font-size: .8125rem; }
.recht-dienst__inhalt { padding: 0 16px 14px; }
.recht-dienst__inhalt > h4:first-child { margin-top: .2em; }
.recht-tabelle { margin: 0 0 1em; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--r-s); background: #fff; }
.recht-tabelle table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8438rem; line-height: 1.45; }
.recht-tabelle th, .recht-tabelle td { padding: 7px 8px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.recht-tabelle td:first-child { overflow-wrap: anywhere; hyphens: manual; }
@media (min-width: 700px) { .recht-tabelle th, .recht-tabelle td { padding: 8px 10px; } }
.recht-tabelle tr:last-child td { border-bottom: 0; }
.recht-tabelle th { background: rgb(16 26 20 / .03); font-weight: 600; color: var(--tinte); }
.recht-tabelle th:first-child { width: 38%; }
.recht-tabelle th:nth-child(2) { width: 26%; }
@media (min-width: 700px) { .recht-tabelle th:first-child { width: 42%; } .recht-tabelle th:nth-child(2) { width: 22%; } }
.recht-kategorien { display: grid; gap: 10px; margin: 0 0 1em; }
.recht-kategorie { padding: 12px 16px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); }
.recht-kategorie h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 .35em; }
.recht-kategorie p { margin: 0; font-size: .9375rem; }
.recht-kategorie__immer { padding: 2px 8px; border-radius: 999px; background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font-size: .6875rem; letter-spacing: .06em; }

/* Kasten „Vertrag online widerrufen“ über der Widerrufsbelehrung */
.recht-kasten { display: grid; gap: 12px; margin: 0 0 28px; padding: 18px; border-radius: var(--r-l); background: var(--nacht); color: var(--auf-dunkel); }
.recht-kasten h2 { font-size: 1.3rem; }
.recht-kasten p { margin: 0; color: var(--auf-dunkel-2); font-size: .9375rem; }
.recht-kasten .btn { justify-self: start; white-space: normal; text-align: center; }
@media (min-width: 700px) { .recht-kasten { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 22px 26px; } .recht-kasten .btn { grid-row: span 2; } }

/* Übersicht „Rechtliches“ (recht.html ohne ?t=) */
.recht-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .recht-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.recht-liste a { display: grid; gap: 2px; min-height: 64px; padding: 14px 18px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); color: var(--tinte); text-decoration: none; }
.recht-liste a:hover { border-color: var(--tannengruen); }
.recht-liste b { font: 600 1.05rem/1.3 var(--kopf); }
.recht-liste span { color: var(--tinte-2); font-size: .875rem; }

.recht-oben { margin: 36px 0 0; }
.nach-oben { position: fixed; right: 16px; bottom: calc(16px + var(--cookie-hoehe, 0px)); z-index: 75; width: 48px; height: 48px; border-color: var(--linie); background: var(--karte); color: var(--tinte); box-shadow: var(--schatten-1); }
.nach-oben[hidden] { display: none; }
.nach-oben:hover { background: #fff; }
.nach-oben .icon { transform: rotate(-90deg); }

/* ==========================================================================================
   3 Widerruf online (widerrufen.html)
   ========================================================================================== */
.widerruf { padding: 18px 0 clamp(56px, 8vw, 104px); }
@media (min-width: 1000px) { .widerruf { padding-top: 40px; } }
.widerruf__raster { display: grid; gap: 22px; align-items: start; }
.widerruf__raster > * { min-width: 0; }
@media (min-width: 1000px) {
  .widerruf__raster { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); grid-template-rows: auto 1fr; gap: 24px 48px; }
  .widerruf__karte { grid-column: 1; grid-row: 1 / span 2; }
  .widerruf__ausnahme { grid-column: 2; grid-row: 1; margin: 0; }
  .widerruf__seite { grid-column: 2; grid-row: 2; }
}
.widerruf__karte { padding: 18px; }
@media (min-width: 700px) { .widerruf__karte { padding: 28px 32px 30px; } }
.widerruf .schrittanzeige { margin: 0 0 22px; }
.widerruf__schritt[hidden] { display: none; }
.widerruf__titel { margin: 0 0 6px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
.widerruf__titel:focus { outline: none; }
.widerruf__felder { display: grid; gap: 16px; margin-top: 18px; }
@container (min-width: 560px) { .widerruf__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.widerruf__felder .feld { align-content: start; }
.widerruf__felder .feld--breit { grid-column: 1 / -1; }
.widerruf__felder textarea.eingabe { min-height: 96px; resize: vertical; }
.widerruf .feld label .pflicht-zeichen[hidden] { display: none; }
.widerruf__vorbelegt { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--tannengruen-dunkel); font-size: .8125rem; font-weight: 600; }
.widerruf__vorbelegt[hidden] { display: none; }
.widerruf__vorbelegt .icon { width: 16px; height: 16px; }
.widerruf__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.widerruf__knoepfe .btn { white-space: normal; text-align: center; }
@media (max-width: 559px) { .widerruf__knoepfe .btn--akzent { width: 100%; } }
.widerruf__erklaerung { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid var(--rasengruen); border-radius: var(--r-s); background: var(--hellgruen-flaeche); color: var(--tinte); font-size: .9375rem; line-height: 1.5; }
.widerruf__ausnahme { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); font-size: .9375rem; line-height: 1.5; }
.widerruf__ausnahme > .icon { grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; color: var(--tannengruen); }
.widerruf__ausnahme p { margin: 0; }
.widerruf__ausnahme blockquote { margin: 0; color: var(--tinte); }
.widerruf__ausnahme a { font-weight: 600; }
.widerruf__seite { display: grid; gap: 16px; }
.widerruf__seite .beratung { margin-top: 0; }
.widerruf__links { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.widerruf__links a { display: inline-flex; align-items: center; min-height: 44px; }
.widerruf .bestaetigung__daten dd { white-space: pre-line; }
.widerruf .bestaetigung { gap: 12px; }

/* ==========================================================================================
   4 Seite nicht gefunden (404.html)
   ========================================================================================== */
/* Handy: Foto oben als Bild (zeigt den kahlen Boden mit den Rollen), Text darunter; ab 900 px Foto im Hintergrund */
.fehlerseite { position: relative; isolation: isolate; overflow: hidden; background: var(--nacht); color: var(--auf-dunkel); }
.fehlerseite__bild { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; }
.fehlerseite__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 70%; }
.fehlerseite__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 21 16 / 0) 55%, var(--nacht) 100%); pointer-events: none; }
.fehlerseite__bild > .ki-hinweis { top: 10px; bottom: auto; z-index: 2; }
.fehlerseite__inhalt { position: relative; padding: 0 0 clamp(32px, 6vw, 64px); margin-top: -28px; }
.nur-gross { display: none; }
@media (min-width: 700px) { .nur-gross { display: inline; } }
@media (min-width: 900px) {
  .fehlerseite { display: grid; align-items: end; min-height: calc(100svh - var(--kopf-h) - var(--leiste-h)); }
  .fehlerseite__bild { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
  .fehlerseite__bild img { object-position: 50% 45%; }
  .fehlerseite__bild::after { display: none; }
  .fehlerseite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 21 16 / .9) 0%, rgb(10 21 16 / .72) 44%, rgb(10 21 16 / .12) 78%), linear-gradient(0deg, rgb(10 21 16 / .7) 0%, rgb(10 21 16 / 0) 40%); }
  .fehlerseite__inhalt { margin-top: 0; padding-top: 96px; }
}
.fehlerseite__text { display: grid; gap: 14px; justify-items: start; max-width: 640px; }
.fehlerseite__text .kicker { margin: 0; }
.fehlerseite h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-shadow: 0 2px 30px rgb(0 0 0 / .3); }
.fehlerseite__lead { max-width: 44ch; margin: 0; color: rgb(243 240 232 / .88); font-size: 1.0625rem; }
.fehlerseite .knoepfe { margin-top: 4px; }
.fehlerseite__wege { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .fehlerseite__wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fehlerseite__wege { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 40px; } }
.fehler-weg { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 60px; padding: 10px 14px; border: 1px solid rgb(243 240 232 / .16); border-radius: var(--r-m); background: rgb(10 21 16 / .55); color: var(--auf-dunkel); text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s, border-color .2s; }
.dunkel a.fehler-weg, .fehlerseite a.fehler-weg { color: var(--auf-dunkel); }
.fehler-weg:hover { background: rgb(10 21 16 / .8); border-color: var(--hellgruen); color: var(--auf-dunkel); }
.fehler-weg__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgb(140 192 132 / .16); color: var(--hellgruen); }
.fehler-weg__text { display: grid; min-width: 0; line-height: 1.3; }
.fehler-weg__text b { font: 600 1rem/1.25 var(--kopf); }
.fehler-weg__text span { color: var(--auf-dunkel-2); font-size: .8125rem; }
@media (min-width: 1100px) { .fehler-weg { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; } }
.fehlerseite__tel { margin: 18px 0 0; color: var(--auf-dunkel-2); font-size: .9375rem; }
.fehlerseite__tel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hellgruen); font-weight: 600; }

/* ==========================================================================================
   Druckansicht (Rechtstexte, Widerruf): nur der Text, Prüfhinweise mit Rahmen, Links mit Adresse
   ========================================================================================== */
@media print {
  .skip, .leiste, .kopf, .mega, .mega-schleier, .handymenue, .fuss, .hinweis, .cookie-hinweis, .cookie-dialog, .nach-oben,
  .recht__seite, .recht-inhalt-auf, .recht-werkzeuge, .recht-weitere, .recht-oben, .recht-kasten, .brotkrumen, .recht-aktion,
  .widerruf__seite, .widerruf .schrittanzeige, .widerruf__knoepfe { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .hellkopf { padding: 0 0 8pt; background: none; border: 0; }
  .hellkopf .kicker { display: none; }
  .hellkopf h1 { max-width: none; font-size: 20pt; }
  .recht { padding: 0; }
  .recht__raster { display: block; }
  .recht__artikel, .recht-text { max-width: none; }
  .recht-text { font-size: 10.5pt; line-height: 1.5; }
  .recht-text h2 { font-size: 13pt; break-after: avoid; }
  .recht-text h3, .recht-text h4 { break-after: avoid; }
  .recht-text a[href^="http"]:not([href*="cookiedatabase.org"])::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #333; }
  .pruefhinweis { background: none; border: 1.5pt solid #000; border-left-width: 4pt; break-inside: avoid; }
  .recht-dienst { break-inside: avoid; border-color: #999; }
  .recht-dienst > summary::after { content: none; }
  .wrap { width: auto; }
}

/* Cookie-Hinweis (BAUTEIL COOKIE-HINWEIS): seit der Zusammenführung von Etappe 3 gemeinsam in morgentau.css */

/* Wächter für die Prüfwerkzeuge: steht am Dateiende und fehlt, wenn die Datei nur halb geladen wurde */
:root { --ende-recht: 1; }