/* Teamprophylaxe-Magazin (/teamprophylaxe-magazin/), Lupe und Formular auch auf /arbeitgeber-befund/.
   Nutzt die Farben und Abstaende aus stil.css. */

/* ---------- Ausgabe ---------- */
.ausgabe{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.ausgabe + .ausgabe{margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--linie)}
.ausgabe__titelbild{position:sticky;top:7rem}
.ausgabe__titelbild .leseprobe__knopf{border-radius:4px;box-shadow:var(--schatten)}
.ausgabe__titelbild img{width:100%;height:auto;display:block}
.ausgabe__marke{display:inline-block;font-family:var(--schrift-kopf);font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--blau);background:var(--blau-tint);border-radius:999px;padding:.35rem .9rem;margin:0 0 1.1rem}
.ausgabe__text h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.25;margin:0 0 1rem}
.ausgabe__inhalt{list-style:none;padding:0;margin:1.6rem 0 2rem;display:grid;gap:.75rem}
.ausgabe__inhalt li{position:relative;padding:.9rem 1.1rem .9rem 1.3rem;background:var(--nebel);border-radius:10px;border-left:3px solid var(--blau);font-size:.98rem}
.ausgabe__inhalt strong{color:var(--kopf);font-family:var(--schrift-kopf);font-weight:600}
.ausgabe__leseprobe-titel{font-family:var(--schrift-kopf);font-weight:600;color:var(--kopf);font-size:.95rem;margin:0 0 .8rem}
.ausgabe__knoepfe{margin:2rem 0 0}

/* ---------- Leseprobe (Vorschaubilder) ---------- */
.leseprobe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:520px}
.leseprobe__knopf{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;border-radius:4px;font:inherit;color:inherit;text-align:center}
.leseprobe .leseprobe__knopf img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:var(--schatten-k);transition:transform .35s var(--ease)}
.leseprobe .leseprobe__knopf span{display:block;margin-top:.55rem;font-size:.85rem;color:var(--text-2)}
.leseprobe__knopf:hover img,.leseprobe__knopf:focus-visible img{transform:translateY(-3px)}
.leseprobe__knopf:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

/* ---------- Grosse Ansicht ---------- */
.lupe{position:fixed;inset:0;z-index:2147483200;background:rgba(26,24,32,.92);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;gap:1rem;padding:clamp(1rem,3vw,2.5rem)}
.lupe[hidden]{display:none}
.lupe__bild{grid-column:2;grid-row:1;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);background:#fff}
.lupe__nav,.lupe__zu{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:999px;width:48px;height:48px;font-size:1.8rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lupe__nav:hover,.lupe__zu:hover{background:var(--blau)}
.lupe__nav:focus-visible,.lupe__zu:focus-visible{outline:3px solid var(--blau-hell);outline-offset:2px}
.lupe__nav--zurueck{grid-column:1;grid-row:1}
.lupe__nav--weiter{grid-column:3;grid-row:1}
.lupe__zu{position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem)}
.lupe__hinweis{grid-column:1/-1;grid-row:2;margin:0;color:rgba(255,255,255,.85);font-size:.92rem;text-align:center}
.lupe__hinweis a{color:var(--blau-hell);font-weight:600}
html.lupe-offen{overflow:hidden}

/* ---------- Formular ---------- */
.feld--hervor{background:var(--blau-tint);border-radius:10px;padding:.9rem 1rem}

@media (max-width:980px){
  .sepa__raster{grid-template-columns:minmax(0,1fr)}
  .formular .knopf--breit{white-space:normal;text-align:center}
}
@media (max-width:860px){
  .ausgabe{grid-template-columns:1fr}
  .ausgabe__titelbild{position:static;max-width:320px}
}
@media (max-width:560px){
  .leseprobe{gap:.6rem}
  .lupe{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto auto;padding:3.8rem .75rem 1rem}
  .lupe__bild{grid-column:1/-1}
  .lupe__nav--zurueck{grid-column:1;grid-row:2;justify-self:end}
  .lupe__nav--weiter{grid-column:2;grid-row:2;justify-self:start}
  .lupe__hinweis{grid-row:3}
}
@media (prefers-reduced-motion:reduce){.leseprobe__knopf img{transition:none}}