/* sonnentag medienbüro
   Farben und Schrift angelehnt an das bisherige Erscheinungsbild:
   Violett #564e83, Magenta #e2007a, Serifenschrift, Kleinschreibung. */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-latin-500-italic.woff2") format("woff2"); }

:root {
  --violet: #564e83;
  --violet-soft: #7a73a1;
  --magenta: #e2007a;
  --magenta-dark: #b8005f;
  --ink: #3e375f;
  --line: #e6e3ef;
  --tint: #f7f6fa;
  --bg: #ffffff;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sidebar: 210px;
  --gap: clamp(20px, 4vw, 56px);
  --measure: 40rem;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-y: scroll; }
@supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--violet);
  font-family: var(--serif);
  font-size: clamp(18px, 1.05vw + 13px, 20.5px);
  line-height: 1.3;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }

a { color: var(--violet); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus-visible { color: var(--magenta); }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 400; margin: 0; }
i, em { font-style: italic; }

.hl { color: var(--magenta); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--magenta); color: #fff; padding: 6px 12px; z-index: 100; }
.skip:focus { left: 8px; color: #fff; }

/* ---------- Grundgerüst ---------- */

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 48px) clamp(16px, 4vw, 48px) 32px;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-areas: "header main" "header footer";
  column-gap: var(--gap);
  align-items: start;
}

.site-header { grid-area: header; position: sticky; top: clamp(22px, 4vw, 48px); }
.content { grid-area: main; min-width: 0; padding-bottom: 48px; }
.site-footer { grid-area: footer; }

/* Logo und Menü im Stil der alten Bildnavigation: "sonnentag: text, film, …, kontakt." */
/* "sonnentag:" ist der erste Punkt der Menüliste, dadurch gleiche Zeilenabstände wie alle anderen */
.mainnav .brand { color: var(--magenta); }
.mainnav .nav-brand { margin-bottom: -.12em; } /* optischer Ausgleich: "text" hat keine Oberlängen */
.mainnav .brand:hover { color: var(--magenta-dark); }

.mainnav ul { list-style: none; margin: 0; padding: 0; }
.mainnav li { font-size: 1.55em; line-height: 1.18; }
.mainnav a { color: var(--violet); }
.mainnav a:hover, .mainnav a.is-active { color: var(--magenta); }
.mainnav .sep { color: var(--violet); }
.mainnav a.is-active + .sep { color: var(--magenta); }

.langswitch { margin: 1.6em 0 0; font-size: .85em; }
.langswitch a { color: var(--violet-soft); }
.langswitch a:hover { color: var(--magenta); }

/* Mobiles Menü: Leiste mit Hamburger, Menü gleitet von links herein */
.mobilebar, .nav-close, .nav-backdrop { display: none; }

/* ---------- Inhalt ---------- */

.eyebrow {
  font-size: .82em;
  letter-spacing: .06em;
  color: var(--violet-soft);
  margin: .45em 0 .9em;
}
.eyebrow::before { content: ""; display: inline-block; width: 1.6em; height: 1px; background: var(--magenta); vertical-align: middle; margin-right: .6em; }

.tagline {
  font-size: 1.25em;
  line-height: 1.3;
  color: var(--magenta);
  margin: .2em 0 .7em; /* gleiche Grundlinie wie "sonnentag:" im Menü */
  max-width: 22em;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.lead { font-size: 1.12em; line-height: 1.3; }
.content > p, .content > .lead, .prose p, .content > ul.dash-list { max-width: var(--measure); }

.back { font-size: .85em; margin: 0; }
.back a { color: var(--violet-soft); }
.back a:hover { color: var(--magenta); }

.section { margin-top: clamp(40px, 6vw, 72px); }
.section-title {
  font-size: 1.25em;
  color: var(--violet);
  margin: 1.6em 0 .8em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--line);
}
.section > .section-title:first-child { margin-top: 0; }

a.more { color: var(--violet); white-space: nowrap; }
a.more::before { content: "›"; color: var(--magenta); margin-right: .35em; font-size: 1.05em; }
a.more:hover { color: var(--magenta); }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 1.4em; }

.teaser-links { list-style: none; padding: 0; margin: 1.4em 0 0; }
.teaser-links li { margin: 0; line-height: 1.3; }

/* Startseite einer Sprache */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 255px); gap: clamp(24px, 4vw, 48px); align-items: start; }
.portrait { margin: 0; }
.portrait img { width: 100%; }
.portrait figcaption { font-size: .78em; color: var(--violet-soft); margin-top: .5em; }

/* Liste mit Gedankenstrichen (Leistungen) */
.dash-list { list-style: none; padding: 0; margin: 0 0 1em; columns: 2 18em; column-gap: 2.4em; }
.dash-list li { padding-left: 1.5em; position: relative; margin: 0 0 .1em; break-inside: avoid; }
.dash-list li::before { content: "—"; color: var(--magenta); position: absolute; left: 0; }

/* Linkkarten (Projekte) */
.link-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 16px; }
.link-cards a { display: block; height: 100%; padding: 1.1em 1.2em 1.2em; border: 1px solid var(--line); border-top: 2px solid var(--magenta); background: #fff; transition: background .2s ease, border-color .2s ease; }
.link-cards a:hover { background: var(--tint); }
.lc-title { display: block; font-size: 1.2em; line-height: 1.25; color: var(--violet); }
.lc-title::before { content: "› "; color: var(--magenta); }
.lc-text { display: block; font-size: .85em; color: var(--violet-soft); margin-top: .4em; }

/* Referenzlisten */
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); gap: 0 2.4em; }
.entry { padding: .9em 0 1em; border-top: 1px solid var(--line); font-size: .95em; line-height: 1.35; }
.entry .hl { display: inline; }
.entry a.more { display: inline-block; margin-top: .3em; }

/* Fließtext-Seiten */
.prose { max-width: var(--measure); }
.prose p { hyphens: auto; -webkit-hyphens: auto; }
.prose .source { color: var(--magenta); font-style: italic; margin-top: 1.4em; }
.prose h2 { font-size: 1.15em; color: var(--magenta); margin: 1.6em 0 .4em; }
.legal p { font-size: .95em; }

.float-figure { margin: .4em 0 1.6em; }
.float-figure figcaption { font-size: .78em; color: var(--violet-soft); margin-top: .4em; }
.book-info { display: grid; grid-template-columns: 143px minmax(0, 1fr); gap: 1.2em; align-items: end; margin: .4em 0 1.6em; padding: 1em; background: var(--tint); }
.book-info p { margin: 0; font-size: .9em; }

/* Bücher */
.books { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-wrap: wrap; gap: 28px 34px; align-items: flex-start; }
.book > .zoom, .book-covers { height: 182px; display: flex; align-items: flex-end; }
.book { width: auto; } /* so breit wie das Cover, dadurch überall gleicher Abstand */
.book-wide { width: auto; }
.book-covers { display: flex; gap: 10px; }
.book .zoom { display: flex; align-items: flex-end; }
.book img { box-shadow: 0 1px 2px rgba(62, 55, 95, .12), 0 8px 18px -10px rgba(62, 55, 95, .45); }
.book-title { font-size: .85em; line-height: 1.25; margin: .7em 0 0; color: var(--violet); }
.book a.more { display: block; width: fit-content; line-height: 1.25; }
.book-title .m { color: var(--magenta); }
.book a.more { font-size: .85em; }

/* Presse */
.press-list { list-style: none; padding: 0; margin: 0; }
.press-item { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); padding: 1.6em 0; border-top: 1px solid var(--line); align-items: start; }
.press-item:first-child { border-top: 0; padding-top: 0; }
.press-title { font-size: 1.25em; line-height: 1.25; color: var(--magenta); margin-bottom: .3em; }
.press-meta { font-size: .85em; color: var(--violet-soft); }
.press-media .zoom { display: block; }

/* Team */
.team { display: block; }
.team:has(.portrait) { display: grid; grid-template-columns: minmax(160px, 255px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.people { margin: 0; }
.people > div { padding: 0 0 1.1em; margin-bottom: 1.1em; border-bottom: 1px solid var(--line); }
.people > div:last-child { border-bottom: 0; }
.people dt { color: var(--magenta); font-size: 1.12em; }
.people dd { margin: .15em 0 0; max-width: 34em; }

/* Links */
.linklist { list-style: none; padding: 0; margin: 0; columns: 2 16em; column-gap: 2.4em; }
.linklist li { margin: 0; break-inside: avoid; }
.linklist a::before { content: "›"; color: var(--magenta); margin-right: .35em; font-size: 1.05em; }

/* Kontakt */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6em; max-width: var(--measure); }
.contact address { font-style: normal; font-size: 1.12em; line-height: 1.3; margin-bottom: 1em; }
.contact-lines { display: flex; flex-direction: column; gap: 0; font-size: 1.05em; }
.contact-lines .hl { display: inline-block; width: 1.2em; }
.smallprint { font-size: .82em; line-height: 1.4; padding-top: .4em; }
.smallprint p { margin-bottom: 1.1em; }

/* Bausteine */
.blk { margin: clamp(28px, 4vw, 48px) 0; }
.blk > .section-title:first-child { margin-top: 0; }
.section-title + .blk { margin-top: 0; }
.content p.source { color: var(--magenta); font-style: italic; margin-top: 1.4em; }
.content > h2.section-title + p, .content > h3 + p { margin-top: 0; }
.content > h3 { font-size: 1.1em; color: var(--magenta); margin: 1.4em 0 .3em; }
.content > ul:not([class]), .content > ol { max-width: var(--measure); padding-left: 1.2em; }
.content > blockquote { margin: 1.2em 0; padding-left: 1em; border-left: 2px solid var(--magenta); max-width: var(--measure); font-style: italic; }
.img-block { margin: 1.4em 0 1.8em; }
.img-block img { width: 100%; height: auto; }
.img-block .zoom { display: block; }
.img-small { max-width: 280px; }
.img-medium { max-width: 520px; }
.img-wide { max-width: 100%; }
.img-block figcaption { font-size: .8em; color: var(--violet-soft); margin-top: .45em; }

/* ---------- Galerie ---------- */

.gallery {
  list-style: none; padding: 0; margin: 0;
  columns: 3 210px; column-gap: 14px;
}
.gallery-item { break-inside: avoid; margin: 0 0 14px; }
.gallery-item a {
  display: block; position: relative; overflow: hidden;
  background: var(--tint);
  border-radius: var(--radius);
}
.gallery-item img {
  width: 100%; height: auto;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
.gallery-item a:hover img, .gallery-item a:focus-visible img { transform: scale(1.04); }
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6em .7em .5em;
  font-size: .78em; line-height: 1.25; color: #fff;
  background: linear-gradient(to top, rgba(40, 34, 64, .78), rgba(40, 34, 64, 0));
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.gallery-item a:hover .gallery-cap, .gallery-item a:focus-visible .gallery-cap { opacity: 1; transform: none; }
@media (hover: none) { .gallery-cap { opacity: 1; transform: none; } }

/* ---------- Videos ---------- */

.video-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.video-card { display: block; }
.video-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #2a2540; border-radius: var(--radius); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; opacity: .92; }
.video-card:hover .video-thumb img { transform: scale(1.04); opacity: 1; }
.play {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  transition: transform .2s ease, background .2s ease;
}
.play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--magenta); }
.is-external .play::after { left: 19px; top: 19px; border: 0; width: 14px; height: 14px; border-top: 2px solid var(--magenta); border-right: 2px solid var(--magenta); }
.is-external .play::before { content: ""; position: absolute; left: 17px; top: 26px; width: 18px; height: 2px; background: var(--magenta); transform: rotate(-45deg); }
.video-card:hover .play { transform: scale(1.08); background: #fff; }
.dur { position: absolute; right: 8px; bottom: 8px; font-size: .72em; color: #fff; background: rgba(30, 25, 50, .7); padding: 0 .45em; border-radius: 2px; font-variant-numeric: lining-nums tabular-nums; }
.video-title { display: block; margin-top: .6em; font-size: .88em; line-height: 1.3; color: var(--magenta); }
.video-card:hover .video-title { color: var(--magenta-dark); }
.video-meta { display: block; font-size: .8em; color: var(--violet-soft); }

.news-text { display: block; font-size: .88em; line-height: 1.3; color: var(--violet); margin-top: .2em; }
.video-thumb.no-img { background: linear-gradient(135deg, #f3eff8, #fbe6f1); }
div.news-card .video-title { color: var(--magenta); }
.player { margin: 0 0 1em; max-width: 760px; }
.player video { width: 100%; height: auto; background: #000; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: contain; }
.player figcaption { font-size: .82em; color: var(--violet-soft); margin-top: .5em; }

/* ---------- Lightbox ---------- */

.zoom { cursor: zoom-in; }

.lb {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(22, 18, 36, .97);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: .85em; color: rgba(255, 255, 255, .75); font-variant-numeric: lining-nums; }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 64px; min-height: 0; touch-action: pan-y; }
.lb-stage img, .lb-stage video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transition: opacity .2s ease;
}
.lb-stage video { width: min(100%, 900px); aspect-ratio: 16 / 9; background: #000; }
.lb-stage img.is-loading { opacity: 0; }
.lb-cap { text-align: center; padding: 12px 16px 20px; min-height: 3.2em; font-size: .95em; color: #fff; }
.lb button {
  font: inherit; color: #fff; background: transparent; border: 0; cursor: pointer;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  transition: background .2s ease;
}
.lb button:hover, .lb button:focus-visible { background: rgba(255, 255, 255, .12); }
.lb button svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.lb-prev, .lb-next { position: absolute; top: 50%; margin-top: -24px; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb.is-single .lb-prev, .lb.is-single .lb-next, .lb.is-single .lb-count { display: none; }
body.lb-lock { overflow: hidden; }

/* ---------- Fußzeile ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-top: 1.1em;
  font-size: .82em;
  line-height: 1.5;
  color: var(--violet-soft);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--violet-soft); }
.site-footer a:hover, .site-footer a.is-active { color: var(--magenta); }
.footer-links span { margin: 0; }

/* ---------- Sprachauswahl-Startseite ---------- */

.splash .splash-main {
  min-height: 100vh; min-height: 100svh;
  padding: clamp(28px, 3.2vw, 56px) clamp(16px, 2.7vw, 46px);
}
.splash-top { min-height: 380px; }
.splash-quote-link { display: inline-block; color: inherit; }
.splash-quote { position: relative; display: inline-block; margin: 0; }
.splash-quote p {
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--violet);
  margin: 0;
  white-space: nowrap;
}
/* Größen wie auf der alten Seite: langer Text am kleinsten, zwei Zitate gleich, kurzer Satz am größten */
.q-lang p   { font-size: min(50px, 7vw);  line-height: .88; }
.q-mittel p { font-size: min(70px, 9.6vw); line-height: .86; }
.q-kurz p   { font-size: min(80px, 15vw); line-height: .8; }
.splash-quote em { font-style: normal; color: var(--magenta); }
.splash-quote cite { position: absolute; right: -.9em; bottom: -.05em; font-style: normal; font-weight: 500; font-size: max(11px, .26em); color: var(--violet); letter-spacing: .01em; }
.splash-lang { display: flex; align-items: center; gap: .3em; margin-top: 40px; font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; color: var(--violet); }
.splash-lang a { color: var(--violet); }
.splash-lang a:hover { color: var(--magenta); }
/* Footer klein wie auf den Unterseiten */
.splash-foot { margin-top: 1.5em; font-size: .82em; line-height: 1.5; color: var(--violet-soft); }
.splash-foot p { margin: 0; display: flex; align-items: center; gap: .3em; }
.splash-foot a { color: var(--violet-soft); }
.splash-foot a:hover { color: var(--magenta); }
@media (max-width: 820px) { .splash-top { min-height: 0; } }
.maint .splash-main { display: flex; flex-direction: column; justify-content: center; max-width: 980px; margin: 0 auto; }

/* Einblendung */
@media (prefers-reduced-motion: no-preference) {
  .content > *, .splash-main > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .content > *:nth-child(2) { animation-delay: .04s; }
  .content > *:nth-child(3) { animation-delay: .08s; }
  .content > *:nth-child(4) { animation-delay: .12s; }
  .content > *:nth-child(n+5) { animation-delay: .16s; }
  .splash-main > *:nth-child(3) { animation-delay: .25s; }
  .splash-main > *:nth-child(4) { animation-delay: .4s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Wartungsmodus ---------- */

.login-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em 1.2em;
  min-height: 38px; padding: .45em 1em;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #d1242f; color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.login-bar b { font-weight: 700; }
.lb-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: lbpulse 1.8s ease-in-out infinite; }
@keyframes lbpulse { 50% { opacity: .35; } }
.lb-links { display: inline-flex; gap: 1em; }
.login-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.login-bar a:hover { color: #ffe0e0; }
body:has(.login-bar) { padding-top: 38px; }
body:has(.login-bar) .site-header { top: calc(clamp(22px, 4vw, 48px) + 38px); }

.maint .splash-quote p { font-size: clamp(30px, 5vw, 58px); font-weight: 400; line-height: 1.08; max-width: 15em; white-space: normal; }
.maint-text { max-width: 34em; color: var(--violet); margin: 0 0 1.4em; font-size: 1.05em; }
.maint-text + .maint-text { color: var(--violet-soft); }
.maint-contact { font-size: .9em; color: var(--violet-soft); }

/* ---------- Mobil ---------- */

@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "footer"; }
  .shell { padding-top: 0; }
  .site-header { position: sticky; top: 0; z-index: 40; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)) 1.4em; padding: 0; border-bottom: 1px solid var(--line); background: #fff; }
  .mobilebar { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 clamp(16px, 4vw, 48px) 0 calc(clamp(16px, 4vw, 48px) - 10px); }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; background: var(--violet); border-radius: 1px; }
  .nav-toggle:hover span { background: var(--magenta); }
  .brand-mobile { font-size: 1.35em; line-height: 1; color: var(--magenta); }
  .navpanel {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0;
    width: min(84vw, 340px); overflow-y: auto; overscroll-behavior: contain;
    padding: 64px 28px 32px; background: #fff;
    box-shadow: 0 0 40px rgba(40, 30, 80, .18);
    transform: translateX(-105%); visibility: hidden;
    transition: transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .32s;
  }
  .nav-open .navpanel { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .nav-close { display: flex; position: absolute; top: 10px; left: 14px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; }
  .nav-close svg { width: 22px; height: 22px; fill: none; stroke: var(--violet); stroke-width: 1.8; stroke-linecap: round; }
  .nav-close:hover svg { stroke: var(--magenta); }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(40, 30, 80, .28); opacity: 0; transition: opacity .32s ease; }
  .nav-open .nav-backdrop { opacity: 1; }
  .nav-backdrop[hidden] { display: none !important; }
  .nav-lock { overflow: hidden; }
  .navpanel .mainnav li { font-size: 1.55em; line-height: 1.25; }
  .navpanel:focus { outline: none; }
  .brand-mobile .crumb { color: var(--magenta); }
  .langswitch { margin-top: 1.4em; }
  .intro, .team, .contact { grid-template-columns: minmax(0, 1fr); }
  .intro .portrait, .team .portrait { max-width: 220px; }
  .press-item { grid-template-columns: 110px minmax(0, 1fr); }
  .lb-stage { padding: 0 8px; }
  .lb-prev, .lb-next { top: auto; bottom: -56px; margin: 0; }
  .lb-cap { padding-bottom: 72px; }
}

@media (max-width: 480px) {
  .gallery { columns: 2 140px; column-gap: 10px; }
  .gallery-item { margin-bottom: 10px; }
  .books { gap: 22px 20px; }
  .book { width: calc(50% - 10px); }
  .book-wide { width: 100%; }
  .book-covers .zoom { width: calc(50% - 5px); }
  .book-info { grid-template-columns: 100px minmax(0, 1fr); }
  .press-item { grid-template-columns: minmax(0, 1fr); }
  .press-media { max-width: 220px; }
}

@media print {
  .site-header nav, .langswitch, .skip, .lb { display: none !important; }
  .shell { display: block; }
}