@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}

/* ─────────────────────────────────────────────────────────────
   Testimonien einer nahen Zukunft.

   Die Ausstellung macht aus einem Haus eine Stadt: Strasse, Fabrik,
   Büro, Spielplatz. Die Seite übernimmt das als Farbthema, nicht als
   Zitat — Papier für die Dokumentation, ein dunkles Startbild und eine
   navigierbare Route. Die Fotografie bleibt vollständig und unverändert;
   ihre kurze digitale Auflösung entsteht nur im Browser.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:#f3efe6;
  --blatt:#fffdf8;
  --ink:#1c1912;
  --muted:#6d675d;
  --line:rgba(28,25,18,.16);
  --akzent-rosa:#a6456d;
  --akzent-blau:#2f6bb0;
  --akzent-flieder:#6a5296;
  --rand:clamp(1.1rem,5vw,6rem);
  --spalte:min(calc(100% - 2 * var(--rand)),92rem);
  --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);
}

@media (min-width:2200px){
  html:root{font-size:clamp(21px,.65vw,48px)}
}

[data-theme="dark"]{
  --paper:#161310;
  --blatt:#201b16;
  --ink:#ece6da;
  --muted:#a29a8c;
  --line:rgba(236,230,218,.18);
  --akzent-rosa:#e08fae;
  --akzent-blau:#8fb3dd;
  --akzent-flieder:#b6a2dd;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  overflow-x:clip;
  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 ------------------------------------------------------- */
#caofei-header{position:sticky;top:0;z-index:70;background:var(--paper)}
.project-header{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  padding:0 var(--rand);
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  font-size:.85rem;
}
.project-header a{text-decoration:none;font-weight:700}
.project-header p{margin:0;text-align:center;color:var(--muted)}
.project-header span{font-weight:700;text-align:right}

@media (max-width:820px){
  .project-header{grid-template-columns:1fr auto}
  .project-header p{display:none}
}

@media (max-width:560px){
  .project-header{grid-template-columns:1fr}
  .project-header span{display:none}
}

/* ── Layout-Grundmass ──────────────────────────────────────────── */
main{display:block}
.kapitel,.reflexion,.fakten{
  width:var(--spalte);
  margin:0 auto;
  padding:clamp(4rem,9vw,8rem) 0;
}
.kapitel-kopf{max-width:44rem;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.ziffer{
  margin:0 0 .4rem;
  font-family:Inter,Arial,sans-serif;
  font-size:var(--schrift-label);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
}
.eyebrow{
  margin:0 0 .8rem;
  font-family:Inter,Arial,sans-serif;
  font-size:var(--schrift-label);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--akzent-flieder);
}
.kapitel h2{
  margin:0 0 1rem;
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.08;
}
.lead{
  margin:0;
  max-width:38rem;
  font-size:var(--schrift-text);
  color:var(--muted);
  line-height:1.55;
}

/* ── Held ───────────────────────────────────────────────────────
   Der Eintrittsraum ist die Bühne: Titelkarte, gebaute Route und die
   Stoffbahnen der Ausstellung stehen als eine eigene Fotografie zusammen. */
main .hero{
  position:relative;
  overflow:clip;
  padding:0;
  background:radial-gradient(ellipse at 78% 25%,#293b49 0,transparent 56%),#171a25;
  color:#f3efe6;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(#afcde012 1px,transparent 1px),linear-gradient(90deg,#afcde012 1px,transparent 1px);
  background-size:4rem 4rem;
}
.hero-stage{
  position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  align-items:center;gap:clamp(2rem,5vw,5rem);
  width:min(calc(100% - 2 * var(--rand)),92rem);margin-inline:auto;
  padding-block:clamp(2rem,4vw,4rem);
}
.hero-view{margin:0;min-width:0;width:min(100%,44rem,calc(48svh - 1rem));justify-self:end}
.view-topline{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.8rem;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#c4d5e3}
.hero-frame{position:relative;isolation:isolate;aspect-ratio:3/4;background:#273440;box-shadow:1rem 1rem 0 #0c10182b;transform-origin:center;will-change:auto}
.hero-buehne{
  width:100%;
  height:100%;
  object-fit:contain;
}
.hero-pixels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.frame-corner{position:absolute;width:1.25rem;height:1.25rem;pointer-events:none;border:3px solid #b9e4f5}
.corner-a{top:-.4rem;left:-.4rem;border-right:0;border-bottom:0}
.corner-b{bottom:-.4rem;right:-.4rem;border-left:0;border-top:0}
.hero-view figcaption{font-size:.88rem;line-height:1.45;color:#c4d5e3;margin-top:1rem;max-width:34rem}
.motion-tools{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.55rem}
.motion-tools[hidden],.hero-pixels[hidden]{display:none}
.motion-tools button{min-height:44px;border:0;border-bottom:1px solid #849aab;background:transparent;color:#e7eff5;font:inherit;font-size:.8rem;cursor:pointer;padding:.4rem 0}
.motion-tools button:hover{color:#b9e4f5;border-color:currentColor}
.motion-tools button:disabled{cursor:default;opacity:.65}
.motion-tools button[aria-pressed="true"]{color:#b9e4f5}
.hero a:focus-visible,.motion-tools button:focus-visible{outline:3px solid #b9e4f5;outline-offset:6px}
.hero-copy{
  position:relative;
  min-width:0;
}
.hero-copy .eyebrow{color:#b9d9ea;line-height:1.6;font-size:.78rem}
.entry-mark{display:inline-block;width:.6rem;height:.6rem;background:#b9e4f5;margin-right:.6rem;box-shadow:.2rem .2rem 0 #b9e4f538}
.hero-copy h1{
  margin:1.4rem 0 1.5rem;
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.5rem,4.8vw,5.2rem);
  letter-spacing:-.035em;
  line-height:1.02;
}
.hero-claim{
  margin:0;
  max-width:34rem;
  font-size:clamp(1.02rem,1.25vw,1.16rem);
  line-height:1.5;
  color:#eee7f0;
}
.route-start{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;width:fit-content;min-height:3.4rem;margin-block:1.8rem 2rem;padding:.85rem 1.1rem;background:#b9e4f5;color:#152536;text-decoration:none;font-weight:700;border:1px solid #b9e4f5;box-shadow:.3rem .3rem 0 #658599;transition:box-shadow .2s,transform .2s}
.route-start:hover{transform:translate(-2px,-2px);box-shadow:.5rem .5rem 0 #658599}
.route-start:active{transform:translate(2px,2px);box-shadow:.1rem .1rem 0 #658599}
.route-start span{font-size:1.5em;line-height:1}
.role-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.5rem;
  max-width:52rem;
  margin:0;
  padding:1.4rem 0 0;
  border-top:1px solid rgba(255,255,255,.22);
}
.role-list dt{
  margin:0 0 .2rem;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#c9bcd4;
}
.role-list dd{margin:0;font-size:.88rem;line-height:1.4;color:#f6f2f8}

@media (max-width:760px){
  .hero-stage{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding-block:1.5rem 3rem}
  .hero-view{grid-row:1;width:min(100%,27rem);justify-self:center}
  .hero-copy h1{font-size:clamp(2.6rem,8.8vw,4.2rem)}
  .hero-claim{font-size:1.05rem}
}

/* Native navigation first; active station is an enhancement, not a gate. */
.route-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin-bottom:clamp(3rem,6vw,5rem)}
.route-map a{display:flex;align-items:center;gap:.8rem;min-height:4.2rem;padding:.8rem 1rem;text-decoration:none;font-size:1rem;border-right:1px solid var(--line);transition:background .2s,color .2s}
.route-map a:last-child{border-right:0}
.route-map a span:first-child{font-size:.78rem;font-weight:700;color:var(--akzent-blau)}
.route-map a span:last-child{margin-left:auto}
.route-map a:hover,.route-map a[aria-current="location"]{background:var(--ink);color:var(--paper)}
.route-map a:hover span:first-child,.route-map a[aria-current="location"] span:first-child{color:inherit}
.route-map a:focus-visible{outline:3px solid var(--akzent-blau);outline-offset:-3px}
.raeume > li{scroll-margin-top:6rem}
.raeume h3{grid-row:1}
.raeume p{grid-row:2}
@media(max-width:760px){
  .route-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route-map a:nth-child(2){border-right:0}
  .route-map a:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .route-start,.route-map a{transition:none}
  .route-start:hover,.route-start:active{transform:none}
}
html.motion-reduced{scroll-behavior:auto}
html.motion-reduced .route-start{transition:none;transform:none}

/* ── Bildpaar (01, 03) ─────────────────────────────────────────── */
.bildpaar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.2rem,3vw,2.4rem);
}
.bildpaar figure{margin:0}
.bildpaar-bild{
  overflow:hidden;
  border-radius:.4rem;
  background:var(--blatt);
}
.bildpaar-bild img{width:100%;height:100%;object-fit:cover}
.bildpaar figcaption{
  margin-top:.6rem;
  font-size:var(--schrift-caption);
  color:var(--muted);
}

@media (max-width:760px){
  .bildpaar{grid-template-columns:1fr}
}

/* Studio Gegenwart ist kein weiteres Bildpaar. Die grosse physische
   Szene hält die Fläche; Treppe, Avatar und Arcade liegen wie drei
   unterschiedliche Zugänge am Rand der Bühne. */
.studio-montage{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:minmax(14rem,1fr) minmax(11rem,.72fr);
  gap:clamp(1rem,2.2vw,1.8rem);
  align-items:end;
}
.studio-montage figure{margin:0}
.studio-montage .bildpaar-bild{height:100%}
.studio-montage .bildpaar-bild img{height:100%;object-fit:cover}
.studio-montage figcaption{margin-top:.6rem;font-size:var(--schrift-caption);color:var(--muted)}
.studio-octopus{grid-column:1 / span 8;grid-row:1 / span 2;align-self:stretch}
.studio-octopus .bildpaar-bild{height:calc(100% - 2rem)}
.studio-stair{grid-column:9 / span 4;grid-row:1;align-self:start}
.studio-stair .bildpaar-bild{aspect-ratio:3/4}
.studio-avatar{grid-column:9 / span 4;grid-row:2;align-self:end}
.studio-avatar .bildpaar-bild{aspect-ratio:4/3}
.studio-arcade{grid-column:6 / span 3;grid-row:2;z-index:2;margin-bottom:1.7rem;filter:drop-shadow(0 .8rem 1.1rem rgba(0,0,0,.22))}
.studio-arcade .bildpaar-bild{aspect-ratio:3/4;border:.28rem solid var(--paper)}
[data-theme="dark"] .studio-arcade .bildpaar-bild{border-color:var(--blatt)}

@media (max-width:760px){
  .studio-montage{display:flex;flex-direction:column;gap:1.7rem}
  .studio-montage figure{width:100%}
  .studio-octopus{order:-1}
  .studio-octopus .bildpaar-bild,.studio-stair .bildpaar-bild,.studio-avatar .bildpaar-bild,.studio-arcade .bildpaar-bild{height:auto;aspect-ratio:4/3}
  .studio-arcade{width:68%;margin:0 auto;filter:none}
}

/* ── Vier Räume (02) ───────────────────────────────────────────── */
.raeume{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(4.5rem,9vw,8rem);
  list-style:none;
  margin:0;
  padding:0;
}
.raeume li{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1.2rem,3vw,3.2rem);
  align-items:center;
  margin:0;
}

/* Two complete photographs: the detail sits below, never on top of text. */
.raum-collage{
  position:relative;
  grid-column:1 / span 8;
  grid-row:1 / span 2;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem;
}
.raum-collage img{
  border-radius:.35rem;
  object-fit:contain;
  width:100%;
  height:auto;
  box-shadow:0 .8rem 1.8rem rgba(0,0,0,.22);
}
.raum-collage .haupt{
  grid-column:1 / -1;
}
.raum-collage .neben{
  grid-column:8 / -1;
}
[data-theme="dark"] .raum-collage .neben{border-color:var(--blatt)}

.raeume h3{
  grid-column:10 / -1;
  align-self:end;
  margin:0 0 .6rem;
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.35rem,2.1vw,1.8rem);
  line-height:1.15;
}
.raeume h3 b{
  display:block;
  margin-bottom:.6rem;
  font-family:Inter,Arial,sans-serif;
  font-weight:700;
  font-size:.82rem;
  color:var(--akzent-flieder);
}
.raeume p{
  grid-column:10 / -1;
  align-self:start;
  margin:0;
  font-size:var(--schrift-text);
  color:var(--muted);
  line-height:1.5;
}

/* Die vier Stationen bleiben ein Weg, bekommen aber keine vier
   identischen Schablonen. Der Wechsel der zweiten Aufnahme markiert
   jeweils einen neuen Raum. */
.raeume li:nth-child(even) .neben{grid-column:1 / span 5}

/* Die zweite und vierte Station wechseln die Seite. So wird aus dem
   Bildmaterial ein Weg durch die Ausstellung statt einer Produktkarten-Grid. */
.raeume li:nth-child(even) .raum-collage{grid-column:5 / -1}
.raeume li:nth-child(even) h3,
.raeume li:nth-child(even) p{grid-column:1 / span 3}

@media (max-width:760px){
  .raeume{grid-template-columns:1fr}
  .raeume li{grid-template-columns:1fr;gap:0}
  .raeume .raum-collage,
  .raeume li:nth-child(even) .raum-collage{grid-column:1;grid-row:auto}
  .raeume h3,
  .raeume p,
  .raeume li:nth-child(even) h3,
  .raeume li:nth-child(even) p{grid-column:1;grid-row:auto}
  .raeume h3{margin:1rem 0 .35rem;font-size:1.35rem}
  .raeume .raum-collage{gap:.75rem}
}

/* ── Kontaktbogen (03) ────────────────────────────────────────────
   Cao Feis eigene „Utopia Daily“ ist selbst eine Wand voller
   unregelmässig geklebter Seiten. Das Raster übernimmt genau dieses
   Prinzip: kein sauberes Bildpaar, sondern viele kleine Abzüge, leicht
   gegeneinander verdreht, ohne einzelne Bildunterschrift. */
.kontakt-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);margin-bottom:clamp(2rem,4vw,3rem)}
.kontakt-intro .kapitel-kopf{margin-bottom:0}
.spotlight{margin:0;width:100%;max-width:32rem;justify-self:end}
.spotlight-bild{overflow:hidden;border-radius:.4rem;background:var(--blatt)}
.spotlight-bild img{width:100%;height:auto;object-fit:cover}
.spotlight figcaption{margin-top:.7rem;font-size:var(--schrift-caption);color:var(--muted)}
@media(max-width:760px){.kontakt-intro{grid-template-columns:1fr}.spotlight{max-width:24rem;justify-self:start}}

.kontaktbogen-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));
  gap:clamp(.8rem,1.6vw,1.3rem);
  list-style:none;
  margin:0;
  padding:0;
}
.kontaktbogen-grid li{margin:0}
.kontaktbogen-grid img{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:.3rem;
  box-shadow:0 .5rem 1.1rem rgba(0,0,0,.2);
  transition:transform .3s ease;
}
.kontaktbogen-grid li:nth-child(1) img{transform:rotate(-1.1deg)}
.kontaktbogen-grid li:nth-child(5) img{transform:rotate(.8deg)}
.kontaktbogen-grid li:nth-child(9) img{transform:rotate(-.65deg)}
.kontaktbogen-grid li:nth-child(13) img{transform:rotate(1deg)}
.kontaktbogen-grid li:nth-child(17) img{transform:rotate(-.9deg)}
.kontaktbogen-grid li:nth-child(19) img{transform:rotate(.7deg)}
.kontaktbogen-grid img:hover,
.kontaktbogen-grid img:focus-visible{transform:rotate(0deg) scale(1.04);z-index:2;position:relative}

@media (max-width:620px){
  .kontaktbogen-grid{grid-template-columns:repeat(3,1fr)}
  /* Der letzte, horizontale Fund beendet den Bogen als bewusste Koda —
     kein zufällig leerer Rest einer Dreierzeile. */
  .kontaktbogen-grid li:last-child{grid-column:1 / -1}
  .kontaktbogen-grid li:last-child img{aspect-ratio:4/3}
}

@media (prefers-reduced-motion:reduce){
  .kontaktbogen-grid img{transition:none}
}

/* ── Zitat (RMB City) ─────────────────────────────────────────── */
.strassenzitat{
  margin:clamp(2.4rem,5vw,3.6rem) 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  line-height:1.35;
}
.strassenzitat cite{
  display:block;
  margin-top:.6rem;
  font-family:Inter,Arial,sans-serif;
  font-style:normal;
  font-size:var(--schrift-label);
  color:var(--muted);
}

/* ── Reflexion (05) ─────────────────────────────────────────────
   Die Lesart ist kein weiterer Absatz nach den Bildern, sondern die zweite
   Bühne der Seite: zuerst die beobachtete Stadt, dann die eigene Stimme. */
.reflexion{
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(5rem,11vw,10rem) max(var(--rand),calc((100vw - var(--spalte)) / 2));
  background:
    linear-gradient(90deg,rgba(166,69,109,.16),transparent 36%),
    repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.07) calc(25% - 1px),rgba(255,255,255,.07) 25%),
    #211827;
  color:#f5eff7;
}
.reflexion .ziffer{color:#d6c3df}
.reflexion .eyebrow{color:#e6a6c1}
.reflexion h2{
  max-width:14ch;
  overflow-wrap:anywhere;
  hyphens:auto;
  margin:0 0 clamp(1.6rem,3vw,2.6rem);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(2.5rem,5.5vw,5rem);
  font-weight:400;
  line-height:1.02;
}
.reflexion p{
  max-width:43rem;
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  line-height:1.6;
  color:#e7deeb;
}
.reflexion .these{
  max-width:36rem;
  margin-top:clamp(2.3rem,5vw,4rem);
  padding-top:1.2rem;
  border-top:1px solid rgba(245,239,247,.32);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.45rem,2.8vw,2.1rem);
  font-style:italic;
  color:#fff9ff;
}

.reflexion .project-bridge{
  max-width:42rem;
  margin-top:1.35rem;
  font-size:clamp(.9rem,1.25vw,1rem);
  line-height:1.55;
  color:#cfc2d5;
}
.reflexion .project-bridge a{
  color:#f5eff7;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}

/* ── Fakten (05) ──────────────────────────────────────────────── */
.fakten dl{
  display:grid;
  grid-template-columns:12rem 1fr;
  gap:.7rem 1.4rem;
  margin:0;
  max-width:42rem;
  font-size:var(--schrift-text);
}
.fakten dt{margin:0;color:var(--muted)}
.fakten dd{margin:0}
.fakten .quelle{
  margin:2rem 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-size:var(--schrift-caption);
  color:var(--muted);
  max-width:42rem;
}
.fakten .quelle a{text-decoration:underline}

@media (max-width:560px){
  .fakten dl{grid-template-columns:1fr}
  .fakten dt{font-weight:700;color:var(--ink)}
}

/* ── Fusszeile ────────────────────────────────────────────────── */
footer{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center;
  justify-content:space-between;
  width:var(--spalte);
  margin:0 auto;
  padding:2rem 0 clamp(3rem,6vw,5rem);
  border-top:1px solid var(--line);
  font-size:var(--schrift-caption);
  color:var(--muted);
}
footer a{text-decoration:underline}

/* The contact sheet is an index, not the largest available image. */
.gallery-hint{font-size:var(--schrift-caption);line-height:1.5;color:var(--muted);margin:0 0 1.6rem;max-width:42rem}
.kontaktbogen-grid li{position:relative}
.kontaktbogen-grid li:focus-within{z-index:10}
.photo-link{display:block;position:relative;cursor:zoom-in;transform-origin:center;transition:transform .22s ease;outline-offset:.35rem}
.photo-link::after{content:"↗";position:absolute;right:.4rem;bottom:.4rem;display:grid;place-items:center;width:1.8rem;height:1.8rem;background:#171a25;color:#fff;font-size:1rem;border:1px solid #c8d4e2}
.photo-link:focus-visible{outline:3px solid var(--akzent-blau);transform:scale(1.1)}
@media(hover:hover) and (pointer:fine){
 .kontaktbogen-grid li:hover{z-index:10}
 .photo-link:hover{transform:scale(1.18)}
 .photo-link:hover img{object-fit:contain;background:var(--blatt)}
}
html.viewer-open,body.viewer-open{overflow:hidden}
.bildansicht{box-sizing:border-box;width:min(96vw,96rem);height:94svh;max-width:none;max-height:none;padding:clamp(.8rem,2vw,1.6rem);border:1px solid #6c7a89;background:#141821;color:#f3efe6;overflow:hidden}
.bildansicht::backdrop{background:#080b12ed}
.bildansicht[open]{display:flex;flex-direction:column;gap:1rem}
.viewer-tools{display:flex;align-items:center;gap:.6rem;flex:none}
.viewer-count{margin:0 auto 0 0;font-size:1rem;font-variant-numeric:tabular-nums}
.viewer-tools button{min-width:44px;min-height:44px;padding:.55rem .8rem;font:inherit;font-size:1rem;color:#f3efe6;background:#253141;border:1px solid #8197ad;cursor:pointer}
.viewer-tools button:hover{background:#3e546b}
.viewer-tools button:focus-visible{outline:3px solid #b9e4f5;outline-offset:3px}
.bildansicht figure{margin:0;min-height:0;flex:1;display:flex;flex-direction:column;gap:1rem}
.bildansicht figure img{display:block;min-height:0;flex:1;width:100%;height:0;object-fit:contain}
.bildansicht figure img[hidden]{visibility:hidden;display:block}
.bildansicht figcaption{flex:none;max-width:65ch;font-size:1rem;line-height:1.45;color:#dae2eb;max-height:22svh;overflow:auto}
.viewer-status{margin:0;font-size:1rem}
.viewer-status:empty{display:none}
@media(max-width:560px){
 .bildansicht{width:100%;height:100svh;border:0;margin:0;padding:1rem}
 .viewer-tools{gap:.4rem}
 .viewer-tools button{padding:.5rem}
 .bildansicht figcaption{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){.photo-link{transition:none}}
html.motion-reduced .photo-link{transition:none}