/* +CHRISTOWZIK SCHEUCH DESIGN – statische Fassung (ohne Cargo).
   Werte aus dem Cargo-Stylesheet der Website übernommen; ".mobile" ist hier eine Media-Query. */

/* Schriften (selbst gehostet, SIL Open Font License, frei auch kommerziell):
   Ersatz für "Diatype Variable" (Dinamo), die Cargo nur für Cargo-Seiten lizenziert.
   Entscheidung 1.11.2026: Fließtext Hanken Grotesk, Laufbänder Inter Tight (Familie "Laufband",
   auf Grundlinie und Größe der Diatype eingemessen). Symbole → ◇ ◁ ♡ aus Inter Tight ("CSD Symbole"). */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Italic-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Italic-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "CSD Symbole";
  src: url("/assets/fonts/InterTight-symbole.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+2190-2199, U+25C1, U+25C7, U+2661;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/InterTight-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/InterTight-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/InterTight-Italic-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/InterTight-Italic-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Laufbänder: Inter Tight, auf Diatype-Versalhöhe verkleinert (gemessen: Inter Tight 3,9 % größer).
   Ohne ascent-/descent-override: Safari kennt diese Angaben nicht, dort stand der Text tiefer (mehr Luft über als unter dem Text).
   Die Lage zwischen den Linien regelt jetzt ein Versatz für alle Browser gleich (siehe .marquee unten). */
@font-face {
  font-family: "Laufband";
  src: url("/assets/fonts/InterTight-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  size-adjust: 96.2%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Laufband";
  src: url("/assets/fonts/InterTight-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  size-adjust: 96.2%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Laufband";
  src: url("/assets/fonts/InterTight-symbole.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  size-adjust: 96.2%;
  unicode-range: U+2190-2199, U+25C1, U+25C7, U+2661;
}

:root {
  --schrift: "CSD Symbole", "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Mischung (Wunsch 1.11.2026): Fließtext Hanken Grotesk, Laufbänder Inter Tight (siehe .marquee) */
  /* Strichstärken wie Diatype (gemessen), umgerechnet für Hanken Grotesk */
  --w250: 231; --w300: 303; --w400: 398; --w440: 490; --w700: 694;
  --text: rgba(0, 0, 0, 0.85);
  --text-2: rgba(0, 0, 0, 0.75);
}
/* Cargo skaliert die Grundgröße mit dem Fenster: kleinere Seite bestimmt (gemessen: 1,44 vh bzw. 1,686 vw) */
html { font-size: min(1.44vh, 1.686vw); -webkit-text-size-adjust: 100%; }
/* Handy: Cargo rechnet 1rem = 2,24 % der Breite, bei breiten, niedrigen Fenstern begrenzt auf 0,411 vw + 1,0285 vh
   (an 13 Fenstergrößen nachgemessen, 1.11.2026; vorher pauschal 1,8 vw – auf Handys rund 20 % zu klein) */
@media (max-width: 700px) { html { font-size: min(2.24vw, calc(.41143vw + 1.0285vh)); } }

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--text); font-family: var(--schrift);
  font-size: 1.4rem; line-height: 1.3; font-weight: var(--w400); -webkit-font-smoothing: antialiased; }
@media (max-width: 700px) { body { font-size: 2rem; } }
a { color: #000; text-decoration: underline; }
a:active, .zoom img:active { opacity: .7; }
img, video { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
sub { position: relative; vertical-align: baseline; top: .3em; }
sup { position: relative; vertical-align: baseline; top: -.4em; }
ul { margin: 0; padding: 0 0 0 2em; } ol { margin: 0; padding: 0 0 0 2.5em; }
/* wie Cargo (nachgemessen Impressum 1.11.2026): Absätze und Zwischentitel mit Abstand, Zwischentitel in Textgröße */
p, h3 { margin: 1em 0; } h4 { margin: 1.33em 0; } h3, h4 { font-size: 1em; }

.kopf, .inhalt, .fuss { padding: 3rem; }
.kopf { padding-bottom: 5rem; }
.fuss { padding-top: 0; }
.start .fuss { padding-top: 0; }
.nur-mobil { display: none; }
@media (max-width: 700px) {
  .nur-desktop { display: none; }
  .nur-mobil { display: block; }
  /* Cargo: .page-content { padding: 3rem } gilt auch auf dem Handy (dort 1rem = 1,8 vw, nachgemessen 1.11.2026) */
  .kopf, .inhalt, .fuss { padding: 3rem; }
  .kopf { padding-bottom: 3rem; }
  body:not(.start) .fuss { display: none; }   /* Cargo-Mobilseiten haben keinen Fuß, nur die Startseite */
}

hr { background: var(--text); border: 0; height: .1rem; display: block; margin: 2rem 0 3rem; }

h1, .heading-1-headlines { font-family: var(--schrift); font-weight: var(--w250); margin: 0; font-size: 10rem; line-height: .9;
  color: var(--text); letter-spacing: 0; display: block; }
h2 { font-family: var(--schrift); font-weight: var(--w300); margin: 0; color: var(--text-2); font-size: 3.2rem; line-height: 1.1; }
h2 a, h1 a, .heading-1-headlines a { color: inherit; text-decoration: none; }
.caption { font-size: 1.1rem; line-height: 1.2; display: block; color: var(--text); }
.caption a { color: inherit; }
.bodycopy-ohne-link-unterstr { font-size: 1.35rem; line-height: 1.3; display: block; }
.bodycopy-ohne-link-unterstr a, a.bodycopy-ohne-link-unterstr { text-decoration: none; color: #000; }
.bodycopy-kleiner { font-size: 1.25rem; line-height: 1.3; display: block; }
.bodycopy-ohne-link-unterstr-copy a { color: #000; text-decoration: none; }
.bodycopy-ohne-link-unterstr-copy { font-size: 1.5rem; font-weight: var(--w300); line-height: .5; display: block; text-decoration: none; color: #000; }
.h1-mobile-headlines { font-size: 10rem; font-weight: var(--w300); line-height: .5; display: block; }
.projektauswahl-menu a { color: inherit; text-decoration: none; }
.projektauswahl-menu { font-weight: var(--w250); margin: 0; font-size: 10rem; line-height: .5; color: var(--text); display: block; text-decoration: none; white-space: nowrap; }
.bildunterschriften { font-size: 1.1rem; line-height: 1.2; display: block; }
b, strong { font-weight: var(--w700); }
/* Cargo: --font-scale multipliziert die Grundgröße der nächsten Textklasse (bzw. der Bodycopy), nicht die
   aktuelle Schriftgröße – auch verschachtelt (nachgemessen am Cargo-Original 1.11.2026). --fs = Grundgröße. */
body { --fs: 1.4rem; }
h1, .heading-1-headlines, .projektauswahl-menu, .h1-mobile-headlines { --fs: 10rem; }
h2 { --fs: 3.2rem; }
.caption, .bildunterschriften { --fs: 1.1rem; }
.bodycopy-ohne-link-unterstr { --fs: 1.35rem; }
.bodycopy-kleiner { --fs: 1.25rem; }
.bodycopy-ohne-link-unterstr-copy { --fs: 1.5rem; }
[style*="--font-scale"][style] { font-size: calc(var(--font-scale) * var(--fs, 1em)); }
@media (max-width: 700px) {
  h1, .heading-1-headlines { font-weight: var(--w440); font-size: 4rem; }
  .caption { font-size: 1.4rem; }
  .bodycopy-ohne-link-unterstr, .bodycopy-kleiner, .bodycopy-ohne-link-unterstr-copy { font-size: 2rem; }
  .h1-mobile-headlines { font-size: 2rem; }
  .projektauswahl-menu { font-weight: var(--w440); font-size: 4rem; }
  body, .bodycopy-ohne-link-unterstr, .bodycopy-kleiner, .bodycopy-ohne-link-unterstr-copy, .h1-mobile-headlines { --fs: 2rem; }
  h1, .heading-1-headlines, .projektauswahl-menu { --fs: 4rem; }
  .caption { --fs: 1.4rem; }
}

/* Spalten (Cargo: column-set / column-unit, 12er-Raster) */
.cs { display: flex; align-items: flex-start; gap: var(--g, 1rem); width: 100%; }
.cu { flex: 0 0 calc(var(--span) / 12 * (100% + var(--g, 1rem)) - var(--g, 1rem)); min-width: 0; }
.cu[style*="--span:auto"] { flex: 1 1 0; }
/* Cargo: zwei direkt aufeinanderfolgende Spaltenblöcke haben 1rem Abstand (nachgemessen) */
.cs + .cs { margin-top: 1rem; }
/* Startseite: der Inhaltsbereich ist dort leer (Intro steht im Fuß) – kein Innenabstand, wie im Original */
@media (min-width: 701px) { .start .inhalt { padding: 0; } }
@media (max-width: 700px) {
  .cs:not(.nostack) { flex-direction: column; gap: var(--mg, 1rem); }
  .cs:not(.nostack) > .cu { flex: none; width: 100%; }
  .cs:not(.keepempty) > .cu:empty { display: none; }
}

/* Bilder (Cargo: media-item) */
.mi { display: inline-block; vertical-align: top; margin: 0; width: var(--scale, 100%); max-width: 100%; position: relative; }
.mi img, .mi video { display: block; width: 100%; height: auto; }
.mi > a { display: block; }
.mi .caption { margin-top: .5em; }
/* feste Bildhöhe (Cargo: scale in rem mit limit-by=height) */
.mi.hoch { width: auto; }
.mi.hoch img { height: var(--hoehe); width: auto; max-width: none; }
.zoom img { cursor: zoom-in; }
.eyeroll img { transition: none; will-change: transform; }
/* frei verschiebbare Bilder (Cargo: uses=drag) */
.mi.ziehen { cursor: grab; touch-action: none; position: relative; }
.mi.ziehen.greift { cursor: grabbing; }
.mi.ziehen img { -webkit-user-drag: none; pointer-events: none; }

/* Galerien */
.g-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--g); align-items: start; }
.g-grid .mi { width: 100%; }
/* Raster mit horizontal-align center: letzte, unvollständige Zeile mittig */
.g-grid.zentriert { display: flex; flex-wrap: wrap; justify-content: center; }
.g-grid.zentriert > .mi { flex: none; width: calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); }
@media (max-width: 700px) { .g-grid.zentriert > .mi { width: calc((100% - (var(--mcols, var(--cols)) - 1) * var(--mgx)) / var(--mcols, var(--cols))); } }
.g-grid .caption, .g-justify .caption { margin-bottom: 2em; }
@media (max-width: 700px) { .g-grid { grid-template-columns: repeat(var(--mcols, var(--cols)), minmax(0, 1fr)); gap: var(--mg); } }

.g-justify { display: flex; flex-wrap: wrap; gap: var(--g); }
.g-justify .mi { width: auto; flex: 0 0 auto; }
.g-justify .mi img { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 700px) { .g-justify { gap: var(--mg); } }

/* Spalten-Galerie (Cargo gallery-columnized) – Verteilung auf die Spalten macht site.js */
.g-cols { display: flex; align-items: flex-start; gap: var(--gx); }
.g-cols > .g-spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gy); }
.g-cols .mi { width: 100%; }
.g-cols .caption { margin-top: .6em; margin-bottom: 2.5em; }   /* nachgemessen: 8 px über, 32 px unter der Bildunterschrift */
@media (max-width: 700px) { .g-cols { gap: var(--mgx); } .g-cols > .g-spalte { gap: var(--mgy); } }

.g-slides { position: relative; width: 100%; display: grid; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.g-slides img { -webkit-user-drag: none; }
/* Cargo: die Diashow ist so hoch wie ihr höchstes Bild, kleinere stehen darin oben/mittig/unten (vertical-align, Standard mittig) */
.g-slides > .mi { width: 100%; grid-area: 1 / 1; align-self: var(--va, center); }
@media (max-width: 700px) { .g-slides > .mi { align-self: var(--mva, var(--va, center)); } }
/* Überblenden (transition-type fade) */
.g-slides.blenden > .mi { opacity: 0; transition: opacity var(--dauer, 1s) cubic-bezier(.24, 0, .29, 1); }
.g-slides.blenden > .mi.aktiv { opacity: 1; z-index: 1; }
/* Schieben (Cargo-Standard): wartende Bilder liegen rechts außerhalb, das aktive in der Mitte */
.g-slides.schieben { overflow: hidden; }
.g-slides.schieben > .mi { transform: translateX(100%); transition: transform var(--dauer, .8s) cubic-bezier(.445, .05, .55, .95); }
.g-slides.schieben > .mi.aktiv { transform: none; }
.g-slides > .mi.still { transition: none !important; }
.g-slides:not(.blenden):not(.schieben) > .mi:not(:first-child) { visibility: hidden; }
.g-slides .nav { position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%;
  background: rgba(87, 87, 87, .35); color: rgba(255, 255, 255, .9); cursor: pointer; font: 18px/30px sans-serif; padding: 0; }
.g-slides .nav.zurueck { left: 15px; } .g-slides .nav.vor { right: 15px; }

/* Laufbänder (Cargo: marquee-set) – Bewegung macht site.js (ziehbar, mit Schwung) */
.marquee { overflow-x: clip; overflow-y: visible; width: 100%; -webkit-user-select: none; user-select: none; }
/* Laufband-Schrift Inter Tight mit eigenen Stärken (gleiche Strichdicke wie Diatype) */
.marquee, .marquee * { font-family: "Laufband", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Seitentitel (H1) in Schrift und Strichstärke der Laufbänder (Wunsch 1.11.2026) */
h1, .heading-1-headlines, .heading-1-headlines * { font-family: "CSD Symbole", "Laufband", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --w250: 190; --w300: 310; --w400: 422; --w440: 430; --w700: 609; }
.marquee { --w250: 190; --w300: 310; --w400: 422; --w440: 430; --w700: 609; }   /* Laufbänder auf Wunsch feiner als Diatype (1.11.2026: 248 → 190, mobil 484 → 430) */
/* Lage zwischen den Linien wie im Original (Versal 21 px unter der oberen, Grundlinie 19 px über der unteren Linie):
   über ascent-/descent-override der Schrift "Laufband" eingestellt, gilt so auch auf dem Handy */
.marquee[data-pointer="1"]:not([data-bounce]) { cursor: grab; }
.marquee[data-pointer="1"]:not([data-bounce]):active { cursor: grabbing; }
.marquee-inner { display: flex; width: max-content; will-change: transform; }
.marquee-track { flex: none; padding-right: .3em; white-space: nowrap; }
/* Text mittig zwischen den Linien: gleicher Abstand über den Versalien und unter der Grundlinie (nachgemessen 1.11.2026) */
.marquee .projektauswahl-menu, .marquee .bodycopy-ohne-link-unterstr-copy { position: relative; top: -.0449em; }
.marquee[data-bounce] .marquee-track { padding-right: 0; }   /* pendelndes Band stößt genau an den Rand */
.marquee-track .cs { width: auto; }
.marquee a { -webkit-user-drag: none; }

.icon { width: .9em; height: .9em; vertical-align: -.05em; display: inline-block; }

/* Lightbox (Cargo: quick view) */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: #fff; display: grid; place-items: center; padding: 3rem 4rem; cursor: zoom-out;
  opacity: 0; transition: opacity .2s ease; }
.lightbox.offen { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(0, 0, 0, .15); color: #fff; font: 600 18px/28px sans-serif; text-align: center; }
.lightbox button:hover { background: rgba(0, 0, 0, .3); }
.lightbox button[hidden] { display: none; }
.lb-zu { top: 16px; right: 16px; }
.lb-zurueck { left: 16px; top: 50%; margin-top: -14px; }
.lb-vor { right: 16px; top: 50%; margin-top: -14px; }

/* Bücherregal aus dem Umschlagarchiv (Books-Seite): drei Aufnahmen als exakte Drittel, darüber die Buchrücken */
.regal-books .buecherwand { position: relative; display: flex; gap: 0; line-height: 0; }
.regal-books .buecherwand img { flex: 1 1 0; width: 33.3333%; height: auto; display: block; }
.regal-books .rueckenwand { position: absolute; inset: 0; line-height: 0; }
.regal-books .ruecken { position: absolute; padding: 0; border: 0; background: transparent; cursor: default; }
.regal-books .ruecken::after { content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.92), 0 0 0 1px rgba(0,0,0,.4); opacity: 0; transition: opacity .12s ease; }
.regal-books .ruecken:hover::after, .regal-books .ruecken:focus-visible::after { opacity: 1; }
.regal-books .ruecken:focus-visible { outline: none; }
.rkarte { position: fixed; z-index: 40; pointer-events: none; background: #fff; padding: 9px;
  box-shadow: 0 8px 30px rgba(0,0,0,.26); max-width: 230px; line-height: normal; }
.rkarte[hidden] { display: none; }
.rkarte img { width: 186px; height: auto; display: block; background: rgba(0,0,0,.05); }
.rkarte .ohne-bild { display: block; width: 186px; aspect-ratio: 1/1.34; }
.rkarte .bu { font-size: 1.1rem; line-height: 1.2; margin: 8px 0 0; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rkarte .bu b { font-weight: var(--w700); }