/* ============================================================
   Audiophil-Bereich – Hörakustik Lindenthal
   Farben, Schrift und Abstände nach Corporate-Design-Handbuch 1.0
   ============================================================ */

.ap-darker { background: var(--darker); }
.ap-dark   { background: var(--dark); }
.ap-lead { font-size: 1.15rem; line-height: 1.8; color: rgba(232,226,216,0.82); max-width: 720px; }
.ap-text p { font-size: 1.05rem; line-height: 1.8; color: rgba(232,226,216,0.75); margin-bottom: 1.2rem; }
.ap-text p strong { color: var(--cream); font-weight: 600; }
.ap-head { max-width: 760px; margin-bottom: 3.5rem; }
.ap-head h2 { margin-bottom: 1.2rem; }
.ap-center { text-align: center; margin-left: auto; margin-right: auto; }
.ap-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.ap-grid2 > *, .ap-cards > *, .ap-devices > * { min-width: 0; }

/* ── HERO ── */
.ap-hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 9rem 3rem 5rem;
  background: radial-gradient(ellipse at 72% 45%, #3B3F34 0%, #2D3027 38%, #22241C 72%, #1d1e17 100%);
}
.ap-hero canvas.ap-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ap-hero .section-inner { position: relative; z-index: 2; width: 100%; }
.ap-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; }
.ap-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 300; line-height: 1.12;
  color: var(--cream); margin-bottom: 1.6rem;
}
.ap-hero h1 em {
  font-style: italic; background: var(--gold-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ap-hero .hero-sub { font-size: 1.15rem; line-height: 1.75; color: rgba(232,226,216,0.82); max-width: 560px; margin-bottom: 2.4rem; }
.ap-hero .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.ap-hero-visual { position: relative; display: grid; place-items: center; }
.ap-hero-visual::before {
  content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,206,122,0.20) 0%, rgba(209,175,52,0.07) 45%, transparent 70%);
  filter: blur(6px);
}
.ap-hero-visual img { position: relative; width: 100%; max-width: 460px; filter: drop-shadow(0 40px 50px rgba(0,0,0,0.55)); }
.ap-hero-visual figcaption {
  position: relative; margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(232,226,216,0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .ap-hero-visual img { animation: ap-float 7s ease-in-out infinite; }
  .ap-hero-visual::before { animation: ap-glow 7s ease-in-out infinite; }
}
@keyframes ap-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
@keyframes ap-glow { 0%,100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

.ap-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 2; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(232,226,216,0.45);
  text-decoration: none;
}
.ap-scroll::after { content: ''; width: 1px; height: 38px; background: linear-gradient(var(--gold-1), transparent); }
@media (prefers-reduced-motion: no-preference) { .ap-scroll::after { animation: ap-drop 2.2s ease-in-out infinite; transform-origin: top; } }
@keyframes ap-drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ── STAT-REIHE ── */
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.ap-stat { border-left: 2px solid var(--gold-1); padding: 0.2rem 0 0.2rem 1.2rem; }
.ap-stat-num {
  font-size: 2.4rem; font-weight: 700; line-height: 1.1;
  background: var(--gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ap-stat-num small { font-size: 0.95rem; font-weight: 600; margin-left: 0.2rem; }
.ap-stat-label { font-size: 0.86rem; line-height: 1.5; color: rgba(232,226,216,0.65); margin-top: 0.4rem; }

/* ── VERGLEICH SPRACHE / MUSIK ── */
.ap-compare { border: 1px solid rgba(209,175,52,0.18); background: rgba(0,0,0,0.12); }
.ap-compare-head, .ap-compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ap-compare-head > div {
  padding: 1rem 1.2rem; font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-1);
  border-bottom: 1px solid rgba(209,175,52,0.18);
}
.ap-compare-row > div { padding: 1rem 1.2rem; font-size: 0.92rem; line-height: 1.5; color: rgba(232,226,216,0.75); border-bottom: 1px solid rgba(209,175,52,0.08); }
.ap-compare-row:last-child > div { border-bottom: 0; }
.ap-compare-row > div:first-child { color: var(--cream); font-weight: 600; font-size: 0.86rem; }
.ap-compare-row > div:last-child { color: var(--cream); }
.ap-bar { position: relative; height: 6px; margin-top: 0.55rem; background: rgba(232,226,216,0.08); overflow: hidden; }
.ap-bar i { position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: var(--w, 50%); background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) 0.3s; }
.ap-bar.is-speech i { background: var(--green); }
.reveal.visible .ap-bar i { transform: scaleX(1); }

/* ── KLANGVERGLEICH ── */
.ap-player {
  border: 1px solid rgba(209,175,52,0.22); background: linear-gradient(180deg, rgba(58,59,53,0.55), rgba(40,41,32,0.9));
  padding: 2rem; position: relative;
}
.ap-player-top { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ap-play {
  display: inline-flex; align-items: center; gap: 0.9rem; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--cream); font: inherit;
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.ap-play-icon {
  width: 64px; height: 64px; border-radius: 50%; flex: none; position: relative;
  background: var(--gold-grad); box-shadow: 0 0 0 0 rgba(209,175,52,0.5);
  transition: transform 0.2s;
}
.ap-play:hover .ap-play-icon { transform: scale(1.05); }
.ap-play-icon::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--darker);
}
.ap-player.is-playing .ap-play-icon::before {
  transform: translate(-50%, -50%); width: 18px; height: 20px; border: 0;
  background: linear-gradient(90deg, var(--darker) 0 6px, transparent 6px 12px, var(--darker) 12px 18px);
}
@media (prefers-reduced-motion: no-preference) {
  .ap-player.is-playing .ap-play-icon { animation: ap-pulse 2.2s ease-out infinite; }
}
@keyframes ap-pulse { 0% { box-shadow: 0 0 0 0 rgba(209,175,52,0.45); } 100% { box-shadow: 0 0 0 22px rgba(209,175,52,0); } }
.ap-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.ap-modes button {
  font: inherit; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  padding: 0.7rem 1.1rem; background: transparent; color: rgba(232,226,216,0.75);
  border: 1px solid rgba(232,226,216,0.22); transition: all 0.2s;
}
.ap-modes button:hover { border-color: var(--gold-1); color: var(--cream); }
.ap-modes button.is-active { background: var(--gold-grad); color: var(--darker); border-color: transparent; font-weight: 600; }
.ap-modes button[data-ap-mode="speech"].is-active { background: var(--green); color: #fff; }
.ap-spectrum { display: block; width: 100%; height: 220px; }
.ap-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-top: 1.2rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,226,216,0.6); }
.ap-meter-track { height: 4px; background: rgba(232,226,216,0.1); overflow: hidden; }
.ap-meter-track i { display: block; height: 100%; background: var(--gold-grad); transform: scaleX(0.05); transform-origin: left; transition: transform 0.25s linear; }
.ap-meter > span:last-child { text-transform: none; letter-spacing: 0.04em; }
.ap-meter b { color: var(--cream); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.ap-status { font-size: 0.78rem; color: rgba(232,226,216,0.5); margin-top: 0.4rem; min-height: 1.2em; }
.ap-mode-info { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 2rem; }
.ap-mode-info li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.6; color: rgba(232,226,216,0.68); }
.ap-mode-info li::before { content: '—'; position: absolute; left: 0; color: var(--gold-1); }
.ap-mode-info li strong { color: var(--cream); font-weight: 600; }
.ap-hinweis { font-size: 0.82rem; line-height: 1.6; color: rgba(232,226,216,0.5); margin-top: 1.4rem; max-width: 760px; }

/* ── KARTEN ── */
.ap-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ap-cards.ap-cards-2 { grid-template-columns: repeat(2, 1fr); }
.ap-card {
  position: relative; background: var(--dark); border: 1px solid rgba(209,175,52,0.12);
  padding: 2.2rem 2rem; transition: border-color 0.3s, transform 0.3s;
}
.ap-darker .ap-card { background: var(--dark); }
.ap-dark .ap-card { background: var(--darker); }
.ap-card::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.ap-card:hover { border-color: rgba(209,175,52,0.4); transform: translateY(-4px); }
.ap-card:hover::before { transform: scaleX(1); }
.ap-card-num { display: block; font-size: 0.85rem; letter-spacing: 0.2em; color: var(--gold-1); margin-bottom: 1.2rem; }
.ap-card h3 { font-size: 1.15rem; font-weight: 600; color: var(--cream); margin-bottom: 0.8rem; line-height: 1.35; }
.ap-card p { font-size: 0.92rem; line-height: 1.7; color: rgba(232,226,216,0.68); }
.ap-card p + p { margin-top: 0.8rem; }
.ap-card .ap-fact { display: block; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(209,175,52,0.12); font-size: 0.8rem; color: var(--gold-2); line-height: 1.5; }

/* ── ZITAT ── */
.ap-quote { border-left: 2px solid var(--gold-1); padding: 0.4rem 0 0.4rem 1.6rem; margin: 2rem 0; font-size: 1.35rem; font-style: italic; font-weight: 300; line-height: 1.55; color: var(--cream); }
.ap-quote cite { display: block; margin-top: 0.8rem; font-size: 0.78rem; font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-1); }

/* ── ABLAUF / ZEITLEISTE ── */
.ap-timeline { position: relative; display: grid; gap: 0; max-width: 900px; }
.ap-timeline::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: rgba(209,175,52,0.18); }
.ap-tl-line { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--gold-grad); transform: scaleY(0); transform-origin: top; transition: transform 2.4s cubic-bezier(.3,.6,.2,1); }
.ap-timeline.visible .ap-tl-line { transform: scaleY(1); }
.ap-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.8rem; padding: 0 0 2.8rem; }
.ap-step:last-child { padding-bottom: 0; }
.ap-step-num {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--darker); border: 1px solid var(--gold-1);
  color: var(--gold-1); font-size: 0.95rem; letter-spacing: 0.05em;
}
.ap-dark .ap-step-num { background: var(--dark); }
.ap-step h3 { font-size: 1.2rem; font-weight: 600; color: var(--cream); margin: 0.9rem 0 0.6rem; }
.ap-step p { font-size: 0.98rem; line-height: 1.75; color: rgba(232,226,216,0.72); max-width: 680px; }
.ap-step .ap-tag { display: inline-block; margin-top: 0.8rem; margin-right: 0.4rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); border: 1px solid rgba(209,175,52,0.3); padding: 0.3rem 0.7rem; }

/* ── HERVORHEBUNGSBOX ── */
.ap-box {
  border: 1px solid rgba(209,175,52,0.25); padding: 2.4rem 2.6rem; margin-top: 3.5rem;
  background: linear-gradient(135deg, rgba(209,175,52,0.08) 0%, rgba(107,140,90,0.06) 100%);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center;
}
.ap-box h3 { font-size: 1.5rem; font-weight: 300; color: var(--cream); line-height: 1.3; margin-bottom: 0.8rem; }
.ap-box h3 em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ap-box p { font-size: 0.98rem; line-height: 1.75; color: rgba(232,226,216,0.72); }
.ap-box ul, .ap-list { list-style: none; padding: 0; margin: 0; }
.ap-box li, .ap-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; font-size: 0.94rem; line-height: 1.6; color: rgba(232,226,216,0.75); }
.ap-box li::before, .ap-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold-1); }
.ap-box li strong, .ap-list li strong { color: var(--cream); font-weight: 600; }

/* ── ZWEI PAAR ── */
.ap-pairs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: stretch; margin-top: 1rem; }
.ap-pair { border: 1px solid rgba(209,175,52,0.15); padding: 2.2rem; background: rgba(0,0,0,0.12); }
.ap-pair .label { margin-bottom: 0.8rem; }
.ap-pair h3 { font-size: 1.3rem; font-weight: 300; color: var(--cream); margin-bottom: 1.2rem; }
.ap-pair.is-music { border-color: rgba(209,175,52,0.45); background: linear-gradient(160deg, rgba(209,175,52,0.08), rgba(0,0,0,0.1)); }
.ap-pairs-plus { align-self: center; font-size: 2.2rem; font-weight: 300; color: var(--gold-1); }

/* ── GERÄTE ── */
.ap-devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ap-device { display: flex; flex-direction: column; background: var(--dark); border: 1px solid rgba(209,175,52,0.12); transition: border-color 0.3s, transform 0.3s; }
.ap-device:hover { border-color: rgba(209,175,52,0.4); transform: translateY(-4px); }
.ap-device-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #2b2c24; }
.ap-device-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.ap-device-img.is-packshot { background: radial-gradient(circle at 50% 45%, #45463e 0%, #2b2c24 70%); }
.ap-device-img.is-packshot img { object-fit: contain; padding: 2.2rem; }
.ap-device:hover .ap-device-img img { transform: scale(1.04); }
.ap-device-body { padding: 1.8rem 1.8rem 2rem; display: flex; flex-direction: column; flex: 1; }
.ap-device-brand { font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 0.5rem; }
.ap-device h3 { font-size: 1.35rem; font-weight: 300; color: var(--cream); margin-bottom: 0.6rem; }
.ap-device-tag { font-size: 0.92rem; font-style: italic; color: rgba(232,226,216,0.6); margin-bottom: 1.2rem; line-height: 1.5; }
.ap-device ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.ap-device li { position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem; font-size: 0.86rem; line-height: 1.55; color: rgba(232,226,216,0.68); }
.ap-device li::before { content: '—'; position: absolute; left: 0; color: var(--gold-1); }
.ap-device li strong { color: var(--cream); font-weight: 600; }
.ap-device-for { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(209,175,52,0.12); font-size: 0.82rem; line-height: 1.55; color: var(--gold-2); }
.ap-device-video { display: inline-block; margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(209,175,52,0.5); padding-bottom: 2px; align-self: flex-start; }
.ap-device-video:hover { color: var(--gold-1); }
.ap-brand-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3rem; }
.ap-brand { border-top: 2px solid var(--gold-1); padding-top: 1.4rem; }
.ap-brand h3 { font-size: 1.2rem; font-weight: 600; color: var(--cream); margin-bottom: 0.6rem; }
.ap-brand p { font-size: 0.95rem; line-height: 1.75; color: rgba(232,226,216,0.7); }

/* ── DESIGN-GALERIE ── */
.ap-gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 210px; gap: 1rem; }
.ap-shot { position: relative; overflow: hidden; margin: 0; background: #2b2c24; }
.ap-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.ap-shot.is-contain { background: #EFEFEF; }
.ap-shot.is-contain img { object-fit: contain; padding: 1.2rem; }
.ap-shot.is-dark { background: radial-gradient(circle at 50% 40%, #4a4b42 0%, #2b2c24 75%); }
.ap-shot.is-dark img { object-fit: contain; padding: 1.4rem; }
.ap-shot:hover img { transform: scale(1.05); }
.ap-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.1rem 0.9rem;
  background: linear-gradient(transparent, rgba(29,30,23,0.92));
  font-size: 0.82rem; line-height: 1.45; color: rgba(245,240,232,0.88);
}
.ap-shot figcaption b { display: block; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-2); font-weight: 400; margin-bottom: 0.2rem; }
.ap-s-wide { grid-column: span 4; grid-row: span 2; }
.ap-s-tall { grid-column: span 2; grid-row: span 2; }
.ap-s-2 { grid-column: span 2; }
.ap-s-3 { grid-column: span 3; }
.ap-s-3x2 { grid-column: span 3; grid-row: span 2; }

/* ── TECHNIK ── */
.ap-tech-visual { border: 1px solid rgba(209,175,52,0.15); padding: 1.6rem; background: rgba(0,0,0,0.12); }
.ap-tech-visual svg { width: 100%; height: auto; display: block; }
.ap-svg-bars rect { transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.reveal.visible .ap-svg-bars rect { transform: scaleX(1); }
.reveal.visible .ap-svg-bars rect:nth-child(2) { transition-delay: .2s; }
.reveal.visible .ap-svg-bars rect:nth-child(3) { transition-delay: .4s; }
.reveal.visible .ap-svg-bars rect:nth-child(4) { transition-delay: .6s; }

/* ── VIDEOS ── */
.ap-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ap-video-item h3 { font-size: 1rem; font-weight: 600; color: var(--cream); margin: 0.9rem 0 0.3rem; }
.ap-video-item p { font-size: 0.85rem; line-height: 1.55; color: rgba(232,226,216,0.6); }
.ap-video, .ap-video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid rgba(209,175,52,0.15); overflow: hidden; background: #1d1e17; }
.ap-video { cursor: pointer; padding: 0; font: inherit; color: inherit; }
.ap-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity 0.3s, transform 0.8s; }
.ap-video:hover img { opacity: 0.75; transform: scale(1.04); }
.ap-video-play {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  background: var(--gold-grad); box-shadow: 0 10px 30px rgba(0,0,0,0.45); transition: transform 0.2s;
}
.ap-video-play::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--darker); }
.ap-video:hover .ap-video-play { transform: scale(1.08); }
.ap-video-src { position: absolute; left: 0.9rem; top: 0.8rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,240,232,0.85); }
.ap-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── QUELLEN ── */
.ap-sources { font-size: 0.8rem; line-height: 1.7; color: rgba(232,226,216,0.5); }
.ap-sources ol { padding-left: 1.2rem; margin: 0.6rem 0 0; }
.ap-sources a { color: rgba(232,226,216,0.65); }
sup.ap-ref { font-size: 0.65em; color: var(--gold-1); margin-left: 1px; }
sup.ap-ref a { color: inherit; text-decoration: none; }

/* ── EQUALIZER-ANIMATION (Startseite & Hero) ── */
.ap-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; margin-right: 0.7rem; vertical-align: -2px; }
.ap-eq i { display: block; width: 3px; height: 30%; background: var(--gold-grad); }
@media (prefers-reduced-motion: no-preference) {
  .ap-eq i { animation: ap-eq 1.1s ease-in-out infinite; }
  .ap-eq i:nth-child(2) { animation-delay: -0.3s; animation-duration: 0.9s; }
  .ap-eq i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.3s; }
  .ap-eq i:nth-child(4) { animation-delay: -0.15s; animation-duration: 1s; }
  .ap-eq i:nth-child(5) { animation-delay: -0.45s; animation-duration: 1.2s; }
}
@keyframes ap-eq { 0%,100% { height: 25%; } 50% { height: 100%; } }

/* ── TEASER AUF DER STARTSEITE ── */
.ap-teaser {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 80% 30%, #3B3F34 0%, #2D3027 40%, #1f2019 100%);
  border-top: 1px solid rgba(209,175,52,0.15); border-bottom: 1px solid rgba(209,175,52,0.15);
}
.ap-teaser canvas.ap-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.8; }
.ap-teaser .section-inner { position: relative; z-index: 1; }
.ap-teaser-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; }
.ap-teaser h2 { margin-bottom: 1.4rem; }
.ap-teaser .ap-list { margin: 1.6rem 0 2.2rem; }
.ap-teaser .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.ap-teaser .ap-player { padding: 1.6rem; }
.ap-teaser .ap-spectrum { height: 170px; }
.ap-teaser .ap-modes { margin-left: 0; width: 100%; }
.ap-teaser .ap-modes button { flex: 1 1 auto; }
.ap-teaser-img { display: flex; gap: 1rem; margin-top: 1rem; }
.ap-teaser-img img { width: 33.333%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(209,175,52,0.12); }

/* ── NAV-LINK ── */
.nav-audiophil { margin-right: 1.6rem; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) and (min-width: 901px) {
  .ap-devices, .ap-videos { grid-template-columns: repeat(2, 1fr); }
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ap-hero { padding: 8rem 1.5rem 5rem; min-height: 0; }
  .ap-hero-grid, .ap-grid2, .ap-teaser-grid, .ap-box, .ap-brand-intro { grid-template-columns: 1fr; gap: 2.5rem; }
  .ap-hero-visual { order: -1; }
  .ap-hero-visual img { max-width: 280px; }
  .ap-scroll { display: none; }
  .ap-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .ap-stat-num { font-size: 2rem; }
  .ap-cards, .ap-cards.ap-cards-2, .ap-devices, .ap-videos { grid-template-columns: 1fr; }
  .ap-compare-head > div, .ap-compare-row > div { padding: 0.8rem 0.7rem; font-size: 0.84rem; }
  .ap-compare-head > div { font-size: 0.62rem; letter-spacing: 0.15em; }
  .ap-player { padding: 1.3rem; }
  .ap-modes { margin-left: 0; width: 100%; }
  .ap-modes button { flex: 1 1 auto; padding: 0.7rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.06em; }
  .ap-spectrum { height: 170px; }
  .ap-mode-info { grid-template-columns: 1fr; }
  .ap-pairs { grid-template-columns: 1fr; gap: 1rem; }
  .ap-pairs-plus { justify-self: center; }
  .ap-box { padding: 1.8rem 1.4rem; }
  .ap-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .ap-s-wide, .ap-s-3x2 { grid-column: span 2; grid-row: span 2; }
  .ap-s-tall { grid-column: span 1; grid-row: span 2; }
  .ap-s-2, .ap-s-3 { grid-column: span 1; }
  .ap-quote { font-size: 1.15rem; }
  .nav-audiophil { display: none; }
}
@media (max-width: 480px) {
  .ap-hero { padding: 7rem 1.2rem 4rem; }
  .ap-step { grid-template-columns: 44px 1fr; gap: 1.1rem; }
  .ap-step-num { width: 44px; height: 44px; font-size: 0.85rem; }
  .ap-timeline::before, .ap-tl-line { left: 21px; }
  .ap-play-icon { width: 54px; height: 54px; }
  .ap-gallery { grid-template-columns: 1fr; }
  .ap-s-wide, .ap-s-3x2, .ap-s-tall, .ap-s-2, .ap-s-3 { grid-column: span 1; grid-row: span 1; }
  .ap-gallery { grid-auto-rows: 230px; }
}