/* karriere.css – Bausteine, die nur die Karriereseite braucht.
   Grundlage ist stil.css der neuen Hauptseite (Weg 1: wie die Hauptseite, Ovidiu 06.11.2026).
   Hier stehen nur Stellenliste, Stellen-Ampel, Stellenseite, Formular-Zusätze, Fotoband,
   Benefits, Bewerbungsablauf und Danke-Seiten. Farben und Schriften kommen aus stil.css.

   AMPEL (AO-Standard ab 06.11.2026, 05_Anleitungen/Anleitung_Stellen-Ampel.md):
   grün  = offene Stelle (status "aktiv")
   gelb  = Initiativ-Stelle (status "initiativ"): besetzt, Initiativbewerbung willkommen
   Die Ampelfarben sind bei allen Kunden gleich und kommen nicht aus der CI. */

:root{
  --ampel-gruen:#2F9E27; --ampel-gruen-flaeche:#E4F2E1; --ampel-gruen-text:#1F5E1A;
  --ampel-gelb:#F2B705;  --ampel-gelb-flaeche:#FFF3C4;  --ampel-gelb-text:#5C4500;
}

/* ---------- Marken und Ampel ---------- */
.marken{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.marke{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .75rem;border-radius:999px;font-size:13px;font-weight:700;line-height:1.3;background:var(--flaeche);color:var(--nacht);white-space:nowrap}
.marke-gruen{background:var(--ampel-gruen-flaeche);color:var(--ampel-gruen-text)}
.marke-gelb{background:var(--ampel-gelb-flaeche);color:var(--ampel-gelb-text)}
.marke-gruen::before,.marke-gelb::before,.ampel-punkt{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3px rgba(0,0,0,.08)}
.marke-gruen::before,.ampel-punkt.gruen{background:var(--ampel-gruen)}
.marke-gelb::before,.ampel-punkt.gelb{background:var(--ampel-gelb)}
.ampel-punkt{display:inline-block;vertical-align:middle}
.marke-dringend{background:var(--blau);color:#fff}
.marke-hell{background:rgba(255,255,255,.14);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .marke-gruen::before{animation:ampel-puls 2.4s ease-in-out infinite}
  @keyframes ampel-puls{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3px rgba(47,158,39,.25)}50%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 7px rgba(47,158,39,.12)}}
}

.ampel-legende{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 28px;padding:16px 22px;border-radius:14px;background:#fff;border:1px solid var(--linie);font-size:15px;color:var(--grau)}
.ampel-legende span{display:inline-flex;align-items:center;gap:10px}
.ampel-legende strong{color:var(--nacht)}

/* ---------- Stellenliste ---------- */
.stellen-liste{display:grid;gap:14px}
.stelle-zeile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 28px;padding:24px 30px 24px 34px;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);text-decoration:none;color:var(--text);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.stelle-zeile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ampel-gruen)}
.stelle-zeile.zustand-initiativ::before{background:var(--ampel-gelb)}
.stelle-zeile h3{font-size:clamp(19px,1.6vw,23px);margin:.55rem 0 .35rem;line-height:1.2}
.stelle-zeile .meta{margin:0;color:var(--grau);font-size:15px}
.stelle-zeile .pfeil{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--linie);color:var(--blau);transition:background .25s,color .25s,border-color .25s}
.stelle-zeile .pfeil svg{width:22px;height:22px}
@media (hover:hover){
  .stelle-zeile:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(46,34,30,.45);border-color:rgba(133,100,90,.35)}
  .stelle-zeile:hover .pfeil{background:var(--blau);border-color:var(--blau);color:#fff}
}
.stelle-zeile:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

/* hervorgehobene Stelle (Feld "hervorheben" in der Stellen-JSON, z. B. Zahnarzt bei Compani) */
.stelle-zeile.stelle-top{grid-template-columns:minmax(220px,340px) minmax(0,1fr) auto;padding:0 30px 0 0;border:2px solid var(--blau)}
.stelle-zeile.stelle-top::before{width:8px;z-index:2}
.stelle-top .stelle-top-bild{align-self:stretch;min-height:200px;overflow:hidden}
.stelle-top .stelle-top-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.stelle-top .stelle-top-text{padding:26px 0}
.stelle-top h3{font-size:clamp(22px,2.2vw,30px)}
@media (hover:hover){.stelle-top:hover .stelle-top-bild img{transform:scale(1.05)}}
@media (max-width:760px){
  .stelle-zeile{grid-template-columns:1fr;padding:22px 22px 22px 26px}
  .stelle-zeile .pfeil{display:none}
  .stelle-zeile.stelle-top{grid-template-columns:1fr;padding:0}
  .stelle-top .stelle-top-bild{min-height:0;aspect-ratio:16/9}
  .stelle-top .stelle-top-text{padding:20px 22px 24px 26px}
}
.keine-stellen{padding:24px;border-radius:var(--radius);background:var(--ampel-gelb-flaeche)}

/* ---------- Fotoband (läuft von selbst, wie die Slider der alten Seite) ---------- */
.fotoband{overflow:hidden;padding:clamp(28px,4vw,48px) 0;background:#fff}
.fotoband-spur{display:flex;gap:16px;width:max-content;animation:fotoband 70s linear infinite}
.fotoband figure{margin:0;flex:none;width:clamp(240px,26vw,420px);aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--flaeche)}
.fotoband img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover){.fotoband:hover .fotoband-spur{animation-play-state:paused}}
@keyframes fotoband{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.fotoband{overflow-x:auto}.fotoband-spur{animation:none}}

/* ---------- Benefits (Vierergruppen, ohne Symbol-Kacheln laut CI) ---------- */
.benefits-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1100px){.benefits-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.benefits-raster{grid-template-columns:1fr}}
.benefit{background:#fff;border-radius:var(--radius);padding:26px 26px 24px;border-top:3px solid var(--rose)}
.benefit h3{font-size:1.15rem;margin:0 0 .45rem}
.benefit p{margin:0;color:var(--grau);font-size:16px}
.benefits-fuss{margin:24px 0 0;color:var(--grau)}

/* ---------- Kennzahlen im Hero / Fakten ---------- */
.hero .marken{margin-bottom:18px}
.fakten-raster a{color:inherit;text-decoration:none;border-bottom:2px solid var(--rose)}

/* ---------- Ansprechpartner ---------- */
.ansprech-karte{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center}
.ansprech-karte picture,.ansprech-karte>img{grid-row:span 3;display:block;width:112px;height:112px}
.ansprech-karte img{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.ansprech-karte .ansprech-name{margin:0;font-family:var(--kopfschrift);font-weight:700;font-size:19px;color:var(--nacht)}
.ansprech-karte .ansprech-name span{display:block;font-family:var(--schrift);font-weight:400;font-size:15px;color:var(--grau)}
.ansprech-karte .ansprech-kontakt{margin:0;font-size:15px}
.ansprech-karte .ansprech-kontakt a{color:var(--blau);font-weight:700;text-decoration:none;word-break:break-word}
.kontakt-gross{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
@media (max-width:900px){.kontakt-gross{grid-template-columns:1fr}}

/* ---------- Bewerbungsablauf ---------- */
.tipps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:clamp(48px,6vw,80px)}
@media (max-width:760px){.tipps{grid-template-columns:1fr}}
.schritte{list-style:none;padding:0;margin:0;counter-reset:schritt;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.schritte{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.schritte{grid-template-columns:1fr}}
.schritte li{counter-increment:schritt;background:var(--flaeche);border-radius:var(--radius);padding:28px 26px}
.schritte li::before{content:counter(schritt);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blau);color:#fff;font-family:var(--kopfschrift);font-weight:700;margin-bottom:16px}
.schritte strong{display:block;font-family:var(--kopfschrift);font-size:18px;color:var(--nacht);margin-bottom:.4rem}
.schritte span{color:var(--grau)}

/* ---------- Stellenseite (zweispaltig wie ao-karriere.de, Raster der Hauptseite) ---------- */
.stelle-raster{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(40px,6vw,90px);align-items:start}
.stelle-seite{position:sticky;top:110px;display:grid;gap:16px}
@media (max-width:1000px){.stelle-raster{grid-template-columns:1fr}.stelle-seite{position:static}}
.stelle-bild{margin:0 0 28px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.stelle-bild img{width:100%;height:100%;object-fit:cover;display:block}
.stelle-text h2{font-size:22px;font-weight:700;margin:2.2rem 0 .8rem}
.stelle-text p{color:var(--grau)}
.stelle-text .haken-liste li{color:var(--text)}
.fakten-karte{background:var(--flaeche);border-radius:var(--radius);padding:26px 28px;margin:0}
.fakten-karte div{padding:12px 0;border-bottom:1px solid var(--linie)}
.fakten-karte div:last-child{border-bottom:0}
.fakten-karte dt{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);margin-bottom:2px}
.fakten-karte dd{margin:0;color:var(--nacht)}
.fakten-karte address{font-style:normal}
.stelle-hinweis{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:14px;margin:0 0 24px;font-size:16px}
.stelle-hinweis.gelb{background:var(--ampel-gelb-flaeche);color:var(--ampel-gelb-text)}
.stelle-hinweis.gruen{background:var(--ampel-gruen-flaeche);color:var(--ampel-gruen-text)}
.stelle-hinweis .ampel-punkt{margin-top:.45em}
.benefits-liste{columns:2;column-gap:32px}
@media (max-width:600px){.benefits-liste{columns:1}}
.benefits-liste li{break-inside:avoid}
.seitenkopf .marken{margin:0 0 18px}
.seitenkopf .marke:not(.marke-gruen):not(.marke-gelb):not(.marke-dringend){background:rgba(255,255,255,.14);color:#fff}
.stelle-aktion{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.stelle-aktion .hinweis{color:rgba(255,255,255,.8);font-size:15px}
.stelle-weitere{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.stelle-weitere a{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--nacht);font-weight:600}
@media (hover:hover){.stelle-weitere a:hover{color:var(--blau)}}

/* ---------- Bewerbungsformular (Grundstil .formular aus stil.css) ---------- */
.bewerben{margin-top:3rem;scroll-margin-top:100px}
.bewerben h2{font-size:clamp(26px,3vw,36px);font-weight:800;margin:0 0 .6rem}
.bewerbungsformular fieldset{border:0;padding:0;margin:0 0 16px}
.bewerbungsformular legend{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--nacht)}
.bewerbungsformular input[type=file]{padding:12px;background:#fff;border:1.5px dashed rgba(133,100,90,.45);border-radius:12px;width:100%}
.formular-meldung.fehler{color:#9B1C1C}
.formular-meldung.erfolg{color:var(--ampel-gruen-text)}
.klein{font-size:14px;color:var(--grau)}

/* ---------- Danke-Seiten ---------- */
.danke-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center}
@media (max-width:900px){.danke-raster{grid-template-columns:1fr}}
.danke-video{width:100%;aspect-ratio:16/9;border-radius:var(--radius);background:var(--nacht);display:block;box-shadow:0 30px 60px -30px rgba(46,34,30,.55)}
.danke-text .haken-liste{margin-top:1.4rem}

/* ---------- Initiativ-Hinweis unter der Stellenliste ---------- */
.initiativ-box{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding:26px 30px;border-radius:var(--radius);background:var(--ampel-gelb-flaeche)}
.initiativ-box p{margin:0;color:var(--ampel-gelb-text);max-width:60ch}
.initiativ-box strong{color:var(--nacht)}

/* ---------- Vorschau-Hinweisleiste (setzt der Vorschau-Ablauf) ---------- */
.vorschau-leiste{position:relative;z-index:200;background:#FFF3C4;color:#5C4500;text-align:center;font-size:14px;font-weight:700;padding:8px 16px}

/* ---------- Feinschliff Handy (06.11.2026) ---------- */
.fuss-liste .ampel-punkt{margin-right:8px}
.kopf-knopf .ikon-klein{width:18px;height:18px}
.stellenseite .seitenkopf h1,.seitenkopf h1{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal}
@media (max-width:600px){
  .stellenseite .seitenkopf h1{font-size:clamp(28px,8.4vw,40px)}
  .seitenkopf h1{font-size:clamp(28px,8.4vw,40px)}
  .stelle-aktion .knopf{flex:1 1 100%;justify-content:center}
}
.stelle-zeile h3{hyphens:manual;-webkit-hyphens:manual}
@media (max-width:560px){
  .stelle-zeile h3{font-size:18px}
  .stelle-top h3{font-size:21px}
  .ansprech-karte{grid-template-columns:1fr;justify-items:start}
  .ansprech-karte picture,.ansprech-karte>img{grid-row:auto;margin-bottom:8px}
}

@media (max-width:600px){.benefit h3{font-size:1.02rem}}

/* ---------- Runde 2 nach Rückmeldung Ovi (06.11.2026) ---------- */
/* Abstände: Abschnitte und Überschriften enger als auf der Hauptseite (Wunsch Ovi) */
.abschnitt{padding-top:clamp(48px,6vw,92px);padding-bottom:clamp(48px,6vw,92px)}
.abschnitt-kopf{margin-bottom:clamp(22px,2.6vw,36px)}
.abschnitt-kopf h2,.text-spalte h2,.ueber-kopf h2{margin-bottom:.35em}
.zwei{gap:clamp(32px,5vw,72px)}
.fotoband{padding:clamp(20px,3vw,36px) 0}

/* Über uns: Text oben, Gruppenbild ganz und groß darunter */
.ueber-kopf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(32px,5vw,80px);align-items:start;margin-bottom:clamp(24px,3vw,40px)}
.ueber-kopf p{color:var(--grau)}
@media (max-width:900px){.ueber-kopf{grid-template-columns:1fr}}
.team-band{margin:0 auto}
.team-band picture,.team-band img{display:block;width:100%;height:auto;border-radius:var(--radius)}

/* Benefits mit Symbol (Wunsch Ovi, abweichend von der Hauptseite) */
.benefit{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;align-items:start;padding:22px 22px 20px;border-top:0;border:1px solid var(--linie)}
.benefit-ikon{grid-row:span 2;width:48px;height:48px;padding:10px;border-radius:14px;background:#F6EEEA;color:var(--blau)}
.benefit h3{margin:4px 0 .2rem}
@media (hover:hover){.benefit{transition:transform .25s,box-shadow .25s}.benefit:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(46,34,30,.45)}.benefit:hover .benefit-ikon{background:var(--blau);color:#fff}}

/* Stellenliste kompakter, alle Karten gleich (kein Sonderbild mehr beim Zahnarzt) */
.stellen-liste{gap:10px}
.stelle-zeile{padding:16px 22px 16px 28px;gap:4px 20px;border-radius:14px}
.stelle-zeile::before{width:5px}
.stelle-zeile h3{font-size:clamp(17px,1.3vw,19px);margin:.4rem 0 .15rem;line-height:1.25}
.stelle-zeile .meta{font-size:14px}
.stelle-zeile .marke{font-size:12px;padding:.2rem .6rem}
.stelle-zeile .pfeil{width:40px;height:40px}
.stelle-zeile .pfeil svg{width:18px;height:18px}
.stelle-zeile.stelle-top{grid-template-columns:minmax(0,1fr) auto;padding:16px 22px 16px 28px;border:2px solid var(--blau);background:#FCF8F6}
.stelle-zeile.stelle-top::before{width:5px}
.stelle-top .stelle-top-text{padding:0}
.stelle-top h3{font-size:clamp(17px,1.3vw,19px)}
.ampel-legende{margin-bottom:18px;padding:12px 18px;font-size:14px}
@media (max-width:760px){.stelle-zeile,.stelle-zeile.stelle-top{padding:14px 16px 14px 22px}}
.benefit{display:block;padding:24px 24px 22px}
.benefit-ikon{display:block;width:52px;height:52px;padding:12px;margin-bottom:16px}
.benefit h3{margin:0 0 .35rem}
@media (max-width:560px){
  .benefits-raster{grid-template-columns:1fr 1fr;gap:10px}
  .benefit{padding:16px 14px 14px}
  .benefit-ikon{width:42px;height:42px;padding:10px;margin-bottom:10px}
  .benefit h3{font-size:15px;line-height:1.25}
  .benefit p{font-size:14px;line-height:1.45}
}

/* Runde 3 (Ovi): Gruppenbild rechts neben dem Text, Karte wie das Video darunter, ganzes Team sichtbar (nicht beschnitten) */
.team-karte{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--nacht);box-shadow:0 30px 60px -30px rgba(46,34,30,.55)}
.team-karte picture,.team-karte img{display:block;width:100%;height:auto}
/* Runde 4: Recruiting-Video neben der Überschrift der Stellenliste */
.stellen-kopf{margin-bottom:clamp(24px,3vw,40px)}
/* Umbau 09.11.2026: dritte Zeile im Hero, Überschrift mit Beruf und Ort */
.hero h1{max-width:16ch}
.hero h1 .zeile:nth-child(3)>span{transition-delay:.24s}
.hero .dachzeile{margin-bottom:.6rem}
/* Stellenliste in zwei Gruppen: offen und initiativ (09.11.2026) */
.stellen-gruppe{display:flex;align-items:center;gap:10px;margin:clamp(22px,3vw,34px) 0 12px;font-family:var(--schrift-ueberschrift,inherit);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-ink,#2E221E)}
.stellen-gruppe-text{margin:-4px 0 14px;color:var(--grau);max-width:62ch}
/* Hinweisleiste der GitHub-Vorschau (setzt scripts/vorschau-vorbereiten.py, nie auf der Live-Seite) */
.vorschau-leiste{position:sticky;top:0;z-index:1000;background:#FFF3C4;color:#5C4500;text-align:center;font:700 13px/1.4 system-ui,sans-serif;padding:6px 12px}
/* Seitenkopf neu (wie Hauptseite): Marken auf der hellen Karte */
.sk-text .marken{margin-bottom:14px}
.sk-text .marke:not(.marke-gruen):not(.marke-gelb):not(.marke-dringend){background:#fff}
/* Über uns: Bild so hoch wie der Text, mit Faktenkarte (09.11.2026) */
.ueber-raster{align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ueber-raster .text-spalte{align-self:center}
.ueber-bild{position:relative;margin:0;height:100%;min-height:520px}
.ueber-bild picture,.ueber-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 35%}
.ueber-info{position:absolute;left:20px;bottom:20px;right:auto;max-width:calc(100% - 40px);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;padding:14px 18px;color:var(--nacht);font-size:15px;line-height:1.4;box-shadow:0 18px 40px -20px rgba(46,34,30,.45)}
.ueber-info strong{font-family:var(--kopfschrift);font-size:20px;margin-right:4px}
.ueber-info span{display:block;color:var(--grau);font-size:14px;margin-top:2px}
@media (max-width:900px){.ueber-raster{grid-template-columns:1fr}.ueber-bild{min-height:0;height:auto;aspect-ratio:4/3}}
/* Einblicke als Bento-Raster mit Großansicht (statt Laufband) */
.einblicke{padding-top:clamp(48px,7vw,96px)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,230px);grid-auto-flow:dense;gap:14px}
.bento-kachel{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:var(--flaeche)}
.bento-kachel[hidden]{display:none}
.bento-kachel picture,.bento-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.bento-kachel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(46,34,30,.35),transparent 45%);opacity:0;transition:opacity .3s}
@media (hover:hover){.bento-kachel:hover img{transform:scale(1.05)}.bento-kachel:hover::after{opacity:1}}
.bento-kachel:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.bento-kachel:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.bento-kachel:nth-child(7n+2){grid-row:span 2}
.bento-kachel:nth-child(7n+5){grid-column:span 2}
.bento-mehr{display:flex;justify-content:center;margin-top:28px}
@media (max-width:760px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px}.bento-kachel:nth-child(7n+2){grid-row:span 1}.bento-kachel:nth-child(7n+5){grid-column:span 2}}
/* Großansicht */
.lichtbox{position:fixed;inset:0;z-index:2147483000;background:rgba(20,14,12,.92);display:none;align-items:center;justify-content:center;padding:clamp(12px,4vw,56px)}
.lichtbox.offen{display:flex}
.lichtbox figure{margin:0;max-width:min(1200px,100%);text-align:center}
.lichtbox img{max-width:100%;max-height:78vh;border-radius:12px;margin:0 auto}
.lichtbox figcaption{color:rgba(255,255,255,.85);margin-top:12px;font-size:15px}
.lichtbox button{position:absolute;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lichtbox button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lichtbox .lb-zu{top:16px;right:16px}
.lichtbox .lb-zurueck{left:16px;top:50%;transform:translateY(-50%)}
.lichtbox .lb-vor{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:760px){.lichtbox .lb-zurueck,.lichtbox .lb-vor{top:auto;bottom:16px;transform:none}}
body.lichtbox-offen{overflow:hidden}