/* ══════════════════════════════════════════════════════════════
   HÖRAKUSTIKER — „AMPAREX bleibt. Punkt."

   WELT      ein echter Hörakustik-Arbeitsplatz
   HELD      der Arbeitsplatz selbst (sieben Fenster)
   KAMERA    sieben Fenster fallen zu EINER Aufgabe zusammen
   MOMENT    die Aufgabe trägt Kontext aus sieben Systemen —
             und AMPAREX hat sich dabei kein Pixel bewegt

   Diese Seite darf fachlich sein. Wer keine Hörakustik macht,
   versteht nicht jedes Detail — das ist beabsichtigt.

   HARTE REGEL: .amp-core bekommt NIRGENDWO eine Transition oder
   Animation auf position/top/left/transform/opacity. Der Beweis
   der Seite ist, dass dieser Block sich nicht bewegt.
══════════════════════════════════════════════════════════════ */

.amp {
  --amp-bg: #f2f4f7;
  --amp-paper: #fff;
  --amp-ink: #1b2330;
  --amp-mut: #646f80;
  --amp-line: rgba(27,35,48,.13);
  --amp-acc: #0f766e;
  --amp-core: #1d4ed8;
  --amp-ease: cubic-bezier(.22,.9,.24,1);

  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--amp-bg); color: var(--amp-ink); overflow-x: clip;
}
.amp-in { width: min(1220px, 92vw); margin-inline: auto; }

.amp-slug { padding: clamp(4.5rem,9vh,7rem) 0 clamp(1.2rem,3vh,1.8rem); }
.amp-slug__k { font-family: var(--font-heading); font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amp-acc); }
.amp-slug__h { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.032em; font-size: clamp(1.45rem,3.2vw,2.35rem); margin: .6rem 0 .5rem; max-width: 24ch; }
.amp-slug__c { margin: 0; color: var(--amp-mut); font-size: .93rem; line-height: 1.62; max-width: 58ch; }

/* ── Der Arbeitsplatz ────────────────────────────────────────── */
.amp-desk { padding-bottom: clamp(2rem,5vh,3rem); }
.amp-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
}
.amp-task {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--font-heading); font-weight: 800; font-size: .86rem;
  background: var(--amp-ink); color: #fff; border: none; border-radius: 999px; padding: .68rem 1.3rem;
  transition: transform .22s var(--amp-ease), background .22s var(--amp-ease);
}
.amp-task:hover { transform: translateY(-2px); background: var(--amp-acc); }
.amp-task:focus-visible { outline: 2px solid var(--amp-acc); outline-offset: 3px; }
.amp-hint { font-size: .8rem; color: var(--amp-mut); margin: 0; }

.amp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
}
@media (max-width: 900px) { .amp-grid { grid-template-columns: repeat(2, 1fr); } }

.amp-win {
  border: 1px solid var(--amp-line); border-radius: 9px; background: var(--amp-paper);
  overflow: hidden; display: flex; flex-direction: column; min-height: 108px;
  box-shadow: 0 6px 18px rgba(27,35,48,.06);
  transition: opacity .55s var(--amp-ease), transform .55s var(--amp-ease), filter .55s var(--amp-ease);
}
.amp-win__bar { display: flex; align-items: center; gap: .4rem; padding: .4rem .55rem;
  border-bottom: 1px solid var(--amp-line); background: #f7f9fb; }
.amp-win__dot { width: .34rem; height: .34rem; border-radius: 50%; background: rgba(27,35,48,.2); }
.amp-win__n { font-family: var(--font-heading); font-weight: 800; font-size: .7rem; }
.amp-win__b { padding: .5rem .6rem; font-size: .7rem; color: var(--amp-mut); line-height: 1.45; flex: 1; }
.amp-win__b b { color: var(--amp-ink); font-weight: 700; }

/* Die sechs Nebenfenster treten zurück, wenn die Aufgabe zählt */
.amp.is-task .amp-win:not(.amp-core) {
  opacity: .3; transform: scale(.965); filter: saturate(.5);
}

/* ══ DER FIXPUNKT ══════════════════════════════════════════════
   Kein transform, keine transition, keine animation auf Position.
   Nur Rahmenfarbe darf reagieren. Das ist die Aussage der Seite. */
.amp-core {
  border: 2px solid var(--amp-core);
  box-shadow: 0 10px 26px rgba(29,78,216,.14);
  transition: border-color .3s var(--amp-ease);
}
.amp-core .amp-win__bar { background: rgba(29,78,216,.08); }
.amp-core .amp-win__n { color: var(--amp-core); }
.amp-core__tag {
  display: inline-block; margin-top: .35rem; font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amp-core);
  background: rgba(29,78,216,.1); border-radius: 999px; padding: .16rem .5rem;
}
/* Der Wackler beim Antippen ist AUSDRÜCKLICH nur ein Rahmen-Blitz,
   keine Bewegung — sonst wäre der Beweis der Seite gelogen. */
.amp-core.is-poked { border-color: #f59e0b; }

.amp-toast {
  margin-top: .9rem; display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(29,78,216,.3); background: rgba(29,78,216,.07);
  border-radius: 999px; padding: .45rem .95rem; font-size: .8rem; font-weight: 700; color: var(--amp-core);
  opacity: 0; transition: opacity .3s var(--amp-ease);
}
.amp-toast.is-on { opacity: 1; }

/* ── Die eine Aufgabe ────────────────────────────────────────── */
.amp-one {
  margin-top: 1rem; border: 1px solid rgba(15,118,110,.32); border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,118,110,.05), transparent 55%), var(--amp-paper);
  padding: clamp(1rem,2.6vw,1.6rem);
  transition: opacity .5s var(--amp-ease), transform .5s var(--amp-ease);
}
.amp.is-js .amp-one { opacity: 0; transform: translateY(10px); pointer-events: none; }
.amp.is-js.is-task .amp-one { opacity: 1; transform: none; pointer-events: auto; }
.amp-one__k { font-family: var(--font-heading); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amp-acc); margin: 0 0 .4rem; }
.amp-one__t { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.05rem,2.3vw,1.45rem); margin: 0 0 .9rem; }
.amp-one__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
@media (max-width: 760px) { .amp-one__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .amp-one__grid { grid-template-columns: 1fr; } }
.amp-bit { border: 1px solid var(--amp-line); border-radius: 8px; padding: .55rem .65rem; background: #fbfcfd; }
.amp-bit__src { font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--amp-mut); display: block; margin-bottom: .2rem; }
.amp-bit__v { font-size: .8rem; font-family: var(--font-heading); font-weight: 700; display: block; }
.amp-bit__s { font-size: .7rem; color: var(--amp-mut); line-height: 1.4; }
.amp-one__foot { margin: .9rem 0 0; font-size: .76rem; color: var(--amp-mut); line-height: 1.55; }

/* ── Leseebene ───────────────────────────────────────────────── */
.amp-read { padding: clamp(3.5rem,9vh,6rem) 0 clamp(4rem,10vh,7rem); border-top: 1px solid var(--amp-line); margin-top: clamp(2rem,5vh,3rem); }
.amp-read__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(1.6rem,5vw,4rem); align-items: start; }
@media (max-width: 880px) { .amp-read__grid { grid-template-columns: 1fr; } }
.amp-read__lead { font-size: clamp(1.02rem,1.5vw,1.16rem); line-height: 1.66; margin: 0 0 1rem; }
.amp-read__p { font-size: .93rem; line-height: 1.72; color: var(--amp-mut); margin: 0 0 .9rem; max-width: 62ch; }
.amp-read__p b { color: var(--amp-ink); }
.amp-read__p a, .amp-qa__a a, .amp-rel a { color: var(--amp-acc); text-underline-offset: 3px; }
.amp-qa { border-left: 1px solid var(--amp-line); padding-left: clamp(.9rem,2vw,1.6rem); }
@media (max-width: 880px) { .amp-qa { border-left: none; border-top: 1px solid var(--amp-line); padding: 1.4rem 0 0; } }
.amp-qa__h { font-family: var(--font-heading); font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amp-mut); margin: 0 0 1rem; }
.amp-qa__i { margin: 0 0 1.1rem; }
.amp-qa__q { font-family: var(--font-heading); font-weight: 700; font-size: .86rem; margin: 0 0 .28rem; }
.amp-qa__a { font-size: .82rem; line-height: 1.62; color: var(--amp-mut); margin: 0; }
.amp-close { margin-top: clamp(2rem,5vh,3rem); padding-top: 1.4rem; border-top: 1px solid var(--amp-line); }
.amp-close__t { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.028em; font-size: clamp(1.15rem,2.3vw,1.6rem); margin: 0 0 .9rem; max-width: 32ch; }
.amp-go { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-heading); font-weight: 700; font-size: .88rem;
  color: #fff; background: var(--amp-ink); text-decoration: none; padding: .68rem 1.25rem; border-radius: 999px; transition: transform .22s var(--amp-ease), background .22s var(--amp-ease); }
.amp-go:hover { transform: translateY(-2px); background: var(--amp-acc); }
.amp-go--q { background: transparent; color: var(--amp-ink); border: 1px solid var(--amp-line); }
.amp-rel { margin: 1.1rem 0 0; font-size: .82rem; color: var(--amp-mut); }

@media (prefers-reduced-motion: reduce) {
  .amp-win, .amp-one, .amp-toast { transition: none; }
}

/* Kontrast auf WCAG AA angehoben (Batch 5, gemessen bei 390px). */