/* klingebiel-architektur.de — site styles
   The site is a card. One fixed-size rectangle, centred on an otherwise
   empty page. Every page is a face of that card; navigating flips it. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url(/img/BG.png) no-repeat center center;
  background-size: 100% auto;
  opacity: .2;
  z-index: -1;
  view-transition-name: page-bg;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- cross-document card turn — zero JS. Every navigation between pages
   is a real browser navigation to a real URL; this at-rule is what makes
   the browser flip the card instead of a hard cut. The view-transition-name
   below scopes the flip to the card itself — the quiet background never
   moves. Browsers without support (Safari/Firefox today) just navigate
   normally, landing straight on the new page. ---- */
@view-transition {
  navigation: auto;
}
::view-transition {
  perspective: 2000px;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(menu-card),
::view-transition-new(menu-card) {
  animation-duration: var(--dur-flip);
  animation-timing-function: var(--ease-flip);
}
@keyframes card-turn-out { to { transform: rotateY(-100deg); opacity: 0; } }
@keyframes card-turn-in { from { transform: rotateY(100deg); opacity: 0; } }
::view-transition-old(menu-card) { animation-name: card-turn-out; }
::view-transition-new(menu-card) { animation-name: card-turn-in; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---- stage: the quiet empty page the card sits on ---- */

.stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ---- side marquees: cover page only, quiet motion flanking the card.
   Pure CSS, duplicated track for a seamless loop — left is rotated text
   looping up, right is project imagery looping down. ---- */
.side-marquee {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 460px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.side-marquee-left {
  right: calc(50% + 280px); /* flush with the card edge, no gap */
  width: 195px;
}
.side-marquee-right {
  left: calc(50% + 304px);
  width: 140px;
}
.side-marquee-track {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* movement stays vertical (translateY) — only the text itself is rotated,
   per-cell below, not this track, so the loop direction is untouched.
   Speed (per content type) and direction are separate classes on purpose —
   swapping direction must never accidentally swap speed again. */
.side-marquee-text-track { animation: side-marquee-loop var(--marquee-duration, 40s) linear infinite; }
.side-marquee-img-track { animation: side-marquee-loop 10s linear infinite; }
.side-marquee-dir-down { animation-direction: reverse; }

.side-marquee-cell {
  position: relative;
  flex: none;
  width: 195px;
  /* per-page override via inline style="--marquee-cell-h: XXXpx" on
     .side-marquee-left — different sideText lengths need different gaps
     between repeats. Default is generous enough for a long phrase. */
  height: var(--marquee-cell-h, 4450px);
}
.side-marquee-cell span {
  position: absolute;
  top: 50%;
  left: 50%;
  /* auto-sized to whatever text is actually there — no more hardcoding a
     pixel width for one specific phrase and breaking on the next one */
  width: max-content;
  max-width: none;
  height: 193px;
  line-height: 193px;
  display: block;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-90deg); /* counterclockwise */
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 10.5rem;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  text-stroke: 2px var(--accent);
  opacity: .8;
}

.side-marquee-img-cell {
  flex: none;
  width: 140px;
  aspect-ratio: 4 / 3;
  margin-block: 10px;
  overflow: hidden;
}
.side-marquee-img-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

@keyframes side-marquee-loop {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@media (max-width: 950px) {
  .side-marquee { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .side-marquee-text-track, .side-marquee-img-track { animation: none; }
}

/* ---- hover preview: dwelling on a portfolio project link shows its
   first image in the same slot the cover page's image marquee occupies.
   JS toggles .is-visible and sets `top` to match the hovered title.
   Desktop only — JS gates this on (hover: hover) and (pointer: fine). ---- */
.hover-preview {
  position: absolute;
  left: calc(50% + 304px);
  width: 200px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hover-preview.is-visible { opacity: 1; }
.hover-preview img { width: 100%; height: auto; display: block; }
@media (max-width: 950px) {
  .hover-preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hover-preview { transition: none; }
}

/* ---- the card itself: fixed size, internal scroll ---- */

.menu-card {
  view-transition-name: menu-card;
  width: min(560px, 92vw);
  height: min(720px, 88vh);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--ink);
  box-shadow: 0 40px 80px -30px rgba(60, 66, 69, .45);
  display: flex;
  flex-direction: column;
}
/* the cover (home) reads as the closed menu — dark, like the physical object */
.menu-card.is-cover {
  background: var(--ink);
  color: var(--paper);
}

/* ---- scrollbar: a measuring-ruler, not a UI-chrome afterthought — minor
   ticks every 8px, a bolder major tick every 5th, accent thumb. Applied to
   .menu-card since it's the site's one internally-scrolling element; add
   this selector list to any future scrollable container. Firefox has no
   pseudo-elements for this, so it falls back to a plain thin accent bar. */
@supports not selector(::-webkit-scrollbar) {
  .menu-card {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }
}
.menu-card::-webkit-scrollbar {
  width: 10px;
}
.menu-card::-webkit-scrollbar-track {
  background-color: transparent;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(114, 145, 146, .5) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 38px, var(--sage) 38px 40px);
  background-repeat: repeat-y, repeat-y;
}
.menu-card::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 4px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.menu-card::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink);
}
.menu-card.is-cover::-webkit-scrollbar-thumb:hover {
  background-color: var(--paper);
}

.card-inner {
  padding: clamp(28px, 5vw, 48px);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---- in-card utility row: back link + language switch. No page ever
   gets a separate site-wide header — this row is the only wayfinding,
   and it travels with the content, inside the card. ---- */
.card-utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 28px;
  gap: 12px;
}
.card-utility a { text-decoration: none; color: inherit; opacity: .7; }
.card-utility a:hover { opacity: 1; color: var(--accent); }

.home-title { margin-bottom: 4px; }
.home-name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 4.2vw, 1.9rem);
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #cfa34b 0%, var(--accent) 8%, var(--accent) 92%, #ecbf67 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .3),
    0 1px 0 rgba(255, 255, 255, .2);
  text-align: justify;
  text-align-last: justify;
  margin: 0;
  white-space: nowrap;
}
.home-tagline {
  display: block;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--paper);
  opacity: .6;
  margin: 0;
}

/* Three curated row layouts (2/3/4 rows) swapped by viewport width, rather
   than left to the browser's own reflow — each tier is hand-set so no row
   ever starts or ends on a "·", and every row's own edges line up with the
   card's edges via flex space-between (not text justify, which only
   stretches wrapped lines and can't be trusted to hit an exact row count). */
.tagline-tier { display: none; }
.tagline-wide { display: block; }
.tagline-row { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
.tagline-row + .tagline-row { margin-top: 3px; }
.tagline-word { white-space: nowrap; }

@media (max-width: 530px) {
  .tagline-wide { display: none; }
  .tagline-medium { display: block; }
}
@media (max-width: 370px) {
  .tagline-medium { display: none; }
  .tagline-narrow { display: block; }
}


/* ---- the dish list — this is the whole point. Plain, dotted-leader,
   nothing photographic. Deliberately modelled on a printed table of
   contents, not a portfolio grid. ---- */

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.menu-list-item + .menu-list-item { margin-top: 0; }
.menu-list-item a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 8px 4px;
  min-width: 0;
}
.menu-list-item a:hover,
.menu-list-item a:focus-visible { color: var(--accent); }
.menu-list-number {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  opacity: .55;
}
.menu-list-name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: -.01em;
  white-space: normal;
}
.menu-list-name--as-is { text-transform: none; }
.menu-list-leader {
  flex: 1;
  border-bottom: 1px dotted currentColor;
  opacity: .35;
  margin-bottom: 5px;
  min-width: 16px;
}
/* name-row wraps number, name, leader and (optional) detail together so a
   title that's short enough behaves exactly like a single flex row (default
   below); a title long enough to wrap gets a `.is-wrapped` class from
   initLeaderFill in site.js, which measures the actual last line of text
   with a Range and switches the leader/detail to absolute positioning below
   it — a plain flex row can only align a sibling to the whole (multi-line)
   title box, never to one specific wrapped line, so this can't be done in
   CSS alone. Detection is automatic and re-runs on resize, since whether a
   given title wraps depends on viewport width. */
.menu-list-name-row {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.menu-list-name-row.is-wrapped { display: block; }
.menu-list-name-row.is-wrapped .menu-list-leader,
.menu-list-name-row.is-wrapped .menu-list-detail {
  position: absolute;
  flex: none;
}
.menu-list-name-row.is-wrapped .menu-list-leader { margin-bottom: 0; }
.menu-list-name-row.is-wrapped .menu-list-detail { max-width: none; }
.menu-list-detail {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--mono-micro);
  text-transform: none;
  letter-spacing: .01em;
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

/* ---- page content (any card face reached past the cover) ---- */

.page-kicker {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sage);
}
.portfolio-group-kicker { margin-left: 10px; font-weight: 300; }
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-top: 4px;
  margin-bottom: 24px;
}
.menu-card.is-cover .page-title { color: var(--paper); }
.menu-card.is-cover .cv-entry { border-bottom-color: rgba(223, 205, 196, .15); }

.portfolio-group-heading { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--sage); }
.portfolio-group-heading:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }

.project-hero { margin: -1px -1px 24px; }
.project-hero img { width: calc(100% + 2px); aspect-ratio: 4/3; object-fit: cover; }
.project-hero--square img { aspect-ratio: 1/1; }

.project-category {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 6px;
  margin-bottom: 24px;
}

/* ---- publication detail page: one big title, a thin subtitle line,
   a short text, then the book's cover image/gif. ---- */
.publication-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1vw + 1.2rem, 2.4rem);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 4px 0 6px;
}
.publication-title--as-is { text-transform: none; }
.publication-subtitle {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sage);
  margin: 0 0 24px;
}
.publication-text { margin-bottom: 24px; }
.publication-text p { font-size: var(--body-s); }
.publication-image {
  display: block;
  width: calc(100% + 2px);
  margin: 0 -1px -1px;
}

.project-section { margin-bottom: 28px; }
.project-section h2 {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sage);
  margin-bottom: 8px;
}
.project-section p { font-size: var(--body-s); }
.project-subheading {
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 6px;
}
.project-credit { font-style: italic; color: var(--sage); margin-top: 10px; font-size: var(--mono-micro); }
.project-map iframe { width: 100%; border: 0; aspect-ratio: 4/3; }
.project-embed iframe { width: 100%; border: 0; }

/* ---- module nav: links to the ÜberAll sub-pages, several per row ---- */
.module-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.module-btn {
  padding: 10px 14px;
  border: 1px solid var(--sage);
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
}
.module-btn:hover,
.module-btn:focus-visible { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, .5); }

.site-plan { position: relative; margin: 0 0 24px; }
.site-plan img { display: block; width: calc(100% + 2px); margin: 0 -1px; }
.site-plan-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.site-plan-hover.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .site-plan-hover { transition: none; }
}

/* ---- ÜberAll module sub-pages: small kicker above the title, isopikto
   icon set next to the intro text instead of a hero photo ---- */
.module-kicker {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sage);
  margin: 0 0 4px;
}
.module-icon { float: left; width: 120px; height: 120px; margin: 0 24px 12px 0; }
@media (max-width: 640px) {
  .module-icon { width: 90px; height: 90px; margin: 0 16px 12px 0; }
}

/* ---- About page: portrait floats left of the intro paragraph ---- */
.about-portrait { float: left; width: 160px; height: auto; margin: 0 24px 12px 0; opacity: .7; }
@media (max-width: 640px) {
  .about-portrait { width: 112px; margin: 0 16px 12px 0; }
}

.module-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.module-title-row .page-title { margin-bottom: 24px; }
.module-next {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sage);
  text-decoration: none;
  white-space: nowrap;
}
.module-next:hover,
.module-next:focus-visible { color: var(--accent); }
@media (max-width: 640px) {
  .module-title-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---- concept accordion: native <details>/<summary>, no JS needed —
   keyboard and screen-reader behaviour comes free from the platform. ---- */
.concept-heading {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sage);
  margin-bottom: 8px;
}
.concept-accordion { margin-bottom: 28px; border-top: 1px solid var(--sage); background: rgba(255, 255, 255, .5); }
.concept-item { border-bottom: 1px solid var(--sage); }
.concept-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
}
.concept-item summary::-webkit-details-marker { display: none; }
.concept-item summary::after {
  content: "+";
  flex: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1em;
}
.concept-item[open] summary::after { content: "\2013"; }
.concept-item p { padding: 0 2px 18px; font-size: var(--body-s); }
.concept-diagram {
  display: block;
  width: 160px;
  max-width: 40%;
  height: auto;
  float: right;
  margin: 0 2px 12px 16px;
}

/* ---- cookie consent: gated embed placeholder (shown until the visitor
   accepts), the banner, and the always-present settings re-opener. ---- */
.consent-embed {
  width: 100%;
  position: relative;
  background: var(--sage);
}
.consent-embed iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
.consent-embed-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
}
.consent-embed-placeholder p {
  font-size: var(--mono-micro);
  font-family: var(--font-mono);
  color: var(--paper);
  max-width: 32em;
}
.consent-embed-enable {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--accent);
  border: 0;
  padding: 8px 16px;
  cursor: pointer;
}
.consent-embed-enable:hover,
.consent-embed-enable:focus-visible { background: var(--paper); }

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 24px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-text {
  font-size: var(--body-s);
  max-width: 60ch;
  margin: 0;
}
.cookie-banner-actions { display: flex; gap: 10px; flex: none; }
.cookie-btn {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 18px;
  border: 1px solid var(--paper);
  background: none;
  color: var(--paper);
  cursor: pointer;
}
.cookie-btn-accept { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.cookie-btn:hover, .cookie-btn:focus-visible { opacity: .85; }

.cookie-settings-trigger {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 1900;
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sage);
  background: var(--paper);
  border: 1px solid var(--sage);
  padding: 6px 10px;
  cursor: pointer;
  opacity: .8;
}
.cookie-settings-trigger:hover,
.cookie-settings-trigger:focus-visible { opacity: 1; color: var(--ink); border-color: var(--ink); }

/* ---- expandable task/description/location: collapsed to the task
   heading + first three lines of body text (measured: 24.3px line-height
   x 3 + the heading's own line-height/margin ≈ 100px), a fade-out cue,
   then a toggle reveals the rest, including the map. ---- */
.project-expandable { margin-bottom: 28px; }
.project-expandable-clamp {
  max-height: 104px;
  overflow: hidden;
  position: relative;
  transition: max-height .35s ease;
}
.project-expandable-clamp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}
.project-expandable.is-expanded .project-expandable-clamp {
  max-height: 3000px;
}
.project-expandable.is-expanded .project-expandable-clamp::after {
  opacity: 0;
}
.project-expandable-toggle {
  display: block;
  margin-top: 10px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sage);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.project-expandable-toggle:hover,
.project-expandable-toggle:focus-visible { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .project-expandable-clamp { transition: none; }
}

/* ---- CV entries: dated list, mono face carries the dates per CLAUDE.md ---- */
.cv-list { list-style: none; margin: 0; padding: 0; }
.cv-entry {
  display: flex;
  gap: 14px;
  padding-block: 10px;
  border-bottom: 1px solid rgba(60, 66, 69, .12);
  font-size: var(--body-s);
}
.cv-entry:first-child { padding-top: 0; }
.cv-entry--no-divider { border-bottom: none; padding-bottom: 0; }
.cv-entry--no-divider + .cv-entry { padding-top: 0; }
.cv-entry-date {
  flex: none;
  width: 8em;
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  color: var(--sage);
  letter-spacing: .02em;
}
.cv-entry-detail strong { font-weight: 800; }

/* ---- skills page: the skill-path strip (a quiet, static summary of the
   toolset) followed by the five detailed skill entries ---- */
.skill-path {
  display: block;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sage);
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sage);
  line-height: 1.9;
}
.skill-path-item { white-space: nowrap; }
.skill-path-sep { color: var(--accent); }

.skill-list { list-style: none; margin: 0; padding: 0; }
.skill-entry {
  display: flex;
  gap: 18px;
  padding-block: 20px;
  border-bottom: 1px solid rgba(60, 66, 69, .12);
}
.skill-entry:first-child { padding-top: 0; }
.skill-entry:last-child { border-bottom: 0; }
.skill-entry-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.skill-entry-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.skill-entry-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sage);
  margin-bottom: 10px;
}
.skill-entry-body p { font-size: var(--body-s); }

/* ---- gallery: filterable three-column grid of squared images ---- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.gallery-filter {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sage);
  background: none;
  border: 1px solid var(--sage);
  padding: 6px 12px;
  cursor: pointer;
}
.gallery-filter:hover,
.gallery-filter:focus-visible { color: var(--ink); border-color: var(--ink); }
.gallery-filter.is-active {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
}
.gallery-item.is-hidden { display: none; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- gallery lightbox: darkens everything, shows one image, arrows step
   through only the currently visible (filtered) set. ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 22, 23, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img { max-width: 88vw; max-height: 86vh; object-fit: contain; }
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: 0;
  color: var(--paper);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 14px;
  opacity: .8;
}
.lightbox-close:hover, .lightbox-close:focus-visible,
.lightbox-prev:hover, .lightbox-prev:focus-visible,
.lightbox-next:hover, .lightbox-next:focus-visible { color: var(--accent); opacity: 1; }
.lightbox-close { top: 8px; right: 8px; }
.lightbox-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 8px; top: 50%; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}

.slider-section { margin: 0 -1px 24px; }
.slider-heading {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  padding-block: 12px;
  color: var(--sage);
  background: var(--paper);
}

/* ---- slider (shared component) ---- */

.slider { position: relative; background: var(--ink); }
.slider-viewport { overflow: hidden; }
.slider-track { display: flex; will-change: transform; transition: transform var(--dur-fade) var(--ease-flip); }
.slider-track.no-anim { transition: none; }
.slider-slide { flex: 0 0 100%; aspect-ratio: 4 / 3; }
.slider-slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-slide img.slider-slide-img--contain { object-fit: contain; }
.slider-controls {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}
.slider-btn {
  pointer-events: auto;
  width: 32px; height: 32px;
  border: 1px solid var(--paper);
  background: rgba(60,66,69,.55);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slider-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.slider-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  color: var(--paper);
  background: var(--ink);
}
.slider-caption { text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 10px; }
.slider-playpause {
  width: 18px; height: 18px;
  border: 1px solid var(--sage);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .55rem;
  padding: 0;
}
.slider-playpause:hover { border-color: var(--accent); color: var(--accent); }
.slider-dots { display: flex; align-items: center; gap: 6px; }
.slider-dots button {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--paper);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.slider-dots button.is-active { background: var(--accent); border-color: var(--accent); }

/* ---- light variant: plans/elevations drawn on a white ground read better
   on white than boxed in the usual dark slider chrome. ---- */
.slider--light { background: rgba(255, 255, 255, .7); }
.slider--light .slider-meta { background: rgba(255, 255, 255, .7); color: var(--ink); }
.slider--light .slider-btn { background: rgba(255, 255, 255, .55); color: var(--ink); border-color: var(--ink); }
.slider--light .slider-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.slider--light .slider-playpause { color: var(--ink); }
.slider--light .slider-dots button { border-color: var(--ink); }
.slider--light .slider-dots button.is-active { background: var(--accent); border-color: var(--accent); }

/* ---- a single image/gif has nothing to slide between — no viewport,
   controls, or position counter, just the image at the same frame the
   slider would otherwise use. ---- */
.slider-single { margin: 0; }
.slider-single img { display: block; width: calc(100% + 2px); aspect-ratio: 4 / 3; object-fit: cover; margin: 0 -1px; }
.slider-single--light { background: rgba(255, 255, 255, .7); }
.slider-single img.slider-single-img--contain { object-fit: contain; }

/* ---- kontakt / simple text page ---- */

.contact-form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form-heading {
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sage);
  margin: 0;
}
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-fieldset legend {
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sage);
  padding: 0;
  margin-bottom: 4px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: var(--body-s);
  color: var(--text);
  background: rgba(255, 255, 255, .5);
  border: 0;
  border-bottom: 1px solid var(--sage);
  padding: 8px 6px;
  resize: vertical;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select {
  height: 40px;
  box-sizing: border-box;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--sage); opacity: .8; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.contact-callback-question {
  font-family: var(--font-mono);
  font-size: var(--mono-micro);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sage);
  margin: 0;
}
.contact-callback-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-callback-checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  margin: 0;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--sage);
  cursor: pointer;
  position: relative;
}
.contact-callback-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.contact-callback-checkbox:checked::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: .7rem;
}
.contact-callback-checkbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.contact-phone-country {
  flex: none;
  width: auto;
  max-width: 45%;
}
.contact-phone-number { flex: 1; min-width: 120px; }
.contact-phone-country:disabled,
.contact-phone-number:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.contact-submit {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--mono-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 24px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.contact-submit:hover { opacity: .85; }
.contact-submit:disabled { opacity: .5; cursor: default; }
.contact-status { font-family: var(--font-mono); font-size: var(--mono-micro); margin: 0; min-height: 1em; }
.contact-status-success { color: var(--sage); }
.contact-status-error { color: #b3453f; }

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .slider-track, .menu-list-item a {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ---- 380px ---- */

@media (max-width: 640px) {
  .stage { padding: 12px; }
  .menu-card { width: 100vw; height: 100vh; border: none; box-shadow: none; }
  .menu-list-name { font-size: 1rem; }
  .menu-list-detail { display: none; }
}