/* Studio Rühlmann – Gestaltung */

/* IBM Plex, SIL Open Font License 1.1 (siehe fonts/OFL.txt) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }

:root {
  --text: #1a1a1a;
  --muted: #5c5c5c;      /* Nebeninformationen */
  --inactive: #767676;   /* inaktive Filter, gerade noch ausreichender Kontrast (4,5:1) */
  --rule: #1a1a1a;       /* Trennlinien */
  --bg: #ffffff;
  --block: 75rem;
  --side: clamp(1rem, 4vw, 3rem);
  /* Spaltenabstand des gemeinsamen 3-Spalten-Rasters (Projekte, Info, Kontakt, Fußbereich) */
  --gutter: clamp(1.5rem, 3vw, 3rem);
  --font-text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; overflow-anchor: none;
  /* Platz für die Scrollleiste immer freihalten, damit Seiten mit und ohne Scrollleiste nicht seitlich springen */
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  /* Fußbereich sitzt auch bei wenig Inhalt am unteren Bildschirmrand */
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }   /* AVIF-Hülle: das Bild verhält sich wie ohne Hülle */
a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--bg); padding: 0.5rem 1rem; z-index: 40; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-header, main, .site-footer {
  width: 100%; box-sizing: border-box;
  max-width: calc(var(--block) + 2 * var(--side));
  margin: 0 auto;
  padding-left: var(--side); padding-right: var(--side);
}

/* Logo-Schrift für Navigation, Überschriften und Angaben */
.main-nav, h1, h2, .meta, .facts, .toggle, .site-footer, figcaption {
  font-family: var(--font-mono);
}
.main-nav, .meta, .facts, .toggle, .site-footer, figcaption { font-size: 0.875rem; }

h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.2; margin: 1rem 0 1.25rem; }
h2 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }

/* ---------- Kopfzeile: Logo links, Filter mittig (unten bündig mit dem Logo), Info/Contact oben rechts ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: 0.75rem clamp(1rem, 3vw, 2rem);
  padding-top: clamp(1rem, 2.5vh, 1.5rem); padding-bottom: clamp(1rem, 2vh, 1.5rem);
}
.site-logo { display: block; justify-self: start; grid-row: 1; grid-column: 1; }
/* Logogröße richtet sich nach der Bildschirmhöhe (12 %) und -breite (12 %), höchstens 150 px */
.site-logo img { display: block; width: clamp(72px, min(12vw, 12vh), 150px); height: auto; }
.header-nav { display: contents; }
.filter {
  grid-row: 1; grid-column: 2; align-self: end;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem;
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1;
  margin-bottom: -0.15em; /* Schriftlinie genau auf der Unterkante des Logos */
}
.filter a { color: var(--inactive); text-decoration: none; transition: color 0.2s; }
.filter a:hover, .filter a[aria-current="true"] { color: var(--text); }
.filter-empty { text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 0.875rem; }
.main-nav { grid-row: 1; grid-column: 3; justify-self: end; display: flex; gap: 1.5rem; }
@media (max-width: 48rem) {
  .site-header { grid-template-columns: auto 1fr; }
  .main-nav { grid-column: 2; }
  .filter { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; row-gap: 0.6rem; margin: 0.5rem 0 0; }
}
.main-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; }
.main-nav a:hover, .main-nav a[aria-current="page"] { text-decoration: underline; }


/* ---------- Projekte ---------- */
#projects { scroll-margin-top: var(--header-h, 8rem); }
.project-list { list-style: none; margin: 0; padding: 0; }
.project-item {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: var(--header-h, 8rem);
}
.project-item:last-child, .project-item.last-visible { border-bottom: 0; }

/* gemeinsames Raster: 3 gleiche Spalten; Text in Spalte 1, Bilder/Beschreibung in Spalte 2–3 */
.overview, .more-text {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem var(--gutter); align-items: start;
}
.overview > :first-child, .more-text > :first-child { grid-column: 1; }
.overview > :nth-child(2), .more-text > :nth-child(2) { grid-column: 2 / span 2; }
.overview { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.project-text h2, .project-title { margin: 0 0 0.5rem; }
.project-title { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.project-link { text-decoration: none; }
.project-link:hover { text-decoration: underline; }
/* Kundenstimme im Projekt: unter dem Projekttext, in der Schrift der Angaben */
.project-quote { margin: 2rem 0 0; }
.project-quote p { font-family: var(--font-mono); font-size: 1.125rem; line-height: 1.45; margin: 0; }
.project-quote p::before { content: "\201C"; }
.project-quote p::after { content: "\201D"; }
.project-quote footer { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); margin-top: 0.5rem; }

/* Archiv: kompakte Liste im 3-Spalten-Raster (Titel | Kategorie | Jahr), Bild erst beim Aufklappen */
.archive-list { list-style: none; margin: 0; padding: clamp(2rem, 4vw, 3rem) 0 0; }
.archive-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter);
  padding: 0.35rem 0; text-decoration: none;
  font-family: var(--font-mono); font-size: 0.875rem;
}
.archive-cat, .archive-year { color: var(--muted); }
.archive-row:hover .archive-title, .archive-item.open .archive-title { text-decoration: underline; }
.archive-detail:not([hidden]) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem var(--gutter);
  padding: 0.75rem 0 clamp(2rem, 4vw, 3rem); align-items: start;
}
.archive-text { grid-column: 1; }
.archive-text .summary { margin: 0 0 1rem; }
.archive-more { font-family: var(--font-mono); font-size: 0.875rem; margin: 0; }
.archive-more a { text-decoration: none; }
.archive-more a:hover { text-decoration: underline; }
.archive-image { grid-column: 2 / span 2; margin: 0; }
.archive-image img { width: 100%; }
@media (max-width: 48rem) {
  .archive-row { grid-template-columns: 1fr auto; }
  .archive-cat { grid-row: 2; grid-column: 1; }
  .archive-year { grid-row: 1; grid-column: 2; }
  .archive-detail:not([hidden]) { grid-template-columns: 1fr; }
  .archive-text, .archive-image { grid-column: 1; }
  .archive-image { order: -1; }
}

/* Projektseite (/projects/…/): wie ein aufgeklapptes Projekt auf der Startseite */
.project-page { padding-top: clamp(2rem, 4vw, 3rem); }
/* Unter dem Projekt: zurück links, nächstes Projekt rechts */
.project-nav {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem var(--gutter);
  font-family: var(--font-mono); font-size: 0.875rem; margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.project-nav a { text-decoration: none; }
.project-nav a:hover { text-decoration: underline; }
.next-link { margin-left: auto; text-align: right; }
.meta { color: var(--muted); margin: 0 0 0.25rem; }
.summary { margin: 0; }

/* Titelbild: ein Querformat oder zwei Hochkantbilder nebeneinander */
.hero { display: grid; gap: var(--gutter); }
.hero-2 { grid-template-columns: 1fr 1fr; }
.hero figure { margin: 0; }
.hero img { width: 100%; }

/* „Show more“ über der Trennlinie, aufgeklappter Teil schließt ohne Linie an */
.more-bar { display: flex; justify-content: center; padding: 0 0 1rem; }
.more { padding-top: clamp(0.5rem, 1.5vw, 1rem); }
.less-bar { padding-top: 1.5rem; }
.project-item.collapsed .more { display: none; }
.toggle {
  background: none; border: 0; padding: 0.25rem 0; margin: 0; color: var(--text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.toggle:hover { color: var(--muted); }

.more-text { margin-bottom: clamp(2rem, 4vw, 3rem); }
.more-text .text { max-width: 44rem; }
.more-text .text h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.more-text .text ul { padding-left: 1.2rem; list-style: disc; }
.more-text .text > :first-child { margin-top: 0; }

/* Karussell: alle weiteren Fotos, gleiche Höhe, Hochkantbilder mittig */
.gallery { min-width: 0; }
.gallery-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.slide-frame { aspect-ratio: 3 / 2; max-height: 80vh; max-height: 80svh; width: 100%; }
.slide-frame img { width: 100%; height: 100%; object-fit: contain; }
.slide figcaption { text-align: center; }
.gallery-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.875rem; }
.gallery-nav button { background: none; border: 0; padding: 0.25rem 0.5rem; font: inherit; font-size: 1rem; color: var(--text); cursor: pointer; }
.gallery-count { min-width: 3.5em; text-align: center; color: var(--muted); }
/* Handy: jedes Foto in voller Breite, Hochkantfotos dürfen höher werden (bis 85 % der Bildschirmhöhe).
   Querformate stehen dann mittig in der Höhe des größten Fotos, die Pfeile bleiben an derselben Stelle. */
@media (max-width: 48rem) {
  .gallery-track { align-items: center; }
  .slide-frame { aspect-ratio: auto; max-height: none; }
  .slide-frame img { height: auto; max-height: 85vh; max-height: 85svh; margin: 0 auto; }
}

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.5rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
figcaption { color: var(--muted); margin-top: 0.5rem; }

@media (max-width: 48rem) {
  .overview, .more-text { grid-template-columns: 1fr; }
  .overview > *, .more-text > * { grid-column: 1 !important; }
  .hero { order: -1; }
}

/* ---------- Unterseiten ---------- */
.text { max-width: 40rem; }
.page .text { margin-bottom: 3rem; }
.page .text h2 { margin-top: 2rem; }
.page .text ul { padding-left: 1.2rem; }
.page-image { margin: 0 0 2.5rem; container-type: inline-size; }
.page-image img.portrait { width: auto; max-height: 80vh; max-height: calc(100cqw * 2 / 3); }
main { flex: 1 0 auto; }
.site-header, .site-footer { flex: none; }

.label { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 400; color: var(--muted); margin: 0 0 1rem; }
.small { font-size: 0.875rem; font-family: var(--font-mono); }
.muted { color: var(--muted); }
address { font-style: normal; font-family: var(--font-mono); line-height: 1.7; margin-bottom: 1rem; }
.contact-list { gap: 0.5rem 2rem; }
.contact-note { max-width: 34rem; margin: 0 0 1.25rem; }
.contact-list dd a { text-decoration: none; }
.contact-list dd a:hover { text-decoration: underline; }

/* Kontakt: Werkstatt | Kontaktwege, darunter Linie und Jobs */
.contact-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem var(--gutter);
  /* oben (unter der Kopfzeile) gleich viel Luft wie unten bis zur Linie */
  padding: clamp(2.5rem, 5.5vw, 5rem) 0;
}
.contact-grid > * > :last-child { margin-bottom: 0; }
.jobs { border-top: 1px solid var(--rule); padding-top: clamp(2.5rem, 5vw, 4rem); }
.contact-grid > :first-child { grid-column: 1; }
.contact-grid > :nth-child(2) { grid-column: 2 / span 2; }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--gutter); }
.jobs .text { grid-column: 2 / span 2; max-width: 44rem; }
.jobs .text h2 { margin-top: 0; }

/* Info: Zeilen wie auf der Startseite, getrennt durch schwarze Linien.
   Erste Zeile: Zitat und Einleitung links (2/3), Hochkantfoto rechts (1/3).
   Weitere Zeilen: Beschriftung links (1/3), Inhalt rechts (2/3). */
.info-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem var(--gutter); align-items: start;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
}
.info-row > :first-child { grid-column: 1; }
.info-row > :nth-child(2) { grid-column: 2 / span 2; }
.info-top { border-top: 0; padding-top: clamp(1rem, 3vw, 2rem); align-items: stretch; }
.info-top > .info-intro { grid-column: 1 / span 2; }
.info-top > .info-image { grid-column: 3; }
.info-top.no-image > .info-intro { grid-column: 1 / -1; }
/* Zitat oben, Fließtext unten: die letzte Zeile steht auf der Unterkante des Fotos */
.info-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.info-intro .quote { margin: 0; }
.info-intro .text { margin-bottom: 0; }
.info-intro .text > :last-child { margin-bottom: -0.44em; }
.info-image { margin: 0; position: relative; }
/* Fotograf: unter dem Porträt, ohne die Ausrichtung von Text und Fotounterkante zu verschieben */
.info-credit { position: absolute; top: 100%; left: 0; right: 0; text-align: right; }
.info-image img { width: 100%; }
.page-info .text { max-width: none; }
.page-info .text > :first-child { margin-top: 0; }
.page .info-section { margin-bottom: 0; }
.info-section > :last-child { margin-bottom: 0; }   /* Abstand bis zur nächsten Linie wie oben */
.quote { margin: 0 0 2rem; }
.quote p {
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; margin: 0;
}
.quote p::before { content: "\201C"; }
.quote p::after { content: "\201D"; }
.info-row > .label { margin: 0.2rem 0 0; }
.page .info-section ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gutter);
}
/* Kundenstimmen (> Zitat, darunter — Name): untereinander, auch für lange Texte mit mehreren Absätzen */
.testimonial { margin: 0 0 clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.testimonial p { margin: 0 0 0.75rem; }
.testimonial p:first-child::before { content: "\201C"; }
.testimonial p:last-of-type::after { content: "\201D"; }
.testimonial footer { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); margin-top: 1rem; }
.testimonial footer::before { content: "\2014\00a0"; }
.li-note { display: block; color: var(--muted); }   /* Zusatzzeile in Listen, z. B. Preisrahmen */
.info-section li strong { display: block; font-family: var(--font-mono); font-weight: 500; }

@media (max-width: 48rem) {
  .contact-grid, .info-row { grid-template-columns: 1fr; }
  .info-row > *, .info-top > .info-intro, .info-top > .info-image { grid-column: 1 !important; }
  .info-intro .text > :last-child { margin-bottom: 0; }
  .jobs { grid-template-columns: 1fr; }
  .jobs .text, .contact-grid > * { grid-column: 1 !important; }
  .info-image { order: -1; }
  .info-credit { position: static; }
  .page .info-section ul { grid-template-columns: 1fr; }
}

/* ---------- Fußbereich: Aufruf links, Kontaktwege Mitte, Rechtliches rechts ---------- */
.site-footer {
  margin-top: 6rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem var(--gutter); align-items: baseline;   /* erste Zeilen aller Spalten auf einer Grundlinie */
  padding: clamp(2rem, 4vw, 3rem) var(--side) clamp(4rem, 7vw, 6rem);   /* unten etwas mehr Luft */
  position: relative;
}
/* Linie nur über dem Inhaltsblock, nicht über den Seitenrändern */
.site-footer::before {
  content: ""; position: absolute; top: 0; left: var(--side); right: var(--side);
  border-top: 1px solid var(--rule);
}
.site-footer > .cta-heading { grid-column: 1; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.2; margin: 0; }
.site-footer > .contact-list { grid-column: 2; margin: 0; }
/* Rechte Spalte: auf Höhe der Kontaktwege, gleicher Zeilenabstand, rechtsbündig */
.footer-legal {
  grid-column: 3; justify-self: end; text-align: right;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.5rem; color: var(--muted);
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover, .footer-legal a[aria-current="page"] { text-decoration: underline; }
/* Schreibweise wie Info/Contact in der Kopfzeile */
.legal-link a { text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 48rem) {
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > * { grid-column: 1 !important; }
  .site-footer { row-gap: 2rem; }
  .footer-legal { justify-self: start; text-align: left; }
}

/* ---------- Startseite: Logo mit Videos (nur mit JavaScript und ohne „Bewegung reduzieren“) ---------- */
.hero-logo, .hero-space { display: none; }
html.has-hero .hero-space { display: block; height: calc(100vh - var(--header-h, 8rem)); height: calc(100svh - var(--header-h, 8rem)); }
html.has-hero #projects { min-height: calc(100vh - var(--header-h, 8rem)); min-height: calc(100svh - var(--header-h, 8rem)); }
html.has-hero .site-logo img { opacity: 0; }
html.has-hero .site-header .filter, html.has-hero .site-header .main-nav { opacity: 0; visibility: hidden; }
html.has-hero .hero-logo {
  display: block;
  position: fixed; left: 0; top: 0; z-index: 30;
  width: 1px; height: 1px;
  background: #000;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  opacity: 0;
  -webkit-mask: url("logo.svg") center / 100% 100% no-repeat;
  mask: url("logo.svg") center / 100% 100% no-repeat;
}
html.has-hero .hero-logo.ready { opacity: 1; }
.hero-media, .hero-media video, .hero-canvas, .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Standbild: sofort sichtbar, die Videos blenden darüber ein */
.hero-poster { object-fit: cover; }
.hero-canvas:not(.drawn) { visibility: hidden; }
.hero-media video { object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.hero-media video.on { opacity: 1; }
/* mit WebGL: Videos laufen unsichtbar unter der Zeichenfläche, die Übergänge rechnet das Canvas */
.hero-media.gl video { opacity: 1; transition: none; }
.hero-canvas { display: block; }