/* ============================================================================
   teil-zh-gegen.css — zwei Dinge nebeneinander, mit freigestellten Abbildungen.

   Christopher, 04.10.2026, zum Abschnitt 02 Gehörschutz: „Da möchte ich auch
   freigestellte Abbildungen, von auch einem nicht angefertigten, und dann die
   Vergleiche, so wie es beschrieben ist. Macht da auch sowas." — „sowas" meint
   den HEAROS-Ring, den er eine Nachricht vorher abgenommen hat: „Jetzt sind die
   Dinge in hoher Qualität. Solche Animationen möchte ich mehr auf der Webseite."

   Das Markup kommt aus vorlagen/leistung.php, die Inhalte aus inc/gegen.php —
   und die liest sie aus SEINEM Text, nicht aus einer Tabelle hier.

   DIE ABBILDUNGEN. Beide 640x640 PNG mit Alphakanal, 64 % bzw. 79 % durchsichtig,
   freigestellt per Flutfüllung von den Bildecken (dieselbe Mechanik wie bei
   HEAROS Boom II). Sie stehen deshalb OHNE Platte frei im Raum und dürfen sich
   über die Kante ihrer Karte schieben — das ist der ganze Reiz daran.

   Diese Datei lädt als letzte der teil-*.css („zh" sortiert hinter zg) und
   kommt ohne !important aus.
   ========================================================================= */

/* ── Das Paar ─────────────────────────────────────────────────────────────
   Zwei gleich breite Spalten mit einer Gasse, in der die Trennung sitzt.
   Oben 96 px Luft, damit die freigestellten Dinge aus ihrer Karte herausragen
   können, ohne den Abschnitt darüber zu berühren — gerechnet aus der halben
   Bildhöhe (240 px Anzeige / 2 = 120, davon ragen 96 heraus).
   -------------------------------------------------------------------- */
.leistung .gegen{ margin-block:clamp(2rem,4vw,3.4rem) }

.leistung .gegen-paar{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,2.2rem);
  align-items:stretch;
  margin-top:calc(96px + clamp(.6rem,1.4vw,1.2rem));
  position:relative;
}

/* Die Trennung in der Mitte: ein feiner Goldfaden mit einem „oder" darin.
   Er steht nur da, wo wirklich zwei Spalten nebeneinander sind. */
@media (min-width:941px){
  .leistung .gegen-paar::before{
    content:"";
    position:absolute;
    inset-block:14%;
    left:50%;
    width:1px;
    background:linear-gradient(
      to bottom,
      transparent,
      color-mix(in oklab, var(--gold) 70%, transparent) 22%,
      color-mix(in oklab, var(--gold) 70%, transparent) 78%,
      transparent);
    z-index:0;
  }
}

/* ── Eine Seite ───────────────────────────────────────────────────────────
   Glaskachel wie im Haus üblich, aber mit Platz oben für das Ding, das
   herausragt. padding-top trägt die untere Bildhälfte.
   -------------------------------------------------------------------- */
.leistung .gegen-seite{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:calc(212px + 1.3rem) clamp(1.1rem,2vw,1.8rem) clamp(1.3rem,2.2vw,1.9rem);
  border-radius:var(--r-l);
  border:1px solid var(--glas-rand);
  box-shadow:var(--glas-schatten);
  background:linear-gradient(170deg,
    color-mix(in oklab, var(--weiss) 86%, transparent),
    color-mix(in oklab, var(--creme) 72%, transparent));
}

/* Die rechte Seite bekommt den wärmeren Grund — maßgefertigt ist das, wofür
   sie beraten. Kein Preis, kein Siegel: nur eine Spur mehr Gewicht. */
.leistung .gegen-seite.gegen-rechts{
  background:linear-gradient(170deg,
    color-mix(in oklab, var(--weiss) 88%, transparent),
    color-mix(in oklab, var(--gold-zart) 80%, transparent));
}

/* ── Das freigestellte Ding ───────────────────────────────────────────────
   Es sitzt mittig über der Kachel und ragt 96 px heraus. Keine Platte, kein
   Rahmen, kein Beschnitt — ein PNG mit Alphakanal braucht nichts davon.
   -------------------------------------------------------------------- */
.leistung .gegen-bild{
  position:absolute;
  /* Christopher, 04.10.2026 (Auftrag 10): „Die sitzen aber ganz oben am Rand.
     Prüf es bitte pixelgenau — die sind abgeschnitten. Es muss in der Kachel
     alles weiter unten sitzen. Die Kachel kann ruhig etwas größer werden."
     Pixelgenau nachgemessen: am Element war der Überstand 0 px (Bild 240x240
     in einem Rahmen von 240x240, object-fit:contain). Abgeschnitten war die
     **Freistellung selbst** — beide PNGs trugen links und rechts bis an die
     Kante einen grauen Schattenfleck (Inhaltskasten 0…640 statt mittig).
     Beide sind neu freigestellt, jetzt mit gleichem Rand ringsum. Und wie
     gewünscht sitzt das Ding tiefer: statt 96 px ragt es nur noch 58 px über
     die Kachel, die dafür höher wird. */
  top:-58px;
  left:50%;
  width:252px;
  height:252px;
  margin:0;
  pointer-events:none;
}
.leistung .gegen-bild img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  /* Ein eigener Schatten, damit das Ding über der Kachel schwebt statt zu
     kleben. Auf dem Alphakanal, nicht auf dem Kasten — darum drop-shadow. */
  filter:drop-shadow(0 18px 26px rgba(19,55,109,.20));
}

.leistung .gegen-titel{
  margin:0 0 .7rem;
  text-align:center;
  font-size:clamp(1.12rem,1.5vw,1.34rem);
  letter-spacing:-.01em;
  color:var(--blau);
}

/* Ein kurzer Goldstrich unter dem Titel, wie bei den Abschnittsköpfen. */
.leistung .gegen-titel::after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin:.55rem auto 0;
  border-radius:2px;
  background:var(--gold);
}

/* ── Die Sätze ────────────────────────────────────────────────────────────
   Sie kommen wörtlich aus seinem Text. Als Liste gesetzt, weil es Merkmale
   sind — mit dem Hauszeichen in Gold statt eines Punktes.
   -------------------------------------------------------------------- */
.leistung .gegen-liste{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.6rem;
}
.leistung .gegen-liste li{
  position:relative;
  padding-left:1.45em;
  font-size:clamp(.95rem,1.1vw,1.02rem);
  line-height:1.62;
  color:var(--text-leise);
}
.leistung .gegen-liste li::before{
  content:"";
  position:absolute;
  left:.12em;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
}

/* ── Schmale Geräte ───────────────────────────────────────────────────────
   Untereinander. Das Ding wird kleiner und ragt weniger heraus, sonst frisst
   es die halbe Kachel. Gerechnet für 375 px: Kachel 343 px breit, Bild 160 px.
   -------------------------------------------------------------------- */
@media (max-width:940px){
  .leistung .gegen-paar{
    grid-template-columns:minmax(0,1fr);
    gap:calc(72px + 1rem);
    margin-top:calc(72px + 1rem);
  }
  .leistung .gegen-bild{ width:196px; height:196px; top:-46px }
  .leistung .gegen-seite{ padding-top:calc(162px + 1.2rem) }
}

@media (max-width:430px){
  .leistung .gegen-bild{ width:166px; height:166px; top:-38px }
  .leistung .gegen-seite{ padding-top:calc(138px + 1.1rem) }
}


/* ============================================================================
   BEWEGUNG
   Die beiden Seiten kommen von ihrer eigenen Seite herein, das Ding darüber
   eine Spur später und von oben — so setzt es sich sichtbar auf seine Kachel.
   Ausgelöst wird es über die Hausmechanik: Ruhezustand auf .gegen.einblenden,
   freigegeben durch .auf, das assets/js/wirkung.js setzt.

   transition IMMER eigenschaftsgenau. Am 03.10.2026 hat ein pauschaler Verzug
   540 ms lang auch das Schweben lahmgelegt.
   ========================================================================= */
.leistung .gegen.einblenden .gegen-seite{
  opacity:0;
  transition:
    opacity   .64s var(--weich),
    transform .82s var(--weich);
}
.leistung .gegen.einblenden .gegen-links{  transform:translate3d(-54px,0,0) }
.leistung .gegen.einblenden .gegen-rechts{ transform:translate3d( 54px,0,0) }

.leistung .gegen.einblenden .gegen-bild{
  opacity:0;
  transform:translate3d(-50%,-26px,0) scale(.88);
  transition:
    opacity   .58s var(--weich) .22s,
    transform .74s var(--weich) .22s;
}

/* Ruhestellung der Mitte: das Bild steht schon im Aufbau auf left:50%, also
   gehört das -50% in JEDE transform dieser Ebene. Vergisst man es in einem
   Zustand, springt das Ding beim Umschalten um die halbe Breite. */
.leistung .gegen .gegen-bild{ transform:translate3d(-50%,0,0) }

.leistung .gegen.einblenden.auf .gegen-seite{
  opacity:1;
  transform:none;
}
.leistung .gegen.einblenden.auf .gegen-bild{
  opacity:1;
  transform:translate3d(-50%,0,0) scale(1);
}

/* ── Antwort auf den Zeiger ───────────────────────────────────────────────
   Die Kachel hebt sich, das Ding darüber wird eine Spur größer und sein
   Schatten tiefer. Nur Bewegung — Maße und Farben stehen oben.
   -------------------------------------------------------------------- */
.leistung .gegen-seite{
  transition:
    transform .42s var(--weich),
    box-shadow .42s var(--weich);
}
.leistung .gegen-seite:hover,
.leistung .gegen-seite:focus-within{
  transform:translateY(-6px);
  box-shadow:0 26px 54px rgba(19,55,109,.16);
}
.leistung .gegen-seite:hover .gegen-bild img,
.leistung .gegen-seite:focus-within .gegen-bild img{
  transform:scale(1.055) rotate(-1.4deg);
  filter:drop-shadow(0 24px 32px rgba(19,55,109,.26));
}
.leistung .gegen-bild img{
  transition:
    transform .46s var(--weich),
    filter    .46s var(--weich);
}


/* ============================================================================
   NETZ 1: KEIN JAVASCRIPT
   Ohne Skript kommt nie ein .auf, und auch das 12-Sekunden-Netz von wirkung.js
   läuft nicht. Die Selektoren tragen dieselbe Klassenzahl wie die Regeln, die
   sie zurücknehmen — später in der Datei hilft nur bei GLEICHER Spezifität.
   Genau daran ist am 03.10.2026 ein Netz gescheitert.
   ========================================================================= */
@media (scripting: none){
  .leistung .gegen.einblenden .gegen-seite,
  .leistung .gegen.einblenden .gegen-links,
  .leistung .gegen.einblenden .gegen-rechts{
    opacity:1;
    transform:none;
    transition:none;
  }
  .leistung .gegen.einblenden .gegen-bild{
    opacity:1;
    transform:translate3d(-50%,0,0);
    transition:none;
  }
}


/* ============================================================================
   NETZ 2: prefers-reduced-motion
   Kein Flug, kein Heben, kein Drehen. Alles steht sofort vollständig da.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .leistung .gegen.einblenden .gegen-seite,
  .leistung .gegen.einblenden .gegen-links,
  .leistung .gegen.einblenden .gegen-rechts,
  .leistung .gegen.einblenden.auf .gegen-seite{
    opacity:1;
    transform:none;
    transition:none;
  }
  .leistung .gegen.einblenden .gegen-bild,
  .leistung .gegen.einblenden.auf .gegen-bild,
  .leistung .gegen .gegen-bild{
    opacity:1;
    transform:translate3d(-50%,0,0);
    transition:none;
  }
  .leistung .gegen-seite:hover,
  .leistung .gegen-seite:focus-within{
    transform:none;
  }
  .leistung .gegen-seite:hover .gegen-bild img,
  .leistung .gegen-seite:focus-within .gegen-bild img{
    transform:none;
  }
}


/* ── Das Schlusswort unter dem Paar ───────────────────────────────────────
   „Sie sind interessiert? … wir beraten Sie gerne!" gehoert zur Seite, nicht
   in die Merkmalsliste einer der beiden Arten. Gemessen 04.10.2026: ohne die
   Trennung standen drei Schlusssaetze und der Link auf bachmaier.de als
   Eigenschaften des massgefertigten Gehoerschutzes in der rechten Spalte.
   -------------------------------------------------------------------- */
.leistung .gegen-nachsatz{
  margin-top:clamp(1.4rem,2.6vw,2.2rem);
  max-width:62ch;
  margin-inline:auto;
  text-align:center;
}
.leistung .gegen-nachsatz p{ margin:0 0 .5em }
.leistung .gegen-nachsatz p:last-child{ margin-bottom:0 }