/* Swisstoggel KNX – Ergänzungen für die App-Seite (Video, Highlights, Grundriss, Formulare) */
.app-video { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--page-line); background: #000; }
.app-video video { width: 100%; height: auto; }
.highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.highlights li { background: var(--page-card); border: 1px solid var(--page-line); border-radius: var(--radius); padding: 20px 22px; }
.highlights li strong { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 6px; }
.highlights li span { color: var(--page-muted); font-size: .97rem; }
.highlights li a { color: var(--page-accent); }
.highlights em, .bald-tag { font-style: normal; font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: var(--page-accent); color: var(--knx-deep); vertical-align: middle; white-space: nowrap; }
.bald-tag { font-size: .8rem; }
.highlights li.bald { border-style: dashed; }
.try { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 28px; }
.try p { margin: 0; color: var(--page-muted); max-width: none; }
.try strong { color: var(--page-fg); }
@media (max-width: 720px) { .try { grid-template-columns: 1fr; } }
.gallery-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .gallery-4 { grid-template-columns: 1fr 1fr; } .gallery-4 figure:nth-child(3) { grid-column: auto; max-width: none; } }
.tablet-wrap { margin-top: clamp(28px, 4vw, 56px); display: grid; place-items: center; }
.tablet img { object-fit: contain; background: #0b0f0e; }
.plans { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 36px); }
.plans figure { margin: 0; }
.plans img { width: 100%; height: auto; border-radius: var(--radius); border: 1px dashed var(--page-line); }
.plans figcaption { margin-top: 10px; color: var(--page-muted); font-size: .95rem; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-hero .muted { max-width: 52ch; }
span.store { cursor: default; }

/* Formulare (Kontakt, Beta) auf den hellen Seiten */
.formular { display: grid; gap: 18px; max-width: 560px; margin: 24px 0 8px; }
.formular label { display: grid; gap: 6px; font-weight: 600; }
.formular input[type=email], .formular input[type=text], .formular select, .formular textarea { font: inherit; font-weight: 400; padding: 12px 14px; border: 1.5px solid #c9c4b8; border-radius: 10px; background: #fff; color: inherit; width: 100%; }
.formular textarea { min-height: 180px; resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid #0f766e; outline-offset: 1px; }
.formular .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.formular .check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.formular .falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular small { font-weight: 400; opacity: .75; }
.formular .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .formular .zwei { grid-template-columns: 1fr; } }