/* Schriften: fonts.css wird im <head> direkt eingebunden (kein @import, lädt so parallel) */

:root{
  --bg:#fbfbf7; --ink:#1a1a1a; --textink:#1a1a1a; --soft:#6f6f69;
  --line:#e4e4dc; --tile:#eeede6;
  --strip:#663300; --strip-on:#3f1f00; --strip-ink:#d2bea6; --strip-gold:#e6d27a; /* Erdbraun der alten Website */
  --serif:"Tinos",Georgia,"Times New Roman",serif;
  --sans:"Arimo","Helvetica Neue",Arial,sans-serif;
  /* Schrift je Bereich (Schrift-Labor setzt diese Werte; zum Einfrieren hier eintragen) */
  --f-head:var(--serif); --w-head:400; --s-head:1;   /* Titel & Überschriften */
  --f-body:var(--serif); --w-body:400; --s-body:1;   /* Fließtext */
  --f-ui:var(--sans);    --w-ui:400;   --s-ui:1;     /* Navigation & Bedienung */
  --f-meta:var(--sans);  --w-meta:400; --s-meta:1;   /* Bildunterschrift & Meta */
  /* Schriftskala (Typo-Audit 8.11., Ivonne): nur diese Größen verwenden.
     Serif: H1 44 · H2 24 · H3 20 · Kartentitel 18 · Fließtext 18 · Untertitel 15 kursiv
     Sans:  Bedienung 14 · Meta/Legende 13 · Label 12 Versalien */
  --t-h1:calc(clamp(30px,4.2vw,44px)*var(--s-head)); --t-h2:calc(24px*var(--s-head)); --t-h3:calc(20px*var(--s-head));
  --t-card:calc(18px*var(--s-head)); --t-sub:calc(15px*var(--s-head)); --t-body:calc(18px*var(--s-body));
  --t-ui:calc(14px*var(--s-ui)); --t-meta:calc(13px*var(--s-meta)); --t-label:calc(12px*var(--s-meta));
  --head-ink:var(--strip);   /* Überschriften im Braun der alten Website (wie der Balken) */
  --r-s:8px; --r-m:12px; --r-l:16px; --pill:999px;
  --wrap:1200px; --text:880px;
  /* Abstandssystem (Ivonne, 8.11.): eine Skala für die ganze Website */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --pad:28px;              /* Seitenrand links/rechts */
  --page-top:var(--sp-7);  /* Abstand Kopf → Seitenbeginn */
  --page-bottom:var(--sp-8);/* Abstand Seitenende → Fuß */
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-weight:var(--w-ui);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
/* Regel: Bilder und Bildflächen nie mit runden Ecken */
img,.thumb,.gfig,.gfig .zoom,.lb-fig img,.hero-figure{border-radius:0!important}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Kopf mit fixer Signatur */
header.site{position:sticky;top:0;z-index:50;background:rgba(251,251,247,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.sig{display:flex;align-items:center;gap:34px}
.sig .mark{width:56px;height:35px;flex:none}
.sig .name{white-space:nowrap;font-family:var(--f-ui);font-weight:var(--w-ui);font-size:calc(15px*var(--s-ui));letter-spacing:.02em;color:var(--ink)}
/* Navigation: durchgehender brauner Balken wie auf der alten Website; Begriffe färben sich bei Berührung */
nav.site{display:flex;align-items:stretch;background:var(--strip);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase}
nav.site a{display:block;padding:4px 15px 3px;color:var(--strip-ink);transition:color .14s}
nav.site a:hover{color:#fff}
nav.site a.active{color:var(--strip-gold)}
.navtoggle{display:none;width:40px;height:40px;margin-right:-8px;border:0;background:none;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.navtoggle span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
header.site.open .navtoggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
header.site.open .navtoggle span:nth-child(2){opacity:0}
header.site.open .navtoggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Startseite / Hero */
.hero{position:relative}
/* Startbild: nie beschnitten, nie höher als 64 % des Bildschirms; Legende genau so breit wie das Bild */
.hero-fig{display:table;margin:30px auto 0}
.hero-fig a{display:block;line-height:0}
.hero-fig img{display:block;width:auto;height:auto;max-width:min(100%,calc(100vw - 2 * var(--pad)));max-height:min(64vh,640px)}
.hero-fig figcaption{display:table-caption;caption-side:bottom;color:var(--soft);font-family:var(--f-meta);font-weight:var(--w-meta);font-size:var(--t-meta);line-height:1.45;padding-top:9px}
.hero-figure{width:100%;background:var(--bg);display:flex;align-items:center;justify-content:center}
.hero-figure img{max-width:100%;max-height:min(72vh,680px);width:auto;height:auto;object-fit:contain;display:block}
.hero-cap{color:var(--soft);font-family:var(--f-meta);font-weight:var(--w-meta);font-size:var(--t-meta);padding:10px 0 0}
.hero-intro{padding:40px 0 10px;max-width:var(--text)}
.hero-intro h1{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h1);
  line-height:1.08;letter-spacing:-.01em;margin:0 0 16px;color:var(--head-ink)}
.hero-intro p{color:var(--textink);font-family:var(--f-body);font-weight:var(--w-body);font-size:var(--t-body);margin:0 0 22px}
.hero-links{display:flex;gap:22px;font-size:var(--t-ui)}
.hero-links a{border-bottom:1px solid var(--line);padding-bottom:2px}
.hero-links a:hover{border-color:var(--ink)}

/* Sprunglink: nur bei Tastaturfokus sichtbar */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--strip);color:#fff;padding:10px 14px;font-family:var(--f-ui);font-size:var(--t-ui);text-decoration:none}
.skip:focus{top:12px;outline:2px solid var(--strip-gold);outline-offset:2px}
main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a.hero-figure{display:flex}
.hero-intro .intro{font-family:var(--f-body);font-weight:var(--w-body);font-size:var(--t-body);line-height:1.65;color:var(--textink)}
.hero-intro .intro p{margin:0 0 1em}
.expo-teaser{border-top:1px solid var(--line);margin:34px 0 70px;padding-top:26px;max-width:var(--text)}
.expo-teaser .eyebrow{font-family:var(--f-meta);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0 0 10px}
.expo-teaser h2{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h2);line-height:1.15;margin:0 0 10px;color:var(--head-ink)}
.expo-teaser .expo-text{font-family:var(--f-body);font-size:var(--t-body);color:var(--textink)}
.expo-teaser .expo-text p{margin:0 0 .6em}
.count-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Works: Kopf + Filter */
.lead{padding:var(--page-top) 0 var(--sp-2)}
.lead h1{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h1);line-height:1.1;margin:0 0 var(--sp-4);letter-spacing:-.01em;color:var(--head-ink)}
.lead p{color:var(--textink);font-family:var(--f-body);font-weight:var(--w-body);font-size:var(--t-body);line-height:1.6;max-width:var(--text);margin:0}
.filters{padding-top:22px}
.facet{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:0 0 10px}
/* Filter: zwei klar getrennte Blöcke, Bezeichnung jeweils darüber. Ab 1000 px nebeneinander (Werkgruppe breit, Medium schmal). */
#filters{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
#filters .facet{display:block;padding:0}
#filters .facet .flabel{width:auto;margin:0 0 var(--sp-2)}
#filters .chips{gap:var(--sp-2) var(--sp-5)}
@media(min-width:1000px){
  #filters{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-7)}
  #filters .facet + .facet{border-left:1px solid var(--line);padding-left:var(--sp-6)}
}
.facet .flabel{font-family:var(--f-meta);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);width:112px;flex:none}
/* Filter: nur Begriffe – grau, bei Berührung braun, gewählt braun und unterstrichen (Gerhard, 7.11.) */
.chips{display:flex;flex-wrap:wrap;gap:6px 22px;flex:1}
.chip{font:inherit;font-family:var(--f-ui);font-size:var(--t-ui);line-height:1.4;padding:2px 0;border:none;border-radius:0;
  background:none;color:var(--soft);cursor:pointer;transition:color .14s;white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px}
/* Trefferflächen mind. 24 px (WCAG 2.5.8), unsichtbar vergrößert, das Layout bleibt gleich */
.chip,.sort button,.reset,.expo-go,.weiter-all,.backlink,footer.site .legal a{position:relative}
.chip::after,.sort button::after,.reset::after,.expo-go::after,.weiter-all::after,.backlink::after,footer.site .legal a::after{content:"";position:absolute;left:-3px;right:-3px;top:-5px;bottom:-5px}
.chip:hover{color:var(--strip)}
.chip.on{color:var(--strip);text-decoration-color:currentColor}
.chip:focus-visible{outline:2px solid var(--strip);outline-offset:3px}
.chip .k{color:inherit;opacity:.6;font-size:var(--t-label);margin-left:4px}
/* Primärlink (braun, mit Pfeil) und Sekundärlink (grau). Beide in der Bedienschrift 14 px. */
.go,.expo-go,.weiter-all{font-family:var(--f-ui);font-size:var(--t-ui);color:var(--strip);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px;transition:text-decoration-color .14s}
.go:hover,.expo-go:hover,.weiter-all:hover{text-decoration-color:currentColor}
.go{display:inline-block;position:relative}
.go::after{content:"";position:absolute;left:-3px;right:-3px;top:-5px;bottom:-5px}
.lead .go{margin-top:var(--sp-4)}
.bar2{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4) var(--sp-6);flex-wrap:wrap;padding-top:var(--sp-6)}
.count-wrap{align-items:baseline;gap:var(--sp-5)}
.count{font-size:var(--t-ui);color:var(--soft)}
.count b{color:var(--strip);font-weight:inherit}
.reset{padding:0;font:inherit;font-family:var(--f-ui);font-size:var(--t-ui);color:var(--soft);border:none;background:none;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;text-decoration-thickness:1.5px}
.reset:hover{color:var(--strip);text-decoration-color:currentColor}
.reset[hidden]{display:none}
.sort{display:flex;gap:var(--sp-5)}
.sort button{white-space:nowrap;font:inherit;font-family:var(--f-ui);font-size:var(--t-ui);line-height:1.4;padding:2px 0;border:none;border-radius:0;background:none;color:var(--soft);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px}
.sort button:hover{color:var(--strip)}
.sort button.on{color:var(--strip);text-decoration-color:currentColor}

/* Raster — unregelmäßiges Masonry ohne Beschnitt (natives Seitenverhältnis) */
.grid{padding:22px 0 90px}
.grouphead{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h2);line-height:1.2;color:var(--head-ink);margin:var(--sp-7) 0 var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.grouphead:first-child{margin-top:0;border-top:none;padding-top:0}
.card{display:flex;flex-direction:column}
/* Raster der Arbeiten: gleiche Felder, Bild unbeschnitten und unten bündig, Titel in einer Linie */
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-7) 26px}
.cells .thumb{aspect-ratio:1/1!important;background:none;border:0;display:flex;align-items:flex-end;justify-content:center}
.cells .thumb img{width:auto;max-width:100%;max-height:100%;border:1px solid var(--line)}
@media(max-width:1080px){.cells{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Schmale Desktops: Balken enger, damit alle Punkte in einer Zeile bleiben */
@media(min-width:761px) and (max-width:1000px){
  nav.site{letter-spacing:.05em}
  nav.site a{padding-left:8px;padding-right:8px}
  .sig{gap:18px}
  .sig .name{font-size:calc(14px*var(--s-ui))}
}
@media(min-width:761px) and (max-width:860px){
  nav.site{letter-spacing:.02em}
  nav.site a{padding-left:6px;padding-right:6px}
  .sig .mark{width:48px;height:30px}
  .sig{gap:12px}
}
@media(min-width:761px) and (max-width:820px){ .sig .name{display:none} } /* Platz für den Balken */
@media(max-width:760px){.cells{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) 16px}}
.thumb{width:100%;background:var(--tile);border:1px solid var(--line);overflow:hidden}
.thumb img{width:100%;height:auto;display:block}
.thumb.empty{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.thumb .ph{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.05em;color:#b3b3a8;text-align:center;padding:0 14px}
.card h3{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-card);line-height:1.25;margin:12px 0 2px;color:var(--textink)}
.card .en{font-family:var(--f-head);font-style:italic;font-size:var(--t-sub);line-height:1.4;color:var(--soft);margin:0 0 6px}
.card .meta{font-family:var(--f-meta);font-weight:var(--w-meta);font-size:var(--t-meta);color:var(--soft);display:flex;flex-wrap:wrap;gap:4px 8px}
.card .meta .yr{color:var(--soft)}
.card:hover h3{color:var(--strip)}

/* Werkseite */
.work{padding-top:var(--page-top);padding-bottom:var(--sp-5)}
.eyebrow,.work .eyebrow{font-family:var(--f-meta);font-weight:var(--w-meta);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0 0 16px}
.work h1,.xp-text h1{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h1);line-height:1.1;letter-spacing:-.01em;margin:0 0 6px;color:var(--head-ink);max-width:28ch}
.work .subtitle{font-family:var(--f-head);font-style:italic;font-size:var(--t-h3);line-height:1.35;color:var(--soft);margin:0 0 8px}
.work .facts{font-family:var(--f-meta);font-weight:var(--w-meta);font-size:var(--t-ui);color:var(--soft);margin:0 0 30px}
.work .essay{font-family:var(--f-body);font-weight:var(--w-body);font-size:var(--t-body);line-height:1.7;color:var(--textink);max-width:var(--text);margin:30px 0}
.work .essay p{margin:0 0 1.1em}
/* Abgesetzter Anhang unter dem Text (z. B. Namensliste bei Provincia Adumbrata) */
.work .appendix{max-width:var(--text);margin:var(--sp-6) 0;padding-top:var(--sp-5);border-top:1px solid var(--line);font-family:var(--f-meta);font-size:var(--t-meta);line-height:1.7;color:var(--soft)}
.work .appendix h2{font-family:var(--f-meta);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin:0 0 var(--sp-2)}
.work .appendix p{margin:0 0 1em}
.gfig{margin:0 auto;width:min(100%,calc(84vh * var(--ar,1.33)),var(--mw,9999px))} /* nie hochskalieren */
.gfig.lead{margin:6px auto 0}
/* Erstes Bild im Querformat: von Kante zu Kante des braunen Balkens (Gerhard, 9.11.), nie hochskaliert */
.gfig.lead.land{width:min(100%,var(--mw,9999px));margin-left:0}
.gfig .zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gfig img{width:100%;height:auto;border:1px solid var(--line);background:var(--tile)}
.gfig figcaption{font-family:var(--f-meta);font-weight:var(--w-meta);font-size:var(--t-meta);color:var(--soft);margin-top:10px;line-height:1.5}
.gallery{display:flex;flex-direction:column;gap:64px;margin:52px 0 20px}
.swipehint{display:none}
/* Downloads */
.docs{border-top:1px solid var(--line);margin-top:48px;padding-top:18px;max-width:var(--text)}
.docs h2,.credits h2{font-family:var(--f-meta);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0 0 var(--sp-2);font-weight:400}
.docs ul{list-style:none;margin:0;padding:0}
.docs li a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)}
.docs li a:hover .dt{text-decoration:underline;text-underline-offset:3px}
.docs .dt{font-family:var(--f-body);font-size:var(--t-body);color:var(--textink)}
.docs .dm{font-family:var(--f-meta);font-size:var(--t-meta);color:var(--soft);white-space:nowrap}
/* Bildbetrachter */
html.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lb[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%}
.lb-fig img{max-width:calc(100vw - 128px);max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;display:block}
.lb-fig figcaption{font-family:var(--f-meta);font-size:var(--t-meta);color:var(--soft);margin-top:12px;max-width:80ch;text-align:center}
.lb button{position:absolute;border:0;background:none;color:var(--ink);cursor:pointer;font-family:var(--f-ui);line-height:1;padding:10px}
.lb-x{top:10px;right:14px;font-size:34px}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);font-size:46px;color:var(--soft)}
.lb-p{left:8px}.lb-n{right:8px}
.lb-p:hover,.lb-n:hover{color:var(--ink)}
.lb-c{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--f-meta);font-size:var(--t-meta);color:var(--soft)}
.credits{border-top:1px solid var(--line);padding-top:18px;margin-top:40px;color:var(--soft);font-size:var(--t-meta);max-width:var(--text);font-family:var(--f-meta);font-weight:var(--w-meta)}
.backlink{display:inline-block;margin:10px 0 0;font-family:var(--f-ui);font-size:var(--t-ui);color:var(--soft);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;text-decoration-thickness:1.5px}
.backlink:hover{color:var(--strip);text-decoration-color:currentColor}

/* Inhaltsseiten */
.page{padding-top:var(--page-top);padding-bottom:var(--page-bottom)} /* nur oben/unten – der seitliche Rand kommt von .wrap */
.page > *{max-width:var(--text)}
.page h1{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h1);line-height:1.1;margin:0 0 var(--sp-6);letter-spacing:-.01em;color:var(--head-ink)}
.page .body{font-family:var(--f-body);font-weight:var(--w-body);font-size:var(--t-body);line-height:1.7;color:var(--textink)}
/* Abschnitte (z. B. im CV): deutlich abgesetzt, mit Linie und Abstand */
.page .body h2{clear:both;font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h2);line-height:1.2;color:var(--head-ink);margin:var(--sp-8) 0 var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.page .body > h2:first-child{margin-top:0}
.page .body h3{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h3);line-height:1.3;margin:var(--sp-6) 0 var(--sp-2)}
.page .body p{margin:0 0 1.05em}
/* Fett im Text: gleiche Größe. Ein Absatz, der nur aus Fettem besteht (Artikeltitel auf Presse), wird zur Zwischenüberschrift H3. */
.page .body strong{font-family:var(--f-head);font-weight:700;color:var(--textink)}
.page .body p > strong:only-child{display:block;font-weight:var(--w-head);font-size:var(--t-h3);line-height:1.3;margin-top:var(--sp-5)}
/* Links im Text wie auf der alten Website: braun, bei Berührung braun hinterlegt */
.page .body a,.work .essay a,.xp-body a{color:var(--strip);text-decoration:underline;text-decoration-color:rgba(102,51,0,.35);text-underline-offset:3px}
.page .body a:hover,.work .essay a:hover,.xp-body a:hover{background:var(--strip);color:#fff;text-decoration:none}

/* Weiterschauen am Seitenende */
.weiter{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;padding-top:var(--sp-6);padding-bottom:var(--sp-7);border-top:1px solid var(--line);margin-top:0}
.weiter-card{display:flex;align-items:flex-end;gap:var(--sp-5)}
.weiter-img{flex:none;width:min(220px,40vw);line-height:0}
.weiter-img img{width:100%;height:auto;border:1px solid var(--line)}
.weiter-text{display:flex;flex-direction:column;gap:var(--sp-1)}
.weiter-eyebrow{font-family:var(--f-meta);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.weiter-title{font-family:var(--f-head);font-weight:var(--w-head);font-size:var(--t-h2);line-height:1.2;color:var(--textink)}
.weiter-sub{font-family:var(--f-head);font-style:italic;font-size:var(--t-sub);color:var(--soft)}
.weiter-card:hover .weiter-title{color:var(--strip)}
/* Bild auf Inhaltsseiten (z. B. Porträt im CV): nie vergrößert */
.page-fig{margin:0 0 var(--sp-6);width:min(100%,var(--mw,9999px))}
.page-fig img{width:100%;height:auto}
.page-fig figcaption{font-family:var(--f-meta);font-size:var(--t-meta);color:var(--soft);margin-top:var(--sp-2)}
@media(min-width:900px){ .page-fig{float:right;width:min(360px,var(--mw,9999px));margin:6px 0 var(--sp-5) var(--sp-6)} }

/* Fuß */
footer.site{border-top:1px solid var(--line);padding:26px 0 60px;color:var(--soft);font-family:var(--f-meta);font-weight:var(--w-meta);font-size:var(--t-meta)}
footer.site .fin{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.site .legal{display:flex;gap:18px}
footer.site .legal a:hover{color:var(--ink)}

@media(max-width:760px){
  :root{--pad:20px;--page-top:var(--sp-6);--page-bottom:var(--sp-7)}
  .facet{padding-bottom:10px}
  .controls{width:100%;justify-content:space-between;flex-wrap:wrap}
  .facet .flabel{width:100%}
  .navtoggle{display:flex}
  header.site .head-in{position:relative}
  nav.site{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:4px var(--pad) 10px;font-size:calc(15px*var(--s-ui));box-shadow:0 12px 24px rgba(0,0,0,.08)}
  header.site.open nav.site{display:flex}
  nav.site a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  nav.site .lang,nav.site .oldsite{border-left:none}
  nav.site .lang{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.4);color:var(--strip-gold);font-size:.85em;letter-spacing:.16em}
  nav.site a:last-child{border-bottom:none}
  .sig{gap:16px}
  .sig .mark{width:48px;height:30px}
  .gfig.lead{width:min(100%,calc(70vh * var(--ar,1.33)),var(--mw,9999px))}
  .gallery{flex-direction:row;align-items:center;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;margin:36px calc(-1 * var(--pad)) 6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .gallery::-webkit-scrollbar{display:none}
  .gallery .gfig{flex:0 0 100%;width:100%;padding:0 var(--pad);scroll-snap-align:center}
  .gallery .gfig .zoom{width:min(100%,calc(58vh * var(--ar,1.33)),var(--mw,9999px));margin:0 auto}
  .gallery .gfig figcaption{max-width:min(100%,calc(58vh * var(--ar,1.33)),var(--mw,9999px));margin-left:auto;margin-right:auto}
  .swipehint{display:block;text-align:center;font-family:var(--f-meta);font-size:var(--t-meta);color:var(--soft);margin:10px 0 0}
  .docs li a{flex-direction:column;gap:2px}
  .lb{padding:48px 10px 40px}
  .weiter-card{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
  .weiter-img{width:min(100%,320px)}
  .lb-fig img{max-width:calc(100vw - 20px);max-height:calc(100vh - 130px)}
  .lb-p,.lb-n{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}