@charset "UTF-8";
/* ------------------------------------------------------------------
   Johannes Janusz Dittloff — dittloff.works
   Stylesheet. Alle Farben und Maße stehen ganz oben als Variablen,
   damit man sie an einer Stelle ändern kann.
------------------------------------------------------------------- */

/* ---------- Schriften (liegen mit auf dem Server, kein Google) ----- */
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Jost';
  src: url('../fonts/jost-latin-ext-wght-normal.woff2') format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 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: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin-ext-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Farben und Maße ---------------------------------------- */
:root {
  --ink:        #1b1c21;   /* Kopf- und Fußzeile */
  --paper:      #eaeaea;   /* Seitenhintergrund, exakt wie in den Entwürfen */
  --text:       #333333;
  --muted:      #6e6e6e;
  --red:        #950000;   /* Rot der Überschriften */
  --red-line:   #8f0000;   /* Linie über der Fußzeile */
  --link:       #7fb3ea;   /* Blau der Fußzeilen-Links */
  --line:       #cccccc;
  --header-h:   74px;
  --wrap:       1500px;
  --ease:       cubic-bezier(.4,0,.2,1);
}

/* ---------- 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 { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  font-family: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-wrap: break-word;
}

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

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .8em 1.4em; z-index: 200;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }

/* ---------- Kopfzeile ---------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: var(--ink);
  display: flex; align-items: center;
}
.site-header__inner {
  width: min(100% - 2.6rem, 1720px);
  margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}

.brand {
  text-decoration: none; color: #fff;
  font-size: clamp(15px, 1.75vw, 27px);
  letter-spacing: .055em;
  white-space: nowrap;
  font-weight: 250;
  line-height: 1;
}
.brand b { font-weight: 600; letter-spacing: .03em; }

.nav { margin-left: auto; }
.nav ul {
  list-style: none; display: flex; gap: clamp(.7rem, 1.7vw, 2.1rem);
  margin: 0; padding: 0;
}
.nav a {
  color: #d8d8d8; text-decoration: none;
  font-size: clamp(11px, .95vw, 15px);
  letter-spacing: .11em; text-transform: uppercase;
  padding: .55em 0; display: block;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: #fff; border-bottom-color: var(--red-line); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.burger span {
  display: block; height: 1.5px; background: #fff; margin: 5px 0;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--ink);
    border-top: 1px solid #2e3038;
    max-height: 0; overflow: hidden;
    /* unsichtbar heißt auch: nicht per Tabulator erreichbar */
    visibility: hidden;
    transition: max-height .32s var(--ease), visibility 0s linear .32s;
  }
  .nav[data-open="true"] {
    max-height: 70vh; overflow-y: auto;
    visibility: visible;
    transition: max-height .32s var(--ease), visibility 0s;
  }
  .nav ul { flex-direction: column; gap: 0; padding: .5rem 0 1.2rem; }
  .nav a {
    padding: .95em 1.3rem; font-size: 15px;
    border-bottom: 1px solid #24262d;
  }
  .nav a[aria-current="page"] { border-bottom-color: #24262d; background: #23252c; }
}

/* ---------- Fußzeile ------------------------------------------------ */
.site-footer {
  margin-top: auto;
  background: var(--ink);
  border-top: 2px solid var(--red-line);
  color: #b9b9b9;
  text-align: center;
  padding: 1.5rem 1rem 1.7rem;
  font-size: 14px;
  letter-spacing: .02em;
}
.site-footer p { margin: 0 0 .35em; }
.site-footer b { color: #e8e8e8; font-weight: 500; letter-spacing: .06em; }
.site-footer a { color: var(--link); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.site-footer .sep { color: #4c4f57; margin: 0 .35em; }

/* ---------- Startseite: Bühne mit Logo ------------------------------ */
.hero {
  min-height: calc(100vh - var(--header-h));
  display: grid; place-items: center;
  padding: 3rem 1.5rem 5rem;
  position: relative;
}
.hero__logo { width: min(46vw, 430px); }
.hero__claim {
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  margin: 0; text-align: center;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}
.hero__down {
  display: inline-block; margin-top: .9rem; color: var(--muted);
  text-decoration: none; font-size: 20px; line-height: 1;
  animation: nudge 2.6s ease-in-out infinite;
}
@keyframes nudge { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(5px);} }

/* ---------- Textseiten ---------------------------------------------- */
.section { padding: clamp(2.5rem, 6vw, 6rem) 0; }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.page-title {
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--muted); font-weight: 400;
  margin: 0 0 2.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 6vw, 6.5rem);
  align-items: start;
}
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 3rem; } }

.lede { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 3rem; }
.lede img { width: 118px; flex: none; }
.lede__rule { width: 1px; align-self: stretch; background: var(--line); }
.lede h1 {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  color: var(--red);
  font-size: clamp(27px, 3vw, 42px);
  margin: 0; line-height: 1.1;
}

h2.serif {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  color: var(--red);
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.3;
  margin: 2.6rem 0 .9rem;
}
h2.serif:first-child { margin-top: 0; }

.portrait { width: 190px; margin-bottom: 1.9rem; }

.hi { color: var(--red); font-weight: 500; margin: 0 0 1.1rem; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.credo {
  margin: 2.6rem 0 1.6rem; padding: 0; list-style: none;
  font-size: 13.5px; letter-spacing: .045em; color: #565656;
}
.credo li { margin-bottom: .75rem; }

.signature {
  font-family: 'Source Serif 4', Georgia, serif; font-style: italic;
  color: #4a4a4a; margin: 0 0 2.2rem;
}

.motto { max-width: 470px; }

/* ---------- Werkbereiche-Kacheln auf der Startseite ------------------ */
.tiles {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.6rem); margin: 0; padding: 0; list-style: none;
}
@media (max-width: 780px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tiles a {
  display: block; text-decoration: none; color: inherit;
  background: #fff;
}
.tiles img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: opacity .3s var(--ease);
}
.tiles a:hover img, .tiles a:focus-visible img { opacity: .78; }
.tiles span {
  display: block; padding: .8em .1em .2em;
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Slideshow ------------------------------------------------ */
.stage {
  display: flex; flex-direction: column;
  /* feste Höhe, damit sich das Bild an der Fensterhöhe orientiert */
  height: calc(100vh - var(--header-h));
  min-height: 520px;
  padding: clamp(.9rem, 2vw, 1.6rem) 0 1.2rem;
}

.stage__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(.9rem, 1.8vw, 1.5rem);
}
.stage__head h1 {
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0;
}
.counter {
  font-size: 13px; letter-spacing: .16em; color: var(--muted);
  font-variant-numeric: tabular-nums; margin: 0;
}

.stage__tools { display: flex; align-items: center; gap: 1.4rem; }

.zoom {
  display: inline-flex; align-items: center; gap: .5em;
  background: none; border: 0; cursor: pointer; padding: .3em .1em;
  color: var(--muted);
  font: inherit; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  transition: color .2s var(--ease);
}
.zoom:hover, .zoom:focus-visible { color: var(--red); }
.zoom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.stage__frame {
  flex: 1 1 0; min-height: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* Das Bild passt sich der Fensterhöhe an und behält seine Proportionen. */
.stage__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  transition: opacity .25s var(--ease);
}
.stage__frame:fullscreen { background: #111; padding: 2vh 2vw; }
.stage__frame.is-loading .stage__img { opacity: .35; }

.arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 76px;
  display: grid; place-items: center;
  background: rgba(27,28,33,.62); color: #fff;
  border: 0; cursor: pointer; z-index: 3;
  transition: background .2s var(--ease), opacity .2s var(--ease);
}
.arrow:hover, .arrow:focus-visible { background: rgba(27,28,33,.92); }
.arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.arrow--prev { left: 0; }
.arrow--next { right: 0; }
.arrow[disabled] { opacity: .25; cursor: default; }

.caption {
  margin: clamp(.8rem, 1.6vw, 1.2rem) 0 0;
  min-height: 2.6em;
}
.caption__title {
  display: block;
  font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: .17em; text-transform: uppercase; color: #262626;
}
.caption__sub {
  display: block; font-size: 13px; color: var(--muted);
  letter-spacing: .04em; margin-top: .25em;
}

/* Miniaturleiste */
.filmstrip {
  display: flex; gap: 7px; list-style: none; margin: 1.1rem 0 0; padding: 0 0 .5rem;
  overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.filmstrip li { flex: none; }
.filmstrip button {
  display: block; padding: 0; border: 0; cursor: pointer; background: none;
  line-height: 0;
}
.filmstrip img {
  height: 62px; width: auto;
  opacity: .45;
  outline: 1px solid transparent; outline-offset: -1px;
  transition: opacity .2s var(--ease), outline-color .2s var(--ease);
}
.filmstrip button:hover img { opacity: .8; }
.filmstrip button[aria-current="true"] img { opacity: 1; outline-color: var(--red); }

.hint {
  margin: .9rem 0 0; font-size: 12.5px; color: #8a8a8a; letter-spacing: .04em;
}

@media (max-width: 700px) {
  .stage {
    height: auto;
    min-height: calc(100vh - var(--header-h));
    justify-content: center;
  }
  .stage__frame { flex: none; }
  .stage__img { max-height: 54vh; }
  .arrow { width: 40px; height: 56px; }
  .filmstrip img { height: 48px; }
  .hint { display: none; }
}

/* Sehr flache Fenster: Miniaturleiste ausblenden, damit das Bild Platz hat */
@media (min-width: 701px) and (max-height: 620px) {
  .filmstrip, .hint { display: none; }
}

/* ---------- Vita ----------------------------------------------------- */
.vita {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 900px) { .vita { grid-template-columns: 1fr; } }

.vita__year {
  font-size: clamp(46px, 6vw, 84px); font-weight: 600;
  letter-spacing: .02em; color: #c6c6c6; line-height: .9;
  margin: 0 0 2rem;
}

.cv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; }
.cv dt { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14.5px; padding-top: .1em; }
.cv dd { margin: 0; }
@media (max-width: 520px) {
  .cv { grid-template-columns: 1fr; gap: .15rem; }
  .cv dt { margin-top: .9rem; }
}

.vita__figure { margin: 0; }
.vita__figure figcaption {
  font-size: 13px; color: var(--muted); margin-top: .7rem; line-height: 1.5;
}

.contact-lines { margin-top: 2.6rem; font-size: 14.5px; line-height: 1.85; }
.contact-lines a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-lines a:hover, .contact-lines a:focus-visible { border-bottom-color: var(--red); color: var(--red); }

/* ---------- Kontakt --------------------------------------------------- */
.kontakt-logo { width: min(100%, 480px); margin-bottom: 2.8rem; }

.contact-card { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.95; }
.contact-card a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-card a:hover, .contact-card a:focus-visible { color: var(--red); border-bottom-color: var(--red); }

.smallprint { font-size: 13.5px; color: var(--muted); line-height: 1.75; }

/* ---------- Rechtsseiten ---------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: #262626; margin: 2.8rem 0 .8rem;
}
.prose h3 { font-size: 16px; font-weight: 500; margin: 1.8rem 0 .5rem; color: #333; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--red); }
.note {
  border-left: 3px solid var(--red); background: #e2e2e2;
  padding: 1rem 1.2rem; margin: 1.6rem 0; font-size: 14.5px;
}