@font-face{font-family:Inter;src:url("../../assets/fonts/inter-400.woff2?v=8909904a") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("../../assets/fonts/inter-700.woff2?v=6f56409f") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../../assets/fonts/source-serif-4-400.woff2?v=02194deb") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ─────────────────────────────────────────────────────────────
   Freiheit in Grenzen.

   Der Grund ist Papier, die Schrift ist Tinte. Die drei Farben
   stammen aus der Zeichnung selbst und stehen fuer dasselbe wie
   dort: Rot fuer die Regel, Blau fuer das Wasser, Gruen fuer den
   Stift. Sie werden sparsam gesetzt.

   Die Seite wird von Kapitel zu Kapitel ruhiger. Der Abstand
   waechst, der Text wird kuerzer, die Bilder bekommen mehr Raum:
   Komplexitaet, Klaerung, Reduktion.
   ───────────────────────────────────────────────────────────── */

:root{
  --paper:#f2eee4;
  --blatt:#fffdf8;
  --ink:#1b1712;
  --muted:#6d675d;
  --line:rgba(27,23,18,.16);
  --rot:#b83a2b;
  --blau:#2f6bb0;
  --gruen:#2c7346;   /* auf Papier gemessen 4.97:1; #2f7d4c lag mit 4.36 darunter */
  --rand:clamp(1.1rem,5vw,6rem);
  --spalte:min(94vw,96.25rem);   /* 1540px bei 16px Wurzel, dieselbe Breite wie auf Umwelt */
  --schrift-label:clamp(.72rem,calc(.68rem + .04vw),.8rem);
  --schrift-caption:clamp(.94rem,calc(.9rem + .05vw),1rem);
  --schrift-text:clamp(1rem,calc(.96rem + .06vw),1.06rem);
}

/* ─────────────────────────────────────────────────────────────
   Breite Fenster.

   Jede andere Projektseite laesst ihren Container in denselben zwei
   Stufen wachsen (1600px, 2200px) und dreht an derselben Stelle an
   der Wurzelschrift. Ohne das blieb diese Seite bei 1540px stehen,
   waehrend Text und Bilder ringsum weiterwuchsen: bei 3440px maass
   das eigene h1 105.6px, das von RE:PACKAGED auf derselben Seite
   357px, weil dessen Wurzel auf 21px waechst und diese hier auf 16px
   blieb. --spalte ist deshalb jetzt in rem notiert: sie waechst mit
   der Wurzel von selbst mit, plus dieselben Stufen wie die uebrigen
   Container im Portfolio.
   ───────────────────────────────────────────────────────────── */

/* Original drawings belong to the project narrative, not to a generic application box. */
.kapitel--originale{background:color-mix(in srgb,var(--blatt) 94%,var(--ink) 6%)}
.originale-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,3rem);max-width:min(100%,82.5rem)}
.originale-grid figure{margin:0;min-width:0}
.original-trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in;text-align:inherit}
.original-thumb{position:relative;display:grid;place-items:center;min-height:clamp(22rem,46vw,42rem);overflow:hidden;background:var(--blatt);border:1px solid var(--line)}
.original-thumb img{display:block;width:100%;height:100%;max-height:42rem;object-fit:contain}
.original-hint{position:absolute;right:.8rem;bottom:.8rem;padding:.35rem .55rem;background:rgba(16,31,25,.88);color:#fff;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .18s ease}
.original-trigger:is(:hover,:focus-visible) .original-hint{opacity:1}
.original-trigger:focus-visible{outline:2px solid var(--rot);outline-offset:4px}
.originale-grid figcaption{margin-top:.7rem;font-size:.78rem;line-height:1.45}
.originale-link{margin-top:clamp(1.5rem,3vw,2.5rem)}
.originale-link a{text-underline-offset:.3em}
@media(max-width:760px){.originale-grid{grid-template-columns:1fr}.original-thumb{min-height:0}.original-thumb img{height:auto;max-height:none}}
@media (min-width:1600px){
  :root{ --spalte: min(94vw, 118rem); }
}

@media (min-width:2200px){
  html{ font-size:clamp(17px,.78vw,21px); }
  :root{ --spalte: min(94vw, clamp(140rem,84vw,168rem)); }
}

[data-theme="dark"]{
  --paper:#17140f;
  --blatt:#211c15;
  --ink:#ece6da;
  --muted:#9e968a;
  --line:rgba(236,230,218,.18);
  --rot:#e08a7a;
  --blau:#8fb3dd;
  --gruen:#84bd9a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.skip-link{position:absolute;left:-9999px;top:0;z-index:80;padding:.7rem 1rem;background:var(--ink);color:var(--paper)}
.skip-link:focus{left:1rem;top:1rem}

/* Kopfzeile ----------------------------------------------------
   Wortgleich mit der von Pigment, bis auf die Farben: dieselbe Hoehe,
   dieselben drei Spalten, derselbe Grad, dieselben zwei Sprungpunkte.
   Sie bleibt beim Rollen nicht stehen, wie dort auch nicht - stehen
   bleibt nur der Bedienblock, und der weicht beim Lesen aus.
   ---------------------------------------------------------------- */
.project-header{
  position:relative;
  z-index:10;
  min-height:5rem;
  padding:0 var(--rand);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid var(--line);
  font-size:var(--schrift-label);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.project-header a{color:inherit;text-decoration:none}
.project-header a:focus-visible{outline:3px solid var(--rot);outline-offset:5px}
.project-header p{margin:0;color:var(--muted)}
.project-header span:last-of-type{text-align:right}

/* Gemeinsame Bausteine ----------------------------------------- */
.eyebrow{margin:0;font-size:var(--schrift-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ziffer{margin:0 0 .4rem;font-family:"Source Serif 4",Georgia,serif;font-size:clamp(2rem,3.4vw,3.4rem);line-height:1;color:var(--rot)}
h1,h2{font-family:"Source Serif 4",Georgia,serif;font-weight:400;letter-spacing:-.03em;margin:0}
.lead{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.5;max-width:34ch;color:var(--ink)}
figcaption{margin-top:.8rem;font-size:var(--schrift-caption);line-height:1.5;color:var(--muted);max-width:42ch}

/* 00 Hero ------------------------------------------------------ */
.hero{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,4.5rem);
  align-items:center;
  padding:clamp(2.5rem,7vw,6rem) var(--rand) clamp(3rem,8vw,7rem);
}
.hero h1{margin:.6rem 0 1.2rem;font-size:clamp(2.9rem,7.2vw,6.6rem);line-height:.92}
.hero-claim{
  margin:0 0 2rem;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.15rem,1.5vw,1.45rem);
  line-height:1.45;
  max-width:36ch;
}
.role-list{margin:0;display:grid;gap:.75rem}
.role-list div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding-top:.6rem;border-top:1px solid var(--line)}
.role-list dt{font-size:var(--schrift-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.role-list dd{margin:0;font-size:var(--schrift-text);line-height:1.45}

/* Das Blatt: dasselbe Bild, zwei Darstellungen ------------------ */
.hero-bild{margin:0;display:block;justify-self:center;width:100%;min-width:0}
.blatt{
  position:relative;
  background:var(--blatt);
  border:1px solid var(--line);
  aspect-ratio:1163/1353;
}
.blatt img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.blatt-dunkel,.blatt-dunkel-farbe{opacity:0}

/* Im dunklen Thema traegt die vorbereitete dunkle Fassung. Keine
   Filterumkehr: Papier wurde zu Grund, Tinte zu Licht, die Hand
   bleibt sichtbar. */
[data-theme="dark"] .blatt-hell{opacity:0}
[data-theme="dark"] .blatt-dunkel{opacity:1}

/* Die Bedeutungen liegen schon im Bild. Die Interaktion deckt sie
   auf, sie verwandelt nichts. */
.blatt img{transition:opacity .5s ease}
[data-theme="dark"] .blatt:hover .blatt-dunkel-farbe,
[data-theme="dark"] .hero-bild:focus-within .blatt-dunkel-farbe,
[data-theme="dark"] .blatt[data-bedeutung="an"] .blatt-dunkel-farbe{opacity:1}

/* Ohne Zeigegeraet steht die Farbe von sich aus da: nichts darf nur
   ueber ein Schweben verstaendlich sein. */
@media (hover:none){
  [data-theme="dark"] .blatt:not([data-bedeutung="aus"]) .blatt-dunkel-farbe{opacity:1}
}

.bedeutung-schalter{
  display:none;
  width:max-content;
  margin:.8rem 0 0;
  padding:.45rem .8rem;
  font:700 var(--schrift-label)/1 Inter,Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--blatt);
  border:1px solid var(--line);
  border-radius:99px;
  cursor:pointer;
}
[data-theme="dark"] .bedeutung-schalter{display:block}
.bedeutung-schalter:hover{border-color:var(--ink)}
.bedeutung-schalter:focus-visible{outline:2px solid var(--rot);outline-offset:2px}

.hero-bild figcaption{margin-top:.8rem}

/* Kapitel ------------------------------------------------------- */
.kapitel{
  padding:clamp(3rem,8vw,7rem) var(--rand);
  border-top:1px solid var(--line);
}

/* Alles im Kapitel steht in einer Spalte von hoechstens 1540px, mittig.
   Ohne sie zog die Seite auf breiten Schirmen auseinander: die Blaetter
   sassen verstreut, klein und weit voneinander. */
.kapitel > *,
.reflexion > *{
  width:var(--spalte);
  max-width:100%;
  margin-inline:auto;
}
.kapitel-kopf{margin-bottom:clamp(1.8rem,4vw,3.5rem)}
.kapitel-kopf > *{max-width:62rem}
.kapitel h2{margin:.5rem 0 1rem;font-size:clamp(1.9rem,4.4vw,4rem);line-height:1.02}

/* 01 · Zwei Ausgangsbilder, zwei fotografische Proportionen. Das gemeinsame
   Feld setzt eine ruhige Achse, ohne eines der Originalbilder zu beschneiden
   oder seine Perspektive in eine falsche Gleichheit zu zwingen. */
.bildpaar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,3rem);align-items:start;max-width:min(100%,82.5rem)}
.bildpaar figure{margin:0;min-width:0;text-align:center}
.bildpaar-bild{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bildpaar-bild img{width:100%;height:100%;object-fit:contain}
.bildpaar figcaption{margin-inline:auto}

/* 02 · Die Reihe wird zur Erzaehlung, nicht zur Kartenwand. Fuenf
   gleich grosse Bilder halten die Entscheidungen in einer gemeinsamen
   Folge; der Fortschritt liegt in der Verdichtung. */
.reihe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2.2vw,2.4rem)}
.reihe li{grid-column:span 2;min-width:0}
.reihe li:nth-child(4){grid-column:2/span 2}
.reihe li:nth-child(5){grid-column:4/span 2}
.reihe figure{display:flex;flex-direction:column;height:100%;margin:0}
.reihe figcaption{min-height:2.8em}
.reihe figcaption b{display:inline-block;min-width:1.8em;color:var(--rot)}
.werkzeug-coda{
  margin:clamp(4rem,9vw,8rem) auto 0;
  padding-top:clamp(1rem,2vw,1.8rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(12rem,18rem);
  gap:clamp(2rem,8vw,8rem);
  align-items:center;
  border-top:1px solid var(--line);
  max-width:min(100%,82.5rem);
}
.werkzeug-coda-copy h3{margin:.6rem 0 1rem;font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.8rem,3.5vw,3.4rem);font-weight:400;line-height:1.02;letter-spacing:-.03em}
.werkzeug-coda-copy > p:last-child{max-width:34ch;margin:0;font-size:var(--schrift-text);line-height:1.55;color:var(--muted)}
.werkzeug-coda figure{width:100%;margin:0;justify-self:end}
.werkzeug-coda img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;border:1px solid var(--line)}
.werkzeug-coda figcaption{margin-top:.7rem}

/* 03 · der Anker. Hier bekommt die Handzeichnung den meisten Raum
   der ganzen Seite, und sie steht vor jeder Erwaehnung von KI. */
/* Das fertige Blatt steht in der Reihe bei den anderen. Hier wird es nur
   noch gelesen: eine ruhige, mittlere Groesse, kein Sonderauftritt. */
.kapitel--anker figure{margin:0;max-width:min(100%,34rem)}
.kapitel--anker .anker-bild img{border:1px solid var(--line)}

.zeichen{
  margin:clamp(2.5rem,6vw,5rem) auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.4rem 2rem;
}
.zeichen div{padding-top:.7rem;border-top:1px solid var(--line)}
.zeichen dt{font-size:var(--schrift-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.zeichen div:nth-child(1) dt{color:var(--blau)}
.zeichen div:nth-child(2) dt{color:var(--rot)}
.zeichen div:nth-child(3) dt{color:var(--blau)}
.zeichen div:nth-child(4) dt{color:var(--gruen)}
.zeichen dd{margin:.4rem 0 0;font-size:var(--schrift-text);line-height:1.5;color:var(--muted)}



/* 04 · Erweitern. Erst hier wird das Werkzeug als neues Medium genannt.
   Beide Bilder teilen sich eine Hoehe und eine gemeinsame Mittelachse. So
   bleibt die unterschiedliche fotografische Perspektive sichtbar, ohne
   dass sie als zufaellige Verschiebung der Komposition gelesen wird. */
.gegenueber{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,4vw,4rem);align-items:start;max-width:min(100%,82.5rem)}
.gegenueber figure{margin:0;min-width:0}
.vergleich-bild{height:clamp(28rem,68vh,50rem);display:flex;align-items:center;justify-content:center}
.vergleich-bild img{width:auto;height:100%;max-width:100%;object-fit:contain;border:1px solid var(--line)}
.gegenueber figcaption{margin:.9rem auto 0;font-size:var(--schrift-caption);line-height:1.45;letter-spacing:.02em;color:var(--ink);text-align:center;max-width:none}

/* 05 · Reflexion. Am meisten Luft von allen. */
.reflexion{
  padding:clamp(8rem,16vw,15rem) var(--rand) clamp(7rem,12vw,11rem);
  border-top:1px solid var(--line);
  text-align:center;
}
.reflexion h2{margin:.6rem auto 0;font-size:clamp(2.1rem,5.4vw,5rem);line-height:1.02;max-width:16ch}
.reflexion .ziffer{color:var(--muted)}
.reflexion .nachsatz{margin:clamp(2rem,5vw,3.5rem) auto 0;max-width:44ch;font-size:var(--schrift-text);line-height:1.6;color:var(--muted)}
.reflexion .these{
  margin:clamp(3rem,8vw,6rem) auto 0;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--ink);
}

footer{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.2rem var(--rand);
  border-top:1px solid var(--line);
  font-size:var(--schrift-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
footer p{margin:0}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* Desktop hero: the sheet is a tall portrait. Scale it to the available
   first-screen height so its real lower edge is visible without cropping. */
@media (min-width:901px) and (min-height:640px){
  /* The image is 1163:1353. Convert the intended 86svh height budget
     back to its width instead of assigning that budget to width directly. */
  .hero-bild{width:min(100%,calc(74svh - 9.9rem))}
}

/* Schmale Fenster ---------------------------------------------- */
@media (max-width:820px){
  .project-header{grid-template-columns:1fr auto}
  .project-header span:last-of-type{display:none}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:clamp(1.75rem,6vw,2.25rem)}
  /* На телефоне главный лист должен встретить зрителя сразу. В DOM
     текст остаётся первым для последовательного чтения, а визуально
     лист поднимается перед длинным пояснением и метаданными. */
  .hero-bild{order:-1}
  .bildpaar,.gegenueber{grid-template-columns:1fr;gap:1.6rem}
  .vergleich-bild{height:auto}
  .vergleich-bild img{width:100%;height:auto}
  /* Each stage and its caption must remain one unit on a phone or tablet. */
  .reihe{grid-template-columns:1fr;gap:2rem}
  .reihe li,
  .reihe li:nth-child(4),
  .reihe li:nth-child(5){grid-column:auto;padding-top:0}
  .werkzeug-coda{grid-template-columns:1fr;gap:1.5rem}
  .werkzeug-coda figure{width:min(100%,18rem);justify-self:start}
  .tritt-ueber{margin-right:0}
  .role-list div{grid-template-columns:7.5rem 1fr}
}



@media (max-width:560px){
  .project-header{min-height:4.25rem;grid-template-columns:1fr;font-size:var(--schrift-label)}
  /* The project type is repeated immediately below in the hero. Keeping it in
     the narrow header creates a noisy three-line block beside the utilities. */
  .project-header p{display:none}
  .project-header span{display:none}
  .role-list div{grid-template-columns:1fr;gap:.35rem;padding-top:.8rem}
  .reihe{grid-template-columns:1fr;gap:2rem}
  .beleg{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blatt img{transition:none}
}

/* Claude Partner Network: sekundaerer professioneller Kontext.
   Der kuenstlerische Ablauf endet zuerst mit der Reflexion. Der Nachweis
   folgt danach wie eine ruhige Quellen-/Credential-Zeile: Text primaer,
   vollstaendiger Portal-Screenshot nur als kleiner, klickbarer Beleg. */
.partner-kontext{
  width:min(82.5rem,calc(100% - 2.2rem));
  margin:0 auto;
  padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(4rem,8vw,7rem);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(14rem,22rem);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.partner-kontext-copy{min-width:0}
.partner-kontext-copy .eyebrow{margin-bottom:.85rem}
.partner-kontext h3{
  margin:0 0 .85rem;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.55rem,2.2vw,2.2rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.025em;
}
.partner-status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  width:max-content;
  margin:0 0 1rem;
  padding:.32rem .62rem;
  border-radius:999px;
  background:rgba(44,115,70,.08);
  color:var(--muted);
  font-size:clamp(.74rem,.84vw,.84rem);
  line-height:1;
}
.partner-status span{
  width:.38rem;height:.38rem;flex:0 0 .38rem;border-radius:50%;background:var(--gruen);
}
.partner-kurztext{
  margin:0;
  max-width:50ch;
  font-size:clamp(.96rem,1.05vw,1.04rem);
  line-height:1.58;
  color:var(--muted);
}
.partner-beleg{
  width:100%;
  max-width:22rem;
  min-width:0;
  margin:0;
  justify-self:end;
}
.partner-beleg-rahmen{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:.42rem;
  background:#fff;
}
.partner-beleg img{display:block;width:100%;height:auto}
.partner-beleg figcaption{
  margin-top:.55rem;
  max-width:none;
  font-size:clamp(.72rem,.78vw,.8rem);
  line-height:1.4;
  color:var(--muted);
}
[data-theme="dark"] .partner-status{background:rgba(132,189,154,.1)}
@media (max-width:760px){
  .partner-kontext{
    grid-template-columns:1fr;
    gap:1.5rem;
    align-items:start;
    padding-top:2rem;
  }
  .partner-beleg{max-width:min(100%,24rem);justify-self:start}
}
@media (max-width:560px){
  .partner-kontext{width:calc(100% - 2rem);padding-bottom:4.5rem}
  .partner-kurztext{font-size:.96rem}
}

/* Partner-Nachweis: klickbarer dokumentarischer Beleg mit ruhiger Lightbox. */
.partner-beleg-trigger{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:.55rem;
  background:transparent;
  color:inherit;
  text-align:inherit;
  cursor:zoom-in;
}
.partner-beleg-trigger:focus-visible{
  outline:2px solid var(--gruen);
  outline-offset:4px;
}
.partner-beleg-trigger .partner-beleg-rahmen{
  position:relative;
  display:block;
}
.partner-beleg-hinweis{
  position:absolute;
  right:.75rem;
  bottom:.75rem;
  padding:.42rem .68rem;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  background:rgba(20,20,18,.72);
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  font-size:.72rem;
  line-height:1;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(.2rem);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.partner-beleg-trigger:hover .partner-beleg-hinweis,
.partner-beleg-trigger:focus-visible .partner-beleg-hinweis{
  opacity:1;
  transform:none;
}
.partner-beleg-caption-hint{white-space:nowrap}

.partner-lightbox{
  width:min(96vw,92rem);
  max-width:none;
  max-height:94vh;
  margin:auto;
  padding:0;
  border:0;
  border-radius:.7rem;
  background:transparent;
  color:inherit;
  overflow:visible;
}
.partner-lightbox::backdrop{
  background:rgba(16,16,14,.82);
  backdrop-filter:blur(5px);
}
.partner-lightbox-inhalt{
  position:relative;
  padding:clamp(.55rem,1.2vw,1rem);
  border-radius:.7rem;
  background:var(--paper,#f4f0e6);
  box-shadow:0 1.2rem 4rem rgba(0,0,0,.32);
}
.partner-lightbox img{
  display:block;
  width:auto;
  max-width:calc(96vw - 2rem);
  max-height:calc(94vh - 5.25rem);
  margin:0 auto;
  object-fit:contain;
  border:1px solid var(--line);
  background:#fff;
}
.partner-lightbox p{
  margin:.7rem .15rem 0;
  font-size:clamp(.76rem,.9vw,.9rem);
  line-height:1.35;
  color:var(--muted);
}
.partner-lightbox-schliessen{
  position:absolute;
  z-index:2;
  top:-.75rem;
  right:-.75rem;
  width:2.45rem;
  height:2.45rem;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  background:#1f1f1c;
  color:#fff;
  font:300 1.65rem/1 Inter,Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 .35rem 1rem rgba(0,0,0,.25);
}
.partner-lightbox-schliessen:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
body:has(.partner-lightbox[open]){overflow:hidden}

@media (hover:none){
  .partner-beleg-hinweis{display:none}
}
@media (max-width:560px){
  .partner-beleg-caption-hint{display:none}
  .partner-lightbox{width:96vw}
  .partner-lightbox-inhalt{padding:.45rem}
  .partner-lightbox img{max-width:calc(96vw - .9rem);max-height:calc(94vh - 4.5rem)}
  .partner-lightbox-schliessen{top:-.55rem;right:-.4rem}
}