/* Themenseiten (Vorlage): Bild mit Geräte-Umschalter.
 * Lädt nach ratgeber.css und benutzt dessen Tokens. Der Umschalter ist eine
 * Radio-Gruppe: ohne JavaScript benutzbar, per Tab und Pfeiltasten bedienbar,
 * und ohne CSS zeigt er alle vier Bilder untereinander.
 * Das Pillen-Aussehen (.thema-seg, label) ist eine Kopie von .seg / .seg-btn
 * aus dem Inline-Stil von index.html; bei einer Änderung dort hier nachziehen. */
.thema-media { margin: 40px 0 0; }
.thema-media > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.thema-seg {
  display: flex; width: fit-content; margin: 0 auto; gap: 2px; padding: 5px;
  background: var(--bone-pale); border: 1px solid var(--hairline); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15,20,16,0.05);
}
.thema-seg label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--muted);
  padding: 10px 22px; border-radius: 999px; transition: color .2s, background .2s;
}
.thema-seg label svg { width: 17px; height: 17px; }
.thema-seg label:hover { color: var(--ink); }
#dev-iphone:checked ~ .thema-seg label[for="dev-iphone"],
#dev-duo:checked ~ .thema-seg label[for="dev-duo"],
#dev-ipad:checked ~ .thema-seg label[for="dev-ipad"],
#dev-mac:checked ~ .thema-seg label[for="dev-mac"] { background: var(--sage-deep); color: var(--bone); }
.thema-media > input:focus-visible ~ .thema-seg { outline: 2px solid transparent; }
#dev-iphone:focus-visible ~ .thema-seg label[for="dev-iphone"],
#dev-duo:focus-visible ~ .thema-seg label[for="dev-duo"],
#dev-ipad:focus-visible ~ .thema-seg label[for="dev-ipad"],
#dev-mac:focus-visible ~ .thema-seg label[for="dev-mac"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.thema-shots { margin: 28px auto 0; display: flex; justify-content: center; }
.thema-shot { margin: 0; display: none; width: 100%; justify-content: center; }
.thema-shot img { display: block; height: auto; max-width: 100%; border-radius: 14px; box-shadow: 0 18px 44px rgba(15,20,16,0.18); }
.thema-shot.is-iphone img { width: 300px; }
.thema-shot.is-duo img { width: 400px; }
.thema-shot.is-duo.is-open img { width: 760px; }
.thema-shot.is-ipad img { width: 420px; }
.thema-shot.is-mac img { width: 960px; }
#dev-iphone:checked ~ .thema-shots .is-iphone,
#dev-duo:checked ~ .thema-shots .is-duo,
#dev-ipad:checked ~ .thema-shots .is-ipad,
#dev-mac:checked ~ .thema-shots .is-mac { display: flex; }
.thema-price { margin-top: 34px; }
@media (max-width: 560px) {
  .thema-seg label { padding: 9px 15px; font-size: 13.5px; }
  .thema-shot.is-iphone img { width: min(280px, 100%); }
}
/* Vier Knöpfe passen auf einem Telefon nur ohne Symbole. */
@media (max-width: 440px) {
  .thema-seg label { padding: 9px 12px; gap: 0; }
  .thema-seg label svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { .thema-seg label { transition: none; } }
/* Zweiter Umschalter auf derselben Seite (/anpassen): eigene Ids, gleiches Aussehen. */
.thema-sec-media { margin-top: 8px; }
#dev2-iphone:checked ~ .thema-seg label[for="dev2-iphone"],
#dev2-duo:checked ~ .thema-seg label[for="dev2-duo"],
#dev2-ipad:checked ~ .thema-seg label[for="dev2-ipad"],
#dev2-mac:checked ~ .thema-seg label[for="dev2-mac"] { background: var(--sage-deep); color: var(--bone); }
#dev2-iphone:focus-visible ~ .thema-seg label[for="dev2-iphone"],
#dev2-duo:focus-visible ~ .thema-seg label[for="dev2-duo"],
#dev2-ipad:focus-visible ~ .thema-seg label[for="dev2-ipad"],
#dev2-mac:focus-visible ~ .thema-seg label[for="dev2-mac"] { outline: 2px solid var(--ink); outline-offset: 2px; }
#dev2-iphone:checked ~ .thema-shots .is-iphone,
#dev2-duo:checked ~ .thema-shots .is-duo,
#dev2-ipad:checked ~ .thema-shots .is-ipad,
#dev2-mac:checked ~ .thema-shots .is-mac { display: flex; }