/* ==========================================================================
   Nur für /webdesign-burgenland/: Grafiken der Abschnitte (Präfix kw-).
   Nutzt ausschließlich die Tokens aus style.css, damit Hell und Dunkel passen.
   ========================================================================== */

/* ---------- Hero: Browser-Rahmen ---------- */
.kw-hero-grid { align-items: center; }
.kw-hero-copy { min-width: 0; }
.kw-hero-copy .page-back { display: flex; width: fit-content; }
.kw-browser-fig { margin: 0; min-width: 0; }
.kw-browser { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.kw-browser-bar { display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.kw-dots { display: flex; gap: .4rem; flex: none; }
.kw-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.kw-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; line-height: 1; color: var(--text-muted); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .9rem; }
.kw-browser img { display: block; width: 100%; height: auto; }
.kw-browser-fig figcaption { margin-top: .8rem; text-align: center; font-size: .9rem; color: var(--text-muted); }
@media (max-width: 820px) { .kw-hero-grid { grid-template-columns: 1fr; } }

/* ---------- gemeinsames Icon ---------- */
.kw-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hover); border: 1.5px solid var(--accent); }

/* ---------- Leistungen: 6 Kacheln ---------- */
.kw-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.kw-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.3rem, 2.5vw, 1.8rem); min-width: 0; }
.kw-tile h3 { font-size: 1.2rem; margin-top: 1.1rem; }
.kw-tile p { color: var(--text-muted); margin-top: .55rem; }
.kw-tile p a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .kw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kw-tiles { grid-template-columns: 1fr; } }

/* ---------- Ablauf: nummerierter Zeitstrahl ---------- */
.kw-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; counter-reset: none; }
.kw-step { position: relative; display: flex; align-items: flex-start; gap: 1.2rem; padding-bottom: 1.8rem; }
.kw-step::before { content: ""; position: absolute; left: 25px; top: 56px; bottom: 4px; width: 2px; background: var(--border-strong); }
.kw-step:last-child { padding-bottom: 0; }
.kw-step:last-child::before { display: none; }
.kw-no { flex: none; 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; }
.kw-step-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding-top: .15rem; line-height: 1.55; }
.kw-step-text b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--text); }
.kw-step-text span { color: var(--text-muted); }

/* ---------- Betreuung: 3 Preiskarten ---------- */
.kw-packs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch; }
.kw-pack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.8rem 1.3rem 1.6rem; min-width: 0; }
.kw-pack-mid { border: 2px solid var(--accent); box-shadow: var(--shadow); padding: calc(1.8rem - 1px) calc(1.3rem - 1px) calc(1.6rem - 1px); }
.kw-pack-name { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.kw-pack-text { color: var(--text); font-size: 1rem; line-height: 1.5; }
.kw-pack-price { margin-top: auto; padding-top: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1.1; color: var(--accent-hover); }
.kw-pack-price small { display: block; margin-top: .25rem; font-family: var(--font-sans); font-size: .88rem; font-weight: 600; color: var(--text-muted); }
.kw-note { margin: 1.6rem auto 0; max-width: 62ch; text-align: center; color: var(--text-muted); font-size: 1.05rem; }
.kw-tech { display: flex; align-items: center; gap: 1.1rem; margin: 1.6rem auto 0; max-width: 62ch; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.3rem; }
.kw-tech p { margin: 0; color: var(--text-muted); }
@media (max-width: 820px) { .kw-packs { grid-template-columns: 1fr; } .kw-pack-price { margin-top: .4rem; } }

/* ---------- Region: Orts-Chips ---------- */
.kw-region { max-width: 760px; margin: 0 auto; text-align: center; }
.kw-region-h { margin: 1.4rem 0 .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.kw-region-h:first-child { margin-top: 0; }
.kw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.kw-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem; font-weight: 600; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 999px; padding: .5rem 1rem .5rem .8rem; }
.kw-chip svg { flex: none; color: var(--accent-hover); }
.kw-chip-home { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kw-chip-home svg { color: var(--accent-ink); }
.kw-chip-sub { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }

.kw-hero-price { margin-top: 1rem; color: var(--text-muted); font-size: .98rem; }
.kw-hero-price b { color: var(--text); font-weight: 700; }