/* ---------------------------------------------------------------------------
   TIM ADORF – PHOTOGRAPHY
   Theme: timadorf  ·  Neuaufbau ohne WordPress

   Alle Maße sind am bisherigen Auftritt nachgemessen – am Kind-Theme
   „Werkstatt Child" über dem Werkstatt-Theme. Die Bruchpunkte des Originals
   sind 600, 1025, 1260 und 1700 Pixel; die behalten wir bei.
   --------------------------------------------------------------------------- */

/* --- 1. Schrift ---------------------------------------------------------- */
/* Montserrat, selbst gehostet. Keine externen Aufrufe -> keine Cookies.
   Nur ein Schnitt: der alte Auftritt deklariert zwar 300 und 600, benutzt
   sie aber nirgends – geladen wurde immer nur 400. Eine Datei, 18 KB. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-latin-400.woff2') format('woff2');
}

/* --- 2. Maße und Farben -------------------------------------------------- */
:root {
  --ink: #000;
  --paper: #fff;
  --active: #ff0000;

  --fs-body: 15px;      /* Grundtext                                       */
  --fs-ui: 16px;        /* Navigation, Info-Knopf, Bildtitel; ab 1025 24px */
  --fs-brand: 24px;     /* Wortmarke – in jeder Breite gleich              */
  --fs-h1: 30px;        /* Projekttitel und „ABOUT"                        */
  --fs-block-h: 16px;   /* Zwischentitel im Projekttext                    */
  --fs-caption: 14px;   /* Bildunterschriften                              */
  --fs-intro: 100px;    /* Startbild-Schriftzug                            */

  --gutter: 15px;       /* Seitenrand; ab 1025px 30px                       */
  --measure: 600px;     /* Textspalte; ab 1700px 800px                      */
}

/* --- 3. Grundgerüst ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.overlay-show { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

/* Im Original wird hervorgehobener Text nicht fett: das Theme setzt
   b und strong auf 400. Ohne diese Zeile bäte der Browser um einen Fettschnitt,
   den es nicht gibt, und würde ihn künstlich verbreitern. */
b, strong { font-weight: 400; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.6;
}

/* Der Inhalt beginnt unter der Kopfleiste. Deren Höhe misst theme.js und
   legt sie als --bar-h ab, weil die Navigation auf schmalen Geräten
   umbricht. Ab 1025px setzen die Seiten selbst 20vh. */
#content { margin-top: var(--bar-h, 110px); }
body.is-home #content { margin-top: 0; }

/* --- 4. Kopf ------------------------------------------------------------- */
/* Die Leiste hält Wortmarke, Navigation und Info-Knopf zusammen. Beim
   Runterscrollen fährt sie nach oben aus dem Bild, beim Hochscrollen kommt
   sie mit Milchglas zurück. */
.site-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  height: var(--bar-h, 110px);
  transition: transform .35s ease;
}
body.bar-hidden .site-bar { transform: translateY(-100%); }

/* Das Milchglas liegt als eigene Ebene hinter den Elementen, damit es sich
   ein- und ausblenden lässt, ohne die Schrift mitzunehmen. Ganz oben auf der
   Seite bleibt es aus – dort ist der Grund ohnehin weiß. */
.site-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  opacity: 0;
  transition: opacity .3s ease;
}
body.bar-solid .site-bar::before { opacity: 1; }

/* Browser ohne Milchglas bekommen einfach ein deckendes Weiß. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-bar::before { background: rgba(255, 255, 255, .94); }
}

@media (prefers-reduced-motion: reduce) {
  .site-bar, .site-bar::before { transition: none; }
}

.site-branding {
  position: absolute;
  top: 15px;
  left: var(--gutter);
  z-index: 100000;
}
.site-title {
  font-size: var(--fs-brand);
  text-transform: uppercase;
  white-space: nowrap;
}
.site-description {
  /* Steht im Original im Markup, wird aber per CSS nicht angezeigt. */
  display: none;
}

.site-nav {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 30px 2vh 10px;
  line-height: 1.5;
  /* Die Leiste spannt sich über die ganze Breite. Ohne das hier würde ihr
     Kasten die Klicks auf Wortmarke und Info-Knopf abfangen. */
  pointer-events: none;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li {
  /* inline, nicht flex: so bricht die Leiste auf schmalen Geräten genauso
     um wie im Original. */
  display: inline;
  padding: 0 20px 0 0;
}
.site-nav a {
  font-size: var(--fs-ui);
  text-transform: uppercase;
  pointer-events: auto;
}

.info-open {
  position: absolute;
  top: 15px;
  right: var(--gutter);
  z-index: 100000;
  font: inherit;
  font-size: var(--fs-ui);
  line-height: 1.6;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* --- 5. Info-Fenster ----------------------------------------------------- */
.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: var(--paper);
  overflow-y: auto;
  /* Der Abstand nach oben steckt im Textblock (10vh), nicht hier. */
  padding: 0 var(--gutter);
  display: none;
}
body.overlay-show .info-overlay { display: block; }
body.overlay-show .info-open { opacity: 0; pointer-events: none; }

.info-close {
  position: fixed;
  top: 15px;
  right: var(--gutter);
  z-index: 1000001;
  font: inherit;
  font-size: var(--fs-ui);
  line-height: 1.6;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* Der Textblock ist 900px breit und steht mittig – nicht am linken Rand. */
.info-inner { max-width: 900px; margin: 10vh auto; }
.info-inner h1 { font-size: var(--fs-h1); margin-bottom: 54px; }
/* 30px zwischen den Absätzen, wie im Original. */
.info-inner p { margin: 0 0 30px; }
/* Der letzte Absatz braucht keinen Rand, sonst rutschen die Rechtslinks
   30px zu tief. */
.info-inner > p:last-of-type { margin-bottom: 0; }
.info-inner a { text-decoration: underline; text-underline-offset: 2px; }
.info-inner a:hover { text-decoration: none; }
/* Das Porträt erscheint im Original mit 150px Kantenlänge und steht
   deutlich freier als die übrigen Absätze. */
.info-portrait { width: 150px; height: 150px; margin: 84px 0 37px; }
.info-nav { margin-top: 30px; }   /* stimmt mit dem Abstand im Original */
.info-nav ul { list-style: none; margin: 0; padding: 0; }
.info-nav a { text-decoration: none; }
.info-nav a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --- 6. Startbild -------------------------------------------------------- */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--paper);
  display: grid;
  place-content: center;
  pointer-events: none;
  animation: introOut .9s ease-in .7s forwards;
}
.intro-overlay p {
  margin: 0;
  font-size: var(--fs-intro);
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  animation: introIn .8s ease-in 1 forwards;
  opacity: 0;
}
@keyframes introIn { to { opacity: 1; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* --- 7. Startseite: Bildstrecke ----------------------------------------- */
/* Ein Bild zur Zeit, mittig, überblendet. Vier Sekunden je Bild, wie zuvor.
   Die Anzeigegröße jedes Bildes steht als Variable im Markup – dieselben
   Werte, die die alte Bildstrecke benutzt hat. */
.slideshow {
  position: relative;
  min-height: 100vh;
  display: grid;
  /* Alle Bilder liegen in derselben Zelle. Die Spalte muss auf die Breite
     der Seite festgenagelt werden, sonst richtet sich die Zelle nach dem
     breitesten Bild und die Strecke sitzt nicht mehr mittig. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 0 var(--gutter);
}
.slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.slide.is-on { opacity: 1; }
.slide img {
  width: var(--mw, auto);
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
}
/* Ohne Javascript liegen die Bilder sonst unsichtbar übereinander. */
.no-js .slideshow { display: block; }
.no-js .slide { opacity: 1; margin: 0 auto 30px; }

/* Dieselbe Strecke am Ende des Info-Fensters: dort ohne Seitenrand, weil
   der Textblock schon einen hat. */
.info-slideshow { padding: 0; margin-top: 30px; }

/* --- 8. Übersichten: Raster --------------------------------------------- */
/* Bis 600px eine Spalte im normalen Fluss, darüber setzt theme.js die
   Kacheln spaltenweise – wie das Masonry-Skript im Original. */
.grid { padding: 0 var(--gutter) 60px; }
.grid.is-laid { position: relative; }
.grid-item {
  display: block;
  margin: 0 0 30px;
}
.grid.is-laid .grid-item { position: absolute; margin: 0; }
.grid-item img { width: 100%; }
.grid-caption {
  display: block;
  /* Feste 16px, nicht --fs-ui: am Rechner sind die Rasterspalten nur rund
     290px breit, da würden 24px umbrechen. */
  font-size: 16px;
  line-height: 1.6;
  text-transform: uppercase;
}

/* --- 9. Projektseite ---------------------------------------------------- */
.project { padding: 60px var(--gutter) 60px; }
.project-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 0 20px;
  text-align: center;
}
.project-title { font-size: var(--fs-h1); }
.project-client { margin: 0; font-size: var(--fs-ui); text-transform: uppercase; }

.project-body { max-width: var(--measure); margin: 0 auto; }
/* 24px zwischen allen Blöcken. Das Original hat hier eine Unsauberkeit:
   überall 24px, nur zwischen zwei direkt aufeinander folgenden Bildern 0.
   Das ist ein Nebeneffekt zusammenfallender Ränder in WordPress und sieht
   nach einem Fehler aus – hier ist der Abstand darum durchgehend. */
.project-body > * { margin: 0; }
.project-body > * + * { margin-top: 24px; }
/* Zwei Zwischentitel hintereinander gehören zusammen, die bleiben eng. */
.project-body > .block-heading + .block-heading { margin-top: 0; }

.block-heading {
  font-size: var(--fs-block-h);
  /* Wie im Original: 5px Luft ober- und unterhalb. */
  padding: 5px 0;
  text-align: left;
}
/* Ebene 2 ist im Original etwas größer und hat mehr Luft. */
.block-heading.level-2 { font-size: 18px; padding: 6px 0; }
.block-heading.center, .block-text.center { text-align: center; }

.block-text p { margin: 0 0 30px; }
.block-text p:last-child { margin-bottom: 0; }
/* Zwischen zwei Textblöcken 30px, wie zwischen Absätzen im Original. */
.project-body > .block-text + .block-text { margin-top: 30px; }

/* Blöcke, die aus der Textspalte ausbrechen */
.wide { position: relative; width: 100%; margin-left: 0; margin-right: 0; }

.block-gallery {
  display: grid;
  /* Der Abstand wächst mit der Breite: 1,32 % sind 7px auf dem Handy und
     16px am großen Bildschirm – genau wie im alten Auftritt. */
  container-type: inline-size;
  column-gap: 1.32%;
  row-gap: 7px;            /* Rückfall für Browser ohne cqw */
  row-gap: 1.32cqw;
}
.block-gallery > figure { margin: 0; }
.block-gallery.cols-1 { grid-template-columns: 1fr; }
.block-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-gallery.cols-3 { grid-template-columns: repeat(2, 1fr); }
.block-gallery.is-cropped img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.block-video video { width: 100%; }

/* --- Eingebettetes Video (Vimeo), erst auf Klick ---------------------- */
.block-embed { margin: 0; }
.embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  display: grid;
  place-content: center;
  gap: 14px;
  overflow: hidden;
}
.embed-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-start {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  cursor: pointer;
}
/* Abspielknopf: ein Dreieck aus Rahmen, kein Bild und keine Icon-Schrift. */
.embed-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.embed-start:hover .embed-text { text-decoration: underline; text-underline-offset: 3px; }
.embed-hinweis {
  position: relative;
  margin: 0;
  padding: 0 20px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  opacity: .7;
}
.embed-frame.is-live .embed-start,
.embed-frame.is-live .embed-hinweis,
.embed-frame.is-live img { display: none; }

figcaption {
  font-size: var(--fs-caption);
  margin-top: 10px;
  margin-bottom: 30px;
  text-align: left;
}
.block-gallery figcaption { padding: 40px 10px 10px; margin: 0; }

.project-nav {
  max-width: 400px;
  margin: 0 auto;
  padding: 60px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  /* Vor/Zurück bleibt in jeder Breite 16px – anders als die Hauptnavigation. */
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
}

/* --- 10. Textseiten (Impressum, Datenschutz) ---------------------------- */
.page-text { padding: 60px var(--gutter) 60px; }
.page-text .inner { max-width: var(--measure); margin: 0 auto; }
.page-text h1 { font-size: var(--fs-h1); margin-bottom: 1em; }
.page-text h2 { font-size: var(--fs-block-h); margin: 2em 0 .6em; }
.page-text p, .page-text li { text-transform: none; }
.page-text a { text-decoration: underline; text-underline-offset: 2px; }
.page-text a:hover { text-decoration: none; }

/* --- 11. Fuß ------------------------------------------------------------ */
.site-footer {
  padding: 0 var(--gutter) 30px;
  font-size: var(--fs-body);
  text-transform: uppercase;
  text-align: center;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { display: inline-block; }

/* --- 12. Ab 600px: zwei Spalten, Bildtitel weg -------------------------- */
@media screen and (min-width: 600px) {
  /* Der Projektname steht in jeder Breite unter dem Bild. Das Original
     blendet ihn ab hier aus – auf Wunsch bleibt er stehen. */
  .block-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- 13. Ab 1025px ------------------------------------------------------ */
@media screen and (min-width: 1025px) {
  :root {
    --fs-ui: 24px;
    --gutter: 30px;
  }

  #content { margin-top: 0; }

  /* Die Elemente sitzen jetzt in der Leiste, darum absolut statt fest. */
  .site-branding { top: 5vh; left: var(--gutter); }

  .site-nav {
    top: 0;
    padding: 5vh 0 5px;
    text-align: center;
    z-index: 10000;
  }
  .site-nav li { padding: 0 21px; }
  /* Die rote Markierung der aktiven Seite gibt es im Original erst ab hier. */
  .site-nav li.is-current > a { color: var(--active); }

  .info-open { top: 5vh; right: var(--gutter); }
  /* CLOSE sitzt im Original höher als der Info-Knopf: feste 25px. */
  .info-close { top: 25px; }

  .grid { padding: 20vh var(--gutter) 120px; }
  .project, .page-text { padding: 20vh var(--gutter) 120px; }
  .project-header { padding: 0 0 5vh; }
  .project-nav { padding: 5vh 0; }

  /* Ausbruch aus der Textspalte, genau wie im Original */
  .project-body .wide {
    width: calc(100% + 290px);
    max-width: calc(100% + 290px);
    margin-left: -145px;
  }

  .slide img { width: var(--w, auto); }

  .site-footer { text-align: left; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .slide img { width: var(--tw, auto); }
}

/* --- 14. Ab 1260px: vier Spalten, breiterer Ausbruch -------------------- */
@media screen and (min-width: 1260px) {
  .project-body .wide {
    width: calc(100% + 600px);
    max-width: calc(100% + 600px);
    margin-left: -300px;
  }
}

/* --- 15. Ab 1700px: breitere Textspalte -------------------------------- */
@media screen and (min-width: 1700px) {
  :root { --measure: 800px; }
}

/* --- 16. Druck ---------------------------------------------------------- */
@media print {
  .site-bar { position: static; height: auto; transform: none; }
  .site-bar::before { display: none; }
  .site-branding { position: static; }
  #content { margin-top: 0; }
  .site-nav, .info-open, .info-overlay, .intro-overlay, .project-nav { display: none !important; }
  .project, .page-text { padding: 0; }
  .grid.is-laid { position: static; }
  .grid.is-laid .grid-item { position: static; }
}