/* ===========================================================================
   timstemler.de
     1  Schrift
     2  Farben und Maße
     3  Grundlagen
     4  Kopfleiste
     5  Arbeiten
     6  Über mich
     7  Fuß
     8  Rechtstexte
     9  Telefon
   =========================================================================== */


/* --- 1  Schrift -----------------------------------------------------------
   Liegt lokal in /fonts. Es wird nichts von außen geladen.                  */

@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}


/* --- 2  Farben und Maße --------------------------------------------------- */

:root{
  --paper:    #FFFFFF;   /* Seitengrund */
  --ink:      #121216;   /* Titel, Fließtext */
  --sub:      #96969E;   /* Auftraggeber, Links, Nebensächliches */
  --sep:      #C9C9D1;   /* Trennstriche */
  --hairline: #ECECEF;

  --cap:    11.5px;                      /* Grundgröße der Seite */
  --read:   14px;                        /* Lesegröße für Fließtext */
  --gutter: clamp(16px, 3.2vw, 44px);    /* Seitenrand */
  --maxw:   1800px;                      /* max. Inhaltsbreite */

  --cols:    5;                          /* so viele Querformate passen nebeneinander */
  --ratio-w: 3;                          /* Bezugsformat für die Bildhöhe */
  --ratio-h: 2;
  --gap:   clamp(6px, .7vw, 10px);       /* Abstand zwischen Bildern */
  --stack: clamp(34px, 4vw, 64px);       /* Abstand zwischen Projekten */

  /* Rechenweg, nicht zum Anfassen. Ersatzwert für "Über mich"; in den
     Projektzeilen wird weiter unten mit der echten Spaltenbreite
     nachgerechnet.                                                        */
  --colw: calc((min(100vw, var(--maxw)) - 2 * var(--gutter)
                - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --rowh: calc(var(--colw) * var(--ratio-h) / var(--ratio-w));

  --blur:  16px;                         /* Weichzeichner hinter "Über mich" */
}


/* --- 3  Grundlagen -------------------------------------------------------- */

*{ box-sizing:border-box; }
p, h1, h2, h3{ margin:0; }

html{ height:100%; }

body{
  margin:0;
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--cap);
  line-height:1.5;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

/* Nur für Suchmaschinen und Screenreader — optisch nicht vorhanden */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.page{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(16px,2vw,26px) clamp(56px,7vw,96px);
}

.sub{ color:var(--sub); }
.sep{ color:var(--sep); padding-inline:.2em; }

a{ color:var(--sub); text-decoration:none; }
a:hover, a:focus-visible{ color:var(--ink); }
a:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }


/* --- 4  Kopfleiste: drei Positionen über die Breite ------------------------
   Bleibt beim Öffnen von "Über mich" scharf und bedienbar, deshalb liegt
   sie über der Ebene.                                                       */

.bar{
  position:relative;
  z-index:6;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:baseline;
  gap:12px 24px;
}
.bar .mid{ text-align:center; }
.bar .end{ text-align:right; }
.bar .close{ display:none; }


/* --- 5  Arbeiten ----------------------------------------------------------
   Pro Projekt eine Zeile. Alle Aufnahmen stehen auf derselben Höhe, die
   Breite bringt die Datei mit — Hochformate werden dadurch schmal, nicht
   niedrig. Es wird nie beschnitten und nie gestaucht: das Seitenverhältnis
   bleibt immer das der Datei.

   Die Höhe ist so gerechnet, dass fünf Querformate samt Abständen genau
   die Seitenbreite füllen. Ein Hochformat in der Zeile braucht weniger
   Platz, dann bleibt rechts etwas frei. Passt etwas nicht mehr, läuft die
   Zeile sichtbar über den Rand hinaus — das ist das Signal, dass ein Bild
   zu viel drin ist, und nicht etwa ein kaputtes Seitenverhältnis.          */

.work{
  margin-top:clamp(40px,5vw,78px);
  container-type:inline-size;   /* macht die echte Inhaltsbreite messbar */
}

/* 100cqw ist die tatsächliche Breite von .work — ohne Rechnerei mit
   Fensterbreite, Seitenrand und Rollbalken, die je nach Gerät um ein paar
   Pixel danebenliegt. Genau diese Pixel haben die fünfte Aufnahme bisher
   über den Rand geschoben.                                               */
.project{
  --colw: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --rowh: calc(var(--colw) * var(--ratio-h) / var(--ratio-w));
}
.project + .project{ margin-top:var(--stack); }

.head{ margin-bottom:9px; }

.strip{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:var(--gap);
}
.shot{
  flex:0 0 auto;        /* kein Schrumpfen — sonst verzöge sich das Format */
  height:var(--rowh);
  width:auto;
  display:block;
  background:#F2F2F5;   /* solange das Bild lädt */
}


/* --- 6  Über mich ---------------------------------------------------------
   Reines CSS, kein JavaScript: Der Link setzt #ueber-mich in der Adresse,
   :target blendet die Ebene ein und zeichnet alles dahinter weich. Der
   Geschwister-Wähler ~ greift auf alles, was im Quelltext danach kommt —
   deshalb steht die Ebene ganz oben in der Seite.                          */

.about{
  position:fixed;
  inset:0;
  z-index:5;
  overflow-y:auto;
  background:rgba(255,255,255,.72);
  opacity:0;
  visibility:hidden;
  transition:opacity 280ms ease, visibility 0s linear 280ms;
}
#ueber-mich:target{
  opacity:1;
  visibility:visible;
  transition:opacity 280ms ease, visibility 0s;
}

#ueber-mich:target ~ .work,
#ueber-mich:target ~ .foot{ filter:blur(var(--blur)); }

.work, .foot{ transition:filter 280ms ease; }

#ueber-mich:target ~ .bar .open{ display:none; }
#ueber-mich:target ~ .bar .close{ display:inline; }

.about .inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(80px,12vw,180px) clamp(48px,7vw,96px);
  display:flex;
  gap:clamp(20px,3vw,44px);
  align-items:flex-start;
}
/* Steht auf derselben Höhe wie jede Aufnahme der Seite, im Format der Datei. */
.about .portrait{
  flex:none;
  height:var(--rowh);
  width:auto;
  display:block;
  background:#F2F2F5;
}
.about .text{ max-width:46ch; }
.about .name{
  font-size:var(--read);
  margin-bottom:14px;
}
.about p{
  font-size:var(--read);
  line-height:1.75;
  margin-bottom:16px;
}
.about .contact{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  margin-top:26px;
}


/* --- 7  Fuß --------------------------------------------------------------- */

.foot{
  margin-top:clamp(56px,7vw,104px);
  display:flex;
  justify-content:space-between;
  gap:10px 28px;
  flex-wrap:wrap;
  color:var(--sub);
}
.foot .links{ display:flex; gap:18px; }


/* --- 8  Rechtstexte (Impressum, Datenschutz) ------------------------------
   Fließtext braucht Lesegröße, deshalb hier größer als der Rest der Seite.  */

.legal{
  margin-inline:auto;
  margin-block:clamp(56px,9vw,120px) clamp(64px,9vw,120px);
  max-width:44ch;
  text-align:center;
  font-size:var(--read);
  line-height:1.85;
}
.legal h1{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.2;
  margin-bottom:10px;
}
.legal h2{
  font-size:.9375rem;
  font-weight:700;
  margin:clamp(44px,5.5vw,68px) 0 10px;
}
.legal h3{
  font-size:.875rem;
  font-weight:700;
  margin:clamp(30px,3.6vw,40px) 0 8px;
}
.legal p{ margin-bottom:20px; }
.legal p:last-child{ margin-bottom:0; }
.legal a{ color:var(--ink); border-bottom:1px solid var(--hairline); }
.legal a:hover{ border-color:var(--ink); }
.legal .lead{
  color:var(--sub);
  margin-bottom:clamp(40px,5vw,60px);
}
.legal .quiet{
  color:var(--sub);
  font-size:12px;
  margin-top:clamp(52px,6.5vw,80px);
}
.legal .back{
  font-size:var(--cap);
  margin-bottom:clamp(36px,5vw,56px);
}
.legal .back a{ color:var(--sub); border-bottom:0; }
.legal .back a:hover{ color:var(--ink); }


@media (prefers-reduced-motion:reduce){
  .about, .work, .foot{ transition:none; }
}


/* --- 9  Telefon ----------------------------------------------------------- */

@media (max-width:720px){
  .bar{ grid-template-columns:1fr; gap:4px; }
  .bar .mid, .bar .end{ text-align:left; }

  .strip{ flex-direction:column; }
  .shot{ height:auto; width:100%; }

  .about .inner{ flex-direction:column; }
  .about .portrait{ height:auto; width:100%; }
  .about .text{ max-width:none; }

  .legal{ max-width:none; }
}