/* Radusch Audio Video Projekte – Stylesheet
   Schrift: Archivo (selbst gehostet, keine Verbindung zu Google) */
@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --orange: #E85521;
  --orange-dark: #B8401A;
  --saal: #1E1B19;      /* Kinosaal-Dunkel */
  --saal-2: #2A2623;
  --stein: #EDEAE5;     /* heller Hintergrund */
  --papier: #F7F5F2;
  --text: #24201D;
  --text-2: #5E5853;
  --linie: #D6D1CA;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}
img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: #fff; color: var(--text);
  border-bottom: 1px solid var(--linie);
}
.kopf--hell { position: static; color: var(--text); background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; }
.logo img { height: 72px; width: auto; }
@media (max-width: 600px) { .kopf .wrap { height: 72px; } .logo img { height: 58px; } }
.marke { text-decoration: none; line-height: 1; display: flex; flex-direction: column; gap: 5px; }
.marke b { font-weight: 800; font-stretch: 125%; font-size: 1.45rem; letter-spacing: -0.01em; }
.marke b span { color: var(--orange); }
.marke small { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; opacity: .75; }
.nav { display: flex; gap: 28px; font-size: 0.95rem; font-weight: 500; }
.nav a { text-decoration: none; opacity: .85; }
.nav a:hover { opacity: 1; color: var(--orange); }
.menu-knopf { display: none; background: none; border: 1px solid currentColor; color: inherit; font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
@media (max-width: 820px) {
  .menu-knopf { display: block; }
  .nav { display: none; position: absolute; top: 68px; right: 16px; left: 16px; flex-direction: column; gap: 0;
         background: var(--saal-2); color: #fff; border-radius: 8px; padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
  .nav.offen { display: flex; }
  .nav a { padding: 12px 20px; opacity: 1; }
}

/* ---------- Hero: Lichtkegel eines Projektors ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--saal); color: #fff;
  min-height: min(84vh, 760px);
  display: flex; align-items: flex-end;
  padding: 120px 0 72px;
}
.hero-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .38;
}
.hero::before { /* Lichtkegel */
  content: ""; position: absolute; top: -10%; right: -5%;
  width: 90%; height: 130%;
  background: conic-gradient(from 222deg at 100% 0%, transparent 0deg, rgba(232,85,33,.30) 14deg, rgba(255,214,190,.10) 24deg, transparent 40deg);
  filter: blur(6px);
  transform-origin: 100% 0%;
  animation: kegel 2.4s cubic-bezier(.2,.7,.2,1) both;
}
.hero::after { /* Leinwand-Schimmer unten */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(20,17,15,.85), rgba(20,17,15,.2) 70%, transparent);
  height: 70%;
}
@keyframes kegel { from { opacity: 0; transform: rotate(6deg); } to { opacity: 1; transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero h1 {
  margin: 0 0 28px;
  font-size: clamp(2.6rem, 8.2vw, 6.6rem);
  line-height: .96;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.03em;
  max-width: 11ch;
}
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34em; color: rgba(255,255,255,.82); margin: 0 0 36px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.knopf {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 14px 24px; border-radius: 6px; font-size: 1rem;
  background: var(--orange); color: #fff; border: 2px solid var(--orange);
}
.knopf:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.knopf--rand { background: transparent; border-color: rgba(255,255,255,.5); }
.knopf--rand:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ---------- Abschnitte ---------- */
section { padding: 104px 0; }
@media (max-width: 600px) { section { padding: 72px 0; } }
h2 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.04; font-weight: 750; font-stretch: 115%;
  letter-spacing: -0.02em; margin: 0 0 20px; max-width: 18ch;
}
h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 700; font-stretch: 105%; margin: 0 0 8px; }
.intro { font-size: 1.2rem; color: var(--text-2); max-width: 36em; margin: 0; }

/* Leistungen als Zeilenliste */
.leistungen { background: var(--papier); }
.liste { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.liste li {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 12px 48px;
  padding: 30px 0; border-bottom: 1px solid var(--linie);
}
.liste h3 { font-size: 1.55rem; font-stretch: 112%; margin: 0; }
.liste p { margin: 0; color: var(--text-2); max-width: 38em; }
@media (max-width: 720px) { .liste li { grid-template-columns: 1fr; } }

/* Ablauf – echte Reihenfolge */
.ablauf { background: var(--stein); }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; counter-reset: s; }
.schritt { padding: 0 32px 0 0; border-left: 3px solid var(--orange); padding-left: 24px; }
.schritt + .schritt { margin-left: 8px; }
.schritt .nr { display: block; font-weight: 800; font-stretch: 125%; font-size: 3rem; line-height: 1; color: var(--orange); margin-bottom: 18px; }
.schritt p { color: var(--text-2); margin: 0; }
@media (max-width: 820px) {
  .schritte { grid-template-columns: 1fr; gap: 40px; }
  .schritt + .schritt { margin-left: 0; }
}

/* Mediensteuerung – dunkles Band */
.steuerung { background: var(--saal); color: #fff; }
.steuerung .raster { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.steuerung .intro { color: rgba(255,255,255,.75); }
.steuerung ul { margin: 28px 0 0; padding: 0 0 0 1.1em; color: rgba(255,255,255,.85); }
.steuerung li { margin: 6px 0; }
.steuerung li::marker { color: var(--orange); }
.steuerung-bild { margin: 0; justify-self: center; width: min(380px, 100%); }
.steuerung-bild img { border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.45); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.fernbedienung {
  justify-self: center;
  width: min(280px, 100%); aspect-ratio: 9 / 17;
  background: linear-gradient(160deg, #34302c, #1a1816);
  border-radius: 34px; padding: 22px 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 12px;
}
.fernbedienung .zeile { font-size: .78rem; color: rgba(255,255,255,.55); }
.fernbedienung .szene {
  border-radius: 14px; padding: 14px 16px; font-weight: 600; font-size: .98rem;
  background: rgba(255,255,255,.06); color: #fff; text-align: left;
}
.fernbedienung .szene.aktiv { background: var(--orange); }
.fernbedienung .szene small { display: block; font-weight: 400; font-size: .78rem; opacity: .75; margin-top: 2px; }
@media (max-width: 820px) { .steuerung .raster { grid-template-columns: 1fr; gap: 48px; } }

/* Gestaltung / Beratung – zweispaltig */
.haltung .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 72px; margin-top: 48px; }
.haltung p { color: var(--text-2); margin: 0; }
@media (max-width: 720px) { .haltung .raster { grid-template-columns: 1fr; gap: 36px; } }

/* Kontakt */
.kontakt { background: var(--stein); }
.orte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 48px 0 40px; }
.ort { background: var(--papier); border-radius: 10px; padding: 28px; }
.ort address { font-style: normal; color: var(--text-2); margin: 4px 0 14px; }
.ort a { color: var(--orange-dark); font-weight: 600; }
.mail {
  display: inline-block; font-weight: 750; font-stretch: 112%;
  font-size: clamp(1.25rem, 3.4vw, 2.2rem); color: var(--text);
  text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 2px;
  overflow-wrap: anywhere;
}
.mail:hover { color: var(--orange-dark); }
@media (max-width: 720px) { .orte { grid-template-columns: 1fr; } }

/* Fuß */
.fuss { background: var(--saal); color: rgba(255,255,255,.7); padding: 40px 0; font-size: .92rem; }
.fuss .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
.fuss nav { display: flex; gap: 24px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: #fff; }

/* Rechtstexte */
.recht { padding: 72px 0 104px; }
.recht .wrap { max-width: 760px; }
.recht h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-stretch: 115%; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 32px; }
.recht h2 { font-size: 1.35rem; font-stretch: 105%; margin: 40px 0 10px; max-width: none; }
.recht p, .recht li { color: var(--text-2); }
.platzhalter { background: #FFE9DE; color: var(--orange-dark); padding: 0 4px; border-radius: 3px; }
.zurueck { font-weight: 600; font-size: .95rem; text-decoration: none; }
.zurueck:hover { color: var(--orange-dark); }

/* Projekte-Galerie */
.projekte { background: var(--papier); padding-top: 0; }
.galerie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px;
  grid-auto-flow: dense;
}
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--stein); }
.galerie figcaption { font-size: .9rem; color: var(--text-2); margin-top: 8px; }
.g-gross { grid-column: span 2; grid-row: span 2; }
.g-gross img { aspect-ratio: auto; height: calc(100% - 30px); }
.g-breit { grid-column: span 2; }
.g-breit img { aspect-ratio: 2 / 1; }
@media (max-width: 720px) {
  .galerie { grid-template-columns: 1fr 1fr; gap: 12px; }
  .g-gross, .g-breit { grid-column: span 2; grid-row: auto; }
  .g-gross img { height: auto; aspect-ratio: 3 / 2; }
}

/* Ablauf-Bilder */
.ablauf-bilder { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-top: 56px; }
.ablauf-bilder img { width: 100%; height: 280px; object-fit: cover; border-radius: 6px; }
@media (max-width: 720px) { .ablauf-bilder { grid-template-columns: 1fr; } .ablauf-bilder img { height: 200px; } }

/* Kontakt direkt */
.direkt { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: baseline; }
.tel { font-weight: 750; font-stretch: 112%; font-size: clamp(1.25rem, 3.4vw, 2.2rem); color: var(--text); text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 2px; }
.tel:hover { color: var(--orange-dark); }

/* Anfrageformular */
.anfrage { background: var(--papier); border-radius: 10px; padding: clamp(20px, 4vw, 36px); margin: 0 0 40px; display: grid; gap: 20px; }
.anfrage h3 { font-size: 1.6rem; font-stretch: 112%; margin: 0; }
.anfrage-hinweis { margin: 0; color: var(--text-2); max-width: 40em; }
.themen { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.themen legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.themen label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--linie); border-radius: 999px; cursor: pointer; font-size: .95rem; background: #fff; }
.themen label:has(input:checked) { border-color: var(--orange); background: #FFF1EA; color: var(--orange-dark); }
.themen input { accent-color: var(--orange); margin: 0; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.felder label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; min-width: 0; }
.felder .breit { grid-column: 1 / -1; }
.felder input, .felder select, .felder textarea, .ersatz textarea {
  font: inherit; font-weight: 400; color: var(--text); background: #fff;
  border: 1px solid var(--linie); border-radius: 6px; padding: 11px 12px; width: 100%;
}
.felder input:focus, .felder select:focus, .felder textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.anfrage button.knopf { justify-self: start; cursor: pointer; font-family: inherit; }
.fehler { margin: 0; color: #B3261E; font-weight: 600; }
.ersatz { display: grid; gap: 12px; border-top: 1px solid var(--linie); padding-top: 20px; }
.ersatz p { margin: 0; color: var(--text-2); }
.ersatz strong { color: var(--text); overflow-wrap: anywhere; }
.knopf--hell { background: #fff; color: var(--text); border-color: var(--linie); }
.knopf--hell:hover { background: var(--stein); border-color: var(--text-2); }
@media (max-width: 600px) { .felder { grid-template-columns: 1fr; } }

/* Galerie ohne Bildunterschriften */
.g-gross img { height: 100%; }
section[id], .anfrage { scroll-margin-top: 100px; }

/* Galerie: feste Zeilenhöhe, zwei große Bilder */
.galerie { grid-auto-rows: clamp(150px, 17vw, 240px); }
.galerie figure { min-width: 0; }
.galerie img, .g-gross img, .g-breit img { aspect-ratio: auto; height: 100%; }
.g-gross { grid-column: span 2; grid-row: span 2; }
.g-rechts { grid-column: 2 / span 2; }
@media (max-width: 720px) {
  .galerie { grid-auto-rows: 38vw; }
  .g-gross, .g-rechts { grid-column: 1 / -1; grid-row: span 2; }
  .g-gross img { aspect-ratio: auto; height: 100%; }
}

/* =========================================================
   Dynamik: Einstieg, Laufband, Produkt-Explorer, FAQ
   ========================================================= */
:root {
  --svg-grund: #EFEAE3; --svg-mauer: #CFC6BB; --svg-fuge: #B5AA9D;
  --svg-putz: #E3DDD5; --svg-spachtel: #FFFFFF; --svg-farbe: #E85521;
  --svg-text: #4A443F; --svg-boden: #D9CFC2; --svg-holz: #8A6440; --svg-holz-2: #A27A52;
  --svg-stoff: #3B3632; --svg-tv: #1E1B19; --svg-bild: #3A4A5C; --svg-sonne: #F3C77A;
}

/* Hero: Zeilen fahren nacheinander herein */
.hero h1 span { display: inline-block; animation: zeile .9s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 span:nth-child(2) { animation-delay: .12s; }
.hero h1 span:nth-child(3) { animation-delay: .24s; }
.hero p { animation: zeile .9s .36s cubic-bezier(.2,.7,.2,1) both; }
.hero .knoepfe { animation: zeile .9s .48s cubic-bezier(.2,.7,.2,1) both; }
@keyframes zeile { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Laufband mit Mosaik-Quadraten aus dem Logo */
.band { background: var(--orange); color: #fff; overflow: hidden; padding: 18px 0; }
.band-lauf { display: flex; width: max-content; align-items: center; gap: 28px; animation: laufen 38s linear infinite; }
.band span { font-weight: 750; font-stretch: 120%; font-size: clamp(1.1rem, 2.2vw, 1.6rem); white-space: nowrap; letter-spacing: -0.01em; }
.band i { width: 12px; height: 12px; background: rgba(255,255,255,.55); flex: none; box-shadow: 14px -8px 0 -2px rgba(255,255,255,.3); }
.band:hover .band-lauf { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Produkt-Explorer */
.leistungen .wrap > .intro { margin-bottom: 40px; }
.explorer { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 28px; align-items: start; }
.ex-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 108px; }
.ex-tab {
  font: inherit; text-align: left; cursor: pointer; color: var(--text);
  background: transparent; border: 0; border-left: 3px solid var(--linie);
  padding: 12px 16px; display: grid; gap: 2px; transition: background .2s, border-color .2s;
}
.ex-tab b { font-weight: 700; font-size: 1.02rem; }
.ex-tab span { font-size: .88rem; color: var(--text-2); }
.ex-tab:hover { background: var(--stein); }
.ex-tab[aria-selected="true"] { border-left-color: var(--orange); background: #fff; }
.ex-tab[aria-selected="true"] b { color: var(--orange-dark); }
.ex-panel { background: #fff; border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; animation: panel .45s cubic-bezier(.2,.7,.2,1); }
@keyframes panel { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.ex-media { background: var(--svg-grund); min-height: 280px; }
.ex-media img { width: 100%; height: 100%; object-fit: cover; }
.ex-svg { width: 100%; height: 100%; display: block; }
.ex-text { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ex-text h3 { font-size: 1.6rem; font-stretch: 112%; margin: 0; }
.ex-lead { margin: 0; color: var(--text); }
.ex-fakten { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ex-fakten li { padding-left: 22px; position: relative; color: var(--text-2); font-size: .97rem; }
.ex-fakten li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--orange); }
.ex-tipp { margin: 4px 0 0; font-size: .95rem; background: var(--stein); border-radius: 6px; padding: 12px 14px; color: var(--text-2); }
.ex-tipp b { color: var(--text); }
.ex-anfrage { align-self: flex-start; margin-top: auto; }

/* Animationen in den Grafiken */
.wellen path { transform-box: fill-box; transform-origin: left center; animation: welle 2.4s ease-out infinite; opacity: 0; }
.wellen path:nth-child(2) { animation-delay: .8s; }
.wellen path:nth-child(3) { animation-delay: 1.6s; }
@keyframes welle { 0% { opacity: .9; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(110px) scale(1.9); } }
.tv-lift { animation: lift 5s ease-in-out infinite; }
@keyframes lift { 0%, 12% { transform: translateY(150px); } 45%, 80% { transform: translateY(0); } 100% { transform: translateY(150px); } }

@media (max-width: 960px) {
  .explorer { grid-template-columns: 1fr; }
  .ex-tabs { position: static; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: thin; }
  .ex-tab { border-left: 0; border: 1px solid var(--linie); border-radius: 999px; padding: 9px 16px; flex: none; background: #fff; }
  .ex-tab span { display: none; }
  .ex-tab[aria-selected="true"] { border-color: var(--orange); background: #FFF1EA; }
  .ex-panel { grid-template-columns: 1fr; min-height: 0; }
  .ex-media { aspect-ratio: 4 / 3; min-height: 0; }
}

/* FAQ */
.faq { background: var(--stein); }
.faq-raster { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px 64px; align-items: start; }
.faq-liste { display: grid; gap: 10px; }
.faq details { background: var(--papier); border-radius: 8px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 20px; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--orange), var(--orange)) center / 100% 2px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 2px 100% no-repeat;
  transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 20px 20px; color: var(--text-2); max-width: 60ch; }
@media (max-width: 820px) { .faq-raster { grid-template-columns: 1fr; } }

/* Galerie: sanftes Zoomen */
.galerie figure { overflow: hidden; border-radius: 6px; }
.galerie img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.galerie figure:hover img { transform: scale(1.04); }

/* Einblenden beim Scrollen (nur wo der Browser das kann; sonst sofort sichtbar) */
@supports (animation-timeline: view()) {
  .reveal { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes auftauchen { from { opacity: .2; transform: translateY(36px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 span, .hero p, .hero .knoepfe, .band-lauf, .ex-panel, .wellen path, .tv-lift, .reveal { animation: none !important; }
  .wellen path { opacity: .6; }
  .galerie img { transition: none; }
}

[hidden] { display: none !important; }
.ex-media { background: var(--svg-grund); display: flex; align-items: center; }
.ex-media img { align-self: stretch; }

/* Illustrationen im Produktbereich */
:root {
  --svg-linie: #4A443F; --svg-himmel: #E6EEF0; --svg-gras: #7FA35A; --svg-gras-2: #5E8440;
  --svg-erde: #6E5038; --svg-stein: #6E6A66; --svg-kino: #1E1B19; --svg-kino-2: #2A2623; --svg-kino-3: #3B3632;
}
.ex-svg text { font-family: "Archivo", system-ui, sans-serif; }
.fluss { animation: fluss 1.1s linear infinite; }
@keyframes fluss { to { stroke-dashoffset: -28; } }
.welle-runter path { animation: runter 2.4s ease-out infinite; opacity: 0; transform-box: fill-box; transform-origin: center top; }
.welle-runter path:nth-child(2) { animation-delay: .8s; }
.welle-runter path:nth-child(3) { animation-delay: 1.6s; }
@keyframes runter { 0% { opacity: .9; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(190px) scale(2.6); } }
.wellen-garten path { animation: welle 2.2s ease-out infinite; opacity: 0; transform-box: fill-box; transform-origin: left center; }
.wellen-garten path:nth-child(even) { animation-delay: 1.1s; }
.puls { fill: none; stroke: var(--orange); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: puls 1.8s ease-out infinite; }
.puls.p2 { animation-delay: .6s; } .puls.p3 { animation-delay: 1.2s; }
@keyframes puls { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.led { fill: #CFC6BB; animation: led 4s infinite; }
.led.l2 { animation-delay: .5s; } .led.l3 { animation-delay: 1s; } .led.l4 { animation-delay: 1.5s; }
@keyframes led { 0%, 8% { fill: #CFC6BB; } 12%, 85% { fill: #3FA34D; } 100% { fill: #CFC6BB; } }
.leinwand-bild { animation: flimmern 6s ease-in-out infinite; }
@keyframes flimmern { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) {
  .fluss, .welle-runter path, .wellen-garten path, .puls, .led, .leinwand-bild { animation: none !important; }
  .welle-runter path, .wellen-garten path { opacity: .6; }
  .led { fill: #3FA34D; }
}

/* Produkt-Panel: Illustration oben in voller Breite, Text darunter */
.ex-panel { grid-template-columns: 1fr; min-height: 0; }
.ex-media { aspect-ratio: 600 / 420; min-height: 0; }
.ex-media img { width: 100%; height: 100%; }
.ex-text { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px 36px; align-items: start; }
.ex-text h3, .ex-text .ex-lead { grid-column: 1; }
.ex-text .ex-fakten { grid-column: 2; grid-row: 1 / span 3; }
.ex-text .ex-tipp { grid-column: 1; }
.ex-text .ex-anfrage { grid-column: 1; margin-top: 4px; }
@media (max-width: 760px) {
  .ex-text { grid-template-columns: 1fr; }
  .ex-text > * { grid-column: 1 !important; grid-row: auto !important; }
}
.ex-text .ex-anfrage { justify-self: start; }

/* =========================================================
   Illustrationen v2: Aufbau beim Öffnen + ruhige Endlos-Animationen
   ========================================================= */
.ex-svg * { transform-box: fill-box; }
.ex-svg .auf { animation: aufbau .8s cubic-bezier(.16,.84,.3,1) both; animation-delay: var(--d, 0s); }
@keyframes aufbau { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Gemeinsame Schallwellen */
.schall-wand path, .schall-rechts path { fill: none; stroke-width: 3; stroke-linecap: round; transform-origin: left center;
  animation: schall 3s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
.schall-rechts path { stroke-width: 2.5; }
.schall-wand path:nth-child(2), .schall-rechts path:nth-child(2) { animation-delay: 1s; }
.schall-wand path:nth-child(3), .schall-rechts path:nth-child(3) { animation-delay: 2s; }
.schall-rechts.s2 path { animation-duration: 2.6s; }
@keyframes schall { 0% { opacity: 0; transform: translateX(0) scale(.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(120px) scale(2.2); } }

/* Unsichtbar: Roller streicht die Wand, danach klingt sie */
.farbe { transform-origin: center top; animation: streichen 8s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes streichen { 0%, 6% { transform: scaleY(0); } 42%, 92% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.roller { animation: rollen 8s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes rollen { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; transform: translateY(0); } 42% { opacity: 1; transform: translateY(300px); } 50%, 100% { opacity: 0; transform: translateY(300px); } }
.paneel { animation: aufbau .8s cubic-bezier(.16,.84,.3,1) both .15s, zittern .18s linear 1s infinite alternate; }
@keyframes zittern { from { transform: translateX(-.6px); } to { transform: translateX(.6px); } }

/* Einbau: Hochtöner schwenkt, Schall fällt auf das Sofa */
.hochtoener { transform-origin: center; animation: schwenken 5s ease-in-out infinite alternate; }
@keyframes schwenken { from { transform: rotate(-18deg) translateX(-3px); } to { transform: rotate(18deg) translateX(3px); } }
.schall-runter path { transform-origin: center top; animation: runter2 3.2s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
.schall-runter path:nth-child(2) { animation-delay: .8s; } .schall-runter path:nth-child(3) { animation-delay: 1.6s; } .schall-runter path:nth-child(4) { animation-delay: 2.4s; }
@keyframes runter2 { 0% { opacity: 0; transform: translateY(0) scale(.8); } 12% { opacity: .95; } 100% { opacity: 0; transform: translateY(200px) scale(3.2, 2); } }
.kegel { animation: aufbau .8s both .3s, atmen 4s ease-in-out 1.1s infinite alternate; }
@keyframes atmen { from { opacity: .75; } to { opacity: 1; } }

/* Garten */
.sonne { transform-origin: center; animation: leuchten 5s ease-in-out infinite alternate; }
@keyframes leuchten { from { transform: scale(.92); opacity: .85; } to { transform: scale(1.08); opacity: 1; } }
.wolke { animation: ziehen 22s ease-in-out infinite alternate; }
@keyframes ziehen { from { transform: translateX(-30px); } to { transform: translateX(160px); } }
.halm { transform-origin: center bottom; animation: wiegen 3.6s ease-in-out infinite alternate; }
.halm.h2 { animation-duration: 4.2s; animation-delay: -1s; } .halm.h3 { animation-duration: 3.2s; animation-delay: -2s; }
@keyframes wiegen { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.bass ellipse { transform-origin: center; animation: bass 2.4s ease-out infinite; opacity: 0; }
.bass ellipse:nth-child(2) { animation-delay: 1.2s; }
@keyframes bass { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.2); } }

/* Heimkino */
.strahl { animation: strahl 3.4s ease-in-out infinite alternate; }
@keyframes strahl { from { opacity: .45; } to { opacity: .8; } }
.berge-hinten { animation: gleiten 14s ease-in-out infinite alternate; }
.berge-vorn { animation: gleiten 9s ease-in-out infinite alternate-reverse; }
@keyframes gleiten { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
.leinwand { animation: aufbau .8s both .1s; }
.deckenlicht circle { transform-origin: center; animation: deckenglow 2.4s ease-in-out infinite alternate; }
.deckenlicht circle:nth-child(2) { animation-delay: .6s; } .deckenlicht circle:nth-child(3) { animation-delay: 1.2s; } .deckenlicht circle:nth-child(4) { animation-delay: 1.8s; }
@keyframes deckenglow { from { opacity: .25; transform: scale(.8); } to { opacity: 1; transform: scale(1.25); } }
.hinter rect { animation: hinter 2.4s ease-in-out infinite alternate; }
.hinter rect:nth-child(2) { animation-delay: .4s; } .hinter rect:nth-child(3) { animation-delay: .8s; }
@keyframes hinter { from { opacity: .25; } to { opacity: .85; } }

/* Multiroom */
.ring circle { fill: none; stroke: var(--orange); stroke-width: 2.5; transform-origin: center; animation: ring 2.4s ease-out infinite; }
.ring.r2 circle { animation-delay: .8s; } .ring.r3 circle { animation-delay: 1.6s; }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }
.note { animation: note 3.6s ease-out infinite; opacity: 0; }
.note.n2 { animation-delay: 1.2s; } .note.n3 { animation-delay: .6s; } .note.n4 { animation-delay: 2s; }
@keyframes note { 0% { opacity: 0; translate: 0 10px; } 20% { opacity: 1; } 100% { opacity: 0; translate: 10px -46px; } }
.eq rect { transform-origin: center bottom; animation: eq .9s ease-in-out infinite alternate; }
.eq rect:nth-child(2) { animation-duration: .6s; } .eq rect:nth-child(3) { animation-duration: 1.1s; } .eq rect:nth-child(4) { animation-duration: .75s; }
.eq.e2 rect { animation-duration: 1.4s; } .eq.e3 rect:nth-child(odd) { animation-duration: 1.2s; }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* Mediensteuerung: Tipp, Leitungen zeichnen sich, Geräte gehen nacheinander an */
.tipp { transform-origin: center; animation: tipp 6s ease-out infinite; opacity: 0; }
@keyframes tipp { 0%, 4% { opacity: 0; transform: scale(.4); } 8% { opacity: .9; transform: scale(1); } 18% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } }
.linie { stroke-dasharray: 100; stroke-dashoffset: 100; animation: zeichnen 6s cubic-bezier(.5,0,.2,1) infinite; }
.linie.l2 { animation-delay: .3s; } .linie.l3 { animation-delay: .6s; } .linie.l4 { animation-delay: .9s; }
@keyframes zeichnen { 0%, 10% { stroke-dashoffset: 100; opacity: 1; } 24%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.led { fill: #D6CEC4; animation: geraet 6s infinite; }
.led.l1 { animation-delay: .3s; } .led.l2 { animation-delay: .6s; } .led.l3 { animation-delay: .9s; } .led.l4 { animation-delay: 1.2s; }
@keyframes geraet { 0%, 22% { fill: #D6CEC4; } 26%, 88% { fill: #3FA34D; } 96%, 100% { fill: #D6CEC4; } }

/* Bildverteilung: Datenpakete laufen über die Leitungen */
.paket { offset-rotate: 0deg; animation: paket 2.6s cubic-bezier(.5,0,.5,1) infinite; }
.paket.p1 { animation-delay: .5s; } .paket.p2 { animation-delay: 1s; } .paket.p3 { animation-delay: 1.3s; } .paket.p4 { animation-delay: 1.8s; } .paket.p5 { animation-delay: 2.3s; }
@keyframes paket { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.switch-leds circle { animation: blinken .9s steps(2) infinite; }
.switch-leds circle:nth-child(2) { animation-delay: .2s; } .switch-leds circle:nth-child(3) { animation-delay: .5s; } .switch-leds circle:nth-child(4) { animation-delay: .1s; } .switch-leds circle:nth-child(5) { animation-delay: .35s; }
@keyframes blinken { 50% { opacity: .3; } }
.schirm { animation: schirm 5s ease-in-out infinite alternate; }
.schirm.c2 { animation-delay: -1.5s; } .schirm.c3 { animation-delay: -3s; }
@keyframes schirm { from { fill: #2E3B4E; } to { fill: #45597A; } }

/* Möbel: Fernseher fährt sanft hoch und schaltet sich ein */
.tv-hoch { animation: tvhoch 7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes tvhoch { 0%, 12% { transform: translateY(170px); } 40%, 78% { transform: translateY(0); } 100% { transform: translateY(170px); } }
.tv-bild { animation: tvan 7s ease infinite; }
@keyframes tvan { 0%, 40% { opacity: 0; } 48%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
.stoff-puls rect { animation: stoff 7s ease-in-out infinite; opacity: 0; }
@keyframes stoff { 0%, 45% { opacity: 0; } 55%, 70% { opacity: .8; } 80%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ex-svg *, .ex-svg .auf { animation: none !important; }
  .farbe { transform: none; } .roller, .tipp, .paket, .note { opacity: 0; }
  .schall-wand path, .schall-rechts path, .schall-runter path { opacity: .5; }
  .linie { stroke-dashoffset: 0; } .led { fill: #3FA34D; } .tv-bild { opacity: 1; }
}
/* Stereo-Deckenlautsprecher */
.hochtoener { animation-name: schwenken2; animation-duration: 4s; }
@keyframes schwenken2 { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.schall-runter.rechts path { animation-delay: .4s; }
.schall-runter.rechts path:nth-child(2) { animation-delay: 1.2s; } .schall-runter.rechts path:nth-child(3) { animation-delay: 2s; } .schall-runter.rechts path:nth-child(4) { animation-delay: 2.8s; }
.schall-runter path { animation-name: runter3; }
@keyframes runter3 { 0% { opacity: 0; transform: translateY(0) scale(.8); } 12% { opacity: .95; } 100% { opacity: 0; transform: translateY(250px) scale(2.6, 1.8); } }
.ex-svg .dreh { transform-box: view-box; transform-origin: 0 0; }

/* =========================================================
   Illustrationen v3: Räume mit Perspektive, Licht und weicher Bewegung
   ========================================================= */
.ex-media { background: #EDE7DF; }
/* Unsichtbar: Röntgenlinse gleitet über die Wand, die Wand strahlt Schall ab */
.linse, .linsenring { animation: linse 9s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes linse { 0% { transform: translate(-40px, -6px); } 50% { transform: translate(50px, 8px); } 100% { transform: translate(110px, -4px); } }
.raumschall ellipse { transform-origin: center; animation: raumschall 4.2s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
.raumschall ellipse:nth-child(2) { animation-delay: 1.4s; } .raumschall ellipse:nth-child(3) { animation-delay: 2.8s; }
@keyframes raumschall { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: .7; } 100% { opacity: 0; transform: scale(3.6); } }
.blatt { transform-origin: center bottom; animation: blatt 5s ease-in-out infinite alternate; }
@keyframes blatt { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.lampenlicht { animation: lampe 6s ease-in-out infinite alternate; }
@keyframes lampe { from { opacity: .28; } to { opacity: .42; } }

/* Weiche Schallwellen (Decke, Garten) */
.schallweich path { transform-origin: center top; opacity: 0; animation: weich 3.6s cubic-bezier(.25,.6,.35,1) infinite; }
.schallweich path:nth-child(2) { animation-delay: .9s; } .schallweich path:nth-child(3) { animation-delay: 1.8s; } .schallweich path:nth-child(4) { animation-delay: 2.7s; }
.schallweich.rechts path { animation-delay: .45s; } .schallweich.rechts path:nth-child(2) { animation-delay: 1.35s; } .schallweich.rechts path:nth-child(3) { animation-delay: 2.25s; } .schallweich.rechts path:nth-child(4) { animation-delay: 3.15s; }
@keyframes weich { 0% { opacity: 0; transform: translateY(0) scale(.7); } 14% { opacity: .85; } 100% { opacity: 0; transform: translateY(240px) scale(2.8, 1.9); } }
.schallweich.garten path { transform-origin: right center; animation-name: weichlinks; }
@keyframes weichlinks { 0% { opacity: 0; transform: translateX(0) scale(.7); } 14% { opacity: .85; } 100% { opacity: 0; transform: translateX(-190px) scale(2.2); } }

/* Garten */
.wolke.w2 { animation-duration: 30s; animation-direction: alternate-reverse; }
.bassfeld { animation: bassfeld 2.4s ease-in-out infinite; }
@keyframes bassfeld { 0%, 100% { opacity: 0; } 40% { opacity: .35; } }
.halm { animation-duration: 4.6s; }
@keyframes wiegen { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }

/* Heimkino */
.leinwandglow { animation: lglow 5s ease-in-out infinite alternate; }
@keyframes lglow { from { opacity: .22; } to { opacity: .42; } }
.filmwolken { animation: gleiten 16s ease-in-out infinite alternate; }
.staub circle { animation: staub 7s ease-in-out infinite; opacity: 0; }
.staub.s1 { animation-duration: 9s; animation-delay: -2s; } .staub.s2 { animation-duration: 11s; animation-delay: -5s; } .staub.s3 { animation-duration: 8s; animation-delay: -3s; }
.staubwolke circle.staub { animation: staub 7s ease-in-out infinite; }
@keyframes staub { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; transform: translate(18px, 26px); } }

/* Multiroom: atmende Schallfelder statt Noten */
.schallfeld { transform-origin: center; animation: feld 3.2s ease-in-out infinite alternate; }
.schallfeld.f2 { animation-duration: 2.6s; animation-delay: -1s; } .schallfeld.f3 { animation-duration: 3.8s; animation-delay: -2s; }
@keyframes feld { from { transform: scale(.82); opacity: .55; } to { transform: scale(1.06); opacity: 1; } }
.eq.still rect { animation: none; transform: scaleY(.25); }
.led-blink { animation: blinken 1.4s steps(2) infinite; }

/* Mediensteuerung: Finger tippt, Geräte starten nacheinander */
.finger { animation: finger 8s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes finger { 0% { opacity: 0; transform: translate(70px, 90px); } 8% { opacity: 1; } 15% { transform: translate(0, 0); } 17% { transform: translate(-2px, 3px) scale(.97); } 21% { transform: translate(6px, 8px); opacity: 1; } 32%, 100% { opacity: 0; transform: translate(60px, 80px); } }
.tipp { animation: tipp2 8s ease-out infinite; }
@keyframes tipp2 { 0%, 15% { opacity: 0; transform: scale(.4); } 17% { opacity: .9; transform: scale(1); } 27%, 100% { opacity: 0; transform: scale(2.6); } }
.filmknopf { animation: knopf 8s ease-out infinite; }
@keyframes knopf { 0%, 15% { fill: #E85521; } 18% { fill: #FF8A5A; } 26%, 100% { fill: #E85521; } }
.leinwand-runter { transform-origin: center top; animation: lrunter 8s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes lrunter { 0%, 34% { transform: scaleY(0); } 46%, 90% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
.beamerstrahl { animation: bstrahl 8s ease infinite; opacity: 0; }
@keyframes bstrahl { 0%, 48% { opacity: 0; } 54%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
.filmbild { animation: fbild 8s ease infinite; opacity: 0; }
@keyframes fbild { 0%, 52% { opacity: 0; } 58%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
.beamerlinse { animation: blinse 8s ease infinite; }
@keyframes blinse { 0%, 48% { fill: #6B625A; } 52%, 86% { fill: #FFF3DD; } 90%, 100% { fill: #6B625A; } }
.led2 { fill: #CFC6BB; }
.led2.l3 { animation: ledA 8s infinite; } .led2.l4 { animation: ledB 8s infinite; } .led2.l1 { animation: ledC 8s infinite; } .led2.l2 { animation: ledD 8s infinite; }
@keyframes ledA { 0%, 22% { fill: #CFC6BB; } 24%, 90% { fill: #3FA34D; } 92%, 100% { fill: #CFC6BB; } }
@keyframes ledB { 0%, 28% { fill: #CFC6BB; } 30%, 90% { fill: #3FA34D; } 92%, 100% { fill: #CFC6BB; } }
@keyframes ledC { 0%, 44% { fill: #CFC6BB; } 46%, 90% { fill: #3FA34D; } 92%, 100% { fill: #CFC6BB; } }
@keyframes ledD { 0%, 50% { fill: #CFC6BB; } 52%, 90% { fill: #3FA34D; } 92%, 100% { fill: #CFC6BB; } }

/* Bildverteilung */
.schirm2 { animation: schirm2 6s ease-in-out infinite alternate; }
.schirm2.c2 { animation-delay: -2s; } .schirm2.c3 { animation-delay: -4s; }
@keyframes schirm2 { from { opacity: .82; } to { opacity: 1; } }
.ball { animation: ball 3s ease-in-out infinite alternate; }
@keyframes ball { from { transform: translate(0, 0); } to { transform: translate(36px, -14px); } }

/* Möbel */
.tv-hoch2 { animation: tvhoch2 8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes tvhoch2 { 0%, 10% { transform: translateY(150px); } 38%, 78% { transform: translateY(0); } 96%, 100% { transform: translateY(150px); } }
.tv-bild2 { animation: tvan2 8s ease infinite; }
@keyframes tvan2 { 0%, 40% { opacity: 0; } 47%, 72% { opacity: 1; } 77%, 100% { opacity: 0; } }
.tvglow { animation: tvglow 8s ease infinite; }
@keyframes tvglow { 0%, 40% { opacity: 0; } 47%, 72% { opacity: .45; } 77%, 100% { opacity: 0; } }
.stoff-puls rect { animation: stoff2 8s ease-in-out infinite; }
@keyframes stoff2 { 0%, 48% { opacity: 0; } 56%, 68% { opacity: .75; } 76%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ex-svg *, .ex-svg .auf { animation: none !important; }
  .finger, .tipp, .staub circle, .raumschall ellipse { opacity: 0; }
  .leinwand-runter { transform: none; } .beamerstrahl, .filmbild { opacity: 1; } .led2 { fill: #3FA34D; }
  .tv-hoch2 { transform: none; } .tv-bild2 { opacity: 1; }
  .schallweich path { opacity: .5; }
}

/* v4: Linse über zwei Paneele, Raumschall rechts versetzt, Pool-Kaustik, Hochtöner-Pivot */
.linse2 { animation: linse2 8s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes linse2 { from { transform: translate(-84px, 2px); } to { transform: translate(84px, -2px); } }
.raumschall.rechts ellipse { animation-delay: .7s; } .raumschall.rechts ellipse:nth-child(2) { animation-delay: 2.1s; } .raumschall.rechts ellipse:nth-child(3) { animation-delay: 3.5s; }
.raumschall ellipse { animation-name: raumschall2; }
@keyframes raumschall2 { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: .6; } 100% { opacity: 0; transform: scale(2.2); } }
.kaustik path { animation: kaustik 6s ease-in-out infinite alternate; }
.kaustik path:nth-child(2) { animation-duration: 7.5s; animation-direction: alternate-reverse; } .kaustik path:nth-child(3) { animation-duration: 5s; }
@keyframes kaustik { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
.pivot { transform-origin: center; animation: pivot 4.5s ease-in-out infinite alternate; }
@keyframes pivot { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.schallweich.garten.rechts path { animation-delay: .5s; } .schallweich.garten.rechts path:nth-child(2) { animation-delay: 1.4s; } .schallweich.garten.rechts path:nth-child(3) { animation-delay: 2.3s; }
.schallweich.garten path { animation-name: weichlinks2; }
@keyframes weichlinks2 { 0% { opacity: 0; transform: translateX(0) scale(.7); } 14% { opacity: .85; } 100% { opacity: 0; transform: translateX(-150px) scale(2); } }
/* Garten v2: Welle vom linken Satelliten nach rechts */
.schallweich.garten-rechts path { transform-origin: left center; opacity: 0; animation: weichrechts 3.6s cubic-bezier(.25,.6,.35,1) infinite; }
.schallweich.garten-rechts path:nth-child(2) { animation-delay: 1.2s; } .schallweich.garten-rechts path:nth-child(3) { animation-delay: 2.4s; }
@keyframes weichrechts { 0% { opacity: 0; transform: translateX(0) scale(.7); } 14% { opacity: .85; } 100% { opacity: 0; transform: translateX(150px) scale(2); } }
.schallweich.garten path { animation-delay: .6s; } .schallweich.garten path:nth-child(2) { animation-delay: 1.8s; } .schallweich.garten path:nth-child(3) { animation-delay: 3s; }
@media (prefers-reduced-motion: reduce) { .schallweich.garten-rechts path { opacity: .5; } }
.krone { transform-origin: center bottom; animation: wiegen 6s ease-in-out infinite alternate; }
/* Kino v2 */
.stern { animation: funkeln 3s ease-in-out infinite alternate; }
.stern.t1 { animation-duration: 2.2s; animation-delay: -1s; } .stern.t2 { animation-duration: 4s; animation-delay: -2s; } .stern.t3 { animation-duration: 2.7s; animation-delay: -.5s; }
@keyframes funkeln { from { opacity: .25; } to { opacity: 1; } }
.vorhang-l { animation: vorhangL 2.2s cubic-bezier(.6,0,.25,1) .2s both; }
.vorhang-r { animation: vorhangR 2.2s cubic-bezier(.6,0,.25,1) .2s both; }
@keyframes vorhangL { from { transform: translateX(126px) scaleX(2.4); } to { transform: none; } }
@keyframes vorhangR { from { transform: translateX(-126px) scaleX(2.4); } to { transform: none; } }
.vorhang-l { transform-origin: left center; } .vorhang-r { transform-origin: right center; }
.stufenlicht { animation: stufe 3s ease-in-out infinite alternate; }
@keyframes stufe { from { opacity: .55; } to { opacity: 1; } }
.becher { animation: stufe 2.4s ease-in-out infinite alternate; }
.wandlicht { animation: lampe 5s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .vorhang-l, .vorhang-r { transform: none; } }

/* Galerie: 18 Bilder, anklickbar */
.galerie figure { cursor: zoom-in; position: relative; }
.galerie figure:focus-visible, .ablauf-bilder figure:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.galerie figure::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(30,27,25,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s;
}
.galerie figure:hover::after, .galerie figure:focus-visible::after { opacity: 1; transform: none; }

/* So läuft ein Projekt: drei Bilder passend zu den drei Schritten */
.ablauf-bilder { grid-template-columns: repeat(3, 1fr); }
.ablauf-bilder figure { margin: 0; cursor: zoom-in; overflow: hidden; border-radius: 6px; background: #F7F5F0; }
.ablauf-bilder img { height: 260px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ablauf-bilder figure:hover img { transform: scale(1.04); }
@media (max-width: 820px) { .ablauf-bilder { grid-template-columns: 1fr; } .ablauf-bilder img { height: 220px; } }

/* Lightbox */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.lightbox::backdrop { background: rgba(18,15,13,.92); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; animation: lbauf .3s ease-out; }
@keyframes lbauf { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: min(92vw, 1600px); max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #F7F5F0; }
.lb-knopf { position: fixed; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 34px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.lb-knopf:hover { background: var(--orange); }
.lb-zu { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; font-size: 30px; }
.lb-zurueck { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-vor { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-zahl { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); margin: 0; font-size: .95rem; }
@media (max-width: 600px) { .lb-zurueck, .lb-vor { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: none; } }
.ablauf-bilder img[src$=".svg"] { object-fit: contain; }
.lightbox img[src$=".svg"] { width: min(92vw, 1100px); }

/* Partner und Netzwerk */
.partner-sec { background: var(--papier); }
.partner-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
.partner {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #E7E1D9;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.partner:hover, .partner:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43,30,20,.12); border-color: var(--orange); }
.partner-logo { height: 110px; display: grid; place-items: center; padding: 18px; }
.partner-logo img { max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.partner:hover .partner-logo img, .partner:focus-visible .partner-logo img { filter: none; opacity: 1; }
.partner-text { padding: 12px 16px 16px; border-top: 1px solid #F0EBE4; display: grid; gap: 2px; }
.partner-text b { font-size: .98rem; }
.partner-text span { font-size: .85rem; color: var(--text-2); }
@media (max-width: 1080px) { .partner-raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .partner-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; } .partner-logo { height: 90px; padding: 14px; } }
@media (hover: none) { .partner-logo img { filter: none; opacity: 1; } }
/* 11 Partner: letzte Reihe mittig */
.partner-raster { display: flex; flex-wrap: wrap; justify-content: center; }
.partner { flex: 0 0 calc((100% - 3 * 16px) / 4); }
@media (max-width: 1080px) { .partner { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 600px) { .partner { flex-basis: calc((100% - 12px) / 2); } }

/* =========================================================
   Illustrationen: Architektur-Zeichnungen (az)
   ========================================================= */
.ex-media:has(.az) { background: #FAF8F4; }
.az .az-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: azRing 3.6s cubic-bezier(.25,.6,.35,1) infinite; }
.az .az-ring.r1 { animation-delay: 1.2s; } .az .az-ring.r2 { animation-delay: 2.4s; }
.az .az-ring.rechts.r0 { animation-delay: .6s; } .az .az-ring.rechts.r1 { animation-delay: 1.8s; } .az .az-ring.rechts.r2 { animation-delay: 3s; }
@keyframes azRing { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(2.4); } }
.az .az-ring.detail { animation-name: azRingX; }
@keyframes azRingX { 0% { opacity: 0; transform: translateX(0) scale(.7); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateX(40px) scale(2); } }
.az .az-ring.bass, .az .az-ring.hinter { animation-duration: 2.4s; }
.az .az-weg { offset-rotate: auto; opacity: 0; animation: azWeg 3.2s cubic-bezier(.3,.5,.4,1) infinite; }
.az .az-weg.w1 { animation-delay: 1.07s; } .az .az-weg.w2 { animation-delay: 2.13s; }
.az .az-weg.rechts.w0 { animation-delay: .5s; } .az .az-weg.rechts.w1 { animation-delay: 1.57s; } .az .az-weg.rechts.w2 { animation-delay: 2.63s; }
@keyframes azWeg { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: .8; } 100% { offset-distance: 100%; opacity: 0; } }
.az .az-wasser { animation: azWasser 7s ease-in-out infinite alternate; }
@keyframes azWasser { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
.az .az-flow { stroke-dasharray: 6 8; animation: azFlow 1.4s linear infinite; }
@keyframes azFlow { to { stroke-dashoffset: -28; } }
.az .az-strahl { animation: azStrahl 4s ease-in-out infinite alternate; }
@keyframes azStrahl { from { fill-opacity: .04; } to { fill-opacity: .1; } }
.az .az-eq rect { transform-box: fill-box; transform-origin: center bottom; animation: eq .9s ease-in-out infinite alternate; }
.az .az-eq rect:nth-child(2) { animation-duration: .6s; } .az .az-eq rect:nth-child(3) { animation-duration: 1.1s; } .az .az-eq rect:nth-child(4) { animation-duration: .75s; }
.az .az-eq.e2 rect { animation-duration: 1.3s; } .az .az-eq.e3 rect:nth-child(odd) { animation-duration: 1.2s; }
/* Mediensteuerung */
.az .az-tipp { transform-box: fill-box; transform-origin: center; opacity: 0; animation: azTipp 7s ease-out infinite; }
@keyframes azTipp { 0%, 4% { opacity: 0; transform: scale(.5); } 7% { opacity: 1; transform: scale(1); } 16%, 100% { opacity: 0; transform: scale(2.4); } }
.az .az-sig { stroke-dasharray: 100; stroke-dashoffset: 100; animation: azSig 7s cubic-bezier(.5,0,.2,1) infinite; }
.az .az-sig.s1 { animation-delay: .4s; } .az .az-sig.s2 { animation-delay: .8s; } .az .az-sig.s3 { animation-delay: 1.2s; }
@keyframes azSig { 0%, 8% { stroke-dashoffset: 100; opacity: 1; } 22%, 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.az .az-led { fill: #DDD6CC; animation: azLed 7s infinite; }
.az .az-led.l1 { animation-delay: .4s; } .az .az-led.l2 { animation-delay: .8s; } .az .az-led.l3 { animation-delay: 1.2s; }
@keyframes azLed { 0%, 22% { fill: #DDD6CC; } 25%, 88% { fill: #3FA34D; } 94%, 100% { fill: #DDD6CC; } }
.az .az-box { animation: azBox 7s infinite; }
.az .az-box.b1 { animation-delay: .4s; } .az .az-box.b2 { animation-delay: .8s; } .az .az-box.b3 { animation-delay: 1.2s; }
@keyframes azBox { 0%, 22% { stroke: #2B2724; } 25%, 88% { stroke: #E85521; } 94%, 100% { stroke: #2B2724; } }
/* Bildverteilung */
.az .az-paket { animation: azPaket 2.8s cubic-bezier(.5,0,.5,1) infinite; }
.az .az-paket.p1 { animation-delay: .6s; } .az .az-paket.p2 { animation-delay: 1.2s; } .az .az-paket.p3 { animation-delay: 1.4s; } .az .az-paket.p4 { animation-delay: 2s; } .az .az-paket.p5 { animation-delay: 2.6s; }
@keyframes azPaket { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.az .az-ports circle { animation: blinken 1s steps(2) infinite; }
.az .az-ports circle:nth-child(2) { animation-delay: .3s; } .az .az-ports circle:nth-child(3) { animation-delay: .6s; } .az .az-ports circle:nth-child(4) { animation-delay: .15s; }
.az .az-schirm { animation: azSchirm 4s ease-in-out infinite alternate; }
.az .az-schirm.c1 { animation-delay: -1.3s; } .az .az-schirm.c2 { animation-delay: -2.6s; }
@keyframes azSchirm { from { opacity: .1; } to { opacity: .35; } }
/* Möbel */
.az .az-tv { animation: azTv 8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes azTv { 0%, 10% { transform: translateY(150px); } 38%, 78% { transform: translateY(0); } 96%, 100% { transform: translateY(150px); } }
.az .az-tvbild { animation: azTvBild 8s ease infinite; }
@keyframes azTvBild { 0%, 40% { opacity: 0; } 47%, 72% { opacity: .3; } 77%, 100% { opacity: 0; } }
.az .az-ring.stoff { animation-name: azStoff; animation-duration: 8s; }
.az .az-ring.stoff.r1, .az .az-ring.stoff.r2 { animation-delay: 4.3s; }
@keyframes azStoff { 0%, 48% { opacity: 0; transform: scale(.7); } 55% { opacity: .9; } 72%, 100% { opacity: 0; transform: scale(2); } }
@media (prefers-reduced-motion: reduce) {
  .az * { animation: none !important; }
  .az .az-ring.r0, .az .az-weg.w0 { opacity: .6; }
  .az .az-sig { stroke-dashoffset: 0; } .az .az-led { fill: #3FA34D; } .az .az-tv { transform: none; } .az .az-tvbild { opacity: .3; }
  .az .az-tipp, .az .az-paket { opacity: 0; }
}
.az .az-kegel { animation: azKegel 3s ease-in-out infinite; }
.az .az-kegel.k1 { animation-delay: .5s; } .az .az-kegel.k2 { animation-delay: 1s; }
.az .az-kegel.rechts.k0 { animation-delay: .25s; } .az .az-kegel.rechts.k1 { animation-delay: .75s; } .az .az-kegel.rechts.k2 { animation-delay: 1.25s; }
@keyframes azKegel { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .az .az-kegel { opacity: .7; } }

/* Einbau: Schall breitet sich kegelförmig aus */
.ex-svg .kegelschall path { transform-box: view-box; transform-origin: var(--ox) var(--oy); vector-effect: non-scaling-stroke; opacity: 0; animation: kegelwelle 3.6s cubic-bezier(.3,.6,.4,1) infinite; }
.ex-svg .kegelschall path:nth-child(2) { animation-delay: .9s; } .ex-svg .kegelschall path:nth-child(3) { animation-delay: 1.8s; } .ex-svg .kegelschall path:nth-child(4) { animation-delay: 2.7s; }
.ex-svg .kegelschall.rechts path { animation-delay: .45s; } .ex-svg .kegelschall.rechts path:nth-child(2) { animation-delay: 1.35s; } .ex-svg .kegelschall.rechts path:nth-child(3) { animation-delay: 2.25s; } .ex-svg .kegelschall.rechts path:nth-child(4) { animation-delay: 3.15s; }
@keyframes kegelwelle { 0% { transform: scale(.45); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(5.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ex-svg .kegelschall path { animation: none; opacity: .5; } .ex-svg .kegelschall path:nth-child(2) { transform: scale(2.2); } .ex-svg .kegelschall path:nth-child(3) { transform: scale(3.6); } .ex-svg .kegelschall path:nth-child(4) { display: none; } }

/* Unsichtbar: Foto einer Wohnwand, Paneele (L-RAD116, 40 × 40 cm) links und rechts vom TV angedeutet */
.ex-media:has(.uf) { background: #2A2622; }
.uf .uf-feld { fill: #E85521; fill-opacity: 0; animation: ufFeld 6s ease-in-out infinite; }
.uf .uf-raster { fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-opacity: 0; animation: ufRaster 6s ease-in-out infinite; }
.uf .uf-rand { fill: none; stroke: #E85521; stroke-width: 3; stroke-dasharray: 10 8; stroke-opacity: 0; animation: ufRand 6s ease-in-out infinite; }
.uf .uf-ring { opacity: 0; animation: ufRing 3s ease-out infinite; animation-delay: calc(var(--i) * .45s + 1.2s); }
.uf .rechts .uf-feld, .uf .rechts .uf-raster, .uf .rechts .uf-rand { animation-delay: .25s; }
.uf .rechts .uf-ring { animation-delay: calc(var(--i) * .45s + 1.45s); }
@keyframes ufFeld { 0% { fill-opacity: 0; } 15%, 70% { fill-opacity: .2; } 100% { fill-opacity: .06; } }
@keyframes ufRaster { 0% { stroke-opacity: 0; } 15%, 70% { stroke-opacity: .35; } 100% { stroke-opacity: .08; } }
@keyframes ufRand { 0% { stroke-opacity: 0; } 12%, 75% { stroke-opacity: .95; } 100% { stroke-opacity: .35; } }
@keyframes ufRing { 0% { opacity: 0; } 25% { opacity: .75; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .uf .uf-feld, .uf .uf-raster, .uf .uf-rand, .uf .uf-ring { animation: none; }
  .uf .uf-feld { fill-opacity: .18; } .uf .uf-raster { stroke-opacity: .3; } .uf .uf-rand { stroke-opacity: .9; } .uf .uf-ring { opacity: calc(.5 - var(--i) * .1); }
}

/* KI-Kennzeichnung (Art. 50 KI-Verordnung) */
.ex-media { position: relative; }
.ex-media::after { content: "KI-generierte Illustration"; position: absolute; left: 10px; bottom: 10px; font-size: .68rem; letter-spacing: .02em; line-height: 1; padding: .38em .6em; border-radius: 99px; background: rgba(30,27,25,.62); color: #fff; pointer-events: none; }
#p-unsichtbar .ex-media::after { content: "Foto: eigenes Projekt · Lautsprecher-Darstellung KI-generiert"; }
.ki-hinweis { font-size: .78rem; line-height: 1.5; opacity: .75; padding-top: 1.4rem; padding-bottom: .4rem; margin: 0; }
.ki-hinweis a { color: inherit; }
.fuss .ki-hinweis { display: block; }
@media (max-width: 480px) { .ex-media::after { font-size: .6rem; left: 8px; bottom: 8px; } }
.ex-media::after { left: auto; bottom: auto; right: 10px; top: 10px; }
@media (max-width: 480px) { .ex-media::after { right: 8px; top: 8px; } }

/* Garten: Outdoor-TV */
.tv-schein { animation: tvSchein 3.2s ease-in-out infinite alternate; }
@keyframes tvSchein { from { opacity: .18; } to { opacity: .36; } }
.tv-glanz { animation: tvGlanz 6s ease-in-out infinite; }
@keyframes tvGlanz { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .18; } }
@media (prefers-reduced-motion: reduce) { .tv-schein, .tv-glanz { animation: none; } }
.schallweich.garten.tvton path { animation-name: tvton; }
@keyframes tvton { 0% { opacity: 0; transform: translate(0,0) scale(.8); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(-130px,70px) scale(2.1); } }

/* Heimkino: eigene Projektfotos im Wechsel */
.kino-fotos { position: absolute; inset: 0; overflow: hidden; background: #120F0D; }
.kino-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: kinoWechsel 14s ease-in-out infinite; }
.kino-fotos img:nth-child(2) { animation-delay: 7s; }
@keyframes kinoWechsel { 0% { opacity: 0; transform: scale(1.0); } 8%, 50% { opacity: 1; } 58%, 100% { opacity: 0; transform: scale(1.06); } }
#p-heimkino .ex-media::after { content: "Fotos: eigenes Projekt · bearbeitet"; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .kino-fotos img { animation: none; } .kino-fotos img:first-child { opacity: 1; } }
.kino-fotos.einzeln img { opacity: 1; animation: kinoZoom 18s ease-in-out infinite alternate; }
@keyframes kinoZoom { from { transform: scale(1); } to { transform: scale(1.05); } }
#p-heimkino .ex-media::after { content: "Eigenes Projekt mit Artcoustic-Lautsprechern"; right: auto; left: 10px; }
@media (prefers-reduced-motion: reduce) { .kino-fotos.einzeln img { animation: none; } }

.an-mail { margin: .8rem 0 0; font-size: .9rem; color: var(--text-2); }
.an-mail a { color: inherit; font-weight: 600; }
#p-heimkino .ex-media::after { content: "Projekt mit Artcoustic-Lautsprechern"; }
#p-garten .ex-media::after { content: "Projektfoto"; }

/* Firmenname neben dem Logo */
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.logo-name { display: flex; flex-direction: column; line-height: 1.1; font-size: 1.02rem; font-weight: 500; letter-spacing: .01em; color: var(--text-2); white-space: nowrap; }
.logo-name b { font-size: 1.32rem; font-weight: 800; color: var(--text, #1E1B19); letter-spacing: -.01em; }
@media (max-width: 600px) { .logo { gap: 10px; } .logo-name { font-size: .82rem; } .logo-name b { font-size: 1.08rem; } }
@media (max-width: 340px) { .logo-name { display: none; } }
/* Firmenname einzeilig in Logofarben */
.logo-name { display: inline; flex-direction: initial; font-size: 1.22rem; font-weight: 700; color: #1A1716; letter-spacing: -.005em; line-height: 1.2; }
.logo-name .o { color: #F05924; }
@media (max-width: 600px) { .logo-name { font-size: .9rem; white-space: normal; max-width: 13em; } }
@media (max-width: 600px) { .logo-name { white-space: nowrap; max-width: none; font-size: .84rem; } }
@media (max-width: 380px) { .logo-name { font-size: .76rem; } .logo { gap: 8px; } }

/* Mobil: jedes Ablauf-Bild direkt unter seinem Schritt */
@media (max-width: 820px) {
  .ablauf .wrap { display: flex; flex-direction: column; }
  .ablauf .schritte, .ablauf .ablauf-bilder { display: contents; }
  .ablauf h2 { order: 1; } .ablauf .intro { order: 2; }
  .ablauf .schritt:nth-child(1) { order: 3; } .ablauf-bilder figure:nth-child(1) { order: 4; }
  .ablauf .schritt:nth-child(2) { order: 5; } .ablauf-bilder figure:nth-child(2) { order: 6; }
  .ablauf .schritt:nth-child(3) { order: 7; } .ablauf-bilder figure:nth-child(3) { order: 8; }
  .ablauf .schritte .schritt { margin-top: 36px; }
  .ablauf-bilder figure { margin-top: 18px; }
}
#p-einbau .ex-media::after { content: "Beispiel: Einbaulautsprecher in der Decke"; right: auto; left: 10px; }
#p-moebel .ex-media::after { content: "Projektfoto"; }

/* Kennzeichnung bearbeiteter Bilder */
#p-unsichtbar .ex-media::after { content: "Projektfoto · bearbeitet: Lautsprecher-Darstellung und Animation KI-generiert"; }
#p-einbau .ex-media::after { content: "Beispielfoto · bearbeitet: Schall-Animation KI-generiert"; }
#p-garten .ex-media::after { content: "Projektfoto · bearbeitet: Schall-Animation KI-generiert"; }
#p-heimkino .ex-media::after { content: "Projekt mit Artcoustic-Lautsprechern · bearbeitet: Leinwand-Animation KI-generiert"; }
#p-moebel .ex-media::after { content: "Projektfoto · bearbeitet: retuschiert, Bildschirm-Animation KI-generiert"; }
@media (max-width: 480px) { .ex-media::after { white-space: normal; max-width: calc(100% - 16px); line-height: 1.25; } }

/* Nur gesetzlich Notwendiges: keine KI-Hinweise im Bild */
.ex-media::after { content: none; }
#p-heimkino .ex-media::after { content: "Projekt mit Artcoustic-Lautsprechern"; }

/* KI-Kennzeichnung wie in der ersten Fassung */
.ex-media::after { content: "KI-generierte Illustration"; }
#p-unsichtbar .ex-media::after { content: "Foto: eigenes Projekt · Lautsprecher-Darstellung KI-generiert"; }
#p-einbau .ex-media::after { content: "Beispiel: Einbaulautsprecher in der Decke"; }
#p-garten .ex-media::after { content: "Projektfoto"; }
#p-heimkino .ex-media::after { content: "Projekt mit Artcoustic-Lautsprechern"; }
#p-moebel .ex-media::after { content: "Projektfoto"; }

/* Hero: Vorher/Nachher als langsamer Wisch-Hintergrund */
.hero-vn { position: absolute; inset: 0; }
.hero-vn .hero-bild { opacity: .5; }
.hero-vn .vn-nachher { clip-path: inset(0 100% 0 0); animation: vnWisch 18s cubic-bezier(.65,0,.35,1) infinite; }
.vn-linie { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgba(255,255,255,.75); box-shadow: 0 0 14px rgba(232,85,33,.8); opacity: 0; animation: vnLinie 18s cubic-bezier(.65,0,.35,1) infinite; }
.vn-marke { position: absolute; top: 104px; right: 24px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .45em .8em; border-radius: 99px; background: rgba(20,17,15,.55); color: #fff; z-index: 1; }
.vn-m1 { animation: vnM1 18s infinite; } .vn-m2 { animation: vnM2 18s infinite; }
@keyframes vnWisch { 0%, 12% { clip-path: inset(0 100% 0 0); } 42%, 76% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes vnLinie { 0%, 11% { left: 0; opacity: 0; } 13% { opacity: 1; } 41% { left: 100%; opacity: 1; } 42%, 75% { left: 100%; opacity: 0; } 77% { left: 100%; opacity: 1; } 95% { left: 0; opacity: 1; } 96%, 100% { left: 0; opacity: 0; } }
@keyframes vnM1 { 0%, 22% { opacity: 1; } 28%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes vnM2 { 0%, 26% { opacity: 0; } 34%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@media (max-width: 600px) { .vn-marke { top: 86px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .hero-vn .vn-nachher { animation: none; clip-path: none; } .vn-linie, .vn-m1 { display: none; } .vn-m2 { animation: none; } }
.hero-vn .hero-bild { opacity: 1; }
.hero-vn::after { content: ""; position: absolute; inset: 0; background: rgba(20,17,15,.55); }
.vn-linie, .vn-marke { z-index: 1; }
/* Linie exakt synchron zur Wischkante */
.vn-linie { left: 0; width: 100%; background: none; box-shadow: none; opacity: 1; animation: vnLinieX 18s cubic-bezier(.65,0,.35,1) infinite; pointer-events: none; }
.vn-linie::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255,255,255,.85); box-shadow: 0 0 14px rgba(232,85,33,.8); animation: vnLinieSicht 18s linear infinite; }
@keyframes vnLinieX { 0%, 12% { transform: translateX(0); } 42%, 76% { transform: translateX(100%); } 96%, 100% { transform: translateX(0); } }
@keyframes vnLinieSicht { 0%, 11.5% { opacity: 0; } 12.5%, 41.5% { opacity: 1; } 42.5%, 75.5% { opacity: 0; } 76.5%, 95.5% { opacity: 1; } 96.5%, 100% { opacity: 0; } }
.hero-vn { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .vn-linie { display: none; } }

/* Hero: Lautsprecher-Video als Hintergrund (Endlosschleife) */
.hero:has(.hero-video) { background: #0C0C0C; }
.hero-video { position: absolute; top: 0; right: 0; bottom: 0; width: min(62%, 900px); }
.hero-video video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.hero-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0C0C0C 0%, rgba(12,12,12,.55) 30%, rgba(12,12,12,0) 60%); }
@media (max-width: 820px) {
  .hero-video { width: 100%; }
  .hero-video::after { background: rgba(12,12,12,.6); }
}
@media (prefers-reduced-motion: reduce) { .hero-video video { display: none; } .hero-video { background: url(bilder/lautsprecher-puls.jpg) center / cover; } }
.hero-video video { object-fit: contain; object-position: 100% 50%; }
@media (max-width: 820px) { .hero-video video { object-position: 50% 50%; } }
/* Video-Hintergrund: durchgehend schwarz, weicher Übergang nach links */
.hero:has(.hero-video) { background: #000; }
.hero:has(.hero-video)::before { display: none; }
.hero:has(.hero-video)::after { background: linear-gradient(to top, rgba(0,0,0,.6), transparent 60%); }
.hero-video video { filter: brightness(.85) contrast(1.2); }
.hero-video::after { display: none; }
.hero-video { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
@media (max-width: 820px) { .hero-video { -webkit-mask-image: none; mask-image: none; } .hero-video video { filter: brightness(.55) contrast(1.2); } }
#p-konferenz .ex-media::after { content: "Projektfoto"; }
.tel-link { color: var(--orange); font-weight: 700; text-decoration: none; white-space: nowrap; } .tel-link:hover { text-decoration: underline; }
.g-hoch { grid-row: span 2; }
@media (max-width: 720px) { .g-hoch { grid-column: span 2; grid-row: span 2; } }
@media (max-width: 720px) { .g-mobil-breit { grid-column: span 2; } }