/* ==========================================================================
   Sessinghaus 3D — Website-Stylesheet
   --------------------------------------------------------------------------
   Richtung "Werkstatt": dunkles Grundschema, Renderings randlos und gross,
   Haarlinien statt Flaechen, ein einziger Typo-Kontrast (Archivo / Plex Mono).
   Helles Schema ueber prefers-color-scheme, kein JavaScript.

     1. Schriften
     2. Tokens (dunkel = Standard, hell = prefers-color-scheme: light)
     3. Reset und Grundlagen
     4. Layout
     5. Kopf- und Fusszeile
     6. Startseite
     7. Rechtsseiten
     8. Responsive
     9. Print
   ========================================================================== */

/* 1. Schriften ============================================================ */
/* Archivo als Variable Font, selbst gehostet (SIL OFL 1.1, Lizenztext liegt
   als Archivo-OFL.txt daneben). Die Datei aus dem Google-Fonts-Paket ist eine
   TTF mit den Achsen wdth und wght; eine WOFF2-Fassung waere rund ein Drittel
   so gross — falls sie spaeter vorliegt, hier nur Pfad und format tauschen. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('../fonts/archivo-variable.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                 U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                 U+A720-A7FF;
}

/* 2. Tokens =============================================================== */
/* Kontrastwerte gemessen gegen die jeweilige Grundflaeche. Untergrenze 4,5:1. */

:root {
  --bg:          #0D0E0F;
  --bg-header:   rgba(13, 14, 15, 0.92);
  --panel:       #111314;   /* abgesetzte Baender                            */
  --line:        #26292B;   /* jede Trennlinie                               */
  --line-strong: #3A3E40;   /* Rahmen, grosse Ziffern                        */
  --ink:         #EDEBE7;   /* Grundschrift        — 15,0:1                  */
  --ink-strong:  #FFFFFF;   /* Ueberschriften      — 18,2:1                  */
  --lead:        #B4B6B4;   /* Vorspann            —  9,3:1                  */
  --muted:       #9A9C9B;   /* Fliesstext sekundaer—  6,9:1                  */
  --meta:        #8B8E8D;   /* Mono-Beschriftungen —  5,7:1                  */
  --hatch:       #1B1E1F;   /* Schnittschraffur                              */

  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --container: 1240px;
  --pad:       32px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:          #EEECE5;
    --bg-header:   rgba(238, 236, 229, 0.92);
    --panel:       #E5E2D9;
    --line:        #D3CFC4;
    --line-strong: #B0AB9E;
    --ink:         #26251F;   /* — 11,8:1 */
    --ink-strong:  #0F0F0B;   /* — 16,3:1 */
    --lead:        #46443C;   /* —  8,0:1 */
    --muted:       #55534A;   /* —  6,4:1 */
    --meta:        #6B6860;   /* —  4,7:1 */
    --hatch:       #DAD6CB;
  }
}

/* Umschalter: die Checkbox #scheme liegt unsichtbar im <body>, das Label
   sitzt in der Kopfzeile. Angehakt kehrt sie das Systemschema um — kein
   JavaScript, kein Cookie, dafuer gilt die Wahl nur fuer die offene Seite. */

body:has(#scheme:checked) {
  --bg:          #EEECE5;
  --bg-header:   rgba(238, 236, 229, 0.92);
  --panel:       #E5E2D9;
  --line:        #D3CFC4;
  --line-strong: #B0AB9E;
  --ink:         #26251F;   /* — 11,8:1 */
  --ink-strong:  #0F0F0B;   /* — 16,3:1 */
  --lead:        #46443C;   /* —  8,0:1 */
  --muted:       #55534A;   /* —  6,4:1 */
  --meta:        #6B6860;   /* —  4,7:1 */
  --hatch:       #DAD6CB;
}

@media (prefers-color-scheme: light) {
  body:has(#scheme:checked) {
    --bg:          #0D0E0F;
    --bg-header:   rgba(13, 14, 15, 0.92);
    --panel:       #111314;
    --line:        #26292B;
    --line-strong: #3A3E40;
    --ink:         #EDEBE7;
    --ink-strong:  #FFFFFF;
    --lead:        #B4B6B4;
    --muted:       #9A9C9B;
    --meta:        #8B8E8D;
    --hatch:       #1B1E1F;
  }
}

/* 3. Reset und Grundlagen ================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--ink-strong);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 {
  font-size: clamp(38px, 5.6vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
h2 { font-size: clamp(26px, 3.2vw, 32px); }
h3 { font-size: 22px; }

p { margin: 0 0 16px; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-underline-offset: 0.18em; }
a:hover { color: var(--ink-strong); }

strong, b { font-weight: 600; color: var(--ink-strong); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 16px; color: var(--bg); }

/* Beschriftung in Versalien, Mono — die einzige Versalform der Seite */
.label,
.meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
}
.label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
}

/* 4. Layout =============================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: 112px; border-top: 1px solid var(--line); }
.section--panel { background: var(--panel); }

/* Zweispaltig: links die Abschnittsmarke, rechts der Inhalt */
.split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
.split__head { position: sticky; top: 120px; }
.split__head h2 { margin: 0; }

/* 5. Kopf- und Fusszeile ================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-header);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 18px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}

.site-header__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a,
.lang-switch a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
  text-decoration: none;
}
.site-nav a:hover,
.lang-switch a:hover { color: var(--ink); }

.lang-switch {
  display: flex;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.lang-switch [aria-current] { color: var(--ink); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.scheme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.scheme-toggle span { color: var(--meta); transition: color 0.15s ease; }
.scheme-toggle:hover span { color: var(--ink); }
.scheme-toggle__sep { color: var(--line-strong); }

/* Das aktive Schema steht in Grundschrift, das andere in Beiwerkgrau. */
.scheme-toggle__dark { color: var(--ink); }
body:has(#scheme:checked) .scheme-toggle__dark { color: var(--meta); }
body:has(#scheme:checked) .scheme-toggle__light { color: var(--ink); }

@media (prefers-color-scheme: light) {
  .scheme-toggle__dark { color: var(--meta); }
  .scheme-toggle__light { color: var(--ink); }
  body:has(#scheme:checked) .scheme-toggle__dark { color: var(--ink); }
  body:has(#scheme:checked) .scheme-toggle__light { color: var(--meta); }
}

#scheme:focus-visible + * .scheme-toggle,
.scheme-toggle:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }

.site-footer { border-top: 1px solid var(--line); }
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  padding-block: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}
.site-footer p { margin: 0; max-width: none; }
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a { color: var(--meta); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* 6. Startseite =========================================================== */

/* — Hero ————————————————————————————————————————————————————— */

.hero .container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 80px;
  align-items: end;
  padding-block: 96px 64px;
}
.hero .container > * { min-width: 0; }
.hero h1 { margin-bottom: 32px; }
.hero__lead {
  max-width: 52ch;
  margin-bottom: 40px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--lead);
}
.hero__photo { margin: 0; }
/* Das Verhaeltnis folgt der geladenen Datei: ab 860 px das hohe 2:3-Portrait,
   darunter der 4:5-Ausschnitt. So wird nichts beschnitten, der Kopf bleibt
   vollstaendig im Bild. object-position haelt den Rest oben, falls doch. */
.hero__photo img {
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover;
  object-position: 50% 0%;   /* oben nichts abschneiden — Haare bleiben drauf */
  filter: grayscale(1) contrast(1.05);
}
.hero__photo figcaption { margin-top: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--bg); }
.btn--secondary { border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink-strong); }

/* — Bildband ueber die volle Breite ——————————————————————————— */

.band { position: relative; margin: 0; }
.band img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
}
.band figcaption {
  position: absolute;
  left: var(--pad);
  bottom: 24px;
  padding: 8px 14px;
  background: var(--bg-header);
  color: var(--ink);
}

/* — Leistungen als Zeilen, nicht als Karten ———————————————————— */

.rows { border-top: 1px solid var(--line); }
.rows > div {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 40px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.rows h3 { margin-bottom: 8px; }
.rows p { max-width: 56ch; margin: 0; color: var(--muted); }

/* — Arbeitsweise ——————————————————————————————————————————————— */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 34px;
  line-height: 1;
  color: var(--line-strong);
}
.steps h3 { font-size: 19px; margin-bottom: 10px; }
.steps p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* — Projekte: abwechselnd Bild links / rechts ——————————————————— */

.project {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 56px;
}
/* Bei jeder zweiten Kachel wechselt das Bild auf die rechte Seite. Dann muss
   auch die Spaltenteilung kippen, sonst steht das Bild in der schmalen
   Spalte und ist kleiner als das darueber. */
.project:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.project:nth-child(even) > figure { order: 2; }
.project h3 { font-size: 28px; margin-bottom: 14px; }
.project p { max-width: 48ch; color: var(--muted); }
.project figure { margin: 0; }
.project img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.project .meta { display: block; margin-bottom: 16px; }

/* Flaeche ohne Inhalt: schraffiert und beschriftet, nicht grau gefuellt */
.placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(-45deg,
              transparent 0 11px, var(--hatch) 11px 12px);
}

.note {
  max-width: 48ch;
  margin-top: 20px;
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
  font-size: 14px;
  line-height: 1.7;
  color: var(--meta);
}

/* — Ueber mich ————————————————————————————————————————————————— */

.lead-text {
  max-width: 60ch;
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--lead);
}

/* — Kontakt ———————————————————————————————————————————————————— */

.contact-intro { max-width: 56ch; margin-bottom: 48px; font-size: 19px; color: var(--muted); }
.contact-links { border-top: 1px solid var(--line); }
.contact-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.2vw, 24px);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-links a:hover { color: var(--ink-strong); }
.contact-links a span:last-child { flex: none; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 32px 0 0;
  max-width: none;
}

/* — Interaktion: Hover, Lightbox, Einblenden ————————————————————
   Alles in CSS. Kein JavaScript, keine externen Requests, und jede Bewegung
   schaltet sich unter prefers-reduced-motion ab. */

/* Leistungszeile hebt sich beim Ueberfahren ab. Der Innenabstand ist immer
   gesetzt und wird durch einen negativen Aussenabstand ausgeglichen — so
   springt die Textkante beim Hover nicht. */
.rows > div {
  padding-inline: 16px;
  margin-inline: -16px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rows > div:hover {
  background: var(--panel);
  border-bottom-color: var(--line-strong);
}

/* Abschnitte blenden beim Scrollen ein. Nur wo der Browser eine
   Scroll-Zeitachse kennt — sonst passiert schlicht nichts.
   Die Bildbaender bleiben bewusst aussen vor: sie reichen schon von oben ins
   Bild und wuerden dort sonst als dunkler Streifen unter dem Hero stehen. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section > .container {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 20%;
    }
    @keyframes reveal {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Vorher/Nachher: zwei Bilder uebereinander, das obere blendet beim Hover
   weg. Markup:
     <span class="swap">
       <img class="swap__after"  src="…-rendering.jpg"  alt="…">
       <img class="swap__before" src="…-cad.jpg"        alt="…">
     </span>
   Beide Dateien muessen aus derselben Kamera stammen und gleich gross sein. */
.swap { position: relative; display: block; }
.swap__before {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease;
}
/* Der Wechsel haengt am Scrollstand: waehrend das Band durchs Bild laeuft,
   blendet das Rendering weg und die Konstruktionsansicht darunter auf.
   Reine CSS-Scroll-Zeitachse, kein JavaScript. Wo der Browser sie nicht
   kennt oder Bewegung abgestellt ist, bleibt das Rendering stehen. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .swap__before {
      animation: swap-out linear both;
      animation-timeline: view();
      animation-range: cover 48% cover 68%;
    }
    @keyframes swap-out {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
  }
}

/* Rueckfall fuer Browser ohne Scroll-Zeitachse (derzeit Safari) und fuer
   abgeschaltete Bewegung: dort steht statt des Scroll-Wechsels ein
   Umschalter im Bild. Erscheint nur, wo er gebraucht wird. */
.band__switch { display: none; }

@supports not (animation-timeline: view()) {
  .band__switch {
    display: flex;
    position: absolute;
    right: var(--pad);
    bottom: 16px;
    padding: 7px 13px;
    background: var(--bg-header);
    border-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .band__switch {
    display: flex;
    position: absolute;
    right: var(--pad);
    bottom: 16px;
    padding: 7px 13px;
    background: var(--bg-header);
    border-left: 0;
  }
}

body:has(#ansicht:checked) .swap__before { opacity: 0; }
.band__switch .is-render { color: var(--ink); }
.band__switch .is-solid { color: var(--meta); }
body:has(#ansicht:checked) .band__switch .is-render { color: var(--meta); }
body:has(#ansicht:checked) .band__switch .is-solid { color: var(--ink); }

@media (max-width: 560px) {
  .band__switch { right: 0; bottom: 0; }
}

/* 7. Rechtsseiten ========================================================= */

.legal { padding-block: 64px 96px; }
.legal h1 { font-size: clamp(32px, 4.4vw, 56px); margin-bottom: 40px; }
.legal h2 {
  font-size: 22px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 32px; }
.legal h3 { font-size: 19px; margin-top: 24px; }
.legal p, .legal ul, .legal address { color: var(--muted); }
.legal address { font-style: normal; line-height: 1.75; }
.legal ul { max-width: 68ch; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--ink); }
.legal .note {
  max-width: 68ch;
  margin: 0 0 32px;
  padding: 16px 20px;
  border-left: 2px solid var(--line-strong);
  background: var(--panel);
}
.legal .updated {
  margin-top: 48px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}

.facts { max-width: 46rem; margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.facts > div:first-child { border-top: 1px solid var(--line); }
.facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  padding-top: 0.35em;
}
.facts dd { margin: 0; color: var(--ink); }
.facts dd small { display: block; margin-top: 4px; font-size: 14px; color: var(--meta); }

/* 8. Responsive =========================================================== */

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split__head { position: static; }
  .rows > div { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; gap: 48px; align-items: start; padding-block: 64px 48px; }
  .hero__photo { max-width: 320px; }
  .hero__photo img { aspect-ratio: 4 / 5; }
  .project,
  .project:nth-child(even) { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .project:nth-child(even) > figure { order: 0; }
  .section { padding-block: 72px; }
}

/* Die Kopfzeile bleibt auf jeder Breite oben stehen. Auf kleinen Schirmen
   wird sie dafuer kompakt gesetzt, sonst nimmt sie dreizeilig umgebrochen ein
   Drittel des Bildschirms ein. */
@media (max-width: 700px) {
  .site-header .container { padding-block: 12px; gap: 6px 16px; }
  .brand { font-size: 15px; gap: 10px; }
  .brand span { font-size: 10px; letter-spacing: 0.1em; }
  .site-nav ul { gap: 4px 14px; }
  .site-nav a, .lang-switch, .scheme-toggle { font-size: 11px; }
  .lang-switch, .scheme-toggle { padding-left: 14px; gap: 8px; }
  .hero .container { padding-block: 40px 40px; }
  .hero__photo { max-width: 240px; }
  .hero__photo img { object-position: 50% 8%; }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }
  .site-nav ul { gap: 8px 18px; }
  .site-header__end { gap: 10px 18px; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
  .contact-links a { flex-wrap: wrap; gap: 4px; padding: 20px 0; }
  h1, h2, h3 { hyphens: auto; }
  .site-header .container { padding-block: 14px; }
  .lang-switch,
  .scheme-toggle { padding-left: 0; border-left: 0; }
  .band figcaption { left: 0; right: 0; bottom: 0; }
}

/* 9. Print ================================================================ */

@media print {
  :root {
    --bg: #fff; --panel: #fff; --line: #bbb; --line-strong: #999;
    --ink: #000; --ink-strong: #000; --lead: #222; --muted: #333; --meta: #555;
  }
  .site-header, .site-nav, .lang-switch, .scheme-toggle, .skip-link, .btn-row, .band { display: none; }
  .section { padding-block: 24px; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}