/* valentingongoll.de in the look of the Client Portal: one grey ground, flat and square, Diatype Bold headings, Diatype Semi Mono text.
   Only the portal text styles are used (h1, h2, h3, text) and no separator lines. Black is the ink, Electric marks where you are.
   Desktop: the menu stands in the left half of the first quarter (0 to 12.5 %), the content in three columns of a quarter each. */
@font-face { font-family: "Diatype Bold"; src: url("/fonts/ABCDiatypeEdu-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Diatype Semi Mono"; src: url("/fonts/ABCDiatypeSemiMonoEdu-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --electric: #0055FF; --electric-dark: #003399; --void: #1A1A1E;
  --grey: #F0F0F2;   /* the one grey of the whole page (the grey of the Cargo page): ground, left column, and the light on blue */
  --mono: "Diatype Semi Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --head: "Diatype Bold", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --pad-x: clamp(1.5rem, 4.5vw, 6rem);   /* sides of the content */
  --pad-y: clamp(1.75rem, 4vw, 5rem);    /* top and bottom of the content and of the columns */
  --c1: 25vw; --c2: 25vw;   /* the menu column and the projects column are one quarter of the screen each, like the three columns of the content */
  --gx: clamp(1.25rem, 2vw, 2.5rem);   /* inner side space of a content column */
  --gap: 1rem;   /* the space between pictures: tight, the same sideways and downwards everywhere; the small caption fits into it */
  --row: clamp(9rem, 14vw, 16rem);   /* the height a row of pictures aims for */
  --aside-pad: clamp(1.25rem, 2vw, 2rem);
  /* ONE size for everything in Diatype Bold: the page title, headings, menu words and the list of services. It grows with the screen up to 56 px; at 3.6 vw the longest menu word
     ("Leistungen") still fits into the menu column. */
  --d: clamp(1.75rem, 4.4vw, 3.5rem);
  --h1: var(--d); --h2: var(--d); --h3: var(--d);
  /* The top line of the page: the height at which the capital letters of the first menu word ("Arbeiten") start: top margin, logo (2.75rem), gap (2rem), the menu line's own
     top padding (0.25rem), then the distance from the top of a Diatype Bold line (line height 1.03) to its capitals (0.165 em). The first text on the right starts its capitals
     at this height too (the same 0.165 em for every Diatype text, --cap-mono for the mono text). */
  --lead: calc(var(--pad-y) + 5rem + 0.165 * var(--d));
  --body: 0.95rem;   /* body copy: Diatype Semi Mono Medium 500, mono 0.5, letter-spacing 0, line-height 1.25, slant 0 */
  --mark: 0.75rem;   /* caption: same face, line-height 1.2 */
  --cap-mono: 0.2rem;   /* distance from the top of a mono line box (1.25) to its capitals, for the top-line alignment */
  /* TEST (27.10.2026): round corners everywhere instead of flat and square (see the Dinamo reference) — pill buttons, rounded pictures and boxes.
     One switch: set --round to 0 to go back to the square look in one step without touching every rule below. */
  --round: 1;
  --r-pic: calc(var(--round) * 1.25rem);   /* pictures, the lightbox image */
  --r-box: calc(var(--round) * 1rem);      /* the info box, the mobile menu panel */
  --r-pill: calc(var(--round) * 999px);    /* buttons, the language switch: fully round ends */
   /* the small text: copyright, labels of the info box */
}
/* scrollbars: none at all (scrolling works as before with wheel, trackpad, touch and keys) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }   /* "clip", not "hidden": hidden would stop the columns from staying in place */
body.site { margin: 0; background: var(--grey); color: var(--void); font: 500 var(--body)/1.25 var(--mono); letter-spacing: 0; font-variation-settings: "slnt" 0; }
.site a { color: var(--electric); text-underline-offset: 0.18em; }
.site :focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
.page-h1-mini { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--void); color: var(--grey) !important; }
.site-skip:focus { top: 0.5rem; }
.site-note { max-width: 70ch; }

/* headings (portal): page title 56, section 36, sub-section 28 px */
.site h1, .site h2, .site h3 { margin: 0; font-family: var(--head); font-weight: 700; color: var(--void); line-height: 1.03; letter-spacing: -0.05em; overflow-wrap: break-word; }
.site h1 { font-size: var(--h1); margin-bottom: 1.5rem; }
.site h2 { font-size: var(--h2); }
.site h3 { font-size: var(--h3); }
.b-heading { margin: 2.5rem 0 1rem; }
.b-heading:first-child { margin-top: 0; }
.site-k-text .b-heading, .site-k-landing .b-heading { margin-bottom: 2.5rem; }   /* a text page (About me): more room between the heading and the text */

/* buttons: one look everywhere (portal .btn): outlined in black, same text size, same height and padding (TEST: pill-shaped, see --round above) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.25rem; border: 1px solid var(--void); border-radius: var(--r-pill); background: transparent; color: var(--void) !important; font: inherit; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover, .btn.is-on { background: var(--void); color: var(--grey) !important; }
.btn svg { display: block; width: 1rem; height: auto; }
.btn.is-ghost { visibility: hidden; }

/* language: one switch of two halves, the one exception to the black buttons: blue. A blue mass marks the current language. On a click it runs over like water
   in a glass box: the box tips, the water stays level and sloshes to the other side (a small simulation drawn on a canvas, public/js/site.js), then the other page opens. */
.lang-switch { position: relative; display: inline-grid; grid-template-columns: repeat(2, 1fr); isolation: isolate; overflow: hidden; border: 1px solid var(--electric); border-radius: var(--r-pill); text-decoration: none; cursor: pointer; }
.lang-blob { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 50%; background: var(--electric); }
.lang-switch.at-en .lang-blob { left: 50%; right: 0; }
.lang-switch.is-liquid .lang-blob { visibility: hidden; }
.lang-canvas { position: absolute; z-index: -1; max-width: none; pointer-events: none; }
.lang-opt { display: flex; align-items: center; justify-content: center; min-height: calc(2.75rem - 2px); padding: 0.5rem 1rem; color: var(--electric); line-height: 1.2; transition: color 0.3s ease; }
.lang-switch:not(.at-en) .lang-opt[data-l="de"], .lang-switch.at-en .lang-opt[data-l="en"] { color: var(--grey); }
.site-lang { margin: 0; }
.site-copy { margin: 1.25rem 0 0; font-size: var(--mark); line-height: 1.2; }

/* shell */
.site-right { min-width: 0; }
.site-aside { display: none; }
.site-logo { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--electric); text-decoration: none; }
.site-logo img { display: block; height: 2.25rem; width: auto; }
.site-logo span { font: 700 1.6rem/1 var(--head); letter-spacing: -0.05em; }

/* navigation: the main pages Electric, the page you are on (or the section you are in) black; the small list at the bottom stays black, its current page Electric */
.nav-main ul, .nav-legal ul { list-style: none; margin: 0; padding: 0; }
.nav-main a, .nav-legal a { text-decoration: none; }
.nav-main .nav-top { display: flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 0; font-family: var(--head); font-weight: 700; font-size: var(--h3); line-height: 1.03; letter-spacing: -0.05em; overflow-wrap: anywhere; color: var(--electric); }
.nav-main .nav-top[aria-current="page"], .nav-main .nav-top.is-trail { color: var(--void); }
.nav-legal a { display: flex; align-items: center; min-height: 2rem; padding: 0.2rem 0; color: var(--void); }
.nav-legal a[aria-current="page"] { color: var(--electric); }
/* hovering: only the colour changes, no underline and no movement (the big words turn dark blue, the small list and the entries of the list of services turn blue) */
.nav-main .nav-top:not([aria-current]):not(.is-trail):hover { color: var(--electric-dark); }
.nav-legal a:hover { color: var(--electric); }
.nav-legal .ext { flex: none; margin-left: 0.35em; }   /* the arrow up and to the right: this link leaves the site */
@media (pointer: coarse) { .nav-legal a { min-height: 2.75rem; } }

/* content: three columns of a quarter of the screen each (next to the menu column). Explanations always stand in the first one, pictures spread over all three. */
.site-main { padding: var(--pad-y) var(--pad-x); }
.site-inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; }
.site-inner > *, .sheet > * { min-width: 0; }
.b-text { margin: 0 0 1.5rem; }
.b-text p { margin: 0 0 1em; }
.b-text a { text-decoration: underline; }
.b-text a:hover { color: var(--electric-dark); }
.b-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin: 0 0 1.5rem; }
.b-facts p { margin: 0; }
.b-image, .b-video { margin: 0 0 1rem; }
.b-image img, .b-video video, .b-gallery img, .b-gallery video { display: block; width: 100%; height: auto; border-radius: var(--r-pic); }
.b-gallery { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 1rem; margin: 0 0 1rem; align-items: start; }
.b-gallery figure { margin: 0; }
figcaption { margin-top: 0.4rem; font-size: var(--mark); line-height: 1.2; }
/* a list of entries (Leistungen): the entries stand in a list, the chosen one shows its text below the list on small screens and beside it on a computer. Without script all texts stand one below the other. */
/* timeline: a row of phases on one line, a dot each (a column on small screens); the text stays small (caption), the name of the phase is bold */
.b-timeline-box { margin: 2rem 0 3rem; padding: 0.9rem; background: color-mix(in srgb, var(--grey), var(--void) 6%); border-radius: var(--r-box); }   /* set apart like the info box of a project */
.b-tl-title { margin: 0 0 1.25rem; }
@media (max-width: 63.99rem) { .site .b-tl-title { font-size: calc(var(--d) * 0.56); line-height: 1.05; margin-bottom: 1.5rem; hyphens: auto; -webkit-hyphens: auto; } }   /* on a phone the title of the box is smaller than the page title, so "Exemplarischer Arbeitsprozess" breaks between words, not inside one */
.b-timeline { --dot: 0.75rem; list-style: none; margin: 0; padding: 0; display: block; }
.b-tl-item { position: relative; padding: 0 0 1.5rem 1.75rem; }
.b-tl-item::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: var(--dot); height: var(--dot); box-sizing: border-box; border: 2px solid var(--void); border-radius: 50%; background: var(--void); }
.b-tl-item::after { content: ""; position: absolute; left: calc(var(--dot) / 2 - 1px); top: calc(0.35rem + var(--dot)); bottom: -0.35rem; width: 2px; background: var(--void); }
.b-tl-item:last-child::after { display: none; }
.b-tl-no { display: block; font: 500 var(--mark)/1.2 var(--mono); color: color-mix(in srgb, var(--void) 45%, var(--grey)); }
.site .b-tl-label { margin: 0 0 0.35rem; font: 700 calc(var(--body) * 1.15)/1.03 var(--head); letter-spacing: -0.05em; }
.b-tl-text { margin: 0; padding: 0; list-style: none; font: 500 var(--mark)/1.2 var(--mono); letter-spacing: 0; }   /* one line of the text = one point of the list */
.b-tl-text li { position: relative; padding-left: 0.9em; }
.b-tl-text li + li { margin-top: 0.2em; }
.b-tl-text li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.3em; height: 0.3em; border-radius: 50%; background: currentColor; }
.b-tl-text a { color: inherit; text-underline-offset: 0.18em; }
.b-tl-item.is-accent::before { border-color: var(--electric); background: var(--grey); }   /* a blue ring, no blue area */
.b-tl-item.is-accent .b-tl-label, .b-tl-item.is-accent .b-tl-no { color: var(--electric); }
.b-tl-item.is-accent .b-tl-text a:hover { color: var(--electric); }
@media (min-width: 64rem) {
  .b-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 0; }
  .b-tl-item { padding: calc(0.35rem + var(--dot) + 0.9rem) 1rem 0 0; }
  .b-tl-item::after { left: 0; right: 0; top: calc(0.35rem + var(--dot) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
}
.b-details { margin: 0 0 1.5rem; }
.b-details-list { display: none; }
.b-details-panel { margin-bottom: 1.5rem; }
.b-details-panel h3 { margin: 0 0 0.5rem; }
.b-details.is-ready .b-details-list { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 1rem; }
.b-details.is-ready .b-details-panel h3 { display: none; }
.b-details.is-ready .b-details-panel { margin-bottom: 0; }
.b-details-list .b-details-panel { padding: 0.25rem 0 1rem; }
@media (max-width: 63.99rem) {   /* a drop-down: a plus on a closed entry, a minus on the open one */
  .b-details.is-ready .b-details-item { display: flex; align-items: center; justify-content: flex-start; gap: 0.3em; width: 100%; font: 700 var(--h3)/1.03 var(--head); letter-spacing: -0.05em; }   /* the entries stay in the headline style (set again here so nothing in the drop-down rules can change it) */
  .b-details.is-ready .b-details-item::after { content: "+"; flex: none; font-size: 0.8em; line-height: 1; }
  .b-details.is-ready .b-details-item[aria-expanded="true"]::after { content: "\2212"; }
}
.b-details-item { min-height: 2.75rem; padding: 0.25rem 0; border: 0; background: transparent; color: var(--void); font-family: var(--head); font-weight: 700; font-size: var(--h3); line-height: 1.03; letter-spacing: -0.05em; text-align: left; cursor: pointer; }
.b-details-item[aria-expanded="true"] { color: var(--electric); }
.b-details-item:not([aria-expanded="true"]):hover { color: var(--electric); }
.b-embed { display: block; width: 100%; border: 0; }
.b-spacer-m { height: 2rem; } .b-spacer-l { height: 5rem; }

/* the homepage showreel, under the welcome text: one project photo dissolving into the next like water filling in and draining away (the same effect as
   the Client Portal's login screen, public/js/liquid-slideshow.js, public/js/site-showreel.js). A plain CSS crossfade without script or with reduced motion. */
.showreel { position: relative; isolation: isolate; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-pic); background: var(--grey); margin-top: 1.5rem; }   /* grey, not black: at the rounded edge the ground shows through as a hairline */
.showreel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.showreel.gl-active canvas { display: block; }
.showreel.gl-active .slide-layer { display: none; }
.showreel .slide-layer {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08); filter: blur(28px);
  transition: opacity 2.8s ease, filter 2.8s ease, transform 9s ease;
}
.showreel .slide-layer.is-active { opacity: 1; transform: scale(1); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .showreel .slide-layer { transition: opacity 0.6s ease; transform: none; filter: none; }
  .showreel .slide-layer.is-active { transform: none; filter: none; }
}

/* pictures: runs of images, galleries and videos form one tight, dynamic grid. The first picture, if it is landscape, is the hero across the whole width (at most 75 % of the screen
   high). All others: no picture is higher than half the screen, every row is filled to the full width: a wide picture stands alone, upright ones go together until the row is
   low enough, and they share the width by their shape so all are the same height (built in blocks.ejs, redone with the real screen by public/js/site.js). */
.sheet { display: contents; }
.plate { position: relative; margin: 0 0 var(--gap); grid-column: 1 / -1; }
.plate-frame { position: relative; display: block; overflow: hidden; border-radius: var(--r-pic); }
.plate-frame img, .plate-frame video { display: block; width: 100%; height: auto; }
a.plate-frame { cursor: zoom-in; }
/* no number and no caption on the page: the caption shows only in the full-screen view (it stays in the page for screen readers) */

/* full-screen view of one picture */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--grey); color: var(--void); }
.lightbox::backdrop { background: var(--grey); }
.lightbox-in { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.5rem; height: 100%; padding: var(--pad-y) var(--pad-x); }
.lightbox img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left top; border-radius: var(--r-pic); }
.lightbox-bar { display: flex; align-items: center; gap: 1.5rem; }
.lightbox-cap { flex: 1; margin: 0; }
.lightbox-close { position: absolute; top: calc(var(--pad-y) / 2); right: var(--pad-x); z-index: 2; }
html:has(dialog[open]) { overflow: hidden; }
button.arrow { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }

/* a page with pictures (and the overview of the work): all text in one block that stays fixed, the pictures (or the table) beside it, in two columns with the same gap in both directions */
.plate-row { display: contents; }
.split-right .sheet { display: flex; flex-direction: column; gap: var(--gap); }
.split-right .plate-row { display: flex; gap: var(--gap); align-items: flex-start; }
.split-right .plate { margin: 0; flex: var(--ar, 1.5) 1 0; min-width: 0; }   /* two side by side share the width by their shape: the same height */
.split-right .is-hero .plate { flex: 0 0 100%; }
.split-right .is-hero .plate-frame { width: min(100%, calc(75vh * var(--ar, 1.5))); width: min(100%, calc(75dvh * var(--ar, 1.5))); }   /* the hero is at most three quarters of the screen high */
.split-right .is-open .plate { flex: 0 1 calc(var(--ar, 1.5) * 50vh); flex-basis: calc(var(--ar, 1.5) * 50dvh); }   /* the last, unfilled row keeps the largest height */
@media (min-width: 64rem) {
  .site-main.is-split { padding: 0; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .split-text { position: sticky; top: 0; max-height: 100vh; max-height: 100dvh; overflow-y: auto; padding: 0 var(--gx) var(--pad-y); }
  .split-text > :first-child, .split-text > .page-h1.is-menu + * { margin-top: calc(var(--lead) - var(--cap-mono)); }
  .split-text > .page-h1:not(.is-menu):first-child { margin-top: calc(var(--lead) - 0.165 * var(--h1)); }
  .split-text > .b-heading:first-child, .split-text > .page-h1.is-menu + .b-heading { margin-top: calc(var(--lead) - 0.165 * var(--h2)); }
  /* the bar stays on top while the text scrolls; it reaches up to the screen edge and down below the buttons, so no text shows above or beside it */
  .split-text > .projnav { position: sticky; top: 0; z-index: 2; margin: 0; padding: var(--pad-y) 0 1rem; background: var(--grey); }   /* fixed at the very top (level with the logo) while the text scrolls under it; top: 0, not a negative offset — that let the whole bar (icons included) drift off-screen before it ever stuck */
  .split-text > .projnav + .page-h1 { margin-top: calc(var(--lead) - 0.165 * var(--h1) - var(--pad-y) - 2.75rem - 1rem); }   /* the title starts at the top line, level with the first menu word */
  .split-right { padding: var(--lead) var(--gx) var(--pad-y); }
  .site-k-works .split-right, .site-k-home .split-right { padding-top: calc(var(--lead) - 0.165 * var(--h2)); }
}
@media (max-width: 63.99rem) {
  :root { --bar-h: 3.55rem; }
  .split-text { margin-bottom: calc(var(--gx) * 2); }
  /* a text page with one picture (About me): title, picture, then the text */
  .split.pic-first { display: flex; flex-direction: column; }
  .split.pic-first .split-text, .split.pic-first .split-right { display: contents; }
  .split.pic-first .split-text > .page-h1 { order: 1; }
  .split.pic-first .split-right > .sheet { order: 2; margin-bottom: 2rem; }
  .split.pic-first .split-text > :not(.page-h1) { order: 3; }
  /* on a phone, a project's pictures move up to sit right under the info box, with the running text below them (the desktop two-column order stays untouched).
     ".split-text"/".split-right" keep their own box nowhere else, so their children can be reordered as one flex column (".sheet" already has a real box inside
     ".split-right", set up above; its own children stay exactly as laid out). */
  .site-k-project .split { display: flex; flex-direction: column; }
  .site-k-project .split-text, .site-k-project .split-right { display: contents; }   /* "display: contents" has no box of its own, so its margin-bottom above is moot here */
  .site-k-project .split-text > * { order: 4; }   /* whatever else the text holds goes below the pictures */
  .site-k-project .split-text > .page-h1 { order: 1; }
  .site-k-project .split-text > .proj-facts { order: 2; }
  .site-k-project .split-right > * { order: 3; }   /* the pictures (the sheet, or in the plain grid the single pictures and galleries) come right after the title and the info box */
  .site-k-project .split-text > .site-note, .site-k-project .split-text > .b-text, .site-k-project .split-text > .b-heading, .site-k-project .split-text > .b-details { order: 4; margin-top: 0; }
  .site-k-project .split-text > .b-text:first-of-type, .site-k-project .split-text > .b-heading:first-of-type { margin-top: 1.5rem; }
  /* on a phone the merged start page is just the welcome text and the showreel; the table of all the work is not part of that flow, only the menu's
     "Arbeiten" (href="…#works") reveals it — the desktop stays merged (the table is always there, in the right-hand column) */
  .b-gallery figure.is-wide { grid-column: 1 / -1; }   /* plain grid on a phone: a landscape picture runs across the whole width, as on a computer */
  .site-k-home #works { display: none; }
  .site-k-home #works:target { display: grid; }
  #works { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }   /* arriving through the menu's link must not put the first heading under the header */
  .site-k-home:has(#works:target) .split-text { display: none; }   /* the work overview stands alone: no welcome text and no showreel above it */
  .works td:nth-child(n+2) { font-size: var(--mark); line-height: 1.2; }   /* type of work and year in the caption size */
  /* on a project page the previous/next bar and the title stay fixed under the header while the page scrolls */
  .site-k-project .split-text > .projnav { order: 0; position: sticky; top: var(--bar-h); z-index: 30; margin: 0; padding: 0 0 0.25rem; background: var(--grey); box-shadow: 0 -1rem 0 var(--grey); }   /* --bar-h is the measured height of the header (site.js); the shadow paints grey upwards so no sliver of the page shows between header and bar */
  /* the big title scrolls away with the page; the small one (zero height, so it changes nothing in the layout) takes over under the bar in body-copy size */
  .site-k-project .split-text > .page-h1-mini { display: block; order: 1; position: sticky; top: calc(var(--bar-h) + var(--nav-h, 3rem)); z-index: 29; height: 0; margin: 0; }
  .page-h1-mini span { position: absolute; left: 0; right: 0; top: 0; padding: 0.15rem 0 0.4rem; background: var(--grey); box-shadow: 0 -0.5rem 0 var(--grey); font: 500 var(--body)/1.25 var(--mono); letter-spacing: 0; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; }
  .page-h1-mini.is-on span { opacity: 1; visibility: visible; }
}

/* above the title of a project: previous and next on the left, close on the right (buttons like everywhere); on a computer it stays in view while the text scrolls */
.projnav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 1.5rem; background: var(--grey); }
.projnav-step { display: flex; gap: 1rem; }
.projnav .btn { min-width: 1rem; padding: 0.5rem 0; border: 0; }   /* no outline, only the small icons; the click area stays as high as a button */
.projnav .btn:hover { background: transparent; color: var(--electric) !important; }
@media (pointer: coarse) { .projnav .btn { min-width: 2.75rem; } }

/* the fixed fields of a project in an info box, side by side so the text stays short: year, status, type of work, services (labels in the small text size) */
.proj-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; margin: 0 0 2rem; padding: 0.9rem; background: color-mix(in srgb, var(--grey), var(--void) 6%); border-radius: var(--r-box); }   /* a slightly darker surface, no outline */
.proj-facts > div { min-width: 0; overflow-wrap: anywhere; }
.proj-facts > div.is-wide { grid-column: 1 / -1; }
.proj-facts dt { margin: 0 0 0.2rem; font-size: var(--mark); line-height: 1.2; }
.proj-facts dd { margin: 0; }
.proj-facts ul { list-style: none; margin: 0; padding: 0; }

/* overview of the work: a table per group, project, type of work and year (the whole row is the link) */
.works section + section { padding-top: 3rem; }
.works h2 { margin-bottom: 0.75rem; }
.works table { width: 100%; border-collapse: collapse; }
.works tbody { display: block; }
.works tr { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); column-gap: 1rem; padding: 0.55rem 0; }
.works td { padding: 0; color: var(--void); }
.works td a { color: inherit; text-decoration: none; }
.works td a::after { content: ""; position: absolute; inset: 0; }
.works tr:hover td { color: var(--electric); }

/* arrows of the full-screen view (blue) */
.arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--electric); }
a.arrow:hover, button.arrow:hover { color: var(--electric-dark); }

/* footer (small screens) and preview note */
.site-foot { padding: 0 var(--pad-x) var(--pad-y); }
.site-foot p { margin: 0; font-size: var(--mark); line-height: 1.2; }
.site-preview { position: fixed; right: 0.75rem; bottom: 0.75rem; z-index: 60; margin: 0; padding: 0.5rem 0.8rem; background: var(--void); color: var(--grey); }
.site-preview a { color: var(--grey); }

/* small screens: a bar on top with the logo, the DE/EN switch and the burger (three lines, blue). The burger opens a full-screen blue menu at once, no animation;
   the header stays on top of it and its elements turn from blue to grey. The burger becomes a cross and closes the menu again (Escape too). */
.site-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem var(--pad-x); background: var(--grey); }
.site-bar .site-logo, .site-bar .site-lang-bar, .burger { position: relative; z-index: 41; }   /* the panel (z-index 40) lives inside the header's stacking context, so the header's own elements must stand above it */
.site-bar .site-logo { margin-right: auto; }
.site-lang-bar { margin: 0; }
/* the burger: three lines, Electric; it stays above the blue menu and turns into a cross */
.burger { display: block; width: 2.75rem; height: 2.75rem; list-style: none; cursor: pointer; color: var(--electric); }
.burger::-webkit-details-marker { display: none; }
.burger-line { position: absolute; left: 0.6rem; right: 0.6rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.15s ease; }
.burger-line:nth-child(1) { top: 1rem; } .burger-line:nth-child(2) { top: calc(1.375rem - 1px); } .burger-line:nth-child(3) { top: calc(1.75rem - 2px); }
.site-menu[open] .burger-line:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
.site-menu[open] .burger-line:nth-child(2) { opacity: 0; }
.site-menu[open] .burger-line:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }
/* menu open: the header sits on the blue, so its elements invert from blue to grey */
.site-bar:has(.site-menu[open]) { background-color: transparent; }
.site-bar:has(.site-menu[open]) .site-logo, .site-bar:has(.site-menu[open]) .burger { color: var(--grey); }
.site-bar:has(.site-menu[open]) .site-logo img { filter: brightness(0) invert(0.95); }   /* the logo is a blue picture: turned to the light grey on the blue */
.site-bar:has(.site-menu[open]) .lang-switch { border-color: var(--grey); }
.site-bar:has(.site-menu[open]) .lang-blob { background: var(--grey); }
.site-bar:has(.site-menu[open]) .lang-opt { color: var(--grey); }
.site-bar:has(.site-menu[open]) .lang-switch:not(.at-en) .lang-opt[data-l="de"], .site-bar:has(.site-menu[open]) .lang-switch.at-en .lang-opt[data-l="en"] { color: var(--electric); }
.site-menu-panel {
  display: none; position: fixed; inset: 0; z-index: 40; overflow: hidden; background: var(--electric); color: var(--grey);
}
.site-menu[open] .site-menu-panel { display: flex; }
.site-menu-content { display: flex; flex-direction: column; justify-content: flex-start; gap: 2.5rem; width: 100%; height: 100%; overflow-y: auto; padding: calc(3.55rem + 2.5rem) var(--pad-x) var(--pad-y); }
.site-menu-panel .nav-top { min-height: 0; padding: 0; }   /* the big words stand close together: their pitch is the line height */
.site-menu-panel .site-copy { margin: auto 0 0; color: var(--grey); }   /* the copyright note sits at the bottom of the menu */
html:has(.site-menu[open]) { overflow: hidden; }   /* the page behind the blue does not scroll while it is open */
/* text and controls on the blue: grey is the ink (the mass under the current language is grey too, so the letters on it read dark) */
.site-menu-panel .nav-top { color: var(--grey); }
.site-menu-panel .nav-top[aria-current="page"], .site-menu-panel .nav-top.is-trail { color: var(--void); }
.site-menu-panel .nav-top:hover { color: var(--void); }
.site-k-home:has(#works:target) .site-menu-panel .nav-top[data-works] { color: var(--void); }   /* on the start page "Arbeiten" is current only while the overview is shown */
.site-menu-panel .nav-legal a { min-height: 0; padding: 0.1rem 0; color: var(--grey); }   /* the small list is tight, like the reference */
.site-menu-panel .nav-legal a[aria-current="page"], .site-menu-panel .nav-legal a:hover { color: var(--void); }
/* small screens: Diatype (the headline font: page title, menu words, "Leistungen" entries) a half again as large, Diatype Mono (the running text, small
   labels, copyright) somewhat smaller. Both only redefine the size variables, so every line-height stays a ratio of it and keeps the desktop's proportion. */
@media (max-width: 63.99rem) {
  :root { --d: clamp(2.25rem, 15.7vw, 4.5rem); --body: 0.6rem; --mark: 0.5rem; }   /* read off the reference screenshot of the phone menu (402 px wide): menu words about 63 px, small list about 9.6 px */
}
@media (max-width: 40rem) {
  .b-gallery { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); gap: 0.5rem; }
  /* narrow phone: the three columns of the Arbeiten table get tight; the project name takes the full row, type and year share the one below it */
  .works tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.2rem; }
  .works td:first-child { grid-column: 1 / -1; grid-row: 1; }
  .works td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .works td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
  /* narrow phone: the info box stacks to one column, so a longer word (e.g. "Markenidentität") never has to squeeze into half the width */
  .proj-facts { grid-template-columns: minmax(0, 1fr); }
}
/* desktop: the menu in the left half of the first quarter, content in three columns */
@media (min-width: 64rem) {
  .site-shell { display: grid; grid-template-columns: var(--c1) minmax(0, 1fr); align-items: start; }
  .site-aside { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; padding: var(--pad-y) 0 var(--pad-y) var(--aside-pad); background: var(--grey); }
  .aside-main { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; min-height: 0; overflow-y: auto; padding-right: 0.75rem; }
  .site-aside-nav { align-self: stretch; }
  .site-aside .site-lang { margin-top: 1.25rem; }
  .site-aside-end { margin-top: auto; width: 50%; }   /* the big menu words may use the whole menu column, the small list stays in its left half */
  .site-aside .nav-legal { margin-bottom: 1rem; }
  .site-aside .site-copy { grid-column: 1; grid-row: 2; padding-right: 0.75rem; }
  .site-bar, .site-foot { display: none; }
  /* the name of a page that is in the menu is not repeated as a heading (still there for screen readers) */
  .page-h1.is-menu { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* content: three columns of a quarter of the screen each */
  .site-main { padding: var(--pad-y) 0; }
  .site-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .site-inner > * { padding-inline: var(--gx); }
  .page-h1, .b-heading, .b-text, .b-facts, .b-details, .site-note { grid-column: 1; }
  .b-image, .b-video, .b-gallery { grid-column: 2 / -1; }
  .b-timeline-box { grid-column: 1 / -1; }
  .site-inner > .b-timeline-box { margin: 2rem var(--gx) 4rem; padding: 1.5rem 1.5rem 1.75rem; }
  .b-embed, .rechner { grid-column: 1 / -1; }
  /* the first thing of a page starts at the top line, level with the first menu word (the main padding already gives --pad-y) */
  .site-inner > .page-h1:not(.is-menu):first-child { margin-top: calc(var(--lead) - var(--pad-y) - 0.165 * var(--h1)); }
  .site-inner > .page-h1.is-menu + * { margin-top: calc(var(--lead) - var(--pad-y) - var(--cap-mono)); }
  .site-inner > .page-h1.is-menu + .b-heading { margin-top: calc(var(--lead) - var(--pad-y) - 0.165 * var(--h2)); }
  .site-inner > .page-h1.is-menu + .b-details { margin-top: 4.75rem; }   /* the list entries sit like the menu words: same line box */
  /* the entries of a list stand in the first column, the chosen text appears beside them in the second */
  .site-inner .b-details { grid-column: 1 / span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding-inline: 0; }
  .site-inner .b-details.is-ready .b-details-list { margin-bottom: 0; }
  .site-inner .b-details > * { padding-inline: var(--gx); }
}
@media (prefers-reduced-motion: reduce) { .lang-opt { transition: none; } }

/* the consent notice for the statistics: a blue box in the middle of the screen, in front of a light veil that covers the page (the page cannot be used before the answer).
   On the legal pages the box sits in the corner and the page stays usable, so the privacy statement can be read. Both buttons look the same, "no" is as easy as "yes". */
.consent-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--grey) 72%, transparent); }
.consent-wrap[hidden] { display: none; }
.consent { width: min(30rem, 100%); padding: 1.5rem; border-radius: var(--r-box); background: var(--electric); color: var(--grey); font: 500 var(--body)/1.25 var(--mono); letter-spacing: 0; }
.site-k-legal .consent-wrap { inset: auto 0 0 auto; padding: 1rem; background: none; pointer-events: none; }
.site-k-legal .consent { pointer-events: auto; }
.consent p { margin: 0 0 1.25rem; }
.consent a { color: inherit; text-underline-offset: 0.18em; }
.consent a:hover { text-decoration-thickness: 2px; }
.consent-actions { display: flex; gap: 0.5rem; }
.consent .btn { flex: 1; border-color: var(--grey); color: var(--grey) !important; }
.consent .btn:hover, .consent .btn:focus-visible { background: var(--grey); color: var(--electric) !important; }
.consent :focus-visible { outline: 2px solid var(--grey); outline-offset: 2px; }
.consent-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.consent-open:hover { color: var(--electric); }
@media (max-width: 63.99rem) { .consent { padding: 1.25rem; } .site-k-legal .consent-wrap { inset: auto 0 0 0; } }