@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("schriften/Archivo-100_900-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("schriften/Archivo-100_900-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("schriften/JetBrainsMono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("schriften/JetBrainsMono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("schriften/JetBrainsMono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("schriften/JetBrainsMono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("schriften/JetBrainsMono-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("schriften/JetBrainsMono-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --bg:#fbfbfb; --bg2:#f1f1f1; --rule:#c4c4c4; --line:#848484; --hair:#a3a3a3;
  --ink:#0d0d0d; --dim:#4d4d4d; --acc:#576e00;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1113; --bg2:#161b1e; --rule:#39434a; --line:#5c666d; --hair:#4b555c;
  --ink:#e6eaec; --dim:#8b969d; --acc:#b6e600;
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0e1113; --bg2:#161b1e; --rule:#39434a; --line:#5c666d; --hair:#4b555c;
  --ink:#e6eaec; --dim:#8b969d; --acc:#b6e600;
  color-scheme:dark;}

/* Ein Ton je Schema, gemessen auf dem jeweiligen Grund */
:root{--on-acc:#b6e600}
:root[data-accent="lime"]{--acc:#576e00; --on-acc:#b6e600}
:root[data-accent="darcula"]{--acc:#a34f09; --on-acc:#cc7832}
:root[data-accent="solarized"]{--acc:#0069b2; --on-acc:#268bd2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-accent="lime"]{--acc:#b6e600}
  :root:not([data-theme="light"])[data-accent="darcula"]{--acc:#cc7832}
  :root:not([data-theme="light"])[data-accent="solarized"]{--acc:#268bd2}
}
:root[data-theme="dark"][data-accent="lime"]{--acc:#b6e600}
:root[data-theme="dark"][data-accent="darcula"]{--acc:#cc7832}
:root[data-theme="dark"][data-accent="solarized"]{--acc:#268bd2}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased}
.wrap{max-width:1080px; margin:0 auto; padding:0 26px}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
a{color:var(--acc); text-underline-offset:3px}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---- Kopfleiste ---- */
.bar{border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(8px)}
.bar .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:6px 12px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px}
.sig{font-family:Archivo,Helvetica,Arial,sans-serif; font-variation-settings:"wdth" 116,"wght" 800;
  font-size:.92rem; text-decoration:none; color:var(--ink); letter-spacing:.005em}
.switches{display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.sw{display:flex; border:1px solid var(--line)}
.sw button{background:none; border:0; color:var(--dim); cursor:pointer;
  font:inherit; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  min-height:27px; padding:0 8px}
.sw button+button{border-left:1px solid var(--line)}
.sw button:hover{color:var(--ink)}
.sw button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}

/* Akzentwahl: ein Kasten, voll in der naechsten Farbe */
.next{width:27px; height:27px; padding:0; border:1px solid var(--ink); cursor:pointer;
  display:block; transition:filter .15s ease; background:var(--acc)}
.next:hover{filter:brightness(1.12)}
@media (max-width:760px){.next{display:none}}

/* ---- Kopf ---- */
header{padding:clamp(40px,8vh,76px) 0 clamp(36px,7vh,64px); border-bottom:1px solid var(--rule)}
.eyebrow{font-size:.78rem; letter-spacing:.17em; text-transform:uppercase; color:var(--acc);
  margin:0 0 22px; line-height:1.8}
h1{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:1.15rem; font-weight:500;
  letter-spacing:.02em; line-height:1.6; margin:0}
.facts{margin:4px 0 0; color:var(--dim); font-size:.86rem; letter-spacing:.02em;
  max-width:none; line-height:1.75}
.nb{white-space:normal}
@media (min-width:380px){.nb{white-space:nowrap}}
/* Die Fakten-Zeile bricht nie um. Damit sie auf schmalen Schirmen trotzdem
   in die Breite passt, schrumpft dort ihre Schrift mit dem Fenster mit. */
.facts .nb{white-space:nowrap}
/* Die laengste Zeile hat 71 Zeichen. Damit sie nie umbricht, faellt die
   Schrift auf schmalen Schirmen mit der Fensterbreite. */
@media (max-width:800px){.facts{font-size:clamp(6px,calc(2.12vw - 1px),.86rem)}}

/* ---- Abschnitte ---- */
section{padding:46px 0; border-bottom:1px solid var(--rule)}
h2{font-size:.75rem; letter-spacing:.17em; text-transform:uppercase; color:var(--dim);
  margin:0 0 18px; font-weight:400}
.claim{margin:0; font-family:Archivo,Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(1.55rem,4.4vw,2.7rem); line-height:1.04; letter-spacing:-.025em;
  max-width:28ch; text-wrap:balance}
.claim .k{color:var(--acc)}
.claim.sekundaer{font-size:clamp(1.25rem,3vw,1.75rem); font-variation-settings:"wdth" 110,"wght" 700}
@media (max-width:600px){.claim br{display:none}
  .claim{max-width:none}}
.say{margin:0; font-size:1.05rem; line-height:1.55; max-width:50ch;
  font-family:Archivo,Helvetica,Arial,sans-serif; font-variation-settings:"wdth" 106,"wght" 500}
.claim+.say{margin-top:22px; font-size:.86rem; font-family:"JetBrains Mono",monospace;
  font-variation-settings:normal; color:var(--dim); line-height:1.8; max-width:72ch}
.say+.say{margin-top:14px; font-size:.86rem; font-family:"JetBrains Mono",monospace;
  font-variation-settings:normal; color:var(--dim); line-height:1.8; max-width:62ch}

/* ---- Namen ---- */
.rows{display:grid; gap:24px}
.rows h3{margin:0 0 3px; font-size:.86rem; font-weight:500; color:var(--acc);
  letter-spacing:.03em; line-height:1.8}
.names{margin:0; padding:0; list-style:none; line-height:1.8}
.names li{display:inline; font-size:.86rem; letter-spacing:.03em; color:var(--dim)}
.names li:not(:last-child)::after{content:", "}

/* ---- Projekte ---- */
.works{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 16px}
@media (max-width:1080px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.works{grid-template-columns:1fr}}
.work{display:flex; flex-direction:column; gap:10px}
.frame{aspect-ratio:16/9; border:1px solid var(--line); background:var(--bg2); overflow:hidden}
.frame img{width:100%; height:100%; object-fit:cover; display:block}
.wc{font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--dim);
  font-variant-numeric:tabular-nums; line-height:1.65}
.wc .ag{color:var(--acc)}
.wn{font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); line-height:1.65}
.wd{font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--dim);
  line-height:1.65}

/* ---- Kontakt ---- */
.acts{display:flex; flex-wrap:wrap; gap:9px; margin-top:4px}
.btn{border:1px solid var(--line); color:var(--ink); text-decoration:none; padding:12px 17px;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; min-height:44px;
  display:inline-flex; align-items:center}
.btn:hover{border-color:var(--acc); color:var(--acc)}
.btn.pri{background:var(--acc); border-color:var(--acc); color:var(--bg)}
.btn.pri:hover{filter:brightness(1.1); color:var(--bg)}
.reach{margin:20px 0 0; color:var(--dim); font-size:.86rem; letter-spacing:.03em; line-height:1.8}
.reach a{color:var(--dim); display:inline-block; padding:5px 0}
.reach b{color:var(--ink); font-weight:500}
footer{padding:26px 0 54px; display:flex; flex-wrap:wrap; gap:10px 26px;
  justify-content:space-between; font-size:.75rem; letter-spacing:.05em; color:var(--dim)}
footer a{color:var(--dim); display:inline-block; padding:5px 2px}

/* ---- Grosser Knopf unter dem Claim ---- */
.oeffnen{display:inline-flex; align-items:baseline; gap:8px 20px; flex-wrap:wrap;
  max-width:100%; margin-top:30px; padding:18px 24px; cursor:pointer;
  border:1px solid var(--acc); background:var(--acc); color:var(--bg);
  font:inherit; text-align:left; transition:filter .15s ease}
.oeffnen:hover{filter:brightness(1.12)}
.oeffnen .gross{font-size:1.02rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase}
.oeffnen .klein{font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; opacity:.82}

/* ---- Pop-up ---- */
dialog.reel{padding:0; border:1px solid #5c666d; background:#0b0d0e; color:#e6eaec;
  max-width:none; max-height:none;
  width:min(1280px, 94vw, calc((100dvh - 160px) * 16 / 9))}
dialog.reel::backdrop{background:rgba(0,0,0,.9)}
/* Solange das Pop-up offen ist, darf nichts dahinter darueber malen */
:root.reel-auf{overflow:hidden}
:root.reel-auf .bar{backdrop-filter:none; background:var(--bg)}
dialog.reel .innen{padding:14px}
.kopfzeile{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:0 2px 11px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:#8b969d}
.kopfzeile b{color:#e6eaec; font-weight:500}
.zu{background:none; border:1px solid #5c666d; color:#e6eaec; cursor:pointer; font:inherit;
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; padding:7px 13px;
  min-height:32px}
.zu:hover{background:#e6eaec; color:#000; border-color:#e6eaec}

.buehne{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; width:100%}
.buehne video{position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:contain; background:#000}
.buehne video:focus-visible{outline:2px solid var(--on-acc); outline-offset:-3px}

/* Faellt der Browser auf stumme Wiedergabe zurueck, bieten wir den Ton an */
.tonan{position:absolute; left:12px; top:12px; z-index:4; cursor:pointer; font:inherit;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px;
  min-height:32px; color:#0b0d0e; background:var(--on-acc); border:1px solid var(--on-acc)}
.tonan:hover{filter:brightness(1.12)}

.fusszeile{display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px;
  flex-wrap:wrap; padding:10px 2px 2px; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8b969d}
/* Kleine oder flache Fenster: das Reel nimmt den ganzen Bildschirm.
   Der Rahmen ist dann durchgehend schwarz, das Bild sitzt mittig darin. */
@media (max-width:600px),(max-height:520px){
  dialog.reel{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    margin:0; border:0}
  dialog.reel .innen{padding:12px; height:100%; box-sizing:border-box;
    display:flex; flex-direction:column}
  .buehne{flex:1 1 auto; min-height:0; aspect-ratio:auto; margin:12px 0}
  .tonan{left:9px; top:9px; padding:7px 11px; font-size:.62rem}
  .fusszeile{font-size:.62rem}
}
@media (max-height:520px){
  dialog.reel .innen{padding:8px}
  .buehne{margin:8px 0}
  .fusszeile{display:none}
}

[lang-en]{display:none}
:root[data-lang="en"] [lang-de]{display:none}
:root[data-lang="en"] [lang-en]{display:revert}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Rechtsseiten ---- */
.recht{padding:46px 0 70px}
.recht h1{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:1.15rem;
  font-weight:500; letter-spacing:.02em; line-height:1.6; margin:0 0 30px}
.recht h2{font-size:.75rem; letter-spacing:.17em; text-transform:uppercase; color:var(--dim);
  margin:34px 0 12px; font-weight:400}
.recht p{margin:0 0 14px; font-size:.86rem; line-height:1.85; max-width:70ch;
  letter-spacing:.02em}
.recht p.dim{color:var(--dim)}
.recht a{color:var(--acc)}
.recht .offen{border-left:2px solid var(--acc); padding:2px 0 2px 14px; color:var(--dim)}
.recht ul{margin:0 0 14px; padding-left:20px; font-size:.86rem; line-height:1.85;
  max-width:70ch}
.zurueck{display:inline-flex; align-items:center; margin-top:34px; padding:12px 17px;
  border:1px solid var(--line); color:var(--ink); text-decoration:none; min-height:44px;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase}
.zurueck:hover{border-color:var(--acc); color:var(--acc)}

/* ---- Kennwortfenster für die Mappe ---- */
dialog.tor{padding:0; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  width:min(420px,92vw); max-width:none}
dialog.tor::backdrop{background:rgba(0,0,0,.72)}
.torInnen{padding:26px}
.torInnen h2{margin:0 0 10px; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:1rem; font-weight:500; letter-spacing:.02em; color:var(--ink);
  text-transform:none}
.torText{margin:0 0 22px; font-size:.82rem; line-height:1.75; color:var(--dim)}
.torLabel{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:0 0 7px}
.torFeld{width:100%; padding:12px 13px; font:inherit; font-size:.9rem;
  letter-spacing:.08em; color:var(--ink); background:var(--bg2);
  border:1px solid var(--line); border-radius:0; min-height:46px}
.torFeld:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.torFehler{margin:10px 0 0; font-size:.78rem; color:var(--str,#a64b08)}
.torAktionen{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px}
.torAktionen .btn{cursor:pointer}
.tor[data-laeuft] .torAktionen .btn{opacity:.55; pointer-events:none}

/* ---- Projektbetrachter, Aufbau wie im NAI-Blattbetrachter ---- */
.werk,.wlink{background:none; border:0; padding:0; margin:0; text-align:left; color:inherit;
  font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:10px; width:100%}
.werk .frame,.wlink .frame{transition:border-color .18s ease}
.werk .frame img,.wlink .frame img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.werk:hover .frame,.werk:focus-visible .frame,.wlink:hover .frame,.wlink:focus-visible .frame{border-color:var(--acc)}
.werk:hover .frame img,.werk:focus-visible .frame img,.wlink:hover .frame img,.wlink:focus-visible .frame img{transform:scale(1.03)}
.werk .wd,.wlink .wd{transition:color .18s ease}
.werk:hover .wd,.werk:focus-visible .wd,.wlink:hover .wd,.wlink:focus-visible .wd{color:var(--acc)}
/* Kachel, die auf eine eigene Seite fuehrt */
.wlink{text-decoration:none; color:inherit}
.raus{color:var(--acc); font-weight:400}
.schloss{color:var(--acc)}

dialog.pv{position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none;
  padding:0; border:0; background:var(--bg); color:var(--ink)}
dialog.pv::backdrop{background:var(--bg)}
.pv-innen{display:flex; flex-direction:column; height:100%}
.pv-bar{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  justify-content:space-between; padding:12px 26px; border-bottom:1px solid var(--rule);
  flex:0 0 auto}
.pv-id h2{font-family:Archivo,Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 110,"wght" 700; font-size:1rem; margin:0; line-height:1.2;
  text-transform:none; letter-spacing:0; color:var(--ink)}
.pv-id p{margin:0; font-size:.8rem; color:var(--dim); letter-spacing:.02em}
.pv-nav{display:flex; gap:8px; align-items:center}
.pv-zahl{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
  margin-right:6px; font-variant-numeric:tabular-nums}
.pv-btn{font:inherit; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--ink); padding:7px 13px;
  cursor:pointer; min-height:32px}
.pv-btn:hover:not(:disabled){border-color:var(--acc); color:var(--acc)}
.pv-btn:disabled{opacity:.35; cursor:default}

.pv-buehne{flex:1 1 auto; min-height:0; display:flex; gap:16px; align-items:center;
  justify-content:safe center; padding:20px; overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth; overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent}
.pv-buehne::-webkit-scrollbar{height:9px}
.pv-buehne::-webkit-scrollbar-thumb{background:var(--rule)}
.pv-buehne figure{margin:0; height:100%; flex:0 0 auto; display:flex; flex-direction:column;
  gap:7px; position:relative}

/* Ladezustand. Die Masse aus projekte.json geben dem Rahmen von Anfang an die
   richtige Form; bis das Bild da ist laeuft ein feiner Strich ueber die Oberkante. */
/* Das noch leere <img> zeigt seine Hintergrundflaeche und haelt so den Platz.
   Darueber laeuft ein Fortschrittsstrich auf einer ruhenden Schiene. */
.pv-buehne figure.laedt::after{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background-color:var(--rule);
  background-image:linear-gradient(90deg,transparent,var(--acc),transparent);
  background-size:45% 100%; background-repeat:no-repeat;
  animation:zieht 1.15s linear infinite}
@keyframes zieht{from{background-position:-45% 0} to{background-position:145% 0}}
@media (prefers-reduced-motion:reduce){
  .pv-buehne figure.laedt::after{animation:none; background-image:none}
}
/* Kachel angeklickt, bevor projekte.json da war */
#works.wartet{cursor:progress}
.pv-buehne img{height:100%; width:auto; min-height:0; object-fit:contain; background:var(--bg2);
  border:1px solid var(--rule); display:block}
.pv-buehne figcaption{font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim); flex:0 0 auto}

.pv-fuss{flex:0 0 auto; border-top:1px solid var(--rule); padding:16px 26px 20px;
  display:grid; grid-template-columns:minmax(0,2.4fr) minmax(0,1fr); gap:14px 44px;
  align-items:start}
.pv-kopf{margin:0 0 8px; font-family:Archivo,Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 108,"wght" 700; font-size:1rem; line-height:1.25;
  color:var(--ink)}
.pv-text{margin:0; font-size:.84rem; line-height:1.75; color:var(--dim); text-wrap:pretty}
.pv-liste{margin:0; display:flex; flex-direction:column; gap:2px; font-size:.72rem}
.pv-liste div{display:flex; gap:14px; justify-content:space-between; align-items:baseline;
  border-bottom:1px dotted var(--rule); padding-bottom:2px}
.pv-liste dt{color:var(--dim); text-transform:uppercase; letter-spacing:.09em; white-space:nowrap}
.pv-liste dd{margin:0; text-align:right; overflow-wrap:anywhere; color:var(--ink)}
@media (max-width:820px){
  .pv-fuss{grid-template-columns:1fr; padding:14px 16px 18px}
  .pv-bar{padding:10px 16px}
  .pv-buehne{padding:12px}
}
/* Auf dem Telefon darf der Text die Bilder nicht verdraengen. Die Buehne
   bekommt einen festen Anteil der Fensterhoehe, der Fuss den Rest und
   scrollt in sich. Vorher nahm der Fuss so viel, wie sein Text brauchte,
   und die Buehne fiel auf null zusammen. */
@media (max-width:700px),(max-height:520px){
  dialog.pv{inset:0 0 auto 0; height:100dvh}
  .pv-buehne{flex:0 0 44dvh}
  .pv-fuss{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  .pv.is-detail .pv-buehne{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .pv-buehne{scroll-behavior:auto}
  .werk .frame img,.wlink .frame img{transition:none}
}

/* Bild angeklickt: Fuß weg, Bild füllt den Schirm, zweiter Klick zoomt */
.pv-buehne img{cursor:zoom-in}
.pv.is-detail .pv-fuss{display:none}
.pv.is-detail .pv-bar{padding:9px 26px}
.pv-buehne.is-single{overflow:hidden; justify-content:center; align-items:center; padding:12px}
.pv-buehne.is-single figure{max-width:100%}
.pv-buehne.is-single img{max-height:100%; max-width:100%; height:auto; width:auto}
.pv-buehne.is-zoom{overflow:auto; justify-content:safe center; align-items:safe center; padding:0}
.pv-buehne.is-zoom::-webkit-scrollbar{width:9px; height:9px}
.pv-buehne.is-zoom figure{height:auto; margin:auto}
.pv-buehne.is-zoom img{height:auto; width:auto; max-width:none; max-height:none; border:0;
  cursor:zoom-out}
.pv-buehne.is-zoom figcaption{display:none}
@media (max-width:820px){.pv.is-detail .pv-bar{padding:9px 16px}}
.pv-hinweis{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  margin-right:8px}
@media (max-width:700px){.pv-hinweis{display:none}}
.pv-buehne figcaption a{color:var(--dim); text-decoration:underline; text-underline-offset:2px}
.pv-buehne figcaption a:hover{color:var(--acc)}
.pv-wege{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.pv-wege .btn{padding:9px 14px; min-height:38px; font-size:.72rem}
.recht code{font-size:.82rem; color:var(--acc); background:var(--bg2); padding:1px 5px}