/* ==========================================================================
   Umzug-Seiten (/webflow-umziehen/, /wordpress-zu-statischer-website/) und die
   neuen Abschnitte auf /webhosting/. Präfix ku-.
   Baut auf webdesign.css (kw-*), webhosting.css (kwh-*) und style.css (Tokens) auf.
   Nur Tokens aus style.css, damit Hell und Dunkel passen.
   Eigene Farben: Warnton (gelber Ampel-Status) und PageSpeed-Grün, Kontrast nachgerechnet.
   ========================================================================== */

:root { --ku-warn: #93370d; --ku-warn-bg: #fef0c7; --ku-ps: #0a7d36; --ku-ps-spur: #e8f7ee; }
:root[data-theme="dark"] { --ku-warn: #fec84b; --ku-warn-bg: rgba(254, 200, 75, 0.14); --ku-ps: #4ade80; --ku-ps-spur: rgba(74, 222, 128, 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ku-warn: #fec84b; --ku-warn-bg: rgba(254, 200, 75, 0.14); --ku-ps: #4ade80; --ku-ps-spur: rgba(74, 222, 128, 0.16); } }

/* ---------- Pfad-Grafik (Hero Webflow, Abschnitt Baukasten) ---------- */
.ku-pfad { margin: 0; min-width: 0; }
.ku-pfad-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; }
.ku-station { position: relative; display: flex; align-items: center; gap: 1rem; background: var(--bg-elev); border: 1px solid var(--text-faint); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1rem 1.2rem; min-width: 0; }
.ku-station--ziel { border: 2px solid var(--accent); padding: calc(1rem - 1px) calc(1.2rem - 1px); box-shadow: var(--shadow); }
.ku-station-txt { display: flex; flex-direction: column; gap: .3rem; min-width: 0; line-height: 1.35; }
.ku-station-txt b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text); }
.ku-station-tag { align-self: flex-start; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: .15rem .65rem; }
.ku-station-sg { flex: none; }
.ku-station-sg .siegel-rund { width: 88px; }
/* Pfeil zur nächsten Station (nach unten) */
.ku-station:not(:last-child)::after { content: ""; position: absolute; left: 2.2rem; top: 100%; width: 2px; height: 2.4rem; background: var(--accent-hover); }
.ku-station:not(:last-child)::before { content: ""; position: absolute; left: calc(2.2rem - 4px); top: calc(100% + 2.4rem - 9px); width: 9px; height: 9px; border-right: 2px solid var(--accent-hover); border-bottom: 2px solid var(--accent-hover); transform: rotate(45deg); }
.ku-haken { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.ku-haken li { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 600; font-size: .98rem; }
.ku-haken svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--kwh-ok); color: var(--bg-elev); stroke-width: 3; }
/* Breite Variante (Abschnitt auf /webhosting/) */
@media (min-width: 821px) {
  .ku-pfad--quer .ku-pfad-liste { flex-direction: row; gap: 3rem; align-items: stretch; }
  .ku-pfad--quer .ku-station { flex: 1 1 0; }
  .ku-pfad--quer .ku-station:not(:last-child)::after { left: 100%; top: 50%; width: 3rem; height: 2px; }
  .ku-pfad--quer .ku-station:not(:last-child)::before { left: calc(100% + 3rem - 9px); top: calc(50% - 4px); transform: rotate(-45deg); }
  .ku-pfad--quer .ku-haken { justify-content: center; }
}
@media (max-width: 480px) { .ku-station { padding: .9rem 1rem; gap: .8rem; } .ku-station-sg .siegel-rund { width: 76px; } .ku-station:not(:last-child)::after { left: 1.9rem; } .ku-station:not(:last-child)::before { left: calc(1.9rem - 4px); } }

/* ---------- Knoten-Ketten (Datenstandort, WordPress gegen statisch) ---------- */
.ku-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; counter-reset: none; }
.ku-nodes li { position: relative; background: var(--bg-elev); border: 1px solid var(--text-faint); border-radius: var(--radius); padding: .65rem .9rem; font-weight: 600; font-size: .98rem; line-height: 1.35; color: var(--text); text-align: center; overflow-wrap: anywhere; }
.ku-nodes li:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 1.5rem; margin-left: -1px; background: var(--accent-hover); }
.ku-nodes li:not(:last-child)::before { content: ""; position: absolute; left: 50%; top: calc(100% + 1.5rem - 8px); width: 8px; height: 8px; margin-left: -4px; border-right: 2px solid var(--accent-hover); border-bottom: 2px solid var(--accent-hover); transform: rotate(45deg); }

.ku-kette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.ku-kette-spalte { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.2rem 1rem 1.3rem; min-width: 0; }
.ku-kette-spalte h3 { font-size: 1.1rem; margin-bottom: 1rem; text-align: center; }
.ku-kette-spalte--kurz { background: var(--kwh-ok-bg); border: 2px solid var(--kwh-ok); padding: calc(1.2rem - 1px) calc(1rem - 1px) calc(1.3rem - 1px); }
.ku-kette-spalte--kurz .ku-nodes li { border-color: var(--kwh-ok); }
.ku-kette-spalte--kurz .ku-nodes li:not(:last-child)::after { background: var(--kwh-ok); }
.ku-kette-spalte--kurz .ku-nodes li:not(:last-child)::before { border-color: var(--kwh-ok); }
@media (max-width: 480px) { .ku-kette { gap: .7rem; } .ku-kette-spalte { padding-inline: .6rem; } .ku-nodes li { font-size: .9rem; padding-inline: .5rem; } }

/* ---------- Gründe / große Kacheln ---------- */
.ku-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.ku-tile { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.4rem, 2.8vw, 2rem); min-width: 0; }
.ku-tile--hl { border: 2px solid var(--accent); box-shadow: var(--shadow); padding: calc(clamp(1.4rem, 2.8vw, 2rem) - 1px); }
.ku-tile h3 { font-size: 1.3rem; margin-top: 1.2rem; }
.ku-tile p { color: var(--text-muted); margin-top: .6rem; }
.ku-ico { width: 64px; height: 64px; }
@media (max-width: 760px) { .ku-tiles { grid-template-columns: 1fr; } }
.ku-vorteile .kw-tile h3 { margin-top: 1.2rem; }
@media (min-width: 961px) {
  .ku-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ku-vorteile .kw-tile:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); grid-template-areas: "ico fig" "h fig" "t fig"; column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .ku-vorteile .kw-tile:first-child .ku-ico { grid-area: ico; }
  .ku-vorteile .kw-tile:first-child h3 { grid-area: h; }
  .ku-vorteile .kw-tile:first-child > p { grid-area: t; }
  .ku-vorteile .kw-tile:first-child .ku-mini-ps { grid-area: fig; align-self: center; margin: 0; }
}

/* ---------- Quellen- und Hinweiszeilen ---------- */
.ku-quelle { margin: 1.4rem auto 0; max-width: 70ch; text-align: center; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }
.ku-zusatz { margin: 1.8rem auto 0; max-width: 70ch; text-align: center; color: var(--text-muted); font-size: 1.02rem; }
.ku-zusatz a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.ku-hinweis { margin: 1.2rem auto 0; max-width: 62ch; text-align: center; color: var(--text); font-weight: 600; font-size: 1.1rem; }
.ku-links { margin-top: 1.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ku-ref-link { margin-top: 2rem; text-align: center; }

/* ---------- Datenstandort: zweiteilige Karte ---------- */
.ku-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; max-width: 860px; margin: 0 auto; }
.ku-vkarte { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.2rem, 2.5vw, 1.7rem); min-width: 0; display: flex; flex-direction: column; }
.ku-vkarte--lm { border: 2px solid var(--accent); box-shadow: var(--shadow); padding: calc(clamp(1.2rem, 2.5vw, 1.7rem) - 1px); }
.ku-vkarte h3 { display: flex; align-items: center; gap: .8rem; font-size: 1.25rem; margin-bottom: 1.3rem; }
.ku-vkarte h3 .kw-ico { width: 44px; height: 44px; }
.ku-vkarte-sg { margin-top: auto; padding-top: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.ku-vkarte-sg .sg-bild { height: auto; }
.ku-vkarte-sg small { color: var(--text-muted); font-size: .88rem; }
.ku-zeile { margin: 1.3rem auto 0; max-width: 860px; text-align: center; font-size: .95rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: .55rem 1.2rem; width: fit-content; }
@media (max-width: 640px) { .ku-vergleich { grid-template-columns: 1fr; } .ku-zeile { border-radius: var(--radius); } .ku-vkarte-sg .siegel-pille { width: min(240px, 100%); } }

/* ---------- Tabellen (Export, Kosten) ---------- */
.ku-tabwrap { max-width: 1040px; margin: 0 auto; }
.ku-tab { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); font-size: 1rem; }
.ku-tab caption { text-align: left; }
.ku-tab th, .ku-tab td { padding: 1rem 1.15rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.5; }
.ku-tab tbody tr:last-child > * { border-bottom: 0; }
.ku-tab thead th { background: var(--surface-2); color: var(--text); font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border-strong); }
.ku-tab thead th.ku-tab-hl { background: var(--accent); color: var(--accent-ink); }
.ku-tab tbody th { font-weight: 600; color: var(--text); width: 24%; }
.ku-tab td { color: var(--text-muted); }
.ku-tab td.ku-tab-hl { background: var(--accent-soft); color: var(--text); }
.ku-bereich { display: flex; align-items: flex-start; gap: .7rem; }
.ku-mini-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hover); border: 1.5px solid var(--accent); }
.ku-status { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .5rem; padding: .15rem .65rem .15rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--accent-hover); background: var(--bg-elev); border: 1px solid var(--accent); }
.ku-status svg { flex: none; }
.ku-status--ok { color: var(--kwh-ok); border-color: var(--kwh-ok); background: var(--kwh-ok-bg); }
.ku-tab td.ku-tab-hl > .ku-status { display: flex; width: fit-content; }
.ku-tabwrap--kosten .ku-tab tbody th { width: 20%; }
@media (max-width: 760px) {
  .ku-tab, .ku-tab tbody, .ku-tab tr, .ku-tab th, .ku-tab td { display: block; }
  .ku-tab { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .ku-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ku-tab tbody tr { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 1rem; }
  .ku-tab tbody th { width: auto; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); }
  .ku-tabwrap--kosten .ku-tab tbody th { width: auto; }
  .ku-tab td { border-bottom: 1px solid var(--border); }
  .ku-tab tbody tr td:last-child { border-bottom: 0; }
  .ku-tab td::before { content: attr(data-label); display: block; margin-bottom: .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
}

/* ---------- Zeitstrahl mit Icons ---------- */
.ku-line .kwh-no svg { display: block; }
.ku-schritt { margin-top: 1.1rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ku-line .kwh-stop h3 { margin-top: .3rem; }
.ku-redirect { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; padding: .4rem .7rem; border: 1px dashed var(--accent-hover); border-radius: var(--radius); background: var(--bg-elev); font-size: .85rem; font-weight: 600; color: var(--text); flex-wrap: wrap; }
.ku-redirect svg { flex: none; color: var(--accent-hover); }
.band .ku-line .kwh-no { box-shadow: 0 0 0 6px var(--surface); }
section:not(.band) .ku-line .kwh-no { box-shadow: 0 0 0 6px var(--bg); }
@media (max-width: 960px) { .ku-line .kwh-stop { padding-left: 4.8rem; } .ku-line .ku-schritt { margin-top: .2rem; } }

/* ---------- Referenz Der Fritz ---------- */
.ku-kz { list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.ku-kz li { display: flex; flex-direction: column; gap: .5rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.3rem 1.4rem; min-width: 0; }
.ku-kz b { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.1; font-weight: 700; color: var(--accent-hover); }
.ku-kz b.ku-kz-text { font-size: clamp(1.3rem, 2.2vw, 1.6rem); padding-block: .45rem; }
.ku-kz span { color: var(--text-muted); line-height: 1.5; }
.ku-ref-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.ku-ref-zeile .kp-psi { margin-top: 0; }
.ku-ref-handy { width: 100%; max-width: 220px; margin-inline: auto; }
@media (max-width: 900px) { .ku-kz { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ku-ref-zeile { grid-template-columns: 1fr; } .ku-ref-handy { max-width: 200px; } }

/* ---------- WordPress: Grundlagen-Animation ---------- */
@keyframes ku-puls { 0%, 28%, 100% { box-shadow: var(--shadow-sm); border-color: var(--border); } 8%, 22% { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); } }
@media (prefers-reduced-motion: no-preference) {
  .ku-anim .kwh-stage { animation: ku-puls 9s ease-in-out infinite; }
  .ku-anim .kwh-stage:nth-child(2) { animation-delay: 3s; }
  .ku-anim .kwh-stage:nth-child(3) { animation-delay: 6s; }
}

/* ---------- WordPress: Möglichkeiten und Grenzen ---------- */
.ku-ampel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.ku-acard { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.3rem, 2.5vw, 1.8rem); min-width: 0; }
.ku-acard h3, .ku-pcard h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.2rem; margin-bottom: 1.1rem; }
.ku-acard ul, .ku-pcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.ku-acard li, .ku-pcard li { position: relative; padding-left: 1.4rem; color: var(--text); line-height: 1.5; }
.ku-acard li::before, .ku-pcard li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ku-farbe, var(--text-muted)); }
.ku-acard p { margin-top: 1.1rem; color: var(--text-muted); font-size: .98rem; }
.ku-aico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ku-farbe, var(--text-muted)); background: var(--ku-bg, var(--surface)); border: 1.5px solid var(--ku-farbe, var(--text-muted)); }
.ku-acard--gruen, .ku-pcard--ja { --ku-farbe: var(--kwh-ok); --ku-bg: var(--kwh-ok-bg); }
.ku-acard--gelb { --ku-farbe: var(--ku-warn); --ku-bg: var(--ku-warn-bg); }
.ku-acard--grau, .ku-pcard--nein { --ku-farbe: var(--text-muted); --ku-bg: var(--surface-2); }
@media (max-width: 960px) { .ku-ampel { grid-template-columns: 1fr; } }

/* ---------- WordPress: Vorteile, Mini-PageSpeed ---------- */
.ku-mini-ps { margin: 1.3rem 0 0; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ku-mini-ps ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; justify-content: center; }
.ku-mini-ps li { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ku-mini-ps li span { font-size: .85rem; font-weight: 600; color: var(--text); }
.ku-mini-ps figcaption { margin-top: .7rem; text-align: center; color: var(--text-muted); font-size: .82rem; line-height: 1.4; }
.ku-ps-spur { fill: var(--ku-ps-spur); stroke: var(--ku-ps-spur); stroke-width: 8; }
.ku-ps-wert { fill: none; stroke: var(--ku-ps); stroke-width: 8; stroke-linecap: round; }
.ku-mini-ps text { fill: var(--ku-ps); font-family: var(--font-sans); font-weight: 700; font-size: 30px; }

/* ---------- WordPress: Sicherheit, Balken ---------- */
.ku-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.ku-split-text p { color: var(--text-muted); margin-top: 1.1rem; }
.ku-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.ku-liste li { position: relative; padding-left: 1.4rem; color: var(--text); line-height: 1.55; }
.ku-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hover); }
.ku-balken { margin: 0; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.2rem, 2.5vw, 1.7rem); display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.ku-balken-zeile p { font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.ku-bar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--text-faint); }
.ku-bar-plug { display: flex; align-items: center; padding-left: .9rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.ku-bar-rest { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--text-faint) 4px 6px); }
.ku-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--text); font-size: .92rem; }
.ku-legende li { display: inline-flex; align-items: center; gap: .5rem; }
.ku-legende i { display: block; width: 18px; height: 12px; border-radius: 3px; }
.ku-l-plug { background: var(--accent); }
.ku-l-rest { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--text-faint) 3px 5px); border: 1px solid var(--text-faint); }
.ku-balken figcaption { color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
@media (max-width: 900px) { .ku-split { grid-template-columns: 1fr; } }

/* ---------- WordPress: Eignung ---------- */
.ku-passt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; max-width: 980px; margin: 0 auto; }
.ku-pcard { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.3rem, 2.5vw, 1.8rem); min-width: 0; }
@media (max-width: 760px) { .ku-passt { grid-template-columns: 1fr; } }

/* ---------- WordPress: Preiskarten ---------- */
.ku-preise { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; max-width: 760px; }
.ku-preise .kw-pack-price { font-size: 1.9rem; }
@media (max-width: 640px) { .ku-preise { grid-template-columns: 1fr; } }

/* ---------- Quellenliste am Seitenende ---------- */
.ku-quellen { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }
.ku-quellen h2 { font-family: var(--font-sans); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: .7rem; }
.ku-quellen ul { margin: 0; padding-left: 1.2rem; color: var(--text-muted); font-size: .85rem; line-height: 1.6; }

/* ---------- /webhosting/: neue Abschnitte ---------- */
.ku-split--eng { align-items: center; }
.ku-split-text .btn { margin-top: 1.4rem; }
.ku-split-text h2 { max-width: none; }
.ku-split-text .eyebrow { margin-bottom: 1rem; }
.ku-karte { margin: 0; min-width: 0; }
.ku-karte-feld { position: relative; aspect-ratio: 3 / 2; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ku-karte-feld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ku-k-gitter { stroke: var(--text-faint); stroke-width: 1; fill: none; opacity: .35; }
.ku-k-weg { stroke: var(--accent-hover); stroke-width: 2.5; stroke-dasharray: 7 6; fill: none; stroke-linecap: round; }
.ku-k-pin { fill: var(--accent-hover); stroke: var(--bg-elev); stroke-width: 2; }
.ku-k-punkt { fill: var(--bg-elev); }
.ku-k-label { position: absolute; transform: translate(-50%, 0); background: var(--bg-elev); border: 1px solid var(--text-faint); border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; font-weight: 700; color: var(--text); white-space: nowrap; box-shadow: var(--shadow-sm); }
.ku-k-label--server { left: 31.7%; top: 8%; }
.ku-k-label--sitz { left: 68.3%; top: 71%; }
.ku-karte-sg { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }
.ku-karte-sg .siegel-rund { width: 104px; }
.ku-karte-sg figcaption { color: var(--text-muted); font-size: .92rem; line-height: 1.5; }
@media (max-width: 400px) { .ku-k-label { font-size: .78rem; padding: .25rem .6rem; } }

.ku-stufen { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ku-stufen li { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; min-width: 0; }
.ku-stufen .kw-ico { width: 44px; height: 44px; margin-bottom: .3rem; }
.ku-stufen h3 { font-size: 1.1rem; }
.ku-stufen p { color: var(--text-muted); font-size: .95rem; line-height: 1.45; }
@media (max-width: 760px) { .ku-stufen { grid-template-columns: 1fr; } }

.ku-wege { list-style: none; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0; max-width: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.ku-weg { display: flex; flex-direction: column; gap: 1rem; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.3rem 1.4rem; min-width: 0; }
.ku-weg-pfad { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ku-weg-pfad span { padding: .4rem .9rem; border-radius: 999px; font-weight: 700; font-size: .95rem; background: var(--surface-2); border: 1px solid var(--text-faint); color: var(--text); }
.ku-weg-pfad span:last-child { background: var(--kwh-ok-bg); border-color: var(--kwh-ok); color: var(--kwh-ok); }
.ku-weg-pfad svg { flex: none; color: var(--accent-hover); }
.ku-weg a { color: var(--accent-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .ku-wege { grid-template-columns: 1fr; } }
.ku-pfad-sektion .ku-pfad { margin-top: 0; max-width: 980px; margin-inline: auto; }

/* ---------- Footer-Spalte „Website-Umzug“ liegt in style.css ---------- */

/* ---------- Bedienelemente und Etiketten: Rand mindestens 3:1 ---------- */
.kwh-form .form-field input, .kwh-form .form-field textarea { border-color: var(--text-faint); }
.ku-vorher .kp-vergleich__marke:not(.kp-vergleich__marke--neu) { border-color: var(--text-faint); }
#faq .faq-item { border-color: var(--text-faint); }