/* Swisstoggel – Überarbeitung November 2026 (nach ui-ux-pro-max: dunkles Tech-Design, dezentes Glas,
   viel Luft, Kontrast ≥ 4.5:1, sichtbarer Fokus, grosse Klickflächen, ruhige Bewegung).
   Wird als letztes Stylesheet geladen und ändert nur das Aussehen, keine Texte.
   Markenfarben bleiben: Nachtblau, Graphit, warmes Gelb. */

:root {
  --d-night: #0E1621;
  --d-night-2: #132235;
  --d-blue: #1F4E79;
  --d-blue-2: #2A6296;
  --d-yellow: #F2B33D;
  --d-yellow-2: #FFD58A;
  --d-on-yellow: #2B1A00;
  --d-text: #F5F7FA;
  --d-muted: #C3CDD8;
  --d-glass: rgba(255, 255, 255, .045);
  --d-glass-2: rgba(255, 255, 255, .075);
  --d-glass-line: rgba(255, 255, 255, .10);
  --d-glass-line-2: rgba(255, 255, 255, .18);
  --radius: 20px;
  --d-radius-sm: 12px;
  --d-ease: cubic-bezier(.2, .7, .2, 1);
  --d-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 50px rgba(0, 0, 0, .35);
}

/* ---------- Grundlagen ---------- */
body { line-height: 1.6; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
p, li span { text-wrap: pretty; }
::selection { background: var(--d-yellow); color: var(--d-on-yellow); }

/* Fokus immer gut sichtbar, auf Dunkel gelb, auf Hell blau */
:focus-visible { outline: 3px solid var(--d-blue); outline-offset: 3px; border-radius: 8px; }
.theme-knx :focus-visible, .knx-hero :focus-visible, .home-dark :focus-visible { outline-color: var(--d-yellow); }

/* Ganze Website im dunklen App-Look (helle Rechtstexte bleiben hell, siehe unten) */
body:not(.theme-knx):has(.knx-hero) {
  background:
    radial-gradient(90% 60% at 85% -10%, rgba(31, 78, 121, .55), transparent 60%),
    radial-gradient(60% 40% at 0% 40%, rgba(31, 78, 121, .25), transparent 70%),
    var(--d-night);
  color: var(--d-text);
  --ink: var(--d-text); --ink-soft: var(--d-muted); --line: var(--d-glass-line); --paper-2: var(--d-glass-2);
  --page-accent: var(--d-yellow);
}
body.theme-knx {
  background:
    radial-gradient(90% 50% at 85% -5%, rgba(31, 78, 121, .65), transparent 60%),
    radial-gradient(70% 40% at -10% 35%, rgba(31, 78, 121, .22), transparent 70%),
    radial-gradient(60% 30% at 110% 75%, rgba(242, 179, 61, .06), transparent 70%),
    var(--d-night);
  --page-bg: var(--d-night); --page-card: var(--d-glass); --page-line: var(--d-glass-line); --page-muted: var(--d-muted);
}

/* ---------- Kopfzeile: Glas, 44 px Klickfläche ---------- */
.site-header { background: rgba(14, 22, 33, .72) !important; border-bottom: 1px solid var(--d-glass-line) !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
body:not(:has(.knx-hero)):not(.theme-knx) .site-header { background: rgba(245, 245, 245, .8) !important; border-bottom-color: #DADDE1 !important; }
.site-header .wrap { min-height: 68px; }
.site-nav { gap: 4px; align-items: center; }
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-weight: 500; }
body:has(.knx-hero) .site-nav a, .theme-knx .site-nav a { color: var(--d-muted); }
body:has(.knx-hero) .site-nav a:hover, body:has(.knx-hero) .site-nav a[aria-current="page"],
.theme-knx .site-nav a:hover, .theme-knx .site-nav a[aria-current="page"] { color: var(--d-text); background: var(--d-glass-2); }
body:has(.knx-hero) .brand { color: var(--d-text); }
body:has(.knx-hero) .brand-mark { background: var(--d-text); }
.site-nav a.sprache { min-width: 44px; justify-content: center; padding: 0 10px; border-color: var(--d-glass-line-2) !important; }
body:not(:has(.knx-hero)):not(.theme-knx) .site-nav a.sprache { border-color: #C9CDD2 !important; }
@media (max-width: 560px) { .site-nav a { padding: 0 10px; font-size: .95rem; } }
@media (max-width: 400px) { .site-nav a { padding: 0 8px; font-size: .9rem; } .brand { font-size: 1rem; } }

/* ---------- Knöpfe ---------- */
.btn { min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; letter-spacing: .005em; transition: background-color .2s, color .2s, border-color .2s, translate .2s var(--d-ease), box-shadow .2s; }
.knx-hero .btn, .theme-knx .btn-ink { background: var(--d-yellow); color: var(--d-on-yellow); border-color: transparent; }
.knx-hero .btn:hover, .theme-knx .btn-ink:hover { background: var(--d-yellow-2); box-shadow: 0 12px 30px rgba(242, 179, 61, .28); }
.knx-hero .btn-ghost, body:has(.knx-hero) .btn-ghost { background: var(--d-glass); color: var(--d-text); border: 1px solid var(--d-glass-line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knx-hero .btn-ghost:hover, body:has(.knx-hero) .btn-ghost:hover { background: var(--d-glass-2); border-color: rgba(255, 255, 255, .32); box-shadow: none; }
body:has(.knx-hero) .btn-ink { background: var(--d-yellow); color: var(--d-on-yellow); }
body:has(.knx-hero) .btn-ink:hover { background: var(--d-yellow-2); box-shadow: 0 12px 30px rgba(242, 179, 61, .28); }

/* ---------- Startseite ---------- */
.knx-hero { background: transparent !important; }
.knx-hero .wrap { padding-block: clamp(56px, 9vw, 128px) clamp(48px, 7vw, 96px); }
.knx-hero .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(242, 179, 61, .12); border: 1px solid rgba(242, 179, 61, .3); color: var(--d-yellow-2) !important; font-weight: 600; font-size: .9rem; margin-bottom: 22px; }
.knx-hero .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--d-yellow); box-shadow: 0 0 0 4px rgba(242, 179, 61, .2); }
.knx-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.04; }
.knx-hero .lede { color: var(--d-muted) !important; margin-top: 8px; }
.knx-hero .actions { gap: 14px; margin-top: 22px; }
.knx-hero .grid-lines { opacity: .7; }

.intro { padding: clamp(64px, 10vw, 140px) 0 clamp(40px, 6vw, 72px); text-align: left; }
.intro .as-h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 20ch; }
.intro .lede { color: var(--d-muted); }

/* Produktreihe als Glas-Bühne */
.product-row { border: 1px solid var(--d-glass-line) !important; border-radius: calc(var(--radius) + 8px); background: linear-gradient(160deg, rgba(31, 78, 121, .28), rgba(255, 255, 255, .03) 55%); padding: clamp(28px, 5vw, 64px) !important; box-shadow: var(--d-shadow); margin-bottom: clamp(40px, 6vw, 80px); }
.product-row .state { background: rgba(242, 179, 61, .14); color: var(--d-yellow-2); border: 1px solid rgba(242, 179, 61, .3); }
.product-row .lede { color: var(--d-muted); }
.product-row .facts li { color: var(--d-muted); }
.product-row.knx .facts li::before { background: var(--d-yellow); border-radius: 50%; width: 8px; height: 8px; top: .62em; left: 4px; box-shadow: 0 0 0 4px rgba(242, 179, 61, .16); }

/* Grundsätze als Karten */
.about { border-top: 0 !important; padding-top: clamp(24px, 4vw, 48px); }
.about h2 { color: var(--d-text); }
.principles { gap: 14px; }
.principles li { padding: 18px 20px; border-radius: var(--radius); background: var(--d-glass); border: 1px solid var(--d-glass-line); grid-template-columns: 44px 1fr; transition: border-color .25s, background-color .25s; }
.principles li:hover { border-color: rgba(242, 179, 61, .4); background: var(--d-glass-2); }
.principles .glyph { background: rgba(242, 179, 61, .12) !important; border: 1px solid rgba(242, 179, 61, .25); color: var(--d-yellow); }
.principles span { color: var(--d-muted); }

/* ---------- App-Seite ---------- */
.page-hero { padding-top: clamp(56px, 8vw, 112px); }
.page-hero .app-id { padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--d-glass); border: 1px solid var(--d-glass-line); }
.page-hero .app-id img { width: 36px; height: 36px; border-radius: 10px; }
.page-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.04; }
.theme-knx .lede { color: var(--d-yellow-2); }
.theme-knx .muted { color: var(--d-muted); }
.page-hero .beta { color: var(--d-muted); }

/* Abschnitte: mehr Luft, keine harten Linien */
.section { border-top: 0 !important; padding: clamp(56px, 8vw, 112px) 0; }
.section-head { align-items: end; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.section-head p { color: var(--d-muted); font-size: 1.05rem; }
.theme-knx .section:nth-of-type(even) { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .02) 12%, rgba(255, 255, 255, .02) 88%, transparent); }

/* Video im Rahmen */
.app-video { border-radius: calc(var(--radius) + 4px); border: 1px solid var(--d-glass-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 8px rgba(255, 255, 255, .03); }
.yt-hinweis { color: var(--d-muted); }

/* Highlights: Glas-Karten mit gelber Kante */
.highlights { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.highlights li { position: relative; background: var(--d-glass) !important; border: 1px solid var(--d-glass-line) !important; border-radius: var(--radius); padding: 26px 26px 24px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow: hidden; }
.highlights li::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--d-yellow), transparent 70%); opacity: .55; transition: opacity .25s; }
.highlights li:hover { border-color: rgba(242, 179, 61, .45) !important; background: var(--d-glass-2) !important; }
.highlights li:hover::before { opacity: 1; }
.highlights li strong { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.25; }
.highlights li span { color: var(--d-muted); font-size: 1rem; line-height: 1.6; }
.try { padding: 22px 26px; border-radius: var(--radius); background: rgba(242, 179, 61, .07); border: 1px solid rgba(242, 179, 61, .22); }
.try p { color: var(--d-muted); }

/* Galerie und Geräte */
.gallery { gap: clamp(20px, 3.5vw, 48px) clamp(16px, 3vw, 40px); }
.gallery figcaption { color: var(--d-muted); text-align: center; font-size: .95rem; margin-top: 16px; }
.phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 70px rgba(0, 0, 0, .5); }
.tablet { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 90px rgba(0, 0, 0, .55); }
.plans img { border: 1px solid var(--d-glass-line) !important; }
.plans figcaption { color: var(--d-muted); }

/* Weg-Diagramm, Preise, Fragen */
.bus-diagram { background: linear-gradient(160deg, rgba(31, 78, 121, .3), rgba(255, 255, 255, .03)) !important; border: 1px solid var(--d-glass-line) !important; border-radius: calc(var(--radius) + 6px); box-shadow: var(--d-shadow); }
.bus-diagram p { color: var(--d-muted); }

.pricing { gap: 22px; align-items: stretch; }
.plan { background: var(--d-glass) !important; border: 1px solid var(--d-glass-line) !important; border-radius: calc(var(--radius) + 4px); padding: clamp(26px, 3vw, 36px); }
.plan.full { background: linear-gradient(160deg, rgba(242, 179, 61, .14), rgba(255, 255, 255, .04) 60%) !important; border-color: rgba(242, 179, 61, .55) !important; box-shadow: 0 0 0 1px rgba(242, 179, 61, .2), 0 24px 60px rgba(0, 0, 0, .35); }
.plan .price { font-size: clamp(2rem, 3vw, 2.6rem); color: var(--d-text); }
.plan.full .price { color: var(--d-yellow-2); }
.plan .price small { color: var(--d-muted); }
.plan ul li { color: var(--d-muted); border-top-color: var(--d-glass-line); padding: 10px 0; }

.faq details { border-color: var(--d-glass-line) !important; }
.faq summary { min-height: 44px; align-items: center; }
.faq summary::after { color: var(--d-yellow); font-size: 1.4rem; line-height: 1; }
.faq details p { color: var(--d-muted); }

/* Funktionsliste */
.feature-groups .toc { padding: 10px; border-radius: var(--radius); background: var(--d-glass); border: 1px solid var(--d-glass-line); }
.feature-groups .toc a { min-height: 44px; display: flex; align-items: center; color: var(--d-muted); }
.feature-groups .toc a:hover { background: var(--d-glass-2); color: var(--d-text); }
.feature-group { border-top-color: var(--d-glass-line) !important; }
.feature-group h3 .ico { background: rgba(242, 179, 61, .1) !important; border-color: rgba(242, 179, 61, .25) !important; }
.features li { border-left-color: var(--d-glass-line-2) !important; }
.features li:hover { border-left-color: var(--d-yellow) !important; }
.features li span { color: var(--d-muted); }

.notice { background: var(--d-glass); border-left-color: var(--d-yellow); color: var(--d-muted); }

/* Store-Abzeichen */
.stores { gap: 14px; }
.theme-knx .store[aria-disabled="true"] { background: var(--d-glass); border: 1px solid var(--d-glass-line-2); color: var(--d-muted); opacity: 1; min-height: 52px; }

/* ---------- Fusszeile ---------- */
.site-footer { border-top: 1px solid var(--d-glass-line) !important; padding: 40px 0 56px; }
body:has(.knx-hero) .site-footer, .theme-knx .site-footer { color: var(--d-muted); background: rgba(0, 0, 0, .18); }
.site-footer nav { gap: 2px 6px; }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 10px; }
.site-footer nav a:hover { text-decoration: none; background: rgba(127, 127, 127, .12); }
.site-footer .note { opacity: .85; }

/* ---------- Helle Seiten (Rechtstexte, Kontakt) ---------- */
.legal .wrap { max-width: 72ch; }
.legal h1 { letter-spacing: -0.02em; }
.legal h2 { padding-top: .4em; }
.legal p, .legal li { line-height: 1.7; color: #3F4752; }
.legal a { color: var(--d-blue); text-underline-offset: 3px; }
.legal-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; }
.legal-nav a[aria-current="page"] { background: var(--d-blue); border-color: var(--d-blue); color: #fff; }
.legal table { border-radius: var(--d-radius-sm); overflow: hidden; }
.legal th { background: #ECEEF1; }
.formular input[type=email], .formular input[type=text], .formular select, .formular textarea { min-height: 48px; border-radius: var(--d-radius-sm); border-color: #C6CCD3; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 3px solid var(--d-blue); outline-offset: 1px; box-shadow: 0 0 0 5px rgba(31, 78, 121, .14); }
.formular .btn, .legal .btn-ink { background: var(--d-blue); color: #fff; }
.formular .btn:hover, .legal .btn-ink:hover { background: var(--d-blue-2); }

/* ---------- Bewegung: ruhiger, und bei „Bewegung reduzieren“ ganz aus ---------- */
.knx-hero .grid-lines { animation-duration: 30s; }
.knx-hero .phone.front, .knx-hero-art .phone.front { animation-duration: 9s; }
.knx-hero .phone.back, .knx-hero-art .phone.back { animation-duration: 10s; }
@media (prefers-reduced-motion: reduce) {
  .highlights li, .principles li, .plan, .btn { transition: none; }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 820px) {
  .product-row { padding: 24px !important; }
  .highlights { grid-template-columns: 1fr; }
  .knx-hero .actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Google-Play-Abzeichen bündig und gleich hoch wie die iPhone-Kachel */
.stores .play-badge { margin: 0 !important; display: inline-flex !important; align-items: center; overflow: visible !important; }
.stores .play-badge img { height: 56px; width: auto; margin: 0; border-radius: 7px; }
.page-hero .stores { align-items: center; }
.theme-knx .store[aria-disabled="true"] { min-height: 56px; border-radius: 12px; }

/* Abstände zwischen Abschnitten etwas knapper, zwei Grundrisse nebeneinander */
.section { padding: clamp(48px, 6.5vw, 96px) 0; }
@media (min-width: 900px) { .plans:has(> figure:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } }
.features { align-items: start; }

/* ===================================================================
   3D-Bewegung (nur CSS, kein JavaScript, CSP bleibt unverändert).
   Bei „Bewegung reduzieren“ alles flach und still. Browser ohne
   scroll-gesteuerte Animationen (Firefox, älteres Safari) zeigen die
   Endstellung ohne Bewegung.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Kopfbereich: Handys stehen schräg im Raum und wiegen sich langsam */
  .knx-hero .art, .knx-hero-art { perspective: 1400px; }
  @keyframes d3-wiegen-vorne {
    0%, 100% { transform: rotateY(-16deg) rotateX(6deg) translateZ(0); }
    50% { transform: rotateY(-8deg) rotateX(2deg) translateZ(30px) translateY(-10px); }
  }
  @keyframes d3-wiegen-hinten {
    0%, 100% { transform: rotateY(18deg) rotateX(4deg) rotateZ(-6deg) translateZ(-90px); }
    50% { transform: rotateY(24deg) rotateX(8deg) rotateZ(-4deg) translateZ(-60px) translateY(8px); }
  }
  .knx-hero .phone.front, .knx-hero-art .phone.front {
    animation: d3-wiegen-vorne 11s ease-in-out infinite;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), -30px 50px 90px rgba(0, 0, 0, .55);
  }
  .knx-hero .phone.back, .knx-hero-art .phone.back {
    rotate: none; animation: d3-wiegen-hinten 13s ease-in-out infinite;
    filter: brightness(.85);
  }

  /* Leichtes 3D-Kippen beim Darüberfahren */
  .highlights li, .principles li, .plan { transform-style: preserve-3d; }
  .highlights li:hover, .plan:hover { transform: perspective(900px) rotateX(4deg) rotateY(-3deg) translateY(-4px); translate: none; }
  .principles li:hover { transform: perspective(900px) rotateY(-4deg); }
  .gallery figure:hover .phone { transform: perspective(1000px) rotateY(-10deg) rotateX(4deg); translate: 0 -8px; }
  .highlights li, .plan, .principles li, .gallery .phone { transition: transform .45s var(--d-ease), translate .45s var(--d-ease), border-color .25s, background-color .25s, box-shadow .35s; }

  @supports (animation-timeline: view()) {
    /* Video kippt beim Hineinscrollen von schräg nach flach */
    @keyframes d3-video { from { opacity: .4; transform: perspective(1600px) rotateX(28deg) scale(.88); } to { opacity: 1; transform: none; } }
    .app-video { transform-origin: 50% 100%; animation: d3-video linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }

    /* Tablet klappt auf wie ein Deckel */
    @keyframes d3-tablet { from { opacity: .3; transform: perspective(1600px) rotateX(55deg) translateY(60px); } to { opacity: 1; transform: none; } }
    .tablet-wrap { animation: d3-tablet linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }

    /* Handys in der Galerie drehen sich nacheinander nach vorne */
    @keyframes d3-handy { from { opacity: 0; transform: perspective(1200px) rotateY(-38deg) rotateX(10deg) translateZ(-120px); } to { opacity: 1; transform: none; } }
    .gallery figure { animation: d3-handy linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .gallery figure:nth-child(3n+2) { animation-range: entry 10% cover 45%; }
    .gallery figure:nth-child(3n) { animation-range: entry 20% cover 50%; }

    /* Karten richten sich beim Hineinscrollen auf */
    @keyframes d3-karte { from { opacity: 0; transform: perspective(1000px) rotateX(22deg) translateY(40px); } to { opacity: 1; transform: none; } }
    .highlights li, .plan, .principles li, .feature-group { animation: d3-karte linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .highlights li:hover, .plan:hover, .principles li:hover { animation-play-state: paused; }

    /* Grundrisse und 3D-Haus: kippen leicht, als läge der Plan auf dem Tisch */
    @keyframes d3-plan { from { opacity: .3; transform: perspective(1400px) rotateX(40deg) rotateZ(-4deg) scale(.92); } to { opacity: 1; transform: none; } }
    .plans figure { animation: d3-plan linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }

    /* Produkt-Bühne auf der Startseite und Weg-Diagramm */
    @keyframes d3-buehne { from { opacity: .5; transform: perspective(1800px) rotateX(16deg) translateY(50px); } to { opacity: 1; transform: none; } }
    .product-row, .bus-diagram { animation: d3-buehne linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .knx-hero .phone, .knx-hero-art .phone { transform: none !important; }
}

/* ===================================================================
   Weitere Effekte (05.11.2026), ebenfalls nur CSS und nur ohne
   „Bewegung reduzieren“
   =================================================================== */
@property --d-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@media (prefers-reduced-motion: no-preference) {

  /* Lesefortschritt: gelbe Linie unter der Kopfzeile */
  @supports (animation-timeline: scroll()) {
    @keyframes d-fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: linear-gradient(90deg, var(--d-yellow), var(--d-yellow-2));
      transform-origin: 0 50%; animation: d-fortschritt linear both; animation-timeline: scroll(root);
    }
    /* Kopfzeile wird beim Scrollen dichter und bekommt Schatten */
    @keyframes d-kopf { to { background-color: rgba(10, 16, 25, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } }
    body:has(.knx-hero) .site-header, .theme-knx .site-header { animation: d-kopf linear both; animation-timeline: scroll(root); animation-range: 0 240px; }
  }

  /* Hintergrund: zwei sehr langsame Lichtflecken (Aurora) */
  body:has(.knx-hero)::before, body.theme-knx::before {
    content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
    background:
      radial-gradient(30vmax 22vmax at 20% 30%, rgba(31, 78, 121, .35), transparent 70%),
      radial-gradient(26vmax 18vmax at 80% 70%, rgba(242, 179, 61, .07), transparent 70%);
    animation: d-aurora 40s ease-in-out infinite alternate;
  }
  @keyframes d-aurora { to { transform: translate3d(6vmax, -4vmax, 0) rotate(8deg); } }

  /* Hauptüberschrift: einmaliger goldener Lichtstreif beim Laden */
  .knx-hero h1, .page-hero h1 {
    background: linear-gradient(100deg, var(--d-text) 0 40%, var(--d-yellow-2) 50%, var(--d-text) 60% 100%) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: st-auftauchen .7s cubic-bezier(.2, .7, .2, 1) both, d-lichtstreif 2.4s .6s ease-out both;
  }
  @keyframes d-lichtstreif { from { background-position: 100% 0; } to { background-position: 0 0; } }

  /* Knöpfe: Glanz wandert beim Darüberfahren durch */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  .btn:hover::after { transform: translateX(120%); transition: transform .7s ease; }

  /* Vollversion: umlaufende Lichtkante */
  .plan.full { border: 1px solid transparent !important;
    background:
      linear-gradient(160deg, #2A2417, #1B2230 55%, #161D28) padding-box,
      conic-gradient(from var(--d-winkel), rgba(242, 179, 61, .25) 0deg, var(--d-yellow) 40deg, rgba(242, 179, 61, .25) 90deg, rgba(242, 179, 61, .25) 360deg) border-box !important;
    animation: d-kante 6s linear infinite; }
  @keyframes d-kante { to { --d-winkel: 360deg; } }

  /* Handys: Glanz huscht über den Bildschirm beim Darüberfahren */
  .gallery .phone, .product-row .media .phone { overflow: hidden; }
  .gallery .phone::after, .product-row .media .phone::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-130%);
  }
  .gallery figure:hover .phone::after, .product-row .media .phone:hover::after { transform: translateX(130%); transition: transform .9s ease; }

  @supports (animation-timeline: view()) {
    /* Abschnittstitel: gelbe Linie wächst beim Hineinscrollen */
    .section-head h2 { position: relative; padding-bottom: 14px; }
    .section-head h2::after {
      content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; border-radius: 3px;
      background: var(--d-yellow); transform-origin: 0 50%;
      animation: d-linie linear both; animation-timeline: view(); animation-range: entry 20% cover 40%;
    }
    @keyframes d-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Parallax: Hintergrund-Handy im Kopf bleibt beim Scrollen zurück */
    @keyframes d-parallax { to { translate: 0 120px; } }
    .knx-hero .art, .knx-hero-art { animation: d-parallax linear both; animation-timeline: scroll(root); animation-range: 0 700px; }

    /* Symbole der Grundsätze und Funktionsgruppen drehen sich einmal ein */
    @keyframes d-symbol { from { transform: rotateY(180deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
    .principles .glyph, .feature-group h3 .ico { animation: d-symbol linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
}

/* Google-Play-Abzeichen: Schatten folgt der Form des Abzeichens, keine abgeschnittenen Ecken */
.stores .play-badge img { box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3); transition: transform .2s var(--d-ease), box-shadow .2s; }
.stores .play-badge:hover img { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 3px 6px rgba(0, 0, 0, .3); }

/* Handy-Rahmen auch für die Bildschirmfotos, die bisher ohne Gerät dastanden
   (Grundriss mit Ebenen, Grundriss zeichnen, 3D-Haus hoch und quer) */
.plans figure img {
  border: 10px solid #0b0f0e !important; border-radius: 30px !important; background: #0b0f0e;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 1px 0 rgba(255, 255, 255, .08) inset, 0 26px 60px rgba(0, 0, 0, .5);
}
.plans-3d .hoch img { border-width: 9px !important; border-radius: 34px !important; }
.plans figure { overflow: visible !important; position: relative; }
/* kleine Kamera am Rand: oben bei Hochformat, links bei Querformat */
.plans figure::before {
  content: ""; position: absolute; z-index: 2; width: 6px; height: 6px; border-radius: 50%;
  background: #1d2430; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  left: 2px; top: calc(50% - 22px);
}
.plans-3d .hoch::before { left: calc(50% - 3px); top: 2px; }
.plans figure:has(figcaption)::before { top: calc(50% - 32px); }
.plans-3d .hoch:has(figcaption)::before { top: 2px; }
.plans figure:hover img { scale: 1; }