:root { --tinte:#1c1c1e; --dim:#6e6e73; --linie:#e5e5ea; --akzent:#0a7cff; --grund:#fafafa; --karte:#fff; }
* { box-sizing:border-box }
body { margin:0; font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--tinte); background:var(--grund) }
a { color:var(--akzent); text-decoration:none } a:hover { text-decoration:underline }
.kopf { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--linie); background:#fff }
.kopf .marke { font-weight:700; font-size:20px; color:var(--tinte) }
.kopf nav a, .kopf nav button.link { margin-left:18px; color:var(--dim); background:none; border:0; font:inherit; cursor:pointer }
.inhalt { max-width:960px; margin:0 auto; padding:28px 20px 60px }
.fuss { text-align:center; color:var(--dim); font-size:14px; padding:24px 20px; border-top:1px solid var(--linie) }
h1 { font-size:34px; line-height:1.15; margin:0 0 12px } h2 { font-size:22px; margin:36px 0 12px }
p.lead { font-size:19px; color:#333 }
.dim { color:var(--dim) } .klein { font-size:14px; color:var(--dim) }
.knopf { display:inline-block; padding:11px 20px; border-radius:10px; background:var(--akzent); color:#fff !important; font-weight:600; border:0; font:inherit; cursor:pointer; text-decoration:none !important }
.knopf.sekundaer { background:#eef1f6; color:var(--tinte) !important }
.knopf[disabled] { opacity:.45; cursor:default }
.inline { display:inline }
.ok, .fehler, .hinweis { padding:12px 14px; border-radius:10px; margin:12px 0 }
.ok { background:#e6f7ea; color:#14532d } .fehler { background:#fdecec; color:#7f1d1d } .hinweis { background:#fff7e6; color:#7c4a03 }
.held { display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; margin:12px 0 40px }
.held img { width:100%; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.12) }
.merkmale { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:18px 0 }
.merkmal { background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:18px }
.merkmal h3 { margin:0 0 6px; font-size:17px }
.galerie { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px }
.galerie img { width:100%; border-radius:12px; border:1px solid var(--linie) }
.preis { background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:20px; margin:12px 0 }
.preis-zahl { font-size:32px; font-weight:700 } .preis-zahl span { font-size:16px; font-weight:400; color:var(--dim) }
.preis-hinweis { color:#333; margin-top:6px }
.kasse { background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.kasse label { font-weight:600 } .kasse select { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid #c7c7cc }
.kasse .summe { flex-basis:100% }
.formular { background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:20px; margin:14px 0 }
.formular label { display:block; margin:10px 0 } .formular label.radio { display:inline-block; margin:6px 18px 6px 0 }
.formular input:not([type=radio]), .formular select { display:block; width:100%; max-width:420px; margin-top:4px; padding:9px 10px; font:inherit; border:1px solid #c7c7cc; border-radius:8px }
.formular fieldset { border:1px solid var(--linie); border-radius:10px; padding:10px 14px; margin:12px 0 } .formular legend { color:var(--dim); font-size:14px }
.formular button { margin-top:8px }
.karten { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px }
.karte { background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:16px }
.karte-kopf { font-size:17px; margin-bottom:6px } .zustand { margin:6px 0 10px; font-weight:600 }
.fakten { width:100%; border-collapse:collapse; font-size:14px } .fakten td { padding:4px 0; vertical-align:top } .fakten td:first-child { color:var(--dim); width:40% }
.aktionen { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.schritte { counter-reset:s; list-style:none; padding:0 } .schritte li { counter-increment:s; position:relative; padding-left:44px; margin:12px 0 }
.schritte li::before { content:counter(s); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--akzent); color:#fff; font-weight:700; display:grid; place-items:center }
@media (max-width:700px) { .held { grid-template-columns:1fr } h1 { font-size:28px } }
.galerie figure { margin:0 } .galerie figcaption { margin-top:6px }