/* ==========================================================================
   Nur für /webhosting/: Grafiken der Abschnitte (Präfix kwh-).
   Kacheln, Preiskarten und Icons (kw-*) kommen aus webdesign.css (gemeinsam geladen).
   Nutzt ausschließlich die Tokens aus style.css, damit Hell und Dunkel passen.
   Ausnahme: Statusfarbe "ok" (eigene Werte, Kontrast nachgerechnet).
   ========================================================================== */

/* Statusfarbe: Hell 6,9:1 auf Weiß, Dunkel 9:1 auf der Kartenfläche */
:root { --kwh-ok: #067647; --kwh-ok-bg: #ecfdf3; }
:root[data-theme="dark"] { --kwh-ok: #6ce9a6; --kwh-ok-bg: rgba(108, 233, 166, 0.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kwh-ok: #6ce9a6; --kwh-ok-bg: rgba(108, 233, 166, 0.14); } }

/* ---------- Hero: Server-Statuskarte als UI-Nachbau ---------- */
.kwh-hero-grid { align-items: center; }
.kwh-hero-copy { min-width: 0; }
.kwh-hero-copy .page-back { display: flex; width: fit-content; }
.kwh-hero-copy h1 { max-width: none; font-size: clamp(2.1rem, 4.3vw, 3.4rem); }
.kwh-fig { margin: 0; min-width: 0; }
.kwh-card { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.kwh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.kwh-card-url { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--text); overflow-wrap: anywhere; }
.kwh-card-url svg { flex: none; color: var(--kwh-ok); }
.kwh-pill { display: inline-flex; align-items: center; gap: .45rem; flex: none; font-size: .85rem; font-weight: 700; color: var(--kwh-ok); background: var(--kwh-ok-bg); border: 1px solid var(--kwh-ok); border-radius: 999px; padding: .3rem .8rem; }
.kwh-pill i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--kwh-ok); }
.kwh-rows { list-style: none; margin: 0; padding: 1rem 0 0; display: flex; flex-direction: column; gap: .7rem; }
.kwh-row { display: flex; align-items: center; gap: .9rem; background: var(--surface); border-radius: var(--radius); padding: .8rem .95rem; }
.kwh-mico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hover); }
.kwh-mtxt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.kwh-mtxt > span { color: var(--text-muted); font-size: .92rem; }
.kwh-mtxt b { font-weight: 700; color: var(--text); font-size: 1.02rem; }
.kwh-tick { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--kwh-ok); color: var(--bg-elev); }
.kwh-seal { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }
.kwh-seal-bild { flex: none; }
.kwh-seal .siegel-rund { width: 104px; }
.kwh-seal figcaption { color: var(--text-muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 820px) { .kwh-hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kwh-seal .siegel-rund { width: 88px; } }

/* ---------- Datenschutz: Ablauf in 3 Stufen ---------- */
.kwh-flow { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.kwh-stage { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.3rem, 2.5vw, 1.7rem); min-width: 0; }
/* Pfeil zur nächsten Stufe */
.kwh-stage:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -1.6rem; width: 1.6rem; height: 2px; background: var(--accent-hover); transform: translateY(-50%); }
.kwh-stage:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: -1.6rem; width: 9px; height: 9px; border-top: 2px solid var(--accent-hover); border-right: 2px solid var(--accent-hover); transform: translateY(-50%) rotate(45deg); transform-origin: center; margin-right: 1px; }
.kwh-stage-no { margin-top: 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.kwh-stage h3 { font-size: 1.3rem; margin-top: .3rem; }
.kwh-stage p { color: var(--text-muted); margin-top: .5rem; }
.kwh-sg { max-width: 980px; margin-left: auto; margin-right: auto; }
.kwh-sg .sg-bild { width: auto; height: 56px; flex: none; }
.kwh-sg .sg-bild .siegel-pille { width: 240px; }
.kwh-sg p { max-width: 52ch; }
@media (max-width: 820px) {
  .kwh-flow { grid-template-columns: 1fr; gap: 1.6rem; }
  .kwh-stage:not(:last-child)::after { top: auto; bottom: -1.6rem; right: auto; left: 2rem; width: 2px; height: 1.6rem; transform: none; }
  .kwh-stage:not(:last-child)::before { top: auto; bottom: -1.6rem; right: auto; left: calc(2rem - 4px); transform: rotate(135deg); margin: 0; }
}

/* ---------- Umzug: Zeitstrahl in 4 Schritten ---------- */
.kwh-line { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; counter-reset: none; }
.kwh-line::before { content: ""; position: absolute; top: 25px; left: 26px; right: calc(25% - 26px); height: 2px; background: var(--text-faint); }
.kwh-stop { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.kwh-no { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; box-shadow: 0 0 0 6px var(--surface); }
.kwh-stop h3 { font-size: 1.2rem; line-height: 1.3; margin-top: 1.1rem; }
.kwh-stop p { color: var(--text-muted); margin-top: .5rem; }
.kwh-tag { display: inline-block; margin-top: 1rem; padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--accent-hover); background: var(--accent-soft); border: 1px solid var(--accent); }
.kwh-stop p { flex: 1 1 auto; }
@media (max-width: 960px) {
  .kwh-line { grid-template-columns: 1fr; gap: 1.8rem; max-width: 620px; margin: 0 auto; }
  .kwh-line::before { top: 26px; bottom: 26px; left: 25px; right: auto; width: 2px; height: auto; }
  .kwh-stop { padding-left: 4.4rem; }
  .kwh-no { position: absolute; left: 0; top: 0; }
  .kwh-stop h3 { margin-top: .5rem; }
}

/* ---------- Anfrage ---------- */
#anfrage .kx-check-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.kwh-contact a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.kwh-contact a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.kwh-form .req { color: var(--accent-hover); }
.kwh-form .form-note { color: var(--text-muted); }
.kwh-form .form-status { color: var(--accent-hover); }
.kwh-form .form-status.error { color: #b42318; background: color-mix(in srgb, #b42318 10%, var(--bg-elev)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kwh-form .form-status.error { color: #ffb4ac; background: color-mix(in srgb, #ff6b5e 14%, var(--bg-elev)); }
}
:root[data-theme="dark"] .kwh-form .form-status.error { color: #ffb4ac; background: color-mix(in srgb, #ff6b5e 14%, var(--bg-elev)); }