/* ==========================================================================================
   Rollrasen Kahl – Mein Konto und Landschaftsbauer „Morgentau“ (Etappe 3, Sitzung E, 17.10.2026)
   Eine Datei für konto.html und landschaftsbauer.html. Baut auf morgentau.css auf (Formulare, Fehlerliste,
   Bestätigung, Häkchen, Schalter, Brotkrumen, Fragen, Beratung, Zeitleiste, Karten).
   Handy zuerst: oben wenig Text, Umschalter statt zweier langer Spalten, Bereiche als Wischleiste, Tippziele ≥ 44 px,
   kein Überlauf ab 320 px. Neue Bauteile, die auch andere Seiten brauchen können (Kasse): .passwort (Feld mit
   „Anzeigen“), .sozial (Social Login), .konto-knopf, .status, .beispiel-marke – Wunsch E 5/E 6 in etappe3-wuensche.md.
   ========================================================================================== */
/* [hidden] blendet immer aus, auch bei Bauteilen mit eigener display-Angabe (.bestaetigung, .karte …) */
.seite-konto [hidden], .seite-landschaftsbauer [hidden] { display: none !important; }
.konto-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.konto .btn, .lb .btn { white-space: normal; text-align: center; }

/* ---------- Kleine Bauteile ---------- */
.konto-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 15px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--tinte);
  font: 600 .875rem/1.15 var(--sans); text-decoration: none; text-align: center; transition: border-color .2s, background-color .2s, color .2s;
}
.konto-knopf:hover { border-color: var(--tannengruen); color: var(--tinte); }
.konto-knopf .icon { width: 17px; height: 17px; color: var(--tannengruen); }
.konto-knopf--voll { border-color: var(--rasengruen); background: var(--rasengruen); color: #fff; }
.konto-knopf--voll .icon { color: #fff; }
.konto-knopf--voll:hover { border-color: var(--rasengruen-dunkel); background: var(--rasengruen-dunkel); color: #fff; }
.konto-knopf--leise { padding: 0 10px; border-color: transparent; background: none; color: var(--tannengruen); }
.konto-knopf--leise:hover { border-color: transparent; background: rgb(29 77 53 / .08); color: var(--tannengruen-dunkel); }
.konto-knopf--widerruf { border-color: rgb(163 58 43 / .4); color: var(--fehler); }
.konto-knopf--widerruf .icon { color: var(--fehler); }
.konto-knopf--widerruf:hover { border-color: var(--fehler); background: #FBEFEC; color: var(--fehler); }
.konto-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9375rem; }
.konto-zurueck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0 6px; color: var(--tannengruen); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.konto-zurueck:hover { text-decoration: underline; }
.konto-zurueck .icon { width: 18px; height: 18px; }

/* „Beispiel“: deutlich, aber klein – gelb wie die Prüfhinweise, ohne Braun */
.beispiel-marke {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border: 1px solid #E2C65A; border-radius: 999px;
  background: #FFF2C2; color: var(--tinte); font: 700 .6875rem/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle;
}
.beispiel-marke--gross { min-height: 30px; padding: 2px 12px; font-size: .75rem; }
.netto-marke { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border: 1px solid var(--tannengruen); border-radius: 999px; color: var(--tannengruen); font: 600 .8125rem/1.2 var(--sans); white-space: nowrap; }
.kasse-marke { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: 999px; background: var(--nacht); color: var(--auf-dunkel); font: 700 .6875rem/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }

/* Bestellstatus: Text plus Punkt, nie nur Farbe */
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 11px; border-radius: 999px; font: 600 .78rem/1.2 var(--sans); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.status--eingegangen { background: #E9EEF0; color: #24404A; }
.status--bearbeitung { background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); }
.status--abgeschlossen { background: rgb(16 26 20 / .06); color: var(--tinte-2); }

/* ---------- Passwortfeld mit „Anzeigen“ (Muster für Kasse und Konto) ---------- */
.passwort { position: relative; }
.passwort .eingabe { padding-right: 7.4em; }
.passwort__zeigen {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--tannengruen); font: 600 .875rem/1 var(--sans);
}
.passwort__zeigen:hover { background: rgb(29 77 53 / .08); }
.passwort__zeigen .icon { width: 18px; height: 18px; }
.passwort__feststell { display: flex; gap: 6px; align-items: center; color: #6A4B00; font-weight: 600; }
.passwort__feststell::before { content: "⇪"; font-size: 1rem; line-height: 1; }
.passwort__regel { display: flex; gap: 7px; align-items: flex-start; }
.passwort__regel .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--linie); stroke-width: 2.4; transition: color .2s; }
.passwort__regel.ist-erfuellt .icon { color: var(--rasengruen); }

/* ---------- Kopf von „Mein Konto“: knapp ---------- */
.konto-kopf { padding: 4px 0 12px; }
@media (min-width: 900px) { .konto-kopf { padding: 12px 0 26px; } }
.konto-kopf__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; }
.konto-kopf__titel { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.konto-kopf__titel:focus, .konto-teil__titel:focus, .konto-karte__titel:focus { outline: none; }
.konto-kopf__wer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; }
.konto-kopf__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.konto-kopf__mail { margin: 0; color: var(--tinte-2); font-size: .875rem; overflow-wrap: anywhere; }
.konto-kopf__ab { grid-column: 2; grid-row: 1 / span 2; }
.konto-kopf__b2b { display: inline-flex; align-items: center; gap: 6px; color: var(--tannengruen); font-size: .8125rem; font-weight: 600; }
.konto-kopf__b2b .icon { width: 15px; height: 15px; }
@media (min-width: 1000px) {
  .konto-kopf__wer { width: auto; grid-template-columns: auto; justify-items: end; text-align: right; }
  .konto-kopf__name { justify-content: flex-end; }
  .konto-kopf__ab { display: none; }
}

/* ---------- Abgemeldet: Umschalter (Handy), Karten nebeneinander (ab 1000 px) ---------- */
.konto-ab { padding-bottom: clamp(40px, 6vw, 80px); }
.konto-ab__ziel { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-s); background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font-size: .9375rem; font-weight: 500; }
.konto-umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid rgb(16 26 20 / .06); border-radius: 999px; background: rgb(16 26 20 / .06); }
.konto-umschalter__knopf { min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--tinte-2); font: 600 .9375rem/1.1 var(--sans); transition: background-color .2s, color .2s, box-shadow .2s; }
.konto-umschalter__knopf[aria-selected="true"] { background: var(--karte); color: var(--tinte); box-shadow: 0 1px 2px rgb(10 21 16 / .08), 0 6px 14px -8px rgb(10 21 16 / .3); }
.konto-umschalter__knopf:focus-visible { outline-offset: 1px; }
.konto-ab__raster { display: grid; gap: 18px; align-items: start; }
.konto-ab__raster > * { min-width: 0; }
.konto-karte { padding: 18px; }
.konto-karte__titel { margin-bottom: 16px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.konto-karte--schmal { max-width: 560px; margin-inline: auto; }
@media (min-width: 600px) { .konto-karte { padding: 26px 28px; } }
@media (max-width: 999px) {
  .konto-ab__raster > [role="tabpanel"]:not(.ist-aktiv) { display: none; }
  /* Der Reiter nennt schon „Anmelden“ bzw. „Registrieren“: Überschrift nur für Screenreader */
  .konto-ab__raster > [role="tabpanel"] > .konto-karte__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1000px) {
  .konto-umschalter { display: none; }
  .konto-ab__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}
.konto-form { display: grid; gap: 16px; }
.konto-form .fehlerliste { margin: 0; }
.konto-form__text { margin: 0; }
.konto-form__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: -6px; }
.konto-form__zeile .haekchen { padding: 8px 0; }
.konto-form .btn--breit { margin-top: 2px; }
.konto-vorteile { margin: -4px 0 2px; font-size: .9375rem; gap: 6px; }
.konto-datenschutz { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--tinte-2); font-size: .875rem; line-height: 1.5; }
.konto-datenschutz .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--tannengruen); }
.konto-datenschutz a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.konto-gast { margin: 0; color: var(--tinte-2); font-size: .875rem; text-align: center; }

/* Social Login: im Entwurf neutrale Knöpfe; die Original-Knöpfe der Anbieter kommen mit dem Plugin */
.sozial { margin-top: 22px; }
.sozial__trenner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--tinte-2); font-size: .8125rem; }
.sozial__trenner::before, .sozial__trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.sozial__knoepfe { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sozial__knopf {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: .6em 1em; border: 1px solid var(--linie);
  border-radius: 999px; background: #fff; color: var(--tinte); font: 600 .9375rem/1.2 var(--sans); transition: border-color .2s, background-color .2s;
}
.sozial__knopf:hover { border-color: var(--tinte); }
.sozial__hinweis { margin: 10px 0 0; color: var(--tinte-2); font-size: .8125rem; line-height: 1.45; }

/* Hinweis auf die Landschaftsbauer-Seite */
.konto-b2b {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: var(--r-l); text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.konto-b2b:hover { transform: translateY(-2px); box-shadow: var(--schatten-1); }
.dunkel.konto-b2b { color: var(--auf-dunkel); }
.konto-b2b__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--wald-700); color: var(--hellgruen); }
.konto-b2b__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.konto-b2b__text b { font: 600 1.02rem/1.3 var(--kopf); color: var(--auf-dunkel); }
.konto-b2b__text span { color: var(--auf-dunkel-2); font-size: .875rem; }
.konto-b2b__pfeil { color: var(--hellgruen); }

/* ---------- Angemeldet: Entwurfsleiste, Bereiche, Inhalt ---------- */
.konto-bereich { padding-bottom: clamp(40px, 6vw, 80px); }
.entwurfsleiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; margin: 0 0 14px; padding: 4px 12px;
  border: 1.5px dashed rgb(29 77 53 / .35); border-radius: var(--r-m); background: var(--hellgruen-flaeche); font-size: .8125rem; line-height: 1.4;
}
@media (min-width: 700px) { .entwurfsleiste { padding: 6px 14px; font-size: .875rem; } }
.entwurfsleiste__text { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 6px 0 2px; }
.entwurfsleiste__text .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--tannengruen); }
.entwurfsleiste__schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.konto-bereich__raster > * { min-width: 0; }

/* Bereiche: Handy waagerecht wischbare Leiste, ab 1000 px Seitenleiste */
.konto-nav { margin: 0 0 18px; }
.konto-nav__liste {
  display: flex; gap: 8px; margin: 0 calc(-1 * var(--rand)); padding: 2px var(--rand) 6px; list-style: none; overflow-x: auto;
  scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: var(--rand);
}
.konto-nav__liste::-webkit-scrollbar { display: none; }
.konto-nav__liste.ist-mehr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.konto-nav__liste li { flex: none; }
.konto-nav__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--tinte); font: 600 .875rem/1.1 var(--sans); text-decoration: none; white-space: nowrap; transition: border-color .2s, background-color .2s;
}
.konto-nav__link:hover { border-color: var(--tannengruen); color: var(--tinte); }
.konto-nav__link .icon { width: 17px; height: 17px; color: var(--tannengruen); }
.konto-nav__link[aria-current="page"] { border-color: var(--nacht); background: var(--nacht); color: var(--auf-dunkel); }
.konto-nav__link[aria-current="page"] .icon { color: var(--hellgruen); }
.konto-nav__zahl:empty { display: none; }
.konto-nav__zahl { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font: 700 .75rem/22px var(--sans); text-align: center; }
.konto-nav__link[aria-current="page"] .konto-nav__zahl { background: var(--hellgruen); color: var(--nacht); }
.konto-nav__ab { display: none; }
@media (min-width: 1000px) {
  .konto-bereich__raster { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 40px; align-items: start; }
  .konto-nav { position: sticky; top: calc(var(--kopf-h) + 20px); margin: 0; padding: 10px; border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--karte); box-shadow: var(--schatten-1); }
  .konto-nav__liste { flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .konto-nav__liste.ist-mehr { -webkit-mask-image: none; mask-image: none; }
  .konto-nav__link { display: flex; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: none; font-size: .9375rem; }
  .konto-nav__link:hover { background: rgb(16 26 20 / .05); }
  .konto-nav__link[aria-current="page"] { background: var(--nacht); }
  .konto-nav__zahl { margin-left: auto; }
  .konto-nav__ab { display: flex; justify-content: flex-start; width: 100%; min-height: 48px; margin-top: 8px; padding: 0 14px; border-top: 1px solid var(--linie); border-radius: 0 0 12px 12px; }
}
.konto-teil__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.konto-teil__titel { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); }
.konto-teil > .konto-teil__titel { margin-bottom: 16px; }
.konto-teil__kopf .konto-teil__titel { margin: 0; }
.konto-teil__zeile { margin: 0; font-size: .9375rem; }
@media (prefers-reduced-motion: no-preference) { .konto-teil:not([hidden]) { animation: weich .35s var(--ease) both; } }

/* ---------- Übersicht ---------- */
.uebersicht { display: grid; gap: 14px; }
.uebersicht > * { min-width: 0; }
@media (min-width: 760px) { .uebersicht { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .schnellwege, .uebersicht__b2b { grid-column: 1 / -1; } }
.termin-karte { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; border-radius: var(--r-l); }
.termin-karte__fuss { margin-top: auto; padding-top: 6px; }
.termin-karte__label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--hellgruen); font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.termin-karte__label .icon { width: 16px; height: 16px; }
.termin-karte__art { margin: 4px 0 0; color: var(--auf-dunkel-2); font-size: .9375rem; }
.termin-karte__datum { margin: 0; font: 700 clamp(1.45rem, 1.1rem + 1.5vw, 2rem)/1.15 var(--kopf); color: var(--auf-dunkel); }
.termin-karte__ort { margin: 0; color: var(--auf-dunkel-2); font-size: .9375rem; }
.termin-karte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.termin-karte .link-pfeil { color: var(--hellgruen); }
.termin-karte__spirale { position: absolute; right: -50px; bottom: -60px; width: 190px; height: 190px; color: var(--wald-700); fill: none; stroke: currentColor; stroke-width: 1.2; pointer-events: none; }
.termin-karte > :not(.termin-karte__spirale) { position: relative; }
.letzte { display: grid; gap: 10px; align-content: start; padding: 18px 20px 20px; }
.letzte__label { margin: 0; color: var(--tannengruen); font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.letzte__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.letzte__nr { margin: 0; font: 700 1.1rem/1.2 var(--kopf); }
.letzte__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
.letzte__summe { font: 700 1.25rem/1 var(--kopf); }
.leer-karte { display: grid; gap: 10px; justify-items: start; padding: 20px; }
.leer-karte p { margin: 0; }
.schnellwege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .schnellwege { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schnellweg {
  display: grid; gap: 4px; align-content: start; height: 100%; min-height: 96px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--karte); color: var(--tinte); text-decoration: none; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.schnellweg:hover { border-color: var(--tannengruen); color: var(--tinte); transform: translateY(-2px); box-shadow: var(--schatten-1); }
.schnellweg .icon { width: 22px; height: 22px; margin-bottom: 4px; color: var(--tannengruen); }
.schnellweg b { font: 600 .98rem/1.25 var(--kopf); hyphens: auto; overflow-wrap: break-word; }
.schnellweg span { color: var(--tinte-2); font-size: .8125rem; line-height: 1.35; }
.uebersicht__b2b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 16px 20px; border-radius: var(--r-l); }
.uebersicht__b2b p { margin: 0; }
.uebersicht__b2b b { display: block; font: 600 1.05rem/1.3 var(--kopf); color: var(--auf-dunkel); }

/* Kleine Produktbilder (KI-Hinweis über .mini-foto) */
.daumen { width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: #fff; }
.daumen img { width: 100%; height: 100%; object-fit: cover; }
.daumen--produkt img { object-fit: contain; padding: 4px; }

/* ---------- Bestellungen ---------- */
.bestellungen { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bestellung { display: grid; gap: 12px; padding: 16px 16px 14px; }
@media (min-width: 600px) { .bestellung { padding: 20px 22px 18px; } }
.bestellung__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.bestellung__titel { display: grid; gap: 2px; margin: 0; }
.bestellung__nr { font: 700 1.05rem/1.25 var(--kopf); overflow-wrap: anywhere; }
.bestellung__datum { color: var(--tinte-2); font-size: .8125rem; }
.bestellung__marken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bestellung__termin { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 600; line-height: 1.4; }
.bestellung__termin .icon { width: 19px; height: 19px; margin-top: 1px; color: var(--tannengruen); }
.bestellung__termin small { display: block; color: var(--tinte-2); font-weight: 400; font-size: .8125rem; }
.posten-kurz { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.posten-kurz li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: .9375rem; line-height: 1.35; }
.posten-kurz li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.posten-kurz small { display: block; color: var(--tinte-2); font-size: .8125rem; }
.bestellung__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.bestellung__summe { display: grid; gap: 2px; }
.bestellung__summe b { font: 700 1.25rem/1 var(--kopf); }
.bestellung__summe small { color: var(--tinte-2); font-size: .75rem; }
.bestellung__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.widerruf-zeile { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--tinte-2); font-size: .8125rem; line-height: 1.45; }
.widerruf-zeile .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--tinte-2); }
.bestellungen__leer { padding: 20px; }

/* ---------- Bestellung im Detail ---------- */
.detail { display: grid; gap: 16px; }
.detail > * { min-width: 0; }
.detail__marken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -6px; }
.detail__karte { padding: 18px; }
@media (min-width: 600px) { .detail__karte { padding: 22px 24px; } }
.detail__karte h3 { margin-bottom: 12px; font-size: 1.15rem; }
.verlauf { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.verlauf::before { content: ""; position: absolute; left: 16.67%; right: 16.67%; top: 13px; height: 2px; background: var(--linie); }
.verlauf li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: .8125rem; line-height: 1.3; color: var(--tinte-2); }
.verlauf li::before { content: ""; z-index: 1; width: 28px; height: 28px; border: 2px solid var(--linie); border-radius: 50%; background: var(--karte); }
.verlauf li.ist-fertig::before {
  border-color: var(--rasengruen); background: var(--rasengruen) center / 16px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.verlauf li.ist-jetzt::before { border-color: var(--rasengruen); box-shadow: 0 0 0 5px rgb(46 125 50 / .16); }
.verlauf b { color: var(--tinte); font-weight: 600; }
.detail__daten { display: grid; gap: 0; margin: 0; }
.detail__daten div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: .9375rem; }
.detail__daten div:last-child { border-bottom: 0; }
.detail__daten dt { color: var(--tinte-2); }
.detail__daten dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 380px) { .detail__daten div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.posten { display: grid; margin: 0; padding: 0; list-style: none; }
.posten li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.posten li:first-child { padding-top: 0; }
.posten__name { margin: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.posten__name a { color: inherit; text-decoration: none; }
.posten__name a:hover { color: var(--tannengruen); text-decoration: underline; }
.posten__angaben { margin: 2px 0 0; color: var(--tinte-2); font-size: .8125rem; line-height: 1.45; }
.posten__preis { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
.posten__preis small { display: block; color: var(--tinte-2); font-weight: 400; font-size: .75rem; }
.summen { display: grid; margin: 12px 0 0; }
.summen div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: .9375rem; }
.summen dt { color: var(--tinte-2); }
.summen dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summen .summen__gesamt { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--linie); font-weight: 700; }
.summen .summen__gesamt dt { color: var(--tinte); }
.summen .summen__gesamt dd { font: 700 1.3rem/1 var(--kopf); }
.summen .summen__steuer { padding: 2px 0; font-size: .8125rem; }
.detail__adressen { display: grid; gap: 14px; }
@media (min-width: 700px) { .detail__adressen { grid-template-columns: 1fr 1fr; } }
.detail__adressen h4 { margin: 0 0 6px; font: 600 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tannengruen); }
.detail__adressen address { font-style: normal; line-height: 1.55; overflow-wrap: anywhere; }
.detail__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.detail__hilfe { margin: 0; color: var(--tinte-2); font-size: .875rem; }

/* ---------- Adressen ---------- */
.adressen { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .adressen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.adresse { padding: 18px; }
@media (min-width: 600px) { .adresse { padding: 22px 24px; } }
.adresse__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.adresse__kopf h3 { font-size: 1.15rem; }
.adresse__text { line-height: 1.6; overflow-wrap: anywhere; }
.adresse__text p { margin: 0; }
.adresse__text .leise { font-size: .875rem; }
.adresse__form { display: grid; gap: 14px; margin-top: 4px; }
.adresse__form .fehlerliste { margin: 0; }
.adresse__knoepfe { margin-top: 2px; }
.adresse__ok:empty, .kontodaten__ok:empty { display: none; }
.adresse__ok, .kontodaten__ok { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; color: var(--tannengruen-dunkel); font-weight: 600; font-size: .9375rem; }
.adresse__ok::before, .kontodaten__ok::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--rasengruen) center / 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.konto-felder { display: grid; gap: 14px; }
.konto-felder > * { min-width: 0; }
@container (min-width: 440px) { .konto-felder:not(.konto-felder--eins) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Kontodaten ---------- */
.kontodaten { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .kontodaten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kontodaten__sozial { grid-column: 1 / -1; } }
.kontodaten__karte { display: grid; gap: 14px; padding: 18px; }
@media (min-width: 600px) { .kontodaten__karte { padding: 22px 24px; } }
.kontodaten__karte h3 { font-size: 1.15rem; }
.kontodaten__karte .fehlerliste, .kontodaten__karte .knoepfe { margin: 0; }
.kontodaten__karte > p { margin: 0; }
.verknuepft { display: grid; margin: 0; padding: 0; list-style: none; }
.verknuepft li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.verknuepft li:last-child { border-bottom: 0; }
.verknuepft li > span:first-child { font-weight: 600; }
.verknuepft__stand { grid-column: 1; color: var(--tinte-2); font-size: .8125rem; }
.verknuepft .konto-knopf { grid-column: 2; grid-row: 1 / span 2; }
.kontodaten__ab { margin-top: 16px; }
@media (min-width: 1000px) { .kontodaten__ab { display: none; } }

/* ---------- Ihre Konditionen (Landschaftsbauer) ---------- */
.konditionen__marken { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.konditionen__text { margin: -4px 0 14px; max-width: 62ch; font-size: .9375rem; }
.konditionen__tabelle { padding: 6px 4px; overflow: hidden; }
.konditionen__preise { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.konditionen__preise th, .konditionen__preise td { padding: 11px 10px; border-bottom: 1px solid var(--linie); text-align: right; }
.konditionen__preise tr:last-child th, .konditionen__preise tr:last-child td { border-bottom: 0; }
.konditionen__preise thead th { color: var(--tinte-2); font: 600 .75rem/1.25 var(--sans); vertical-align: bottom; }
.konditionen__preise thead th:first-child, .konditionen__preise tbody th { text-align: left; }
.konditionen__preise tbody th { font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
.konditionen__preise td { white-space: nowrap; }
.konditionen__preise td.ist-aktiv { border-radius: 8px; background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--rasengruen); }
@media (max-width: 459px) {
  .konditionen__preise { font-size: .8125rem; }
  .konditionen__preise th, .konditionen__preise td { padding: 10px 4px; }
  .konditionen__preise .nur-breit { display: none; }
}
.lb-rechner { display: grid; gap: 14px; margin-top: 16px; padding: 18px; }
@media (min-width: 600px) { .lb-rechner { padding: 22px 24px; } }
.lb-rechner__titel { font-size: 1.15rem; }
.lb-rechner__felder { display: grid; gap: 14px; }
@media (min-width: 560px) { .lb-rechner__felder { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.lb-rechner__ergebnis { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-m); background: var(--nacht); color: var(--auf-dunkel); line-height: 1.4; }
.lb-rechner__ergebnis b { font: 700 clamp(1.35rem, 1.1rem + 1vw, 1.7rem)/1.15 var(--kopf); color: var(--hellgruen); }
.lb-rechner__ergebnis span { color: var(--auf-dunkel-2); font-size: .875rem; }
.lb-rechner .btn { justify-self: start; }
.konditionen__fuss { margin: 14px 0 0; font-size: .875rem; }

/* ---------- Hilfe (unten auf „Mein Konto“) ---------- */
.konto-hilfe { padding-block: clamp(48px, 6vw, 88px); }
.konto-hilfe__raster { display: grid; gap: 20px; align-items: center; }
.konto-hilfe__raster h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.konto-hilfe__raster p { margin-bottom: 0; }
.konto-hilfe__karte { margin: 0; }
@media (min-width: 900px) { .konto-hilfe__raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; } }

/* ==========================================================================================
   Landschaftsbauer (landschaftsbauer.html)
   ========================================================================================== */
.lb-kopf { position: relative; isolation: isolate; overflow: hidden; padding: 4px 0 clamp(40px, 7vw, 104px); }
.lb-kopf__bild { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--wald-800); }
.lb-kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.lb-kopf__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 21 16 / .62), rgb(10 21 16 / .9)); }
@media (min-width: 900px) { .lb-kopf__bild::after { background: linear-gradient(90deg, rgb(10 21 16 / .92) 0%, rgb(10 21 16 / .74) 46%, rgb(10 21 16 / .3) 100%); } }
.lb-kopf .brotkrumen ol { color: var(--auf-dunkel-2); }
.lb-kopf .brotkrumen li:not(:last-child)::after { color: rgb(243 240 232 / .3); }
.lb-kopf .brotkrumen a { color: var(--auf-dunkel-2); }
.lb-kopf .brotkrumen a:hover { color: var(--auf-dunkel); }
.lb-kopf .brotkrumen [aria-current] { color: var(--auf-dunkel); }
.lb-kopf .kicker { margin: 10px 0 14px; }
.lb-kopf__titel { max-width: 15ch; font-size: clamp(2rem, 1.3rem + 3.4vw, 4.2rem); hyphens: auto; overflow-wrap: break-word; }
.lb-kopf__lead { max-width: 44ch; margin: 14px 0 0; color: rgb(243 240 232 / .88); font-size: 1.0625rem; }
.lb-kopf__knoepfe { margin-top: 22px; }
@media (max-width: 559px) { .lb-kopf__knoepfe { display: grid; } }
.lb-kopf__fakten { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--auf-dunkel-2); font-size: .875rem; }
.lb-kopf__fakten li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.lb-kopf__fakten .icon { width: 16px; height: 16px; color: var(--hellgruen); }
.lb-kopf__bild > .ki-hinweis { right: 12px; bottom: 10px; }

.lb-vorteile__raster { display: grid; gap: 18px; }
.lb-vorteile__raster > * { min-width: 0; }
@media (min-width: 1000px) { .lb-vorteile__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; } }
.lb-vorteile__liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .lb-vorteile__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.lb-vorteil { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 16px; }
.lb-vorteil__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); }
.lb-vorteil h3 { align-self: center; font-size: 1.12rem; }
.lb-vorteil p { margin: 0; color: var(--tinte-2); font-size: .9375rem; }
@media (min-width: 600px) {
  .lb-vorteil { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px; }
  .lb-vorteil__icon { grid-row: auto; margin-bottom: 6px; }
}
.lb-vorteile__bild { aspect-ratio: 16 / 10; margin: 0; }
@media (min-width: 1000px) { .lb-vorteile__bild { aspect-ratio: auto; min-height: 100%; } }

/* Ablauf: Linie und Punkte füllen sich, sobald die Schritte eingeblendet sind (.ist-da aus kahl.js bzw. aus den
   Aufnahmen); ohne Bewegung sofort im Endzustand */
.lb-ablauf .zeitleiste::after { transition: height 1.2s var(--ease) .2s, width 1.2s var(--ease) .2s; }
.lb-ablauf .zeitleiste li::before { transition: background-color .4s, border-color .4s; transition-delay: calc(var(--i, 0) * 380ms + 200ms); }
.lb-ablauf .zeitleiste li:nth-child(2) { --i: 1; }
.lb-ablauf .zeitleiste li:nth-child(3) { --i: 2; }
.lb-ablauf .zeitleiste.ist-da, html:not(.js) .lb-ablauf .zeitleiste { --fuell: 1; }
.lb-ablauf .zeitleiste.ist-da li::before, html:not(.js) .lb-ablauf .zeitleiste li::before { border-color: var(--hellgruen); background: var(--hellgruen); }
@media (prefers-reduced-motion: reduce) { .lb-ablauf .zeitleiste::after, .lb-ablauf .zeitleiste li::before { transition: none; } }
@media (min-width: 900px) { .lb-ablauf .zeitleiste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lb-anmeldung__raster { display: grid; gap: 22px; align-items: start; }
.lb-anmeldung__raster > * { min-width: 0; }
@media (min-width: 1000px) {
  .lb-anmeldung__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 36px; }
  .lb-seite { position: sticky; top: calc(var(--kopf-h) + 24px); }
}
.lb-form { padding: 20px 18px; }
@media (min-width: 600px) { .lb-form { padding: clamp(24px, 3vw, 40px); } }
.lb-form .kicker { margin-bottom: 12px; }
.lb-form__titel { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.lb-form__text { margin: 12px 0 18px; font-size: .9375rem; }
.lb-felder { margin-top: 18px; }
.lb-form .fehlerliste + .lb-felder { margin-top: 18px; }
.lb-gruppe { min-width: 0; margin: 0; padding: 0; border: 0; }
.lb-gruppe > legend { margin-bottom: 10px; padding: 0; color: var(--tannengruen); font: 600 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.lb-felder textarea.eingabe { min-height: 112px; resize: vertical; }
.lb-form__knoepfe { margin-top: 22px; }
@media (max-width: 599px) { .lb-form__knoepfe .btn { width: 100%; padding-inline: 1em; font-size: .9375rem; } }
.lb-bestaetigung__titel { margin: 6px 0 0; font-size: 1.05rem; }
.lb-schritte { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; }
.lb-schritte li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.lb-schritte li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); font: 700 .9375rem/1 var(--kopf); }
.lb-schritte p { margin: 4px 0 0; overflow-wrap: anywhere; }

.lb-seite { display: grid; gap: 16px; }
.lb-vorschau, .lb-schon { padding: 20px; }
.lb-vorschau .kicker { margin-bottom: 10px; }
.lb-vorschau__titel { margin-bottom: 6px; font-size: 1.25rem; }
.lb-vorschau p { margin: 0; }
.lb-vorschau__tabelle { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 9px 6px; align-items: center; margin: 16px 0 14px; font-size: .75rem; line-height: 1.2; }
.lb-vorschau__tabelle b { color: var(--tinte-2); font-weight: 600; overflow-wrap: anywhere; }
.lb-vorschau__tabelle > b:nth-child(-n+5) { text-align: center; font-weight: 500; }
.lb-vorschau__tabelle i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--leinen), var(--linie)); }
.lb-vorschau__schloss { display: flex; align-items: center; gap: 8px; color: var(--tannengruen); font-weight: 600; font-size: .9375rem; }
.lb-vorschau__schloss .icon { width: 18px; height: 18px; }
.lb-schon h3 { margin-bottom: 4px; font-size: 1.2rem; }
.lb-schon p { margin: 0 0 12px; }

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