/* KityDisk – Stil von kitypanel.com (Farben, Schrift, Kacheln), ohne externe Ressourcen. */
:root { --tinte:#1c1c1e; --dim:#6e6e73; --linie:#e5e5ea; --akzent:#0a7cff; --grund:#fafafa; --karte:#fff; --kopf:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --tinte:#f2f2f7; --dim:#aeaeb2; --linie:#38383a; --grund:#111113; --karte:#1c1c1e; --kopf:#1c1c1e; }
  .kopf .marke img { filter: invert(1) hue-rotate(180deg); }
}
* { box-sizing:border-box }
body { margin:0; font:16px/1.55 -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 }
img { max-width:100%; height:auto }
.kopf { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:14px 20px; border-bottom:1px solid var(--linie); background:var(--kopf) }
.kopf .marke img { display:block; height:36px; width:auto }
.kopf nav a { margin-left:18px; color:var(--dim) }
.inhalt { max-width:1040px; 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:40px; line-height:1.12; margin:0 0 14px; letter-spacing:-0.5px } h2 { font-size:24px; margin:40px 0 12px }
p.lead { font-size:19px; color:var(--dim) }
.klein { font-size:14px; color:var(--dim) }
.knopf { display:inline-block; padding:12px 22px; border-radius:10px; background:var(--akzent); color:#fff !important; font-weight:600; text-decoration:none !important; margin:4px 8px 4px 0 }
.knopf.sekundaer { background:#eef1f6; color:#1c1c1e !important }
.held { display:grid; grid-template-columns:1fr 1.25fr; gap:36px; align-items:center; margin:12px 0 40px }
.held img { width:100%; border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.16) }
.merkmale { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:18px 0 28px }
.merkmal { background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:18px }
.merkmal h3 { margin:0 0 6px; font-size:17px } .merkmal p { margin:0; color:var(--dim) }
.galerie { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px }
.galerie figure { margin:0 } .galerie img { width:100%; border-radius:10px; border:1px solid var(--linie) } .galerie figcaption { margin-top:6px }
.preis { background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:22px; margin:12px 0 }
.preis-zahl { font-size:34px; font-weight:700 } .preis-zahl span { font-size:16px; font-weight:400; color:var(--dim) }
.vergleich-hinweis { margin-top:32px; padding:16px 18px; background:var(--karte); border:1px solid var(--linie); border-radius:12px }
table.vergleich { width:100%; border-collapse:collapse; margin:20px 0 8px; background:var(--karte); border:1px solid var(--linie); border-radius:12px; overflow:hidden }
table.vergleich th, table.vergleich td { padding:10px 14px; border-bottom:1px solid var(--linie); text-align:left; vertical-align:top }
table.vergleich thead th { background:#0a7cff; color:#fff; font-weight:600 }
table.vergleich tbody th { font-weight:500; color:var(--dim); width:40% }
table.vergleich tbody tr:last-child th, table.vergleich tbody tr:last-child td { border-bottom:0 }
.faq { background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:14px 18px; margin:10px 0 }
.faq summary { font-weight:600; cursor:pointer } .faq p { margin:10px 0 0; color:var(--dim) }
.marke-hinweis { margin-top:36px }
@media (max-width:760px) { .held { grid-template-columns:1fr } h1 { font-size:30px } .kopf nav a { margin:0 14px 0 0 } table.vergleich { font-size:14px } }